diff --git a/docs/api/accordion.md b/docs/api/accordion.md
index 009fd9a10c4..0fb249825c8 100644
--- a/docs/api/accordion.md
+++ b/docs/api/accordion.md
@@ -22,7 +22,7 @@ Accordions provide collapsible sections in your content to reduce vertical space
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/accordion/basic/index.md';
+import Basic from '@site/static/usage/v7/accordion/basic/index.md';
 
 <Basic />
 
@@ -30,7 +30,7 @@ import Basic from '@site/static/usage/accordion/basic/index.md';
 
 Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions.
 
-import Toggle from '@site/static/usage/accordion/toggle/index.md';
+import Toggle from '@site/static/usage/v7/accordion/toggle/index.md';
 
 <Toggle />
 
@@ -38,7 +38,7 @@ import Toggle from '@site/static/usage/accordion/toggle/index.md';
 
 Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.
 
-import ListenChanges from '@site/static/usage/accordion/listen-changes/index.md';
+import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md';
 
 <ListenChanges />
 
@@ -46,7 +46,7 @@ import ListenChanges from '@site/static/usage/accordion/listen-changes/index.md'
 
 Developers can allow multiple accordions to be open at once with the `multiple` property.
 
-import Multiple from '@site/static/usage/accordion/multiple/index.md';
+import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
 
 <Multiple />
 
@@ -56,7 +56,7 @@ import Multiple from '@site/static/usage/accordion/multiple/index.md';
 
 Individual accordions can be disabled with the `disabled` property on `ion-accordion`.
 
-import DisableIndividual from '@site/static/usage/accordion/disable/individual/index.md';
+import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md';
 
 <DisableIndividual />
 
@@ -64,7 +64,7 @@ import DisableIndividual from '@site/static/usage/accordion/disable/individual/i
 
 The accordion group can be disabled with the `disabled` property on `ion-accordion-group`.
 
-import DisableGroup from '@site/static/usage/accordion/disable/group/index.md';
+import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md';
 
 <DisableGroup />
 
@@ -74,7 +74,7 @@ import DisableGroup from '@site/static/usage/accordion/disable/group/index.md';
 
 Individual accordions can be disabled with the `readonly` property on `ion-accordion`.
 
-import ReadonlyIndividual from '@site/static/usage/accordion/readonly/individual/index.md';
+import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md';
 
 <ReadonlyIndividual />
 
@@ -82,7 +82,7 @@ import ReadonlyIndividual from '@site/static/usage/accordion/readonly/individual
 
 The accordion group can be disabled with the `readonly` property on `ion-accordion-group`.
 
-import ReadonlyGroup from '@site/static/usage/accordion/readonly/group/index.md';
+import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md';
 
 <ReadonlyGroup />
 
@@ -106,7 +106,7 @@ There are two built in expansion styles: `compact` and `inset`. This expansion s
 
 When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened.
 
-import ExpansionStyles from '@site/static/usage/accordion/customization/expansion-styles/index.md';
+import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md';
 
 <ExpansionStyles />
 
@@ -130,7 +130,7 @@ ion-accordion.accordion-expanded ion-item[slot="header"] {
 }
 ```
 
-import AdvancedExpansionStyles from '@site/static/usage/accordion/customization/advanced-expansion-styles/index.md';
+import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md';
 
 <AdvancedExpansionStyles />
 
@@ -142,7 +142,7 @@ If you would like to manage the icon yourself or use an icon that is not an `ion
 
 Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion.
 
-import Icons from '@site/static/usage/accordion/customization/icons/index.md';
+import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md';
 
 <Icons />
 
@@ -150,7 +150,7 @@ import Icons from '@site/static/usage/accordion/customization/icons/index.md';
 
 Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot.
 
-import Theming from '@site/static/usage/accordion/customization/theming/index.md';
+import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md';
 
 <Theming />
 
@@ -160,7 +160,7 @@ import Theming from '@site/static/usage/accordion/customization/theming/index.md
 
 By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app.
 
-import AccessibilityAnimations from '@site/static/usage/accordion/accessibility/animations/index.md';
+import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md';
 
 <AccessibilityAnimations />
 
diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index 585bb446107..fffce948f6e 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
 
-import Basic from '@site/static/usage/action-sheet/basic/index.md';
+import Basic from '@site/static/usage/v7/action-sheet/basic/index.md';
 
 <Basic />
 
@@ -50,7 +50,7 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi
 }
 ```
 
-import Styling from '@site/static/usage/action-sheet/theming/styling/index.md';
+import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md';
 
 <Styling />
 
@@ -58,7 +58,7 @@ import Styling from '@site/static/usage/action-sheet/theming/styling/index.md';
 
 Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements.
 
-import CssCustomProperties from '@site/static/usage/action-sheet/theming/css-properties/index.md';
+import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md';
 
 <CssCustomProperties />
 
diff --git a/docs/api/alert.md b/docs/api/alert.md
index 491e4eecb45..320524bc7ac 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -28,7 +28,7 @@ An Alert is a dialog that presents users with information or collects informatio
 
 ### Controller
 
-import Controller from '@site/static/usage/alert/presenting/controller/index.md';
+import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md';
 
 <Controller />
 
@@ -105,7 +105,7 @@ In the array of `buttons`, each button includes properties for its `text`, and o
 
 Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
 
-import Buttons from '@site/static/usage/alert/buttons/index.md';
+import Buttons from '@site/static/usage/v7/alert/buttons/index.md';
 
 <Buttons />
 
@@ -116,13 +116,13 @@ Alerts can also include several different inputs whose data can be passed back t
 
 ### Text Inputs Example
 
-import TextInputs from '@site/static/usage/alert/inputs/text-inputs/index.md';
+import TextInputs from '@site/static/usage/v7/alert/inputs/text-inputs/index.md';
 
 <TextInputs />
 
 ### Radio Example
 
-import Radios from '@site/static/usage/alert/inputs/radios/index.md';
+import Radios from '@site/static/usage/v7/alert/inputs/radios/index.md';
 
 <Radios />
 
@@ -152,7 +152,7 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
 }
 ```
 
-import Customization from '@site/static/usage/alert/customization/index.md';
+import Customization from '@site/static/usage/v7/alert/customization/index.md';
 
 <Customization />
 
diff --git a/docs/api/avatar.md b/docs/api/avatar.md
index dd1d64e3b32..ed6cd9db893 100644
--- a/docs/api/avatar.md
+++ b/docs/api/avatar.md
@@ -24,19 +24,19 @@ Avatars can be used by themselves or inside of any element. If placed inside of
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/avatar/basic/index.md';
+import Basic from '@site/static/usage/v7/avatar/basic/index.md';
 
 <Basic />
 
 ## Chip Avatar
 
-import Chip from '@site/static/usage/avatar/chip/index.md';
+import Chip from '@site/static/usage/v7/avatar/chip/index.md';
 
 <Chip />
 
 ## Item Avatar
 
-import Item from '@site/static/usage/avatar/item/index.md';
+import Item from '@site/static/usage/v7/avatar/item/index.md';
 
 <Item />
 
@@ -44,7 +44,7 @@ import Item from '@site/static/usage/avatar/item/index.md';
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/avatar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/avatar/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md
index b9f58e9d174..e23d11b0588 100644
--- a/docs/api/backdrop.md
+++ b/docs/api/backdrop.md
@@ -18,7 +18,7 @@ Backdrops are full screen components that overlay other components. They are use
 
 The backdrop is transparent by default. The backdrop will prevent clicking or tapping on the content behind it.
 
-import Basic from '@site/static/usage/backdrop/basic/index.md';
+import Basic from '@site/static/usage/v7/backdrop/basic/index.md';
 
 <Basic />
 
@@ -28,7 +28,7 @@ The backdrop can be customized by assigning CSS properties directly to the backd
 
 Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`).
 
-import Styling from '@site/static/usage/backdrop/styling/index.md';
+import Styling from '@site/static/usage/v7/backdrop/styling/index.md';
 
 <Styling />
 
diff --git a/docs/api/badge.md b/docs/api/badge.md
index 3c5a8120fe8..21e2f298355 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -21,7 +21,7 @@ Badges are inline block elements that usually appear near another element. Typic
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/badge/basic/index.md';
+import Basic from '@site/static/usage/v7/badge/basic/index.md';
 
 <Basic />
 
@@ -29,13 +29,13 @@ import Basic from '@site/static/usage/badge/basic/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/badge/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/badge/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Properties
 
-import CSSProps from '@site/static/usage/badge/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/badge/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md
index 29551cb6712..d9a12c4c9a4 100644
--- a/docs/api/breadcrumbs.md
+++ b/docs/api/breadcrumbs.md
@@ -18,7 +18,7 @@ Breadcrumbs are navigation items that are used to indicate where a user is on an
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/breadcrumbs/basic/index.md';
+import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.md';
 
 <Basic />
 
@@ -26,13 +26,13 @@ import Basic from '@site/static/usage/breadcrumbs/basic/index.md';
 
 ### Icons on Items
 
-import IconsOnItems from '@site/static/usage/breadcrumbs/icons/icons-on-items/index.md';
+import IconsOnItems from '@site/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md';
 
 <IconsOnItems />
 
 ### Custom Separators
 
-import CustomSeparators from '@site/static/usage/breadcrumbs/icons/custom-separators/index.md';
+import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-separators/index.md';
 
 <CustomSeparators />
 
@@ -42,7 +42,7 @@ import CustomSeparators from '@site/static/usage/breadcrumbs/icons/custom-separa
 
 If there are more items than the value of `maxItems`, the breadcrumbs will be collapsed. By default, only the first and last items will be shown.
 
-import MaxItems from '@site/static/usage/breadcrumbs/collapsing-items/max-items/index.md';
+import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md';
 
 <MaxItems />
 
@@ -50,7 +50,7 @@ import MaxItems from '@site/static/usage/breadcrumbs/collapsing-items/max-items/
 
 Once the items are collapsed, the number of items to show can be controlled by the `itemsBeforeCollapse` and `itemsAfterCollapse` properties.
 
-import ItemsBeforeAfter from '@site/static/usage/breadcrumbs/collapsing-items/items-before-after/index.md';
+import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md';
 
 <ItemsBeforeAfter />
 
@@ -58,7 +58,7 @@ import ItemsBeforeAfter from '@site/static/usage/breadcrumbs/collapsing-items/it
 
 Clicking the collapsed indicator will fire the `ionCollapsedClick` event. This can be used to, for example, expand the breadcrumbs.
 
-import ExpandOnClick from '@site/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md';
+import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md';
 
 <ExpandOnClick />
 
@@ -66,7 +66,7 @@ import ExpandOnClick from '@site/static/usage/breadcrumbs/collapsing-items/expan
 
 The `ionCollapsedClick` event can also be used to present an overlay (in this case, an `ion-popover`) showing the hidden breadcrumbs.
 
-import PopoverOnClick from '@site/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md';
+import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md';
 
 <PopoverOnClick />
 
@@ -74,13 +74,13 @@ import PopoverOnClick from '@site/static/usage/breadcrumbs/collapsing-items/popo
 
 ### Colors
 
-import Colors from '@site/static/usage/breadcrumbs/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/breadcrumbs/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/breadcrumbs/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/breadcrumbs/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/button.md b/docs/api/button.md
index 28d6737e9d7..4ab757557a0 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -21,7 +21,7 @@ Buttons provide a clickable element, which can be used in forms, or anywhere tha
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/button/basic/index.md';
+import Basic from '@site/static/usage/v7/button/basic/index.md';
 
 <Basic />
 
@@ -29,7 +29,7 @@ import Basic from '@site/static/usage/button/basic/index.md';
 
 This property lets you specify how wide the button should be. By default, buttons are inline blocks, but setting this property will change the button to a full-width block element.
 
-import Expand from '@site/static/usage/button/expand/index.md';
+import Expand from '@site/static/usage/v7/button/expand/index.md';
 
 <Expand />
 
@@ -37,7 +37,7 @@ import Expand from '@site/static/usage/button/expand/index.md';
 
 This property lets you specify the shape of the button. By default, buttons are rectangular with a small border radius, but setting this to `"round"` will change the button to a rounded element.
 
-import Shape from '@site/static/usage/button/shape/index.md';
+import Shape from '@site/static/usage/v7/button/shape/index.md';
 
 <Shape />
 
@@ -46,7 +46,7 @@ import Shape from '@site/static/usage/button/shape/index.md';
 
 This property determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background.
 
-import Fill from '@site/static/usage/button/fill/index.md';
+import Fill from '@site/static/usage/v7/button/fill/index.md';
 
 <Fill />
 
@@ -54,13 +54,13 @@ import Fill from '@site/static/usage/button/fill/index.md';
 
 This property specifies the size of the button. Setting this property will change the height and padding of a button.
 
-import Size from '@site/static/usage/button/size/index.md';
+import Size from '@site/static/usage/v7/button/size/index.md';
 
 <Size />
 
 ## Icons
 
-import Icons from '@site/static/usage/button/icons/index.md';
+import Icons from '@site/static/usage/v7/button/icons/index.md';
 
 <Icons />
 
@@ -68,13 +68,13 @@ import Icons from '@site/static/usage/button/icons/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/button/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/button/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/button/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/buttons.md b/docs/api/buttons.md
index 62528eab4e4..3e4db87783f 100644
--- a/docs/api/buttons.md
+++ b/docs/api/buttons.md
@@ -22,7 +22,7 @@ The Buttons component is a container element. It should be used inside of a [too
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/buttons/basic/index.md';
+import Basic from '@site/static/usage/v7/buttons/basic/index.md';
 
 <Basic />
 
@@ -38,7 +38,7 @@ Buttons can be positioned inside of the toolbar using a named slot. The below ch
 | `secondary`  | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode.  |
 | `primary`    | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode.      |
 
-import Placement from '@site/static/usage/buttons/placement/index.md';
+import Placement from '@site/static/usage/v7/buttons/placement/index.md';
 
 <Placement />
 
@@ -47,7 +47,7 @@ import Placement from '@site/static/usage/buttons/placement/index.md';
 
 A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on [back button](./back-button) and [menu button](./menu-button) in this example are for display purposes; see their respective documentation for proper usage.
 
-import Types from '@site/static/usage/buttons/types/index.md';
+import Types from '@site/static/usage/v7/buttons/types/index.md';
 
 <Types />
 
@@ -63,7 +63,7 @@ This feature is only available for iOS.
 :::
 
 <!-- Reuse the playground from the Title directory -->
-import CollapsibleLargeTitleButtons from '@site/static/usage/title/collapsible-large-title/buttons/index.md';
+import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md';
 
 <CollapsibleLargeTitleButtons />
 
diff --git a/docs/api/card.md b/docs/api/card.md
index 8177de036e8..b9419281ab6 100644
--- a/docs/api/card.md
+++ b/docs/api/card.md
@@ -27,28 +27,28 @@ and [card content](./card-content).
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/card/basic/index.md';
+import Basic from '@site/static/usage/v7/card/basic/index.md';
 
 <Basic />
 
 
 ## Media Cards
 
-import Media from '@site/static/usage/card/media/index.md';
+import Media from '@site/static/usage/v7/card/media/index.md';
 
 <Media />
 
 
 ## Card Buttons
 
-import Buttons from '@site/static/usage/card/buttons/index.md';
+import Buttons from '@site/static/usage/v7/card/buttons/index.md';
 
 <Buttons />
 
 
 ## List Card
 
-import List from '@site/static/usage/card/list/index.md';
+import List from '@site/static/usage/v7/card/list/index.md';
 
 <List />
 
@@ -57,13 +57,13 @@ import List from '@site/static/usage/card/list/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/card/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/card/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/card/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/card/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 5fbda397bc0..f8328821d6c 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -23,13 +23,13 @@ Checkboxes allow the selection of multiple options from a set of options. They a
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/checkbox/basic/index.md';
+import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
 
 <Basic />
 
 ## Indeterminate Checkboxes
 
-import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md';
+import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md';
 
 <Indeterminate />
 
@@ -37,7 +37,7 @@ import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md';
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/checkbox/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/checkbox/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/chip.md b/docs/api/chip.md
index 668611af3ad..e032f7e5e0e 100644
--- a/docs/api/chip.md
+++ b/docs/api/chip.md
@@ -21,13 +21,13 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/chip/basic/index.md';
+import Basic from '@site/static/usage/v7/chip/basic/index.md';
 
 <Basic />
 
 ## Slotting Components and Icons
 
-import SlotExample from '@site/static/usage/chip/slots/index.md';
+import SlotExample from '@site/static/usage/v7/chip/slots/index.md';
 
 <SlotExample />
 
@@ -35,13 +35,13 @@ import SlotExample from '@site/static/usage/chip/slots/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/chip/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/chip/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/chip/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/chip/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/content.md b/docs/api/content.md
index 8838a16786b..a0feb3f2ccd 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -27,7 +27,7 @@ Content, along with many other Ionic components, can be customized to modify its
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/content/basic/index.md';
+import Basic from '@site/static/usage/v7/content/basic/index.md';
 
 <Basic />
 
@@ -36,7 +36,7 @@ import Basic from '@site/static/usage/content/basic/index.md';
 
 Content can be the only top-level component in a page, or it can be used alongside a [header](./header), [footer](./footer), or both. When used with a header or footer, it will adjust its size to fill the remaining height.
 
-import HeaderFooter from '@site/static/usage/content/header-footer/index.md';
+import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md';
 
 <HeaderFooter />
 
@@ -45,7 +45,7 @@ import HeaderFooter from '@site/static/usage/content/header-footer/index.md';
 
 By default, content fills the space between a [header](./header) and [footer](./footer) but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the `translucent` property is set on either of them, or `opacity` is set on the toolbar. This can be achieved by setting the `fullscreen` property on the content to `true`.
 
-import Fullscreen from '@site/static/usage/content/fullscreen/index.md';
+import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.md';
 
 <Fullscreen />
 
@@ -54,7 +54,7 @@ import Fullscreen from '@site/static/usage/content/fullscreen/index.md';
 
 To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties.
 
-import Fixed from '@site/static/usage/content/fixed/index.md';
+import Fixed from '@site/static/usage/v7/content/fixed/index.md';
 
 <Fixed />
 
@@ -62,7 +62,7 @@ import Fixed from '@site/static/usage/content/fixed/index.md';
 
 Content provides [methods](#methods) that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a `duration` in order to smoothly transition instead of instantly changing the position.
 
-import ScrollMethods from '@site/static/usage/content/scroll-methods/index.md';
+import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md';
 
 <ScrollMethods />
 
@@ -70,7 +70,7 @@ import ScrollMethods from '@site/static/usage/content/scroll-methods/index.md';
 
 Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events).
 
-import ScrollEvents from '@site/static/usage/content/scroll-events/index.md';
+import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md';
 
 <ScrollEvents />
 
@@ -79,19 +79,19 @@ import ScrollEvents from '@site/static/usage/content/scroll-events/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/content/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/content/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/content/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/content/theming/css-shadow-parts/index.md';
 
 <CSSParts />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/content/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index fd01fca7d6b..a17b50b498f 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -27,7 +27,7 @@ When using Datetime Button with a JavaScript framework such as Angular, React, o
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/datetime-button/basic/index.md';
+import Basic from '@site/static/usage/v7/datetime-button/basic/index.md';
 
 <Basic />
 
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 551deaa5afd..ab856254cac 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -8,32 +8,32 @@ import Parts from '@site/static/auto-generated/datetime/parts.md';
 import CustomProps from '@site/static/auto-generated/datetime/custom-props.md';
 import Slots from '@site/static/auto-generated/datetime/slots.md';
 
-import Basic from '@site/static/usage/datetime/basic/index.md';
+import Basic from '@site/static/usage/v7/datetime/basic/index.md';
 
-import MaxMin from '@site/static/usage/datetime/date-constraints/max-min/index.md';
-import Values from '@site/static/usage/datetime/date-constraints/values/index.md';
-import Advanced from '@site/static/usage/datetime/date-constraints/advanced/index.md';
+import MaxMin from '@site/static/usage/v7/datetime/date-constraints/max-min/index.md';
+import Values from '@site/static/usage/v7/datetime/date-constraints/values/index.md';
+import Advanced from '@site/static/usage/v7/datetime/date-constraints/advanced/index.md';
 
-import CustomLocale from '@site/static/usage/datetime/localization/custom-locale/index.md';
-import HourCycle from '@site/static/usage/datetime/localization/hour-cycle/index.md';
-import FirstDayOfWeek from '@site/static/usage/datetime/localization/first-day-of-week/index.md';
-import LocaleExtensionTags from '@site/static/usage/datetime/localization/locale-extension-tags/index.md';
-import TimeLabel from '@site/static/usage/datetime/localization/time-label/index.md';
+import CustomLocale from '@site/static/usage/v7/datetime/localization/custom-locale/index.md';
+import HourCycle from '@site/static/usage/v7/datetime/localization/hour-cycle/index.md';
+import FirstDayOfWeek from '@site/static/usage/v7/datetime/localization/first-day-of-week/index.md';
+import LocaleExtensionTags from '@site/static/usage/v7/datetime/localization/locale-extension-tags/index.md';
+import TimeLabel from '@site/static/usage/v7/datetime/localization/time-label/index.md';
 
-import MonthAndYear from '@site/static/usage/datetime/presentation/month-and-year/index.md';
-import Time from '@site/static/usage/datetime/presentation/time/index.md';
-import Date from '@site/static/usage/datetime/presentation/date/index.md';
+import MonthAndYear from '@site/static/usage/v7/datetime/presentation/month-and-year/index.md';
+import Time from '@site/static/usage/v7/datetime/presentation/time/index.md';
+import Date from '@site/static/usage/v7/datetime/presentation/date/index.md';
 
-import ShowingDefaultTitle from '@site/static/usage/datetime/title/showing-default-title/index.md';
-import CustomizingTitle from '@site/static/usage/datetime/title/customizing-title/index.md';
+import ShowingDefaultTitle from '@site/static/usage/v7/datetime/title/showing-default-title/index.md';
+import CustomizingTitle from '@site/static/usage/v7/datetime/title/customizing-title/index.md';
 
-import ShowingConfirmationButtons from '@site/static/usage/datetime/buttons/showing-confirmation-buttons/index.md';
-import CustomizingButtons from '@site/static/usage/datetime/buttons/customizing-buttons/index.md';
-import CustomizingButtonTexts from '@site/static/usage/datetime/buttons/customizing-button-texts/index.md';
+import ShowingConfirmationButtons from '@site/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md';
+import CustomizingButtons from '@site/static/usage/v7/datetime/buttons/customizing-buttons/index.md';
+import CustomizingButtonTexts from '@site/static/usage/v7/datetime/buttons/customizing-button-texts/index.md';
 
-import MultipleDateSelection from '@site/static/usage/datetime/multiple/index.md';
+import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md';
 
-import Theming from '@site/static/usage/datetime/theming/index.md';
+import Theming from '@site/static/usage/v7/datetime/theming/index.md';
 
 <head>
   <title>ion-datetime: Ionic API Input for Datetime Format Picker</title>
@@ -233,7 +233,7 @@ Certain `presentation` options have both grid and wheel styles that developers c
 
 The example below shows the wheel picker with `presentation="date-time"`.
 
-import Wheel from '@site/static/usage/datetime/presentation/wheel/index.md';
+import Wheel from '@site/static/usage/v7/datetime/presentation/wheel/index.md';
 
 <Wheel />
 
diff --git a/docs/api/fab.md b/docs/api/fab.md
index fe1139ac460..d1ebf07325a 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -21,7 +21,7 @@ Fabs are container elements that contain one or more [fab buttons](./fab-button)
 
 ## Basic Usage
 
-import BasicUsage from '@site/static/usage/fab/basic/index.md';
+import BasicUsage from '@site/static/usage/v7/fab/basic/index.md';
 
 <BasicUsage />
 
@@ -29,7 +29,7 @@ import BasicUsage from '@site/static/usage/fab/basic/index.md';
 
 The `side` property of the [fab list](./fab-list) component controls where it appears relative to the main fab button. A single fab can have multiple fab lists as long as they all have different values for `side`.
 
-import ListSide from '@site/static/usage/fab/list-side/index.md';
+import ListSide from '@site/static/usage/v7/fab/list-side/index.md';
 
 <ListSide />
 
@@ -37,7 +37,7 @@ import ListSide from '@site/static/usage/fab/list-side/index.md';
 
 In order to place the fab in a fixed position, it should be assigned to the `fixed` slot of the outer [content](./content) component. Use the `vertical` and `horizontal` props to control the alignment of the fab in the viewport. The `edge` prop will cause the fab button to overlap with the app's header or footer.
 
-import Positioning from '@site/static/usage/fab/positioning/index.md';
+import Positioning from '@site/static/usage/v7/fab/positioning/index.md';
 
 <Positioning />
 
@@ -45,7 +45,7 @@ import Positioning from '@site/static/usage/fab/positioning/index.md';
 
 Setting the `size` property of the main fab button to `"small"` will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons.
 
-import ButtonSizing from '@site/static/usage/fab/button-sizing/index.md';
+import ButtonSizing from '@site/static/usage/v7/fab/button-sizing/index.md';
 
 <ButtonSizing />
 
@@ -53,19 +53,19 @@ import ButtonSizing from '@site/static/usage/fab/button-sizing/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/fab/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/fab/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSCustomProperties from '@site/static/usage/fab/theming/css-custom-properties/index.md';
+import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-properties/index.md';
 
 <CSSCustomProperties />
 
 ### CSS Shadow Parts
 
-import CSSShadowParts from '@site/static/usage/fab/theming/css-shadow-parts/index.md';
+import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md';
 
 <CSSShadowParts />
 
diff --git a/docs/api/footer.md b/docs/api/footer.md
index 476ed16c9f6..b5298d7bccd 100644
--- a/docs/api/footer.md
+++ b/docs/api/footer.md
@@ -20,7 +20,7 @@ Footer is a root component of a page that aligns itself to the bottom of the pag
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/footer/basic/index.md';
+import Basic from '@site/static/usage/v7/footer/basic/index.md';
 
 <Basic />
 
@@ -29,7 +29,7 @@ import Basic from '@site/static/usage/footer/basic/index.md';
 
 Footers can match the transparency found in native iOS applications by setting the `translucent` property. In order to see the content scrolling behind the footer, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility).
 
-import Translucent from '@site/static/usage/footer/translucent/index.md';
+import Translucent from '@site/static/usage/v7/footer/translucent/index.md';
 
 <Translucent />
 
@@ -38,7 +38,7 @@ import Translucent from '@site/static/usage/footer/translucent/index.md';
 
 Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the footer to `"fade"`. When the content is scrolled to the end, the background and border on the footer will fade away. This effect will only apply when the mode is `"ios"`.
 
-import Fade from '@site/static/usage/footer/fade/index.md';
+import Fade from '@site/static/usage/v7/footer/fade/index.md';
 
 <Fade />
 
@@ -47,7 +47,7 @@ import Fade from '@site/static/usage/footer/fade/index.md';
 
 A fade footer requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
 
-import CustomScrollTarget from '@site/static/usage/footer/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v7/footer/custom-scroll-target/index.md';
 
 <CustomScrollTarget />
 
@@ -55,7 +55,7 @@ import CustomScrollTarget from '@site/static/usage/footer/custom-scroll-target/i
 
 In `"md"` mode, the footer will have a `box-shadow` on the top. In `"ios"` mode, it will receive a `border` on the top. These can be removed by adding the `.ion-no-border` class to the footer.
 
-import NoBorder from '@site/static/usage/footer/no-border/index.md';
+import NoBorder from '@site/static/usage/v7/footer/no-border/index.md';
 
 <NoBorder />
 
diff --git a/docs/api/grid.md b/docs/api/grid.md
index a2dc4e17ea3..30b504cd3cf 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -54,7 +54,7 @@ The default breakpoints for the grid and the corresponding properties are define
 
 By default, columns will take up equal width inside of a row for all devices and screen sizes.
 
-import Basic from '@site/static/usage/grid/basic/index.md';
+import Basic from '@site/static/usage/v7/grid/basic/index.md';
 
 <Basic />
 
@@ -71,7 +71,7 @@ Grids take up 100% width of their container. By adding the `fixed` property to t
 | lg   | 960px  | Set grid width to 960px when (min-width: 992px)   |
 | xl   | 1140px | Set grid width to 1140px when (min-width: 1200px) |
 
-import Fixed from '@site/static/usage/grid/fixed/index.md';
+import Fixed from '@site/static/usage/v7/grid/fixed/index.md';
 
 <Fixed />
 
@@ -84,7 +84,7 @@ Columns can be set to specific sizes to take up a certain number out of the tota
 
 By setting the `size` to `"auto"` the column can size itself based on the natural width of its content. This is necessary when setting a column to an absolute width, such as a specific number of pixels. The columns next to the auto-width column will resize to fill the row.
 
-import SizeAuto from '@site/static/usage/grid/size-auto/index.md';
+import SizeAuto from '@site/static/usage/v7/grid/size-auto/index.md';
 
 <SizeAuto />
 
@@ -93,7 +93,7 @@ import SizeAuto from '@site/static/usage/grid/size-auto/index.md';
 
 Set the `size` of a column and the others will automatically resize around it. If a size is specified on all of the columns and it doesn't add up to the total number of columns, there will be empty space after the columns.
 
-import Size from '@site/static/usage/grid/size/index.md';
+import Size from '@site/static/usage/v7/grid/size/index.md';
 
 <Size />
 
@@ -101,7 +101,7 @@ import Size from '@site/static/usage/grid/size/index.md';
 
 The `size` property will change the column width for all [breakpoints](#default-breakpoints). Column also provides several size properties with the breakpoint name appended to the end of "size". These properties can be used to change the width of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column widths change.
 
-import SizeResponsive from '@site/static/usage/grid/size-responsive/index.md';
+import SizeResponsive from '@site/static/usage/v7/grid/size-responsive/index.md';
 
 <SizeResponsive />
 
@@ -114,7 +114,7 @@ Columns can be offset to shift to the right by a certain number of columns out o
 
 Columns can be moved to the right by using the `offset` property. This property increases the left margin of the column by the number of specified columns. It also shifts the columns to the right of it, if any exist.
 
-import Offset from '@site/static/usage/grid/offset/index.md';
+import Offset from '@site/static/usage/v7/grid/offset/index.md';
 
 <Offset />
 
@@ -122,7 +122,7 @@ import Offset from '@site/static/usage/grid/offset/index.md';
 
 The `offset` property will change the column's left margin for all [breakpoints](#default-breakpoints). Column also provides several offset properties with the breakpoint name appended to the end of "offset". These properties can be used to change the offset of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column offsets change.
 
-import OffsetResponsive from '@site/static/usage/grid/offset-responsive/index.md';
+import OffsetResponsive from '@site/static/usage/v7/grid/offset-responsive/index.md';
 
 <OffsetResponsive />
 
@@ -135,7 +135,7 @@ Columns can be pushed to to the right or pulled to the left by a certain number
 
 Reorder the columns by adding the `push` and `pull` properties. These properties adjust the `left` and `right` of the columns by the specified number of columns making it easy to reorder columns. This will cause columns to overlap if they are shifted to where another column is positioned.
 
-import PushPull from '@site/static/usage/grid/push-pull/index.md';
+import PushPull from '@site/static/usage/v7/grid/push-pull/index.md';
 
 <PushPull />
 
@@ -143,7 +143,7 @@ import PushPull from '@site/static/usage/grid/push-pull/index.md';
 
 The `push` and `pull` properties will change the column's position for all [breakpoints](#default-breakpoints). Column also provides several `push` and `pull` properties with the breakpoint name appended to the end of "push" / "pull". These properties can be used to change the position of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column positions change.
 
-import PushPullResponsive from '@site/static/usage/grid/push-pull-responsive/index.md';
+import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/index.md';
 
 <PushPullResponsive />
 
@@ -153,7 +153,7 @@ import PushPullResponsive from '@site/static/usage/grid/push-pull-responsive/ind
 
 All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities#flex-container-properties).
 
-import VerticalAlignment from '@site/static/usage/grid/vertical-alignment/index.md';
+import VerticalAlignment from '@site/static/usage/v7/grid/vertical-alignment/index.md';
 
 <VerticalAlignment />
 
@@ -162,7 +162,7 @@ import VerticalAlignment from '@site/static/usage/grid/vertical-alignment/index.
 
 All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.md#flex-container-properties).
 
-import HorizontalAlignment from '@site/static/usage/grid/horizontal-alignment/index.md';
+import HorizontalAlignment from '@site/static/usage/v7/grid/horizontal-alignment/index.md';
 
 <HorizontalAlignment />
 
@@ -174,7 +174,7 @@ Using our built-in CSS variables, it’s possible to customize the predefined gr
 
 The width of a fixed grid can be set for all breakpoints with the `--ion-grid-width` CSS variable. To override individual breakpoints, use the `--ion-grid-width-{breakpoint}` CSS variables. The default value for each of the breakpoints can be found in the [Fixed Grid](#fixed-grid) section. Open the below example in StackBlitz and resize the screen to see the grid width change.
 
-import Width from '@site/static/usage/grid/customizing/width/index.md';
+import Width from '@site/static/usage/v7/grid/customizing/width/index.md';
 
 <Width />
 
@@ -182,7 +182,7 @@ import Width from '@site/static/usage/grid/customizing/width/index.md';
 
 The number of grid columns can be modified with the `--ion-grid-columns` CSS variable. By default there are 12 grid columns, but this can be changed to any positive integer and be used to calculate the width of each individual column.
 
-import ColumnNumber from '@site/static/usage/grid/customizing/column-number/index.md';
+import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/index.md';
 
 <ColumnNumber />
 
@@ -192,7 +192,7 @@ The padding on the grid container can be set for all breakpoints with the `--ion
 
 The padding on the columns can be set for all breakpoints with the `--ion-grid-column-padding` CSS variable. To override individual breakpoints, use the `--ion-grid-column-padding-{breakpoint}` CSS variables.
 
-import Padding from '@site/static/usage/grid/customizing/padding/index.md';
+import Padding from '@site/static/usage/v7/grid/customizing/padding/index.md';
 
 <Padding />
 
diff --git a/docs/api/header.md b/docs/api/header.md
index 4bb6b8e11f2..7288b636abe 100644
--- a/docs/api/header.md
+++ b/docs/api/header.md
@@ -21,7 +21,7 @@ Header is a root component of a page that aligns itself to the top of the page.
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/header/basic/index.md';
+import Basic from '@site/static/usage/v7/header/basic/index.md';
 
 <Basic />
 
@@ -30,7 +30,7 @@ import Basic from '@site/static/usage/header/basic/index.md';
 
 Headers can match the transparency found in native iOS applications by setting the `translucent` property. In order to see the content scrolling behind the header, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility).
 
-import Translucent from '@site/static/usage/header/translucent/index.md';
+import Translucent from '@site/static/usage/v7/header/translucent/index.md';
 
 <Translucent />
 
@@ -39,7 +39,7 @@ import Translucent from '@site/static/usage/header/translucent/index.md';
 
 Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the `collapse` property to `"condense"` on the header inside of the content. This effect will only apply when the mode is "ios".
 
-import Condense from '@site/static/usage/header/condense/index.md';
+import Condense from '@site/static/usage/v7/header/condense/index.md';
 
 <Condense />
 
@@ -50,7 +50,7 @@ Many native iOS applications have a fade effect on the toolbar. This can be achi
 
 This functionality can be combined with a [Condensed Header](#condensed-header) as well. The `collapse` property with a value set to `"fade"` should be on the header outside of the content.
 
-import Fade from '@site/static/usage/header/fade/index.md';
+import Fade from '@site/static/usage/v7/header/fade/index.md';
 
 <Fade />
 
@@ -59,7 +59,7 @@ import Fade from '@site/static/usage/header/fade/index.md';
 
 A fade header requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
 
-import CustomScrollTarget from '@site/static/usage/header/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-target/index.md';
 
 <CustomScrollTarget />
 
@@ -68,7 +68,7 @@ import CustomScrollTarget from '@site/static/usage/header/custom-scroll-target/i
 
 In `"md"` mode, the header will have a `box-shadow` on the bottom. In `"ios"` mode, it will receive a `border` on the bottom. These can be removed by adding the `.ion-no-border` class to the header.
 
-import NoBorder from '@site/static/usage/header/no-border/index.md';
+import NoBorder from '@site/static/usage/v7/header/no-border/index.md';
 
 <NoBorder />
 
diff --git a/docs/api/img.md b/docs/api/img.md
index 091331da9d6..14c697c760d 100644
--- a/docs/api/img.md
+++ b/docs/api/img.md
@@ -23,7 +23,7 @@ Img is a tag that will lazily load an image whenever the tag is in the viewport.
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/img/basic/index.md';
+import Basic from '@site/static/usage/v7/img/basic/index.md';
 
 <Basic />
 
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index 13bcc83dc2a..5675984b447 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -21,7 +21,7 @@ The Infinite Scroll component calls an action to be performed when the user scro
 
 The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance.
 
-import Basic from '@site/static/usage/infinite-scroll/basic/index.md';
+import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.md';
 
 <Basic />
 
@@ -29,7 +29,7 @@ import Basic from '@site/static/usage/infinite-scroll/basic/index.md';
 
 The `ion-infinite-scroll-content` is responsible for the visual display of the infinite scroll interaction. By default this component changes its look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. Both the spinner and loading text can be customized by setting properties on the `ion-infinite-scroll-content` component.
 
-import InfiniteScrollContent from '@site/static/usage/infinite-scroll/infinite-scroll-content/index.md';
+import InfiniteScrollContent from '@site/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md';
 
 <InfiniteScrollContent />
 
@@ -37,7 +37,7 @@ import InfiniteScrollContent from '@site/static/usage/infinite-scroll/infinite-s
 
 Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` components allows developers to create their own content components, if desired. This content can contain anything, from an SVG element to elements with unique CSS animations.
 
-import CustomContent from '@site/static/usage/infinite-scroll/custom-infinite-scroll-content/index.md';
+import CustomContent from '@site/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md';
 
 <CustomContent />
 
diff --git a/docs/api/input.md b/docs/api/input.md
index 8597d1bf22b..19e8f42f0b4 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -23,7 +23,7 @@ The input component is a wrapper to the HTML input element with custom styling a
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/input/basic/index.md';
+import Basic from '@site/static/usage/v7/input/basic/index.md';
 
 <Basic />
 
@@ -32,7 +32,7 @@ import Basic from '@site/static/usage/input/basic/index.md';
 
 The input component is meant for text type inputs only, such as `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, and `"url"`. It supports all standard text input events including keyup, keydown, keypress, and more. The default `type` is `"text"`.
 
-import Types from '@site/static/usage/input/types/index.md';
+import Types from '@site/static/usage/v7/input/types/index.md';
 
 <Types />
 
@@ -41,7 +41,7 @@ import Types from '@site/static/usage/input/types/index.md';
 
 Labels will take up the width of their content by default. This positioning can be changed to be a fixed width, stacked, or floating label.
 
-import Labels from '@site/static/usage/input/labels/index.md';
+import Labels from '@site/static/usage/v7/input/labels/index.md';
 
 <Labels />
 
@@ -50,7 +50,7 @@ import Labels from '@site/static/usage/input/labels/index.md';
 
 Inputs offer two options for clearing the input based on how you interact with it. The first way is by adding the `clearInput` property which will show a clear button when the input has a `value`. The second way is the `clearOnEdit` property which will clear the input after it has been blurred and then typed in again. Inputs with a `type` set to `"password"` will have `clearOnEdit` enabled by default.
 
-import Clear from '@site/static/usage/input/clear/index.md';
+import Clear from '@site/static/usage/v7/input/clear/index.md';
 
 <Clear />
 
@@ -59,7 +59,7 @@ import Clear from '@site/static/usage/input/clear/index.md';
 
 Material Design offers filled styles for an input when it is inside of an item. The `fill` property on the item can be set to either `"solid"` or `"outline"`.
 
-import Fill from '@site/static/usage/input/fill/index.md';
+import Fill from '@site/static/usage/v7/input/fill/index.md';
 
 <Fill />
 
@@ -69,7 +69,7 @@ import Fill from '@site/static/usage/input/fill/index.md';
 Helper & error text can be used inside of an item with an input by slotting a note in the `"helper"` and `"error"` slots. The error slot will not be displayed unless the `ion-invalid` class is added to the `ion-item`. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
 
 <!-- Reuse the playground from the Item directory -->
-import HelperError from '@site/static/usage/item/helper-error/index.md';
+import HelperError from '@site/static/usage/v7/item/helper-error/index.md';
 
 <HelperError />
 
@@ -78,7 +78,7 @@ import HelperError from '@site/static/usage/item/helper-error/index.md';
 The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as `inputLength` / `maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property.
 
 <!-- Reuse the playground from the Item directory -->
-import Counter from '@site/static/usage/item/counter/index.md';
+import Counter from '@site/static/usage/v7/item/counter/index.md';
 
 <Counter />
 
@@ -87,7 +87,7 @@ import Counter from '@site/static/usage/item/counter/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/input/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
 
 <Colors />
 
@@ -95,7 +95,7 @@ import Colors from '@site/static/usage/input/theming/colors/index.md';
 
 Input uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` for customization will not work; therefore we recommend adding a class and customizing it that way.
 
-import CSSProps from '@site/static/usage/input/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index 9ef7dcadc9d..0f4dd8c40f8 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -23,7 +23,7 @@ Item dividers are block elements that can be used to separate [items](./item) in
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/item-divider/basic/index.md';
+import Basic from '@site/static/usage/v7/item-divider/basic/index.md';
 
 <Basic />
 
@@ -32,14 +32,14 @@ import Basic from '@site/static/usage/item-divider/basic/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/item-divider/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/item-divider/theming/colors/index.md';
 
 <Colors />
 
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/item-divider/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/item-divider/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index 07834fa19e0..60cf8b09383 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -20,13 +20,13 @@ Item groups are containers that organize similar [items](./item) together. They
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/item-group/basic/index.md';
+import Basic from '@site/static/usage/v7/item-group/basic/index.md';
 
 <Basic />
 
 ## Sliding Items
 
-import SlidingItems from '@site/static/usage/item-group/sliding-items/index.md';
+import SlidingItems from '@site/static/usage/v7/item-group/sliding-items/index.md';
 
 <SlidingItems />
 
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index 818e268c1b6..526f4d1263b 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -23,7 +23,7 @@ A sliding item contains an item that can be dragged to reveal option buttons. It
 
 Sliding item options are placed on the `"end"` side of the item by default. This means that options are revealed when the item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the side attribute to `"start"` on the [item options](./item-options) element. Up to two item options can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
 
-import Basic from '@site/static/usage/item-sliding/basic/index.md';
+import Basic from '@site/static/usage/v7/item-sliding/basic/index.md';
 
 <Basic />
 
@@ -32,7 +32,7 @@ import Basic from '@site/static/usage/item-sliding/basic/index.md';
 
 When an icon is placed alongside text in the [item option](./item-option), it will display the icon on top of the text by default. The slot on the icon can be changed to any of the available [item option slots](./item-option#slots) to change its position.
 
-import Icons from '@site/static/usage/item-sliding/icons/index.md';
+import Icons from '@site/static/usage/v7/item-sliding/icons/index.md';
 
 <Icons />
 
@@ -41,7 +41,7 @@ import Icons from '@site/static/usage/item-sliding/icons/index.md';
 
 Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the `ionSwipe` event on the [item options](./item-options) to call a method when the item is fully swiped.
 
-import Expandable from '@site/static/usage/item-sliding/expandable/index.md';
+import Expandable from '@site/static/usage/v7/item-sliding/expandable/index.md';
 
 <Expandable />
 
diff --git a/docs/api/item.md b/docs/api/item.md
index 08c99ba3685..8c3809a46fb 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -23,7 +23,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an
 
 Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-wrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text.
 
-import Basic from '@site/static/usage/item/basic/index.md';
+import Basic from '@site/static/usage/v7/item/basic/index.md';
 
 <Basic />
 
@@ -32,7 +32,7 @@ import Basic from '@site/static/usage/item/basic/index.md';
 
 An item is considered "clickable" if it has an `href` or `button` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode.
 
-import Clickable from '@site/static/usage/item/clickable/index.md';
+import Clickable from '@site/static/usage/v7/item/clickable/index.md';
 
 <Clickable />
 
@@ -41,7 +41,7 @@ import Clickable from '@site/static/usage/item/clickable/index.md';
 
 By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`.
 
-import DetailArrows from '@site/static/usage/item/detail-arrows/index.md';
+import DetailArrows from '@site/static/usage/v7/item/detail-arrows/index.md';
 
 <DetailArrows />
 
@@ -65,7 +65,7 @@ See the [theming documentation](/docs/theming/css-variables) for more informatio
 
 Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the `"start"` slot. The `lines` property can be modified to `"full"` or `"none"` which will show a full width border or no border, respectively.
 
-import Lines from '@site/static/usage/item/lines/index.md';
+import Lines from '@site/static/usage/v7/item/lines/index.md';
 
 <Lines />
 
@@ -74,7 +74,7 @@ import Lines from '@site/static/usage/item/lines/index.md';
 
 [Avatars](./avatar) and [Thumbnails](./thumbnail) can be slotted inside of an item. This is useful when making lists of images and text.
 
-import Media from '@site/static/usage/item/media/index.md';
+import Media from '@site/static/usage/v7/item/media/index.md';
 
 <Media />
 
@@ -83,21 +83,21 @@ import Media from '@site/static/usage/item/media/index.md';
 
 Buttons are styled smaller inside of items than when they are outside of them. To make the button size match buttons outside of an item, set the `size` attribute to `"default"`.
 
-import Buttons from '@site/static/usage/item/buttons/index.md';
+import Buttons from '@site/static/usage/v7/item/buttons/index.md';
 
 <Buttons />
 
 
 ## Icons in Items
 
-import Icons from '@site/static/usage/item/icons/index.md';
+import Icons from '@site/static/usage/v7/item/icons/index.md';
 
 <Icons />
 
 
 ## Item Inputs
 
-import Inputs from '@site/static/usage/item/inputs/index.md';
+import Inputs from '@site/static/usage/v7/item/inputs/index.md';
 
 <Inputs />
 
@@ -106,7 +106,7 @@ import Inputs from '@site/static/usage/item/inputs/index.md';
 
 Helper & error text can be used inside of an item with an input by slotting a note in the `"helper"` and `"error"` slots. The error slot will not be displayed unless the `ion-invalid` class is added to the `ion-item`. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
 
-import HelperError from '@site/static/usage/item/helper-error/index.md';
+import HelperError from '@site/static/usage/v7/item/helper-error/index.md';
 
 <HelperError />
 
@@ -115,7 +115,7 @@ import HelperError from '@site/static/usage/item/helper-error/index.md';
 
 The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding `counter`, the default behavior is to format the value that gets displayed as `inputLength / maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property.
 
-import Counter from '@site/static/usage/item/counter/index.md';
+import Counter from '@site/static/usage/v7/item/counter/index.md';
 
 <Counter />
 
@@ -123,19 +123,19 @@ import Counter from '@site/static/usage/item/counter/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/item/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/item/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/item/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/item/theming/css-shadow-parts/index.md';
 
 <CSSParts />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/item/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md';
 
 <CSSProps />
 
@@ -146,7 +146,7 @@ Items containing an input will highlight the bottom border of the input with a d
 
 The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. This can be customized using the provided CSS properties.
 
-import InputHighlight from '@site/static/usage/item/theming/input-highlight/index.md';
+import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md';
 
 <InputHighlight />
 
diff --git a/docs/api/label.md b/docs/api/label.md
index f5c5b807c41..a7b6422775e 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -22,19 +22,19 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/label/basic/index.md';
+import Basic from '@site/static/usage/v7/label/basic/index.md';
 
 <Basic />
 
 ## Item Labels
 
-import Item from '@site/static/usage/label/item/index.md';
+import Item from '@site/static/usage/v7/label/item/index.md';
 
 <Item />
 
 ## Input Labels
 
-import Input from '@site/static/usage/label/input/index.md';
+import Input from '@site/static/usage/v7/label/input/index.md';
 
 <Input />
 
@@ -42,7 +42,7 @@ import Input from '@site/static/usage/label/input/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/label/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/label/theming/colors/index.md';
 
 <Colors />
 
diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index bbe19e76a20..f2ecb781627 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -17,7 +17,7 @@ List headers are block elements that are used to describe the contents of a [lis
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/list-header/basic/index.md';
+import Basic from '@site/static/usage/v7/list-header/basic/index.md';
 
 <Basic />
 
@@ -26,7 +26,7 @@ import Basic from '@site/static/usage/list-header/basic/index.md';
 
 A [button](./button) placed in a list header can be useful for showing part of a list and redirecting to the full list with the button.
 
-import Buttons from '@site/static/usage/list-header/buttons/index.md';
+import Buttons from '@site/static/usage/v7/list-header/buttons/index.md';
 
 <Buttons />
 
@@ -35,7 +35,7 @@ import Buttons from '@site/static/usage/list-header/buttons/index.md';
 
 List headers do not show a bottom border by default. The `lines` property can be modified to `"full"` or `"inset"` which will show a full width border or an inset border with left padding, respectively.
 
-import Lines from '@site/static/usage/list-header/lines/index.md';
+import Lines from '@site/static/usage/v7/list-header/lines/index.md';
 
 <Lines />
 
@@ -43,13 +43,13 @@ import Lines from '@site/static/usage/list-header/lines/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/list-header/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/list-header/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/list-header/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/list-header/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/list.md b/docs/api/list.md
index dd3c4fa08c3..b5907823923 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -23,7 +23,7 @@ Lists support several interactions including swiping items to reveal options, dr
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/list/basic/index.md';
+import Basic from '@site/static/usage/v7/list/basic/index.md';
 
 <Basic />
 
@@ -32,7 +32,7 @@ import Basic from '@site/static/usage/list/basic/index.md';
 
 Adding the `inset` property to a list will apply margin around the list. In `ios` mode it will also add rounded corners to the list.
 
-import Inset from '@site/static/usage/list/inset/index.md';
+import Inset from '@site/static/usage/v7/list/inset/index.md';
 
 <Inset />
 
@@ -41,7 +41,7 @@ import Inset from '@site/static/usage/list/inset/index.md';
 
 Adding the `lines` property to a list will adjust the bottom borders of all of the items in the list. Setting it to `"full"` will display full width borders, `"inset"` will display borders adjusted with left padding, and `"none"` will show no borders. If the `lines` property is set on an item in a list, that will take priority over the property on the list.
 
-import Lines from '@site/static/usage/list/lines/index.md';
+import Lines from '@site/static/usage/v7/list/lines/index.md';
 
 <Lines />
 
diff --git a/docs/api/loading.md b/docs/api/loading.md
index dbb4896bea4..a0a79204577 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -31,7 +31,7 @@ Alternatively, developers can configure the loading indicator to dismiss automat
 
 ### Controller
 
-import Controller from '@site/static/usage/loading/controller/index.md';
+import Controller from '@site/static/usage/v7/loading/controller/index.md';
 
 <Controller />
 
@@ -107,7 +107,7 @@ export default defineComponent({
 
 The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#spinner) for a full list of options.
 
-import Spinners from '@site/static/usage/loading/spinners/index.md';
+import Spinners from '@site/static/usage/v7/loading/spinners/index.md';
 
 <Spinners />
 
@@ -117,7 +117,7 @@ Loading uses scoped encapsulation, which means it will automatically scope its C
 
 We recommend passing a custom class and using that to add custom styles to the host and inner elements.
 
-import Theming from '@site/static/usage/loading/theming/index.md';
+import Theming from '@site/static/usage/v7/loading/theming/index.md';
 
 <Theming />
 
diff --git a/docs/api/menu.md b/docs/api/menu.md
index e24612796f9..8a12ff43350 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -27,7 +27,7 @@ These can be controlled from the templates, or programmatically using the MenuCo
 
 ## Basic Usage
 
-import BasicUsage from '@site/static/usage/menu/basic/index.md';
+import BasicUsage from '@site/static/usage/v7/menu/basic/index.md';
 
 <BasicUsage />
 
@@ -35,7 +35,7 @@ import BasicUsage from '@site/static/usage/menu/basic/index.md';
 
 The [ion-menu-toggle](./menu-toggle) component can be used to create custom button that can open or close the menu.
 
-import MenuToggle from '@site/static/usage/menu/toggle/index.md';
+import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
 
 <MenuToggle />
 
@@ -43,7 +43,7 @@ import MenuToggle from '@site/static/usage/menu/toggle/index.md';
 
 The `type` property can be used to customize how menus display in your application.
 
-import MenuType from '@site/static/usage/menu/type/index.md';
+import MenuType from '@site/static/usage/v7/menu/type/index.md';
 
 <MenuType />
 
@@ -51,7 +51,7 @@ import MenuType from '@site/static/usage/menu/type/index.md';
 
 ### CSS Shadow Parts
 
-import Theming from '@site/static/usage/menu/theming/index.md';
+import Theming from '@site/static/usage/v7/menu/theming/index.md';
 
 <Theming />
 
diff --git a/docs/api/modal.md b/docs/api/modal.md
index 33689170328..a4fa8ee7a80 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -25,7 +25,7 @@ A Modal is a dialog that appears on top of the app's content, and must be dismis
 
 When using `ion-modal` with Angular, React, or Vue, the component you pass in will be destroyed when the modal is dismissed. As this functionality is provided by the JavaScript framework, using `ion-modal` without a JavaScript framework will not destroy the component you passed in. If this is a needed functionality, we recommend using the `modalController` instead.
 
-import InlineModalTriggerExample from '@site/static/usage/modal/inline/basic/index.md';
+import InlineModalTriggerExample from '@site/static/usage/v7/modal/inline/basic/index.md';
 
 <InlineModalTriggerExample />
 
@@ -35,7 +35,7 @@ The `isOpen` property on `ion-modal` allows developers to control the presentati
 
 `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the modal is dismissed. Developers should listen for the `ionModalDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-modal` from being tightly coupled with the state of the application. With a one way data binding, the modal only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the modal needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
 
-import InlineModalIsOpenExample from '@site/static/usage/modal/inline/is-open/index.md';
+import InlineModalIsOpenExample from '@site/static/usage/v7/modal/inline/is-open/index.md';
 
 <InlineModalIsOpenExample />
 
@@ -43,7 +43,7 @@ import InlineModalIsOpenExample from '@site/static/usage/modal/inline/is-open/in
 
 With the `modalController` developers can present an `ion-modal` programmatically. Developers will have complete control over when a modal is presented and dismissed.
 
-import ControllerExample from '@site/static/usage/modal/controller/index.md';
+import ControllerExample from '@site/static/usage/v7/modal/controller/index.md';
 
 <ControllerExample />
 
@@ -63,7 +63,7 @@ Developers can set `canDismiss` to a boolean value. If `canDismiss` is `true`, t
 
 Setting a boolean value should be used when you need to require a particular action to be taken prior to a modal being dismissed. For example, if developers want to require that a "Terms of Use" checkbox is checked prior to closing the modal, they could set `canDismiss` to `false` initially and update it to `true` when the checkbox is checked.
 
-import CanDismissBooleanExample from '@site/static/usage/modal/can-dismiss/boolean/index.md';
+import CanDismissBooleanExample from '@site/static/usage/v7/modal/can-dismiss/boolean/index.md';
 
 <CanDismissBooleanExample />
 
@@ -75,7 +75,7 @@ Setting a callback function should be used when you have complex dismissing crit
 
 Note that setting a callback function will cause the swipe gesture to be interrupted when using a card or sheet modal. This is because Ionic does not know what your callback function will resolve to ahead of time.
 
-import CanDismissFunctionExample from '@site/static/usage/modal/can-dismiss/function/index.md';
+import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/function/index.md';
 
 <CanDismissFunctionExample />
 
@@ -93,7 +93,7 @@ The `canDismiss` property can be used to control whether or not the card modal c
 The card display style is only available on iOS.
 :::
 
-import CardExample from '@site/static/usage/modal/card/basic/index.md';
+import CardExample from '@site/static/usage/v7/modal/card/basic/index.md';
 
 <CardExample />
 
@@ -107,13 +107,13 @@ The `initialBreakpoint` property is required so that the sheet modal knows which
 
 The `backdropBreakpoint` property can be used to customize the point at which the `ion-backdrop` will begin to fade in. This is useful when creating interfaces that have content underneath the sheet that should remain interactive. A common use case is a sheet modal that overlays a map where the map is interactive until the sheet is fully expanded.
 
-import SheetExample from '@site/static/usage/modal/sheet/basic/index.md';
+import SheetExample from '@site/static/usage/v7/modal/sheet/basic/index.md';
 
 <SheetExample />
 
 #### Interacting with background content
 
-import SheetBackgroundContentExample from '@site/static/usage/modal/sheet/background-content/index.md';
+import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/background-content/index.md';
 
 <SheetBackgroundContentExample />
 
@@ -121,7 +121,7 @@ import SheetBackgroundContentExample from '@site/static/usage/modal/sheet/backgr
 
 Sheet modals can optionally render a handle indicator used for dragging the sheet between breakpoints. The `handleBehavior` property can be used to configure the behavior of when the handle is activated by the user.
 
-import SheetHandleBehaviorExample from '@site/static/usage/modal/sheet/handle-behavior/index.md';
+import SheetHandleBehaviorExample from '@site/static/usage/v7/modal/sheet/handle-behavior/index.md';
 
 <SheetHandleBehaviorExample />
 
@@ -145,7 +145,7 @@ ion-modal.stack-modal {
 }
 ```
 
-import ThemeExample from '@site/static/usage/modal/styling/theming/index.md';
+import ThemeExample from '@site/static/usage/v7/modal/styling/theming/index.md';
 
 <ThemeExample />
 
@@ -153,7 +153,7 @@ import ThemeExample from '@site/static/usage/modal/styling/theming/index.md';
 
 The enter and leave animations can be customized by using our animation builder and assigning animations to `enterAnimation` and `leaveAnimation`.
 
-import AnimationsExample from '@site/static/usage/modal/styling/animations/index.md';
+import AnimationsExample from '@site/static/usage/v7/modal/styling/animations/index.md';
 
 <AnimationsExample />
 
@@ -161,7 +161,7 @@ import AnimationsExample from '@site/static/usage/modal/styling/animations/index
 
 While `ion-modal` is most often used for full-page views, cards, or sheets, it is also possible to use it for custom dialogs. This is useful if developers need an interface that is more complex than what components such as [ion-alert](./alert) or [ion-loading](./loading) provide.
 
-import CustomDialogs from '@site/static/usage/modal/custom-dialogs/index.md';
+import CustomDialogs from '@site/static/usage/v7/modal/custom-dialogs/index.md';
 
 <CustomDialogs />
 
@@ -250,7 +250,7 @@ When the backdrop is disabled, users will be able to interact with elements outs
 
 The content of an inline `ion-modal` is unmounted when closed. If this content is expensive to render, developers can use the `keepContentsMounted` property to mount the content as soon as the modal is mounted. This can help optimize the responsiveness of your application as the inner contents will have already been mounted when the modal opens.
 
-import Mount from '@site/static/usage/modal/performance/mount/index.md';
+import Mount from '@site/static/usage/v7/modal/performance/mount/index.md';
 
 <Mount />
 
diff --git a/docs/api/nav.md b/docs/api/nav.md
index c263b6f8ed1..727add0a05f 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -25,7 +25,7 @@ Unlike Router Outlet, Nav is not tied to a particular router. This means that if
 
 NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating.
 
-import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
+import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md';
 
 <NavLinkExample />
 
diff --git a/docs/api/note.md b/docs/api/note.md
index fa25e670eeb..5d142dd53b8 100644
--- a/docs/api/note.md
+++ b/docs/api/note.md
@@ -21,13 +21,13 @@ Notes are text elements generally used as subtitles that provide more informatio
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/note/basic/index.md';
+import Basic from '@site/static/usage/v7/note/basic/index.md';
 
 <Basic />
 
 ## Item Notes
 
-import Item from '@site/static/usage/note/item/index.md';
+import Item from '@site/static/usage/v7/note/item/index.md';
 
 <Item />
 
@@ -35,13 +35,13 @@ import Item from '@site/static/usage/note/item/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/note/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/note/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/note/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/note/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/picker.md b/docs/api/picker.md
index ef97687ee8c..3dfd4ceedfe 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -26,7 +26,7 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
 
 Display a list of options in a single, scrollable column.
 
-import SingleColumn from '@site/static/usage/picker/single-column/index.md';
+import SingleColumn from '@site/static/usage/v7/picker/single-column/index.md';
 
 <SingleColumn />
 
@@ -35,7 +35,7 @@ import SingleColumn from '@site/static/usage/picker/single-column/index.md';
 
 Display multiple columns of different options.
 
-import MultipleColumn from '@site/static/usage/picker/multiple-column/index.md';
+import MultipleColumn from '@site/static/usage/v7/picker/multiple-column/index.md';
 
 <MultipleColumn />
 
diff --git a/docs/api/popover.md b/docs/api/popover.md
index e516d398824..33017292870 100644
--- a/docs/api/popover.md
+++ b/docs/api/popover.md
@@ -54,7 +54,7 @@ A trigger for an inline `ion-popover` is the element that will open a popover wh
  Triggers are not applicable when using the `popoverController` because the `ion-popover` is not created ahead of time.
 :::
 
-import InlineTrigger from '@site/static/usage/popover/presenting/inline-trigger/index.md';
+import InlineTrigger from '@site/static/usage/v7/popover/presenting/inline-trigger/index.md';
 
 <InlineTrigger />
 
@@ -65,7 +65,7 @@ Inline popovers can also be opened by setting the `isOpen` property to `true`. T
 `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the popover is dismissed. Developers should listen for the `ionPopoverDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-popover` from being tightly coupled with the state of the application. With a one way data binding, the popover only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the popover needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
 
 
-import IsOpenTrigger from '@site/static/usage/popover/presenting/inline-isopen/index.md';
+import IsOpenTrigger from '@site/static/usage/v7/popover/presenting/inline-isopen/index.md';
 
 <IsOpenTrigger />
 
@@ -83,7 +83,7 @@ Instead of a controller, React has a hook called `useIonPopover` which behaves i
 
 ### Usage
 
-import ControllerExample from '@site/static/usage/popover/presenting/controller/index.md';
+import ControllerExample from '@site/static/usage/v7/popover/presenting/controller/index.md';
 
 <ControllerExample />
 
@@ -96,7 +96,7 @@ Popovers are presented at the root of your application so they overlay your enti
  If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
 :::
 
-import Styling from '@site/static/usage/popover/customization/styling/index.md';
+import Styling from '@site/static/usage/v7/popover/customization/styling/index.md';
 
 <Styling />
 
@@ -117,7 +117,7 @@ The `alignment` property allows you to line up an edge of your popover with a co
 
 ### Side and Alignment Demo
 
-import Positioning from '@site/static/usage/popover/customization/positioning/index.md';
+import Positioning from '@site/static/usage/v7/popover/customization/positioning/index.md';
 
 <Positioning />
 
@@ -131,7 +131,7 @@ When making dropdown menus, you may want to have the width of the popover match
 
 If you are using the `popoverController`, you must provide an event via the `event` option and Ionic Framework will use `event.target` as the reference element. See the [controller demo](#controller-popovers) for an example of this pattern.
 
-import Sizing from '@site/static/usage/popover/customization/sizing/index.md';
+import Sizing from '@site/static/usage/v7/popover/customization/sizing/index.md';
 
 <Sizing />
 
@@ -145,7 +145,7 @@ You can use the `dismissOnSelect` property to automatically close the popover wh
  Nested popovers cannot be created when using the `popoverController` because the popover is automatically added to the root of your application when the `create` method is called.
 :::
 
-import NestedPopover from '@site/static/usage/popover/nested/index.md';
+import NestedPopover from '@site/static/usage/v7/popover/nested/index.md';
 
 <NestedPopover />
 
@@ -226,7 +226,7 @@ type PositionAlign = 'start' | 'center' | 'end';
 
 The content of an inline `ion-popover` is unmounted when closed. If this content is expensive to render, developers can use the `keepContentsMounted` property to mount the content as soon as the popover is mounted. This can help optimize the responsiveness of your application as the inner contents will have already been mounted when the popover opens.
 
-import Mount from '@site/static/usage/popover/performance/mount/index.md';
+import Mount from '@site/static/usage/v7/popover/performance/mount/index.md';
 
 <Mount />
 
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 5da6681d22a..15a7c27fbca 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -24,7 +24,7 @@ Progress bars inform users about the status of ongoing processes, such as loadin
 
 Determinate is the default type. It should be used when the percentage of an operation is known. The progress is represented by setting the `value` property. This can be used to show the progress increasing from 0 to 100% of the track.
 
-import Determinate from '@site/static/usage/progress-bar/determinate/index.md';
+import Determinate from '@site/static/usage/v7/progress-bar/determinate/index.md';
 
 <Determinate />
 
@@ -32,7 +32,7 @@ import Determinate from '@site/static/usage/progress-bar/determinate/index.md';
 
 If the `buffer` property is set, a buffer stream will show with animated circles to indicate activity. The value of the `buffer` property will also be represented by how much visible track there is. If the value of `buffer` is less than the `value` property, there will be no visible track. If `buffer` is equal to `1` then the buffer stream will be hidden.
 
-import Buffer from '@site/static/usage/progress-bar/buffer/index.md';
+import Buffer from '@site/static/usage/v7/progress-bar/buffer/index.md';
 
 <Buffer />
 
@@ -41,7 +41,7 @@ import Buffer from '@site/static/usage/progress-bar/buffer/index.md';
 
 The indeterminate type should be used when it is unknown how long the process will take. The progress bar is not tied to the `value`, instead it continually slides along the track until the process is complete.
 
-import Indeterminate from '@site/static/usage/progress-bar/indeterminate/index.md';
+import Indeterminate from '@site/static/usage/v7/progress-bar/indeterminate/index.md';
 
 <Indeterminate />
 
@@ -49,7 +49,7 @@ import Indeterminate from '@site/static/usage/progress-bar/indeterminate/index.m
 ## Progress Bars in Toolbars
 
 <!-- Reuse the playground from the Toolbar directory -->
-import Toolbar from '@site/static/usage/toolbar/progress-bars/index.md';
+import Toolbar from '@site/static/usage/v7/toolbar/progress-bars/index.md';
 
 <Toolbar />
 
@@ -58,21 +58,21 @@ import Toolbar from '@site/static/usage/toolbar/progress-bars/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/progress-bar/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/progress-bar/theming/colors/index.md';
 
 <Colors />
 
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/progress-bar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/progress-bar/theming/css-properties/index.md';
 
 <CSSProps />
 
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/progress-bar/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md';
 
 <CSSParts />
 
diff --git a/docs/api/radio.md b/docs/api/radio.md
index 8a190f15f06..326bcc3082d 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -24,7 +24,7 @@ When radios are inside of a radio group, only one radio will be checked at any t
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/radio/basic/index.md';
+import Basic from '@site/static/usage/v7/radio/basic/index.md';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/radio/basic/index.md';
 
 By default, once a radio is selected it cannot be deselected; pressing it again will keep it selected. This behavior can be modified by using the `allowEmptySelection` property on the parent radio group, which enables the radios to be deselected.
 
-import EmptySelection from '@site/static/usage/radio/empty-selection/index.md';
+import EmptySelection from '@site/static/usage/v7/radio/empty-selection/index.md';
 
 <EmptySelection />
 
@@ -42,19 +42,19 @@ import EmptySelection from '@site/static/usage/radio/empty-selection/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/radio/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/radio/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/radio/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/radio/theming/css-properties/index.md';
 
 <CSSProps />
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/radio/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/radio/theming/css-shadow-parts/index.md';
 
 <CSSParts />
 
diff --git a/docs/api/range.md b/docs/api/range.md
index 9db6b29fba6..83927d2a463 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -24,7 +24,7 @@ By default the Range slider has a minimum value of `0` and a maximum value of `1
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/range/basic/index.md';
+import Basic from '@site/static/usage/v7/range/basic/index.md';
 
 <Basic />
 
@@ -32,7 +32,7 @@ import Basic from '@site/static/usage/range/basic/index.md';
 
 Labels and custom UI elements can be slotted on either side of the range by adding `slot="start"` or `slot="end"` to the element. The element can be any element, such as an `ion-label`, `ion-icon` or a `div`. If the directionality of the document is set to left to right, the contents slotted to the `start` position will display to the left of the range, where as contents slotted to the `end` position will display to the right of the range. In right to left (rtl) directionality, the contents slotted to the `start` position will display to the right of the range, where as contents slotted to the `end` position` will display to the left of the range.
 
-import SlotsPlayground from '@site/static/usage/range/slots/index.md';
+import SlotsPlayground from '@site/static/usage/v7/range/slots/index.md';
 
 <SlotsPlayground />
 
@@ -40,7 +40,7 @@ import SlotsPlayground from '@site/static/usage/range/slots/index.md';
 
 Dual knobs introduce two knob controls that users can use to select a value at a lower and upper bounds. When selected, the Range will emit an `ionChange` event with a [RangeValue](#rangevalue), containing the upper and lower values selected.
 
-import DualKnobs from '@site/static/usage/range/dual-knobs/index.md';
+import DualKnobs from '@site/static/usage/v7/range/dual-knobs/index.md';
 
 <DualKnobs />
 
@@ -50,7 +50,7 @@ The `pin` attribute will display the value of the Range above the knob when drag
 
 With the `pinFormatter` function, developers can customize the formatting of the range value to the user.
 
-import Pins from '@site/static/usage/range/pins/index.md';
+import Pins from '@site/static/usage/v7/range/pins/index.md';
 
 <Pins />
 
@@ -60,7 +60,7 @@ Ticks show indications for each available value on the Range. In order to use ti
 
 With snapping enabled, the Range knob will snap to the nearest available value as the knob is dragged and released.
 
-import SnappingTicks from '@site/static/usage/range/snapping-ticks/index.md';
+import SnappingTicks from '@site/static/usage/v7/range/snapping-ticks/index.md';
 
 <SnappingTicks />
 
@@ -70,7 +70,7 @@ import SnappingTicks from '@site/static/usage/range/snapping-ticks/index.md';
 
 The `ionChange` event emits as the Range knob value changes.
 
-import IonChangeEvent from '@site/static/usage/range/ion-change-event/index.md';
+import IonChangeEvent from '@site/static/usage/v7/range/ion-change-event/index.md';
 
 <IonChangeEvent />
 
@@ -78,7 +78,7 @@ import IonChangeEvent from '@site/static/usage/range/ion-change-event/index.md';
 
 The `ionKnobMoveStart` event emits when the Range knob begins dragging, whether through mouse drag, touch gesture or keyboard interaction. Inversely, `ionKnobMoveEnd` emits when the Range knob is released. Both events emit with the `RangeValue` type and work in combination with the `dualKnobs` property.
 
-import IonKnobMoveEvent from '@site/static/usage/range/ion-knob-move-event/index.md';
+import IonKnobMoveEvent from '@site/static/usage/v7/range/ion-knob-move-event/index.md';
 
 <IonKnobMoveEvent />
 
@@ -88,7 +88,7 @@ import IonKnobMoveEvent from '@site/static/usage/range/ion-knob-move-event/index
 
 Range includes [CSS Variables](#css-custom-properties) to quickly theme and customize the appearance of the Range component to match your application's design.
 
-import CSSProps from '@site/static/usage/range/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/range/theming/css-properties/index.md';
 
 <CSSProps />
 
@@ -96,7 +96,7 @@ import CSSProps from '@site/static/usage/range/theming/css-properties/index.md';
 
 Range includes [CSS Shadow Parts](#css-shadow-parts) to allow complete customization of specific element nodes within the Range component. CSS Shadow Parts offer the most customization capabilities and are the recommended approach when requiring advance styling with the Range component.
 
-import CSSParts from '@site/static/usage/range/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/range/theming/css-shadow-parts/index.md';
 
 <CSSParts />
 
diff --git a/docs/api/refresher.md b/docs/api/refresher.md
index 11540618492..744200a218b 100644
--- a/docs/api/refresher.md
+++ b/docs/api/refresher.md
@@ -23,7 +23,7 @@ Data should be modified during the refresher's output events. Once the async ope
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/refresher/basic/index.md';
+import Basic from '@site/static/usage/v7/refresher/basic/index.md';
 
 <Basic />
 
@@ -34,7 +34,7 @@ The refresher has several properties for customizing the pull gesture. Set the `
 
 These properties do not apply when the [native refresher](#native-refreshers) is enabled.
 
-import PullProperties from '@site/static/usage/refresher/pull-properties/index.md';
+import PullProperties from '@site/static/usage/v7/refresher/pull-properties/index.md';
 
 <PullProperties />
 
@@ -45,7 +45,7 @@ The default icon, spinner, and text can be customized on the [refresher content]
 
 Setting `pullingIcon` will disable the [native refresher](#native-refreshers).
 
-import CustomContent from '@site/static/usage/refresher/custom-content/index.md';
+import CustomContent from '@site/static/usage/v7/refresher/custom-content/index.md';
 
 <CustomContent />
 
@@ -67,7 +67,7 @@ The native refreshers can be disabled by setting the `pullingIcon` on the [refre
 
 Refresher requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
 
-import CustomScrollTarget from '@site/static/usage/refresher/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v7/refresher/custom-scroll-target/index.md';
 
 <CustomScrollTarget />
 
@@ -76,7 +76,7 @@ import CustomScrollTarget from '@site/static/usage/refresher/custom-scroll-targe
 
 While the refresher can be used with any type of content, a common use case in native apps is to display a list of data that gets updated on refresh. In the below example, the app generates a list of data and then appends data to the top of the list when the refresh is completed. In a real app, the data would be received and updated after sending a request via a network or database call.
 
-import Advanced from '@site/static/usage/refresher/advanced/index.md';
+import Advanced from '@site/static/usage/v7/refresher/advanced/index.md';
 
 <Advanced />
 
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index 59c5b97d1ea..1043f82b811 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -27,7 +27,7 @@ The reorder is the anchor used to drag and drop the items. Once the reorder is c
 
 The most basic example of a reorder is slotting it inside of an item. By default, the reorder functionality is disabled for a reorder group. It can be enabled by setting the `disabled` property on the reorder group to `false`. The reorder icon can then be used to drag and drop the items and reorder them.
 
-import Basic from '@site/static/usage/reorder/basic/index.md';
+import Basic from '@site/static/usage/v7/reorder/basic/index.md';
 
 <Basic />
 
@@ -36,7 +36,7 @@ import Basic from '@site/static/usage/reorder/basic/index.md';
 
 In some cases, it may be desired to have the option to toggle the reorder functionality. This can be done by making the `disabled` property reactive, based on a function or variable.
 
-import TogglingDisabled from '@site/static/usage/reorder/toggling-disabled/index.md';
+import TogglingDisabled from '@site/static/usage/v7/reorder/toggling-disabled/index.md';
 
 <TogglingDisabled />
 
@@ -45,7 +45,7 @@ import TogglingDisabled from '@site/static/usage/reorder/toggling-disabled/index
 
 The reorder component uses a reorder icon with three lines on iOS and two lines on Material Design. This can be customized by adding an [Icon](https://ionic.io/ionicons) component inside of the reorder with any of the available Ionicons.
 
-import CustomIcon from '@site/static/usage/reorder/custom-icon/index.md';
+import CustomIcon from '@site/static/usage/v7/reorder/custom-icon/index.md';
 
 <CustomIcon />
 
@@ -54,7 +54,7 @@ import CustomIcon from '@site/static/usage/reorder/custom-icon/index.md';
 
 Reorder can also be used as a wrapper around an item, making the item itself the anchor. Click anywhere on an item below and drag it to reorder the list.
 
-import Wrapper from '@site/static/usage/reorder/wrapper/index.md';
+import Wrapper from '@site/static/usage/v7/reorder/wrapper/index.md';
 
 <Wrapper />
 
@@ -65,7 +65,7 @@ When the `complete` method is called on the reorder group with no parameters, th
 
 In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.
 
-import UpdatingData from '@site/static/usage/reorder/updating-data/index.md';
+import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md';
 
 <UpdatingData />
 
@@ -74,7 +74,7 @@ import UpdatingData from '@site/static/usage/reorder/updating-data/index.md';
 
 Reorder requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
 
-import CustomScrollTarget from '@site/static/usage/reorder/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v7/reorder/custom-scroll-target/index.md';
 
 <CustomScrollTarget />
 
diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md
index 1d48afd5cc1..1861b13a117 100644
--- a/docs/api/ripple-effect.md
+++ b/docs/api/ripple-effect.md
@@ -25,7 +25,7 @@ It's important to set [relative positioning](https://developer.mozilla.org/en-US
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/ripple-effect/basic/index.md';
+import Basic from '@site/static/usage/v7/ripple-effect/basic/index.md';
 
 <Basic />
 
@@ -34,7 +34,7 @@ import Basic from '@site/static/usage/ripple-effect/basic/index.md';
 
 There are two types of ripple effects: `"bounded"` and `"unbounded"`. The default type, `"bounded"`, will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, set the type to `"unbounded"`.
 
-import Type from '@site/static/usage/ripple-effect/type/index.md';
+import Type from '@site/static/usage/v7/ripple-effect/type/index.md';
 
 <Type />
 
@@ -43,7 +43,7 @@ import Type from '@site/static/usage/ripple-effect/type/index.md';
 
 The ripple can be customized to a different color through CSS. By default the ripple color is set to inherit the text color, which is generally the body color. This can be changed by setting the CSS `color` on the parent or the ripple effect itself.
 
-import Customizing from '@site/static/usage/ripple-effect/customizing/index.md';
+import Customizing from '@site/static/usage/v7/ripple-effect/customizing/index.md';
 
 <Customizing />
 
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index ce61c62adca..c11c14c4c74 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -22,7 +22,7 @@ Searchbars represent a text field that can be used to search through a collectio
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/searchbar/basic/index.md';
+import Basic from '@site/static/usage/v7/searchbar/basic/index.md';
 
 <Basic />
 
@@ -31,7 +31,7 @@ import Basic from '@site/static/usage/searchbar/basic/index.md';
 
 A search icon is displayed to the left of the input field in a searchbar. It can be customized to any [Ionicon](https://ionic.io/ionicons/).
 
-import SearchIcon from '@site/static/usage/searchbar/search-icon/index.md';
+import SearchIcon from '@site/static/usage/v7/searchbar/search-icon/index.md';
 
 <SearchIcon />
 
@@ -40,7 +40,7 @@ import SearchIcon from '@site/static/usage/searchbar/search-icon/index.md';
 
 A clear button is displayed when a searchbar has a value or upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. By default, the clear button is set to show when focusing the searchbar, but it can be set to always show or never show. The icon inside of the clear button can also be customized to any [Ionicon](https://ionic.io/ionicons/).
 
-import ClearButton from '@site/static/usage/searchbar/clear-button/index.md';
+import ClearButton from '@site/static/usage/v7/searchbar/clear-button/index.md';
 
 <ClearButton />
 
@@ -49,7 +49,7 @@ import ClearButton from '@site/static/usage/searchbar/clear-button/index.md';
 
 A cancel button can be enabled which will clear the input and lose the focus upon click. By default, cancel buttons are set to never show, but they can be set to always show or only show when focusing the searchbar. The cancel button is displayed as text in `ios` mode, and as an icon in `md` mode. Both the text and icon can be customized using different properties, with the icon accepting any [Ionicon](https://ionic.io/ionicons/).
 
-import CancelButton from '@site/static/usage/searchbar/cancel-button/index.md';
+import CancelButton from '@site/static/usage/v7/searchbar/cancel-button/index.md';
 
 <CancelButton />
 
@@ -59,7 +59,7 @@ import CancelButton from '@site/static/usage/searchbar/cancel-button/index.md';
 Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title.
 
 <!-- Reuse the playground from the Toolbar directory -->
-import Toolbar from '@site/static/usage/toolbar/searchbars/index.md';
+import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md';
 
 <Toolbar />
 
@@ -68,7 +68,7 @@ import Toolbar from '@site/static/usage/toolbar/searchbars/index.md';
 
 A debounce can be set on the searchbar in order to delay triggering the `ionChange` event. This is useful when querying data, as it can be used to wait to make a request instead of requesting the data each time a character is entered in the input.
 
-import Debounce from '@site/static/usage/searchbar/debounce/index.md';
+import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md';
 
 <Debounce />
 
@@ -77,7 +77,7 @@ import Debounce from '@site/static/usage/searchbar/debounce/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/searchbar/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/searchbar/theming/colors/index.md';
 
 <Colors />
 
@@ -85,7 +85,7 @@ import Colors from '@site/static/usage/searchbar/theming/colors/index.md';
 
 Searchbar uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-searchbar` for customization will not work, therefore we recommend adding a class and customizing it that way.
 
-import CSSProps from '@site/static/usage/searchbar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/searchbar/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md
index d7a77fc9f18..2567e2ecbeb 100644
--- a/docs/api/segment-button.md
+++ b/docs/api/segment-button.md
@@ -23,7 +23,7 @@ Segment buttons are groups of related buttons inside of a [segment](segment.md).
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/segment-button/basic/index.md';
+import Basic from '@site/static/usage/v7/segment-button/basic/index.md';
 
 <Basic />
 
@@ -32,7 +32,7 @@ import Basic from '@site/static/usage/segment-button/basic/index.md';
 
 The `layout` property is set to `"icon-top"` by default. When a segment button has both an icon and a label, it will display the icon on top of the label. This behavior can be changed by setting the `layout` property to `"icon-bottom"`, `"icon-start"`, or `"icon-end"` which will show the icon below the label, to the start of the label (left in LTR and right in RTL) or to the end of the label (right in LTR and left in RTL), respectively.
 
-import Layout from '@site/static/usage/segment-button/layout/index.md';
+import Layout from '@site/static/usage/v7/segment-button/layout/index.md';
 
 <Layout />
 
@@ -40,14 +40,14 @@ import Layout from '@site/static/usage/segment-button/layout/index.md';
 ## Theming
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/segment-button/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/segment-button/theming/css-shadow-parts/index.md';
 
 <CSSParts />
 
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/segment-button/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/segment-button/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/segment.md b/docs/api/segment.md
index 22193a99c25..0ff953288d5 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.md
@@ -27,7 +27,7 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
 
 Segments consist of [segment buttons](./segment-button) with a `value` property on each button. Set the `value` property on the segment to match the value of a button to select that button. Segments can also be disabled to prevent users from interacting with them.
 
-import Basic from '@site/static/usage/segment/basic/index.md';
+import Basic from '@site/static/usage/v7/segment/basic/index.md';
 
 <Basic />
 
@@ -36,7 +36,7 @@ import Basic from '@site/static/usage/segment/basic/index.md';
 
 Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the `scrollable` property to `true`. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width.
 
-import Scrollable from '@site/static/usage/segment/scrollable/index.md';
+import Scrollable from '@site/static/usage/v7/segment/scrollable/index.md';
 
 <Scrollable />
 
@@ -44,7 +44,7 @@ import Scrollable from '@site/static/usage/segment/scrollable/index.md';
 ## Segments in Toolbars
 
 <!-- Reuse the playground from the Toolbar directory -->
-import Toolbar from '@site/static/usage/toolbar/segments/index.md';
+import Toolbar from '@site/static/usage/v7/toolbar/segments/index.md';
 
 <Toolbar />
 
@@ -53,13 +53,13 @@ import Toolbar from '@site/static/usage/toolbar/segments/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/segment/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/segment/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/segment/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/segment/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/select.md b/docs/api/select.md
index 7760b1e11b9..b9f3446f7b7 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -28,7 +28,7 @@ If `value` is set on the `<ion-select>`, the selected option will be chosen base
 
 By default, the select allows the user to select only one option. The alert interface presents users with a radio button styled list of options. The select component's value receives the value of the selected option's value.
 
-import SingleSelectionExample from '@site/static/usage/select/basic/single-selection/index.md';
+import SingleSelectionExample from '@site/static/usage/v7/select/basic/single-selection/index.md';
 
 <SingleSelectionExample />
 
@@ -38,13 +38,13 @@ By default, select uses [ion-alert](alert.md) to open up the overlay of options
 
 ### Action Sheet
 
-import ActionSheetExample from '@site/static/usage/select/interfaces/action-sheet/index.md';
+import ActionSheetExample from '@site/static/usage/v7/select/interfaces/action-sheet/index.md';
 
 <ActionSheetExample />
 
 ### Popover
 
-import PopoverExample from '@site/static/usage/select/interfaces/popover/index.md';
+import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/index.md';
 
 <PopoverExample />
 
@@ -54,7 +54,7 @@ By adding the `multiple` attribute to select, users are able to select multiple
 
 Note: the `action-sheet` and `popover` interfaces will not work with multiple selection.
 
-import MulipleSelectionExample from '@site/static/usage/select/basic/multiple-selection/index.md';
+import MulipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
 
 <MulipleSelectionExample />
 
@@ -62,7 +62,7 @@ import MulipleSelectionExample from '@site/static/usage/select/basic/multiple-se
 
 The main ways of handling user interaction with the select are the `ionChange`, `ionDismiss`, and `ionCancel` events. See [Events](#events) for more details on these and other events that select fires.
 
-import RespondingToInteractionExample from '@site/static/usage/select/basic/responding-to-interaction/index.md';
+import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/responding-to-interaction/index.md';
 
 <RespondingToInteractionExample />
 
@@ -74,13 +74,13 @@ By default, the select uses object equality (`===`) to determine if an option is
 
 ### Using compareWith
 
-import UsingCompareWithExample from '@site/static/usage/select/objects-as-values/using-comparewith/index.md';
+import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-values/using-comparewith/index.md';
 
 <UsingCompareWithExample />
 
 ### Object Values and Multiple Selection
 
-import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/select/objects-as-values/multiple-selection/index.md';
+import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.md';
 
 <ObjectValuesAndMultipleSelectionExample />
 
@@ -90,7 +90,7 @@ The alert supports two buttons: `Cancel` and `OK`. Each button's text can be cus
 
 The `action-sheet` and `popover` interfaces do not have an `OK` button, clicking on any of the options will automatically close the overlay and select that value. The `popover` interface does not have a `Cancel` button, clicking on the backdrop will close the overlay.
 
-import ButtonTextExample from '@site/static/usage/select/customization/button-text/index.md';
+import ButtonTextExample from '@site/static/usage/v7/select/customization/button-text/index.md';
 
 <ButtonTextExample />
 
@@ -102,7 +102,7 @@ See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), an
 
 Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
 
-import InterfaceOptionsExample from '@site/static/usage/select/customization/interface-options/index.md';
+import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/interface-options/index.md';
 
 <InterfaceOptionsExample />
 
@@ -116,7 +116,7 @@ As mentioned, the `ion-select` element consists only of the value(s), or placeho
 
 Alternatively, depending on the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) needed, CSS shadow parts can be used to style the select. Notice that by using `::part`, any CSS property on the element can be targeted.
 
-import StylingSelectExample from '@site/static/usage/select/customization/styling-select/index.md';
+import StylingSelectExample from '@site/static/usage/v7/select/customization/styling-select/index.md';
 
 <StylingSelectExample />
 
diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md
index c4a2a49e316..7b627127105 100644
--- a/docs/api/skeleton-text.md
+++ b/docs/api/skeleton-text.md
@@ -23,7 +23,7 @@ Skeleton Text is a component for rendering placeholder content. The element will
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/skeleton-text/basic/index.md';
+import Basic from '@site/static/usage/v7/skeleton-text/basic/index.md';
 
 <Basic />
 
@@ -31,7 +31,7 @@ import Basic from '@site/static/usage/skeleton-text/basic/index.md';
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/skeleton-text/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/skeleton-text/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index 1439089e1d9..7d805fa697e 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -25,7 +25,7 @@ The Spinner component provides a variety of animated SVG spinners. Spinners are
 
 The default spinner is based on the mode. When the mode is `ios` the spinner will be `"lines"`, and when the mode is `md` the spinner will be `"circular"`. If the `name` property is set, then that spinner will be used instead of the mode specific spinner.
 
-import Basic from '@site/static/usage/spinner/basic/index.md';
+import Basic from '@site/static/usage/v7/spinner/basic/index.md';
 
 <Basic />
 
@@ -33,13 +33,13 @@ import Basic from '@site/static/usage/spinner/basic/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/spinner/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/spinner/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md
index 5c7955ac89e..87ffe6c1ae0 100644
--- a/docs/api/split-pane.md
+++ b/docs/api/split-pane.md
@@ -29,7 +29,7 @@ If the device's screen width is below a certain size, the split pane will collap
 This demo sets the `when` property to `'xs'` so the split pane always shows up. Your Ionic application does not need this if you want the split pane to collapse on smaller viewports. See [Setting Breakpoints](#setting-breakpoints) for more information. 
 :::
 
-import Basic from '@site/static/usage/split-pane/basic/index.md';
+import Basic from '@site/static/usage/v7/split-pane/basic/index.md';
 
 <Basic />
 
@@ -58,7 +58,7 @@ By default, the split pane will expand when the screen is larger than 992px. To
 
 ### CSS Custom Properties
 
-import CSSProperties from '@site/static/usage/split-pane/theming/css-properties/index.md';
+import CSSProperties from '@site/static/usage/v7/split-pane/theming/css-properties/index.md';
 
 <CSSProperties />
 
diff --git a/docs/api/text.md b/docs/api/text.md
index e52f85142fb..ea9db032f6c 100644
--- a/docs/api/text.md
+++ b/docs/api/text.md
@@ -21,7 +21,7 @@ The text component is a simple component that can be used to style the text colo
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/text/basic/index.md';
+import Basic from '@site/static/usage/v7/text/basic/index.md';
 
 <Basic />
 
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index a10897f1d40..52b1c2b4888 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -25,7 +25,7 @@ The textarea component accepts the [native textarea attributes](https://develope
 
 ## Basic Usage
 
-import BasicPlayground from '@site/static/usage/textarea/basic/index.md';
+import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md';
 
 <BasicPlayground />
 
@@ -33,7 +33,7 @@ import BasicPlayground from '@site/static/usage/textarea/basic/index.md';
 
 When the `autoGrow` property is set to `true`, the textarea will grow and shrink based on its contents.
 
-import AutogrowPlayground from '@site/static/usage/textarea/autogrow/index.md';
+import AutogrowPlayground from '@site/static/usage/v7/textarea/autogrow/index.md';
 
 <AutogrowPlayground />
 
@@ -41,13 +41,13 @@ import AutogrowPlayground from '@site/static/usage/textarea/autogrow/index.md';
 
 Setting the `clearOnEdit` property to `true` will clear the textarea after it has been blurred and then typed in again.
 
-import ClearOnEditPlayground from '@site/static/usage/textarea/clear-on-edit/index.md';
+import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/index.md';
 
 <ClearOnEditPlayground />
 
 ## Theming
 
-import ThemingPlayground from '@site/static/usage/textarea/theming/index.md';
+import ThemingPlayground from '@site/static/usage/v7/textarea/theming/index.md';
 
 <ThemingPlayground />
 
diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md
index 464712c8e6f..cf353200805 100644
--- a/docs/api/thumbnail.md
+++ b/docs/api/thumbnail.md
@@ -24,13 +24,13 @@ Thumbnails can be used by themselves or inside of any element. If placed inside
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/thumbnail/basic/index.md';
+import Basic from '@site/static/usage/v7/thumbnail/basic/index.md';
 
 <Basic />
 
 ## Item Thumbnails
 
-import Item from '@site/static/usage/thumbnail/item/index.md';
+import Item from '@site/static/usage/v7/thumbnail/item/index.md';
 
 <Item />
 
@@ -38,7 +38,7 @@ import Item from '@site/static/usage/thumbnail/item/index.md';
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/thumbnail/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/thumbnail/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docs/api/title.md b/docs/api/title.md
index b67f7dedb2a..4eb8eee4ac1 100644
--- a/docs/api/title.md
+++ b/docs/api/title.md
@@ -22,7 +22,7 @@ Title is a text component that sets the title for a [toolbar](./toolbar). It can
 
 ## Basic
 
-import Basic from '@site/static/usage/title/basic/index.md';
+import Basic from '@site/static/usage/v7/title/basic/index.md';
 
 <Basic />
 
@@ -36,7 +36,7 @@ This feature is only available for iOS.
 
 :::
 
-import CollapsibleLargeTitle from '@site/static/usage/title/collapsible-large-title/basic/index.md';
+import CollapsibleLargeTitle from '@site/static/usage/v7/title/collapsible-large-title/basic/index.md';
 
 <CollapsibleLargeTitle />
 
@@ -45,7 +45,7 @@ import CollapsibleLargeTitle from '@site/static/usage/title/collapsible-large-ti
 The [buttons](./buttons.md) component can be used with the [`collapse`](./buttons.md#collapse) property to additionally display in the header as the toolbar is collapsed.
 
 
-import CollapsibleLargeTitleButtons from '@site/static/usage/title/collapsible-large-title/buttons/index.md';
+import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md';
 
 <CollapsibleLargeTitleButtons />
 
@@ -61,7 +61,7 @@ When styling the text color of the large title, you should target the large titl
 
 ### CSS Custom Properties
 
-import CSSCustomProperties from '@site/static/usage/title/theming/css-properties/index.md';
+import CSSCustomProperties from '@site/static/usage/v7/title/theming/css-properties/index.md';
 
 <CSSCustomProperties />
 
diff --git a/docs/api/toast.md b/docs/api/toast.md
index 765f44664c0..028aa19411b 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -30,7 +30,7 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit
 
 ### Controller
 
-import ControllerExample from '@site/static/usage/toast/presenting/controller/index.md';
+import ControllerExample from '@site/static/usage/v7/toast/presenting/controller/index.md';
 
 <ControllerExample />
 
@@ -101,7 +101,7 @@ The toast can be dismissed automatically after a specific amount of time by pass
 
 The following example demonstrates how to use the `buttons` property to add a button that automatically dismisses the toast when clicked, as well as how to collect the `role` of the dismiss event.
 
-import ButtonsPlayground from '@site/static/usage/toast/buttons/index.md';
+import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
 
 <ButtonsPlayground />
 
@@ -109,13 +109,13 @@ import ButtonsPlayground from '@site/static/usage/toast/buttons/index.md';
 
 An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.
 
-import IconPlayground from '@site/static/usage/toast/icon/index.md';
+import IconPlayground from '@site/static/usage/v7/toast/icon/index.md';
 
 <IconPlayground />
 
 ## Theming
 
-import ThemingPlayground from '@site/static/usage/toast/theming/index.md';
+import ThemingPlayground from '@site/static/usage/v7/toast/theming/index.md';
 
 <ThemingPlayground />
 
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index d2a99a5e156..a7637d037c2 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -22,7 +22,7 @@ Toggles are switches that change the state of a single option. They can be switc
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/toggle/basic/index.md';
+import Basic from '@site/static/usage/v7/toggle/basic/index.md';
 
 <Basic />
 
@@ -31,7 +31,7 @@ import Basic from '@site/static/usage/toggle/basic/index.md';
 
 Toggles can enable on/off labels by setting the `enableOnOffLabels` property. This is important for accessibility as it makes it easier to differentiate between a checked and unchecked toggle.
 
-import OnOff from '@site/static/usage/toggle/on-off/index.md';
+import OnOff from '@site/static/usage/v7/toggle/on-off/index.md';
 
 <OnOff />
 
@@ -40,7 +40,7 @@ import OnOff from '@site/static/usage/toggle/on-off/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/toggle/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/toggle/theming/colors/index.md';
 
 <Colors />
 
@@ -48,7 +48,7 @@ import Colors from '@site/static/usage/toggle/theming/colors/index.md';
 
 CSS custom properties can be combined with standard CSS to target different parts of a toggle. We can modify the `width` and `height` of the toggle directly to change the size of the track, while using the `--handle-width` and `--handle-height` custom properties to customize the handle size.
 
-import CSSProps from '@site/static/usage/toggle/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index.md';
 
 <CSSProps />
 
@@ -56,7 +56,7 @@ import CSSProps from '@site/static/usage/toggle/theming/css-properties/index.md'
 
 We can further customize toggle by targeting specific shadow parts that are exposed. Any CSS property on these parts can be styled and they can also be combined with CSS custom properties.
 
-import CSSParts from '@site/static/usage/toggle/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/toggle/theming/css-shadow-parts/index.md';
 
 <CSSParts />
 
diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md
index 6403066cbfe..9db8ed00aa8 100644
--- a/docs/api/toolbar.md
+++ b/docs/api/toolbar.md
@@ -27,7 +27,7 @@ Toolbars can contain several different components including titles, buttons, ico
 
 It is recommended to put a toolbar inside of a [header](./header) or [footer](./footer) for proper positioning. When a toolbar is placed in a header it will appear fixed at the top of the content. When it is placed in a footer it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. A [title](./title) component can be used to display text inside of the toolbar.
 
-import Basic from '@site/static/usage/toolbar/basic/index.md';
+import Basic from '@site/static/usage/v7/toolbar/basic/index.md';
 
 <Basic />
 
@@ -38,7 +38,7 @@ Buttons placed in a toolbar should be placed inside of the [buttons](./buttons)
 
 The buttons component can wrap a standard [button](./button), [back button](./back-button), [menu button](./menu-button), or several of any of them. A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on back button and menu button in this example are for display purposes; see their respective documentation for proper usage.
 
-import Buttons from '@site/static/usage/toolbar/buttons/index.md';
+import Buttons from '@site/static/usage/v7/toolbar/buttons/index.md';
 
 <Buttons />
 
@@ -47,7 +47,7 @@ import Buttons from '@site/static/usage/toolbar/buttons/index.md';
 
 A [searchbar](./searchbar) can be placed inside of a toolbar to search through the content. It should be the only child component of the toolbar, and will take up the full width and height.
 
-import Searchbars from '@site/static/usage/toolbar/searchbars/index.md';
+import Searchbars from '@site/static/usage/v7/toolbar/searchbars/index.md';
 
 <Searchbars />
 
@@ -56,7 +56,7 @@ import Searchbars from '@site/static/usage/toolbar/searchbars/index.md';
 
 [Segments](./segment) are generally used in toolbars to toggle between two different content views on the same page. They can be placed in a toolbar with other components, such as buttons, but should not be placed alongside a title.
 
-import Segments from '@site/static/usage/toolbar/segments/index.md';
+import Segments from '@site/static/usage/v7/toolbar/segments/index.md';
 
 <Segments />
 
@@ -65,7 +65,7 @@ import Segments from '@site/static/usage/toolbar/segments/index.md';
 
 A [progress bar](./progress-bar) is used as a loading indicator to show an ongoing process in an app. Progress bars can be placed with any other components inside of a toolbar as they will align with the bottom of the toolbar.
 
-import ProgressBars from '@site/static/usage/toolbar/progress-bars/index.md';
+import ProgressBars from '@site/static/usage/v7/toolbar/progress-bars/index.md';
 
 <ProgressBars />
 
@@ -74,13 +74,13 @@ import ProgressBars from '@site/static/usage/toolbar/progress-bars/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/toolbar/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/toolbar/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/toolbar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/toolbar/theming/css-properties/index.md';
 
 <CSSProps />
 
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 4e94c18df89..baab1190048 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -282,7 +282,7 @@ module.exports = {
         lastVersion: 'current',
         versions: {
           current: {
-            label: 'v6',
+            label: 'v7',
             banner: 'none',
           },
         },
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index c41a7b0244c..441f0814a55 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -95,6 +95,11 @@ interface UsageTargetOptions {
      */
     declarations?: string[];
   };
+  /**
+   * The major version of Ionic to use in the generated Stackblitz examples.
+   * This will also load assets for Stackblitz from the specified version directory.
+   */
+  version?: number;
 }
 
 /**
@@ -114,6 +119,7 @@ export default function Playground({
   mode,
   devicePreview,
   includeIonContent = true,
+  version = 6,
 }: {
   code: { [key in UsageTarget]?: MdxContent | UsageTargetOptions };
   title?: string;
@@ -128,6 +134,7 @@ export default function Playground({
   description?: string;
   devicePreview?: boolean;
   includeIonContent: boolean;
+  version: number;
 }) {
   if (!code || Object.keys(code).length === 0) {
     console.warn('No code usage examples provided for this Playground example.');
@@ -168,8 +175,24 @@ export default function Playground({
       await Promise.all([waitForFrame(frameiOS.current), waitForFrame(frameMD.current)]);
 
       const message = { darkMode: isDarkTheme };
-      frameiOS.current.contentWindow.postMessage(message);
-      frameMD.current.contentWindow.postMessage(message);
+      /**
+       * When changing the versioned docs, the frame reference can be undefined
+       * after the waitForFrame promise resolves.
+       *
+       * We need to check for the iOS frame reference before posting the message.
+       */
+      if (frameiOS.current) {
+        frameiOS.current.contentWindow.postMessage(message);
+      }
+      /**
+       * When changing the versioned docs, the frame reference can be undefined
+       * after the waitForFrame promise resolves.
+       *
+       * We need to check for the MD frame reference before posting the message.
+       */
+      if (frameMD.current) {
+        frameMD.current.contentWindow.postMessage(message);
+      }
     }
   };
 
@@ -285,6 +308,7 @@ export default function Playground({
       description,
       includeIonContent,
       mode: isIOS ? 'ios' : 'md',
+      version,
     };
 
     let codeBlock;
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index db0833c73cb..0d86913bc7b 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -4,8 +4,6 @@ import sdk from '@stackblitz/sdk';
 const DEFAULT_EDITOR_TITLE = 'Ionic Docs Example';
 // The default description to use for Stackblitz examples (when not overwritten)
 const DEFAULT_EDITOR_DESCRIPTION = '';
-// Default package version to use for all @ionic/* packages.
-const DEFAULT_IONIC_VERSION = '^6.0.0';
 
 
 export interface EditorOptions {
@@ -37,19 +35,34 @@ export interface EditorOptions {
     imports: string[];
     declarations?: string[];
   };
+
+  version?: number;
+
 }
 
-const loadSourceFiles = async (files: string[]) => {
-  const sourceFiles = await Promise.all(files.map(f => fetch(`/docs/code/stackblitz/${f}`)));
+const loadSourceFiles = async (files: string[], version: number) => {
+  const versionDir = `v${version}`;
+  const sourceFiles = await Promise.all(files.map(f => fetch(`/docs/code/stackblitz/${versionDir}/${f}`)));
   return (await Promise.all(sourceFiles.map(res => res.text())));
 }
 
 const openHtmlEditor = async (code: string, options?: EditorOptions) => {
-  const [index_ts, index_html, variables_css] = await loadSourceFiles([
+  const [index_ts, index_html, variables_css, package_json] = await loadSourceFiles([
     'html/index.ts',
     options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
-    'html/variables.css'
-  ]);
+    'html/variables.css',
+    'html/package.json'
+  ], options.version);
+
+  let dependencies = {};
+  try {
+    dependencies = {
+      ...dependencies,
+      ...JSON.parse(package_json).dependencies
+    }
+  } catch (e) {
+    console.error('Failed to parse package.json contents', e);
+  }
 
   sdk.openProject({
     template: 'typescript',
@@ -61,14 +74,12 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
       'theme/variables.css': variables_css,
       ...options?.files
     },
-    dependencies: {
-      '@ionic/core': DEFAULT_IONIC_VERSION,
-    },
+    dependencies
   })
 }
 
 const openAngularEditor = async (code: string, options?: EditorOptions) => {
-  let [main_ts, app_module_ts, app_component_ts, app_component_css, app_component_html, example_component_ts, styles_css, global_css, variables_css, angular_json, tsconfig_json] = await loadSourceFiles([
+  let [main_ts, app_module_ts, app_component_ts, app_component_css, app_component_html, example_component_ts, styles_css, global_css, variables_css, angular_json, tsconfig_json, package_json] = await loadSourceFiles([
     'angular/main.ts',
     'angular/app.module.ts',
     'angular/app.component.ts',
@@ -79,8 +90,9 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     'angular/global.css',
     'angular/variables.css',
     'angular/angular.json',
-    'angular/tsconfig.json'
-  ])
+    'angular/tsconfig.json',
+    'angular/package.json'
+  ], options.version)
 
   if (options.angularModuleOptions) {
     if (options.angularModuleOptions.imports) {
@@ -93,6 +105,16 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
 
   app_module_ts = app_module_ts.replace('{{ MODE }}', options?.mode);
 
+  let dependencies = {};
+  try {
+    dependencies = {
+      ...dependencies,
+      ...JSON.parse(package_json).dependencies
+    }
+  } catch (e) {
+    console.error('Failed to parse package.json contents', e);
+  }
+
   sdk.openProject({
     template: 'angular-cli',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
@@ -115,17 +137,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
       'tsconfig.json': tsconfig_json,
       ...options?.files
     },
-    dependencies: {
-      '@ionic/angular': DEFAULT_IONIC_VERSION,
-      /**
-       * Stackblitz doesn't install the underlying `@ionic/core` package type declarations.
-       * This can lead to issues with extended type declarations, such as our proxies
-       * that extend the JSX component type.
-       *
-       * We manually install this dependency to avoid this issue in Stackblitz.
-       */
-      '@ionic/core': DEFAULT_IONIC_VERSION,
-    },
+    dependencies
   });
 }
 
@@ -137,8 +149,8 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     'react/tsconfig.json',
     'react/package.json',
     'react/package-lock.json',
-    'react/index.html'
-  ]);
+    'react/index.html',
+  ], options.version);
 
   app_tsx = app_tsx.replace('{{ MODE }}', options?.mode);
 
@@ -175,7 +187,7 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
     'vue/tsconfig.json',
     'vue/tsconfig.node.json',
     'vue/env.d.ts'
-  ]);
+  ], options.version);
 
   main_ts = main_ts.replace('{{ MODE }}', options?.mode);
 
diff --git a/static/code/stackblitz/angular/angular.json b/static/code/stackblitz/v6/angular/angular.json
similarity index 100%
rename from static/code/stackblitz/angular/angular.json
rename to static/code/stackblitz/v6/angular/angular.json
diff --git a/static/code/stackblitz/angular/app.component.css b/static/code/stackblitz/v6/angular/app.component.css
similarity index 100%
rename from static/code/stackblitz/angular/app.component.css
rename to static/code/stackblitz/v6/angular/app.component.css
diff --git a/static/code/stackblitz/angular/app.component.html b/static/code/stackblitz/v6/angular/app.component.html
similarity index 100%
rename from static/code/stackblitz/angular/app.component.html
rename to static/code/stackblitz/v6/angular/app.component.html
diff --git a/static/code/stackblitz/angular/app.component.ts b/static/code/stackblitz/v6/angular/app.component.ts
similarity index 100%
rename from static/code/stackblitz/angular/app.component.ts
rename to static/code/stackblitz/v6/angular/app.component.ts
diff --git a/static/code/stackblitz/angular/app.component.withContent.html b/static/code/stackblitz/v6/angular/app.component.withContent.html
similarity index 100%
rename from static/code/stackblitz/angular/app.component.withContent.html
rename to static/code/stackblitz/v6/angular/app.component.withContent.html
diff --git a/static/code/stackblitz/angular/app.module.ts b/static/code/stackblitz/v6/angular/app.module.ts
similarity index 100%
rename from static/code/stackblitz/angular/app.module.ts
rename to static/code/stackblitz/v6/angular/app.module.ts
diff --git a/static/code/stackblitz/angular/example.component.ts b/static/code/stackblitz/v6/angular/example.component.ts
similarity index 100%
rename from static/code/stackblitz/angular/example.component.ts
rename to static/code/stackblitz/v6/angular/example.component.ts
diff --git a/static/code/stackblitz/angular/global.css b/static/code/stackblitz/v6/angular/global.css
similarity index 100%
rename from static/code/stackblitz/angular/global.css
rename to static/code/stackblitz/v6/angular/global.css
diff --git a/static/code/stackblitz/angular/main.ts b/static/code/stackblitz/v6/angular/main.ts
similarity index 100%
rename from static/code/stackblitz/angular/main.ts
rename to static/code/stackblitz/v6/angular/main.ts
diff --git a/static/code/stackblitz/v6/angular/package.json b/static/code/stackblitz/v6/angular/package.json
new file mode 100644
index 00000000000..6e850f6f48e
--- /dev/null
+++ b/static/code/stackblitz/v6/angular/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@ionic/angular": "^6.0.0",
+    "@ionic/core": "^6.0.0"
+  }
+}
diff --git a/static/code/stackblitz/angular/styles.css b/static/code/stackblitz/v6/angular/styles.css
similarity index 100%
rename from static/code/stackblitz/angular/styles.css
rename to static/code/stackblitz/v6/angular/styles.css
diff --git a/static/code/stackblitz/angular/tsconfig.json b/static/code/stackblitz/v6/angular/tsconfig.json
similarity index 100%
rename from static/code/stackblitz/angular/tsconfig.json
rename to static/code/stackblitz/v6/angular/tsconfig.json
diff --git a/static/code/stackblitz/angular/variables.css b/static/code/stackblitz/v6/angular/variables.css
similarity index 100%
rename from static/code/stackblitz/angular/variables.css
rename to static/code/stackblitz/v6/angular/variables.css
diff --git a/static/code/stackblitz/html/index.html b/static/code/stackblitz/v6/html/index.html
similarity index 100%
rename from static/code/stackblitz/html/index.html
rename to static/code/stackblitz/v6/html/index.html
diff --git a/static/code/stackblitz/html/index.ts b/static/code/stackblitz/v6/html/index.ts
similarity index 100%
rename from static/code/stackblitz/html/index.ts
rename to static/code/stackblitz/v6/html/index.ts
diff --git a/static/code/stackblitz/html/index.withContent.html b/static/code/stackblitz/v6/html/index.withContent.html
similarity index 100%
rename from static/code/stackblitz/html/index.withContent.html
rename to static/code/stackblitz/v6/html/index.withContent.html
diff --git a/static/code/stackblitz/v6/html/package.json b/static/code/stackblitz/v6/html/package.json
new file mode 100644
index 00000000000..b6dbee21fd0
--- /dev/null
+++ b/static/code/stackblitz/v6/html/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@ionic/core": "^6.0.0"
+  }
+}
diff --git a/static/code/stackblitz/html/variables.css b/static/code/stackblitz/v6/html/variables.css
similarity index 100%
rename from static/code/stackblitz/html/variables.css
rename to static/code/stackblitz/v6/html/variables.css
diff --git a/static/code/stackblitz/react/app.tsx b/static/code/stackblitz/v6/react/app.tsx
similarity index 100%
rename from static/code/stackblitz/react/app.tsx
rename to static/code/stackblitz/v6/react/app.tsx
diff --git a/static/code/stackblitz/react/app.withContent.tsx b/static/code/stackblitz/v6/react/app.withContent.tsx
similarity index 100%
rename from static/code/stackblitz/react/app.withContent.tsx
rename to static/code/stackblitz/v6/react/app.withContent.tsx
diff --git a/static/code/stackblitz/react/index.html b/static/code/stackblitz/v6/react/index.html
similarity index 100%
rename from static/code/stackblitz/react/index.html
rename to static/code/stackblitz/v6/react/index.html
diff --git a/static/code/stackblitz/react/index.tsx b/static/code/stackblitz/v6/react/index.tsx
similarity index 100%
rename from static/code/stackblitz/react/index.tsx
rename to static/code/stackblitz/v6/react/index.tsx
diff --git a/static/code/stackblitz/react/package-lock.json b/static/code/stackblitz/v6/react/package-lock.json
similarity index 100%
rename from static/code/stackblitz/react/package-lock.json
rename to static/code/stackblitz/v6/react/package-lock.json
diff --git a/static/code/stackblitz/react/package.json b/static/code/stackblitz/v6/react/package.json
similarity index 100%
rename from static/code/stackblitz/react/package.json
rename to static/code/stackblitz/v6/react/package.json
diff --git a/static/code/stackblitz/react/tsconfig.json b/static/code/stackblitz/v6/react/tsconfig.json
similarity index 100%
rename from static/code/stackblitz/react/tsconfig.json
rename to static/code/stackblitz/v6/react/tsconfig.json
diff --git a/static/code/stackblitz/react/variables.css b/static/code/stackblitz/v6/react/variables.css
similarity index 100%
rename from static/code/stackblitz/react/variables.css
rename to static/code/stackblitz/v6/react/variables.css
diff --git a/static/code/stackblitz/vue/App.vue b/static/code/stackblitz/v6/vue/App.vue
similarity index 100%
rename from static/code/stackblitz/vue/App.vue
rename to static/code/stackblitz/v6/vue/App.vue
diff --git a/static/code/stackblitz/vue/App.withContent.vue b/static/code/stackblitz/v6/vue/App.withContent.vue
similarity index 100%
rename from static/code/stackblitz/vue/App.withContent.vue
rename to static/code/stackblitz/v6/vue/App.withContent.vue
diff --git a/static/code/stackblitz/vue/env.d.ts b/static/code/stackblitz/v6/vue/env.d.ts
similarity index 100%
rename from static/code/stackblitz/vue/env.d.ts
rename to static/code/stackblitz/v6/vue/env.d.ts
diff --git a/static/code/stackblitz/vue/index.html b/static/code/stackblitz/v6/vue/index.html
similarity index 100%
rename from static/code/stackblitz/vue/index.html
rename to static/code/stackblitz/v6/vue/index.html
diff --git a/static/code/stackblitz/vue/main.ts b/static/code/stackblitz/v6/vue/main.ts
similarity index 100%
rename from static/code/stackblitz/vue/main.ts
rename to static/code/stackblitz/v6/vue/main.ts
diff --git a/static/code/stackblitz/vue/package-lock.json b/static/code/stackblitz/v6/vue/package-lock.json
similarity index 100%
rename from static/code/stackblitz/vue/package-lock.json
rename to static/code/stackblitz/v6/vue/package-lock.json
diff --git a/static/code/stackblitz/vue/package.json b/static/code/stackblitz/v6/vue/package.json
similarity index 100%
rename from static/code/stackblitz/vue/package.json
rename to static/code/stackblitz/v6/vue/package.json
diff --git a/static/code/stackblitz/vue/tsconfig.json b/static/code/stackblitz/v6/vue/tsconfig.json
similarity index 100%
rename from static/code/stackblitz/vue/tsconfig.json
rename to static/code/stackblitz/v6/vue/tsconfig.json
diff --git a/static/code/stackblitz/vue/tsconfig.node.json b/static/code/stackblitz/v6/vue/tsconfig.node.json
similarity index 100%
rename from static/code/stackblitz/vue/tsconfig.node.json
rename to static/code/stackblitz/v6/vue/tsconfig.node.json
diff --git a/static/code/stackblitz/vue/variables.css b/static/code/stackblitz/v6/vue/variables.css
similarity index 100%
rename from static/code/stackblitz/vue/variables.css
rename to static/code/stackblitz/v6/vue/variables.css
diff --git a/static/code/stackblitz/vue/vite.config.ts b/static/code/stackblitz/v6/vue/vite.config.ts
similarity index 100%
rename from static/code/stackblitz/vue/vite.config.ts
rename to static/code/stackblitz/v6/vue/vite.config.ts
diff --git a/static/code/stackblitz/v7/angular/angular.json b/static/code/stackblitz/v7/angular/angular.json
new file mode 100644
index 00000000000..811624f69b5
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/angular.json
@@ -0,0 +1,118 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "app": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "app:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "app:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "app:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": ["src/styles.css"],
+            "scripts": [],
+            "assets": ["src/favicon.ico", "src/assets"]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "app-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "prefix": "",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "app:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "app:serve:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "app"
+}
diff --git a/static/code/stackblitz/v7/angular/app.component.css b/static/code/stackblitz/v7/angular/app.component.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/code/stackblitz/v7/angular/app.component.html b/static/code/stackblitz/v7/angular/app.component.html
new file mode 100644
index 00000000000..1031647a0e0
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/app.component.html
@@ -0,0 +1,3 @@
+<ion-app>
+  <app-example class="ion-page"></app-example>
+</ion-app>
diff --git a/static/code/stackblitz/v7/angular/app.component.ts b/static/code/stackblitz/v7/angular/app.component.ts
new file mode 100644
index 00000000000..ed440084f8f
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/app.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent { }
diff --git a/static/code/stackblitz/v7/angular/app.component.withContent.html b/static/code/stackblitz/v7/angular/app.component.withContent.html
new file mode 100644
index 00000000000..96ebf597215
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/app.component.withContent.html
@@ -0,0 +1,5 @@
+<ion-app>
+  <ion-content class="ion-padding">
+    <app-example></app-example>
+  </ion-content>
+</ion-app>
diff --git a/static/code/stackblitz/v7/angular/app.module.ts b/static/code/stackblitz/v7/angular/app.module.ts
new file mode 100644
index 00000000000..dcee64f417e
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({
+    mode: '{{ MODE }}'
+  })],
+  declarations: [AppComponent, ExampleComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }
diff --git a/static/code/stackblitz/v7/angular/example.component.ts b/static/code/stackblitz/v7/angular/example.component.ts
new file mode 100644
index 00000000000..6b67261e0b3
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/example.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css']
+})
+export class ExampleComponent { }
diff --git a/static/code/stackblitz/v7/angular/global.css b/static/code/stackblitz/v7/angular/global.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/code/stackblitz/v7/angular/main.ts b/static/code/stackblitz/v7/angular/main.ts
new file mode 100644
index 00000000000..518110491b2
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/main.ts
@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err: any) => console.error(err));
diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json
new file mode 100644
index 00000000000..94a8cb512bc
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@ionic/angular": "6.3.10-dev.11670298302.15d4a0a5",
+    "@ionic/core": "6.3.10-dev.11670298302.15d4a0a5"
+  }
+}
diff --git a/static/code/stackblitz/v7/angular/styles.css b/static/code/stackblitz/v7/angular/styles.css
new file mode 100644
index 00000000000..463c50148fb
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/styles.css
@@ -0,0 +1,26 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import "~@ionic/angular/css/core.css";
+
+/* Basic CSS for apps built with Ionic */
+@import "~@ionic/angular/css/normalize.css";
+@import "~@ionic/angular/css/structure.css";
+@import "~@ionic/angular/css/typography.css";
+
+/* Optional CSS utils that can be commented out */
+@import "~@ionic/angular/css/padding.css";
+@import "~@ionic/angular/css/float-elements.css";
+@import "~@ionic/angular/css/text-alignment.css";
+@import "~@ionic/angular/css/text-transformation.css";
+@import "~@ionic/angular/css/flex-utils.css";
+@import "~@ionic/angular/css/display.css";
diff --git a/static/code/stackblitz/v7/angular/tsconfig.json b/static/code/stackblitz/v7/angular/tsconfig.json
new file mode 100644
index 00000000000..129cb6a3887
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2018", "dom"]
+  },
+  "angularCompilerOptions": {
+    "enableIvy": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}
diff --git a/static/code/stackblitz/v7/angular/variables.css b/static/code/stackblitz/v7/angular/variables.css
new file mode 100644
index 00000000000..a44fcdd01d7
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/variables.css
@@ -0,0 +1,236 @@
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #3880ff;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3171e0;
+  --ion-color-primary-tint: #4c8dff;
+
+  /** secondary **/
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  /** tertiary **/
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  /** success **/
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
+
+@media (prefers-color-scheme: dark) {
+  /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+  body {
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66,140,255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255,255,255;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
+
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80,200,255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255,255,255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106,100,255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255,255,255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47,223,117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0,0,0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255,213,52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0,0,0;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
+
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255,73,97;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255,255,255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244,245,248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0,0,0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152,154,162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0,0,0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34,36,40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255,255,255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+  }
+
+  /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+  .ios body {
+    --ion-background-color: #000000;
+    --ion-background-color-rgb: 0,0,0;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-150: #262626;
+    --ion-color-step-200: #333333;
+    --ion-color-step-250: #404040;
+    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-350: #595959;
+    --ion-color-step-400: #666666;
+    --ion-color-step-450: #737373;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-600: #999999;
+    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-800: #cccccc;
+    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-950: #f2f2f2;
+
+    --ion-item-background: #000000;
+
+    --ion-card-background: #1c1c1d;
+  }
+
+  .ios ion-modal {
+    --ion-background-color: var(--ion-color-step-100);
+    --ion-toolbar-background: var(--ion-color-step-150);
+    --ion-toolbar-border-color: var(--ion-color-step-250);
+  }
+
+
+  /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+  .md body {
+    --ion-background-color: #121212;
+    --ion-background-color-rgb: 18,18,18;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-border-color: #222222;
+
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
+
+    --ion-item-background: #1e1e1e;
+
+    --ion-toolbar-background: #1f1f1f;
+
+    --ion-tab-bar-background: #1f1f1f;
+
+    --ion-card-background: #1e1e1e;
+  }
+}
diff --git a/static/code/stackblitz/v7/html/index.html b/static/code/stackblitz/v7/html/index.html
new file mode 100644
index 00000000000..1ba72a98949
--- /dev/null
+++ b/static/code/stackblitz/v7/html/index.html
@@ -0,0 +1,22 @@
+<html>
+
+<head>
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/core.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/ionic.bundle.css" />
+
+  <script>
+    window.Ionic = {
+      config: {
+        mode: '{{ MODE }}'
+      }
+    }
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    {{ TEMPLATE }}
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/code/stackblitz/v7/html/index.ts b/static/code/stackblitz/v7/html/index.ts
new file mode 100644
index 00000000000..952785602e6
--- /dev/null
+++ b/static/code/stackblitz/v7/html/index.ts
@@ -0,0 +1,29 @@
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { loadingController, modalController, pickerController, toastController } from '@ionic/core';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+defineCustomElements();
+
+(window as any).loadingController = loadingController;
+(window as any).modalController = modalController;
+(window as any).pickerController = pickerController;
+(window as any).toastController = toastController;
diff --git a/static/code/stackblitz/v7/html/index.withContent.html b/static/code/stackblitz/v7/html/index.withContent.html
new file mode 100644
index 00000000000..c13b3063615
--- /dev/null
+++ b/static/code/stackblitz/v7/html/index.withContent.html
@@ -0,0 +1,24 @@
+<html>
+
+<head>
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/core.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/ionic.bundle.css" />
+
+  <script>
+    window.Ionic = {
+      config: {
+        mode: '{{ MODE }}'
+      }
+    }
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      {{ TEMPLATE }}
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/code/stackblitz/v7/html/package.json b/static/code/stackblitz/v7/html/package.json
new file mode 100644
index 00000000000..7f0a750e848
--- /dev/null
+++ b/static/code/stackblitz/v7/html/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@ionic/core": "6.3.10-dev.11670298302.15d4a0a5"
+  }
+}
diff --git a/static/code/stackblitz/v7/html/variables.css b/static/code/stackblitz/v7/html/variables.css
new file mode 100644
index 00000000000..a44fcdd01d7
--- /dev/null
+++ b/static/code/stackblitz/v7/html/variables.css
@@ -0,0 +1,236 @@
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #3880ff;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3171e0;
+  --ion-color-primary-tint: #4c8dff;
+
+  /** secondary **/
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  /** tertiary **/
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  /** success **/
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
+
+@media (prefers-color-scheme: dark) {
+  /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+  body {
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66,140,255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255,255,255;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
+
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80,200,255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255,255,255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106,100,255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255,255,255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47,223,117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0,0,0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255,213,52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0,0,0;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
+
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255,73,97;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255,255,255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244,245,248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0,0,0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152,154,162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0,0,0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34,36,40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255,255,255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+  }
+
+  /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+  .ios body {
+    --ion-background-color: #000000;
+    --ion-background-color-rgb: 0,0,0;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-150: #262626;
+    --ion-color-step-200: #333333;
+    --ion-color-step-250: #404040;
+    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-350: #595959;
+    --ion-color-step-400: #666666;
+    --ion-color-step-450: #737373;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-600: #999999;
+    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-800: #cccccc;
+    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-950: #f2f2f2;
+
+    --ion-item-background: #000000;
+
+    --ion-card-background: #1c1c1d;
+  }
+
+  .ios ion-modal {
+    --ion-background-color: var(--ion-color-step-100);
+    --ion-toolbar-background: var(--ion-color-step-150);
+    --ion-toolbar-border-color: var(--ion-color-step-250);
+  }
+
+
+  /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+  .md body {
+    --ion-background-color: #121212;
+    --ion-background-color-rgb: 18,18,18;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-border-color: #222222;
+
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
+
+    --ion-item-background: #1e1e1e;
+
+    --ion-toolbar-background: #1f1f1f;
+
+    --ion-tab-bar-background: #1f1f1f;
+
+    --ion-card-background: #1e1e1e;
+  }
+}
diff --git a/static/code/stackblitz/v7/react/app.tsx b/static/code/stackblitz/v7/react/app.tsx
new file mode 100644
index 00000000000..17430586f74
--- /dev/null
+++ b/static/code/stackblitz/v7/react/app.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { setupIonicReact, IonApp } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+import Example from './main';
+
+setupIonicReact({
+  mode: '{{ MODE }}',
+});
+
+export default function App() {
+  return (
+    <IonApp>
+      <Example />
+    </IonApp>
+  );
+}
diff --git a/static/code/stackblitz/v7/react/app.withContent.tsx b/static/code/stackblitz/v7/react/app.withContent.tsx
new file mode 100644
index 00000000000..e1f307d03cd
--- /dev/null
+++ b/static/code/stackblitz/v7/react/app.withContent.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { setupIonicReact, IonApp, IonContent } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+import Example from './main';
+
+setupIonicReact({
+  mode: '{{ MODE }}',
+});
+
+export default function App() {
+  return (
+    <IonApp>
+      <IonContent className="ion-padding">
+        <Example />
+      </IonContent>
+    </IonApp>
+  );
+}
diff --git a/static/code/stackblitz/v7/react/index.html b/static/code/stackblitz/v7/react/index.html
new file mode 100644
index 00000000000..9e7c016fc6a
--- /dev/null
+++ b/static/code/stackblitz/v7/react/index.html
@@ -0,0 +1,3 @@
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<div id="root"></div>
diff --git a/static/code/stackblitz/v7/react/index.tsx b/static/code/stackblitz/v7/react/index.tsx
new file mode 100644
index 00000000000..c58a899f793
--- /dev/null
+++ b/static/code/stackblitz/v7/react/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+const root = createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/static/code/stackblitz/v7/react/package-lock.json b/static/code/stackblitz/v7/react/package-lock.json
new file mode 100644
index 00000000000..5dde9f664f2
--- /dev/null
+++ b/static/code/stackblitz/v7/react/package-lock.json
@@ -0,0 +1,27809 @@
+{
+  "name": "create-react-app-typescript",
+  "version": "0.1.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "create-react-app-typescript",
+      "version": "0.1.0",
+      "dependencies": {
+        "@ionic/react": "^6.3.2",
+        "@types/node": "^16.11.35",
+        "@types/react": "^18.0.9",
+        "@types/react-dom": "^18.0.4",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0",
+        "react-scripts": "5.0.1",
+        "typescript": "^4.6.4",
+        "web-vitals": "^2.1.4"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
+      "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.1.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@apideck/better-ajv-errors": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
+      "integrity": "sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==",
+      "dependencies": {
+        "json-schema": "^0.4.0",
+        "jsonpointer": "^5.0.0",
+        "leven": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "ajv": ">=8"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
+      "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
+      "dependencies": {
+        "@babel/highlight": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.8.tgz",
+      "integrity": "sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.9.tgz",
+      "integrity": "sha512-1LIb1eL8APMy91/IMW+31ckrfBM4yCoLaVzoDhZUKSM4cu1L1nIidyxkCgzPAgrC5WEz36IPEr/eSeSF9pIn+g==",
+      "dependencies": {
+        "@ampproject/remapping": "^2.1.0",
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.18.9",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-module-transforms": "^7.18.9",
+        "@babel/helpers": "^7.18.9",
+        "@babel/parser": "^7.18.9",
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.1",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/eslint-parser": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz",
+      "integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==",
+      "dependencies": {
+        "eslint-scope": "^5.1.1",
+        "eslint-visitor-keys": "^2.1.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.11.0",
+        "eslint": "^7.5.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@babel/eslint-parser/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@babel/eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@babel/eslint-parser/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/@babel/eslint-parser/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.9.tgz",
+      "integrity": "sha512-wt5Naw6lJrL1/SGkipMiFxJjtyczUWTP38deiP1PO60HsBjDeKk08CGC3S8iVuvf0FmTdgKwU1KIXzSKL1G0Ug==",
+      "dependencies": {
+        "@babel/types": "^7.18.9",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
+      "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz",
+      "integrity": "sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==",
+      "dependencies": {
+        "@babel/helper-explode-assignable-expression": "^7.18.6",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz",
+      "integrity": "sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==",
+      "dependencies": {
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-validator-option": "^7.18.6",
+        "browserslist": "^4.20.2",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.9.tgz",
+      "integrity": "sha512-WvypNAYaVh23QcjpMR24CwZY2Nz6hqdOcFdPbNpV56hL5H6KiFheO7Xm1aPdlLQ7d5emYZX7VZwPp9x3z+2opw==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-split-export-declaration": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.18.6.tgz",
+      "integrity": "sha512-7LcpH1wnQLGrI+4v+nPp+zUvIkF9x0ddv1Hkdue10tg3gmRnLy97DXh4STiOf1qeIInyD69Qv5kKSZzKD8B/7A==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "regexpu-core": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.2.tgz",
+      "integrity": "sha512-r9QJJ+uDWrd+94BSPcP6/de67ygLtvVy6cK4luE6MOuDsZIdoaPBnfSpbO/+LTifjPckbKXRuI9BB/Z2/y3iTg==",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.17.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0-0"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
+      "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-explode-assignable-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz",
+      "integrity": "sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz",
+      "integrity": "sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==",
+      "dependencies": {
+        "@babel/template": "^7.18.6",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
+      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz",
+      "integrity": "sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==",
+      "dependencies": {
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+      "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz",
+      "integrity": "sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-simple-access": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
+      "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz",
+      "integrity": "sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz",
+      "integrity": "sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-wrap-function": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.18.9.tgz",
+      "integrity": "sha512-dNsWibVI4lNT6HiuOIBr1oyxo40HvIVmbwPUm3XZ7wMh4k2WxrxTqZwSqw/eEmXDS9np0ey5M2bz9tBmO9c+YQ==",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz",
+      "integrity": "sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.9.tgz",
+      "integrity": "sha512-imytd2gHi3cJPsybLRbmFrF7u5BIEuI2cNheyKi3/iOBC63kNn3q8Crn2xVuESli0aM4KYsyEqKyS7lFL8YVtw==",
+      "dependencies": {
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
+      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz",
+      "integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz",
+      "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.18.9.tgz",
+      "integrity": "sha512-cG2ru3TRAL6a60tfQflpEfs4ldiPwF6YW3zfJiRgmoFVIaC1vGnBBgatfec+ZUziPHkHSaXAuEck3Cdkf3eRpQ==",
+      "dependencies": {
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.9.tgz",
+      "integrity": "sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==",
+      "dependencies": {
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
+      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz",
+      "integrity": "sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz",
+      "integrity": "sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
+        "@babel/plugin-proposal-optional-chaining": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.6.tgz",
+      "integrity": "sha512-WAz4R9bvozx4qwf74M+sfqPMKfSqwM0phxPTR6iJIi8robgzXwkEgmeJG1gEKhm6sDqT/U9aV3lfcqybIpev8w==",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-remap-async-to-generator": "^7.18.6",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-class-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
+      "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-class-static-block": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz",
+      "integrity": "sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-decorators": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.18.9.tgz",
+      "integrity": "sha512-KD7zDNaD14CRpjQjVbV4EnH9lsKYlcpUrhZH37ei2IY+AlXrfAPy5pTmRUE4X6X1k8EsKXPraykxeaogqQvSGA==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/plugin-syntax-decorators": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-dynamic-import": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz",
+      "integrity": "sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz",
+      "integrity": "sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-json-strings": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz",
+      "integrity": "sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz",
+      "integrity": "sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz",
+      "integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-numeric-separator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz",
+      "integrity": "sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.9.tgz",
+      "integrity": "sha512-kDDHQ5rflIeY5xl69CEqGEZ0KY369ehsCIEbTGb4siHG5BE9sga/T0r0OUwyZNLMmZE79E1kbsqAjwFCW4ds6Q==",
+      "dependencies": {
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.18.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz",
+      "integrity": "sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-optional-chaining": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz",
+      "integrity": "sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-methods": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
+      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz",
+      "integrity": "sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
+      "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-bigint": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
+      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-decorators": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.18.6.tgz",
+      "integrity": "sha512-fqyLgjcxf/1yhyZ6A+yo1u9gJ7eleFQod2lkaUsF9DQ7sbbY3Ligym3L0+I2c0WmqNKDpoD9UTb1AKP3qRMOAQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-flow": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.18.6.tgz",
+      "integrity": "sha512-LUbR+KNTBWCUAqRG9ex5Gnzu2IOkt8jRJbHHXFT9q+L9zm7M/QQbEqXyw1n1pohYvOyWC8CjeyjrSaIwiYjK7A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-assertions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.18.6.tgz",
+      "integrity": "sha512-/DU3RXad9+bZwrgWJQKbr39gYbJpLJHezqEzRzi/BHRlJ9zsQb4CK2CA/5apllXNomwA1qHwzvHl+AdEmC5krQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz",
+      "integrity": "sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.18.6.tgz",
+      "integrity": "sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz",
+      "integrity": "sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz",
+      "integrity": "sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-remap-async-to-generator": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz",
+      "integrity": "sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.9.tgz",
+      "integrity": "sha512-5sDIJRV1KtQVEbt/EIBwGy4T01uYIo4KRB3VUqzkhrAIOGx7AoctL9+Ux88btY0zXdDyPJ9mW+bg+v+XEkGmtw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.9.tgz",
+      "integrity": "sha512-EkRQxsxoytpTlKJmSPYrsOMjCILacAjtSVkd4gChEe2kXjFCun3yohhW5I7plXJhCemM0gKsaGMcO8tinvCA5g==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz",
+      "integrity": "sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.9.tgz",
+      "integrity": "sha512-p5VCYNddPLkZTq4XymQIaIfZNJwT9YsjkPOhkVEqt6QIpQFZVM9IltqqYpOEkJoN1DPznmxUDyZ5CTZs/ZCuHA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz",
+      "integrity": "sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz",
+      "integrity": "sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz",
+      "integrity": "sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==",
+      "dependencies": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-flow-strip-types": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.18.9.tgz",
+      "integrity": "sha512-+G6rp2zRuOAInY5wcggsx4+QVao1qPM0osC9fTUVlAV3zOrzTCnrMAFVnR6+a3T8wz1wFIH7KhYMcMB3u1n80A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-flow": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz",
+      "integrity": "sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz",
+      "integrity": "sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz",
+      "integrity": "sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz",
+      "integrity": "sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.18.6.tgz",
+      "integrity": "sha512-Pra5aXsmTsOnjM3IajS8rTaLCy++nGM4v3YR4esk5PCsyg9z8NA5oQLwxzMUtDBd8F+UmVza3VxoAaWCbzH1rg==",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.6.tgz",
+      "integrity": "sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q==",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-simple-access": "^7.18.6",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.9.tgz",
+      "integrity": "sha512-zY/VSIbbqtoRoJKo2cDTewL364jSlZGvn0LKOf9ntbfxOvjfmyrdtEEOAdswOswhZEb8UH3jDkCKHd1sPgsS0A==",
+      "dependencies": {
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-module-transforms": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz",
+      "integrity": "sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.18.6.tgz",
+      "integrity": "sha512-UmEOGF8XgaIqD74bC8g7iV3RYj8lMf0Bw7NJzvnS9qQhM4mg+1WHKotUIdjxgD2RGrgFLZZPCFPFj3P/kVDYhg==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz",
+      "integrity": "sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
+      "integrity": "sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.18.8.tgz",
+      "integrity": "sha512-ivfbE3X2Ss+Fj8nnXvKJS6sjRG4gzwPMsP+taZC+ZzEGjAYlvENixmt1sZ5Ca6tWls+BlKSGKPJ6OOXvXCbkFg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz",
+      "integrity": "sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-constant-elements": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.18.9.tgz",
+      "integrity": "sha512-IrTYh1I3YCEL1trjknnlLKTp5JggjzhKl/d3ibzPc97JhpFcDTr38Jdek/oX4cFbS6By0bXJcOkpRvJ5ZHK2wQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-display-name": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz",
+      "integrity": "sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.18.6.tgz",
+      "integrity": "sha512-Mz7xMPxoy9kPS/JScj6fJs03TZ/fZ1dJPlMjRAgTaxaS0fUBk8FV/A2rRgfPsVCZqALNwMexD+0Uaf5zlcKPpw==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-jsx": "^7.18.6",
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-development": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz",
+      "integrity": "sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==",
+      "dependencies": {
+        "@babel/plugin-transform-react-jsx": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz",
+      "integrity": "sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz",
+      "integrity": "sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "regenerator-transform": "^0.15.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz",
+      "integrity": "sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.9.tgz",
+      "integrity": "sha512-wS8uJwBt7/b/mzE13ktsJdmS4JP/j7PQSaADtnb4I2wL0zK51MQ0pmF8/Jy0wUIS96fr+fXT6S/ifiPXnvrlSg==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "babel-plugin-polyfill-corejs2": "^0.3.1",
+        "babel-plugin-polyfill-corejs3": "^0.5.2",
+        "babel-plugin-polyfill-regenerator": "^0.3.1",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz",
+      "integrity": "sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.18.9.tgz",
+      "integrity": "sha512-39Q814wyoOPtIB/qGopNIL9xDChOE1pNU0ZY5dO0owhiVt/5kFm4li+/bBtwc7QotG0u5EPzqhZdjMtmqBqyQA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz",
+      "integrity": "sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz",
+      "integrity": "sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz",
+      "integrity": "sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.18.8.tgz",
+      "integrity": "sha512-p2xM8HI83UObjsZGofMV/EdYjamsDm6MoN3hXPYIT0+gxIoopE+B7rPYKAxfrz9K9PK7JafTTjqYC6qipLExYA==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-typescript": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.6.tgz",
+      "integrity": "sha512-XNRwQUXYMP7VLuy54cr/KS/WeL3AZeORhrmeZ7iewgu+X2eBqmpaLI/hzqr9ZxCeUoq0ASK4GUzSM0BDhZkLFw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz",
+      "integrity": "sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.18.9.tgz",
+      "integrity": "sha512-75pt/q95cMIHWssYtyfjVlvI+QEZQThQbKvR9xH+F/Agtw/s4Wfc2V9Bwd/P39VtixB7oWxGdH4GteTTwYJWMg==",
+      "dependencies": {
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-validator-option": "^7.18.6",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.18.9",
+        "@babel/plugin-proposal-async-generator-functions": "^7.18.6",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-class-static-block": "^7.18.6",
+        "@babel/plugin-proposal-dynamic-import": "^7.18.6",
+        "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+        "@babel/plugin-proposal-json-strings": "^7.18.6",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.18.9",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+        "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.18.6",
+        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.18.6",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-transform-arrow-functions": "^7.18.6",
+        "@babel/plugin-transform-async-to-generator": "^7.18.6",
+        "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
+        "@babel/plugin-transform-block-scoping": "^7.18.9",
+        "@babel/plugin-transform-classes": "^7.18.9",
+        "@babel/plugin-transform-computed-properties": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.18.9",
+        "@babel/plugin-transform-dotall-regex": "^7.18.6",
+        "@babel/plugin-transform-duplicate-keys": "^7.18.9",
+        "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
+        "@babel/plugin-transform-for-of": "^7.18.8",
+        "@babel/plugin-transform-function-name": "^7.18.9",
+        "@babel/plugin-transform-literals": "^7.18.9",
+        "@babel/plugin-transform-member-expression-literals": "^7.18.6",
+        "@babel/plugin-transform-modules-amd": "^7.18.6",
+        "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.18.9",
+        "@babel/plugin-transform-modules-umd": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.18.6",
+        "@babel/plugin-transform-new-target": "^7.18.6",
+        "@babel/plugin-transform-object-super": "^7.18.6",
+        "@babel/plugin-transform-parameters": "^7.18.8",
+        "@babel/plugin-transform-property-literals": "^7.18.6",
+        "@babel/plugin-transform-regenerator": "^7.18.6",
+        "@babel/plugin-transform-reserved-words": "^7.18.6",
+        "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+        "@babel/plugin-transform-spread": "^7.18.9",
+        "@babel/plugin-transform-sticky-regex": "^7.18.6",
+        "@babel/plugin-transform-template-literals": "^7.18.9",
+        "@babel/plugin-transform-typeof-symbol": "^7.18.9",
+        "@babel/plugin-transform-unicode-escapes": "^7.18.6",
+        "@babel/plugin-transform-unicode-regex": "^7.18.6",
+        "@babel/preset-modules": "^0.1.5",
+        "@babel/types": "^7.18.9",
+        "babel-plugin-polyfill-corejs2": "^0.3.1",
+        "babel-plugin-polyfill-corejs3": "^0.5.2",
+        "babel-plugin-polyfill-regenerator": "^0.3.1",
+        "core-js-compat": "^3.22.1",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-env/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
+      "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-react": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.18.6.tgz",
+      "integrity": "sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-validator-option": "^7.18.6",
+        "@babel/plugin-transform-react-display-name": "^7.18.6",
+        "@babel/plugin-transform-react-jsx": "^7.18.6",
+        "@babel/plugin-transform-react-jsx-development": "^7.18.6",
+        "@babel/plugin-transform-react-pure-annotations": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz",
+      "integrity": "sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-validator-option": "^7.18.6",
+        "@babel/plugin-transform-typescript": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+      "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.18.9.tgz",
+      "integrity": "sha512-qZEWeccZCrHA2Au4/X05QW5CMdm4VjUDCrGq5gf1ZDcM4hRqreKrtwAn7yci9zfgAS9apvnsFXiGBHBAxZdK9A==",
+      "dependencies": {
+        "core-js-pure": "^3.20.2",
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.6.tgz",
+      "integrity": "sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==",
+      "dependencies": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/parser": "^7.18.6",
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.9.tgz",
+      "integrity": "sha512-LcPAnujXGwBgv3/WHv01pHtb2tihcyW1XuL9wd7jqh1Z8AQkTd+QVjMrMijrln0T7ED3UXLIy36P9Ao7W75rYg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.18.9",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/parser": "^7.18.9",
+        "@babel/types": "^7.18.9",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.9.tgz",
+      "integrity": "sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
+    },
+    "node_modules/@csstools/normalize.css": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
+      "integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
+    },
+    "node_modules/@csstools/postcss-cascade-layers": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.0.5.tgz",
+      "integrity": "sha512-Id/9wBT7FkgFzdEpiEWrsVd4ltDxN0rI0QS0SChbeQiSuux3z21SJCRLu6h2cvCEUmaRi+VD0mHFj+GJD4GFnw==",
+      "dependencies": {
+        "@csstools/selector-specificity": "^2.0.2",
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/@csstools/postcss-color-function": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz",
+      "integrity": "sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==",
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/@csstools/postcss-font-format-keywords": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz",
+      "integrity": "sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/@csstools/postcss-hwb-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz",
+      "integrity": "sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/@csstools/postcss-ic-unit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz",
+      "integrity": "sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==",
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/@csstools/postcss-is-pseudo-class": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz",
+      "integrity": "sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==",
+      "dependencies": {
+        "@csstools/selector-specificity": "^2.0.0",
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/@csstools/postcss-normalize-display-values": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz",
+      "integrity": "sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/@csstools/postcss-oklab-function": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz",
+      "integrity": "sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==",
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/@csstools/postcss-progressive-custom-properties": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz",
+      "integrity": "sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3"
+      }
+    },
+    "node_modules/@csstools/postcss-stepped-value-functions": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz",
+      "integrity": "sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/@csstools/postcss-trigonometric-functions": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz",
+      "integrity": "sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/@csstools/postcss-unset-value": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz",
+      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==",
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
+      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2",
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
+      "integrity": "sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.3.2",
+        "globals": "^13.15.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.17.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+      "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
+    },
+    "node_modules/@ionic/core": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
+      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
+      "dependencies": {
+        "@stencil/core": "^2.18.0",
+        "ionicons": "^6.0.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@ionic/react": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.2.tgz",
+      "integrity": "sha512-+YZkUlOvygnowTmtEACd+B1fhmets3sSazr5Ipnv/O/genGgcY5llpxI+LeqvrWt0ECAtiNdF3c35M1IcoAuxA==",
+      "dependencies": {
+        "@ionic/core": "^6.3.2",
+        "ionicons": "^6.0.2",
+        "tslib": "*"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6",
+        "react-dom": ">=16.8.6"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "dependencies": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/console": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-27.5.1.tgz",
+      "integrity": "sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "jest-message-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/console/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@jest/console/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jest/console/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@jest/console/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/@jest/console/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/console/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/core": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-27.5.1.tgz",
+      "integrity": "sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==",
+      "dependencies": {
+        "@jest/console": "^27.5.1",
+        "@jest/reporters": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "emittery": "^0.8.1",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "jest-changed-files": "^27.5.1",
+        "jest-config": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-resolve-dependencies": "^27.5.1",
+        "jest-runner": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "jest-watcher": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "rimraf": "^3.0.0",
+        "slash": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/core/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@jest/core/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jest/core/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@jest/core/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/@jest/core/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/core/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/environment": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-27.5.1.tgz",
+      "integrity": "sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==",
+      "dependencies": {
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/fake-timers": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
+      "integrity": "sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@sinonjs/fake-timers": "^8.0.1",
+        "@types/node": "*",
+        "jest-message-util": "^27.5.1",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/globals": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-27.5.1.tgz",
+      "integrity": "sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "expect": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/reporters": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-27.5.1.tgz",
+      "integrity": "sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==",
+      "dependencies": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.2",
+        "graceful-fs": "^4.2.9",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^5.1.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.1.3",
+        "jest-haste-map": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.0",
+        "string-length": "^4.0.1",
+        "terminal-link": "^2.0.0",
+        "v8-to-istanbul": "^8.1.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/@jest/reporters/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/schemas": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.1.3.tgz",
+      "integrity": "sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==",
+      "dependencies": {
+        "@sinclair/typebox": "^0.24.1"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@jest/source-map": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-27.5.1.tgz",
+      "integrity": "sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==",
+      "dependencies": {
+        "callsites": "^3.0.0",
+        "graceful-fs": "^4.2.9",
+        "source-map": "^0.6.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/source-map/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@jest/test-result": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-27.5.1.tgz",
+      "integrity": "sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==",
+      "dependencies": {
+        "@jest/console": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "collect-v8-coverage": "^1.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/test-sequencer": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz",
+      "integrity": "sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==",
+      "dependencies": {
+        "@jest/test-result": "^27.5.1",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-runtime": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/transform": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.5.1.tgz",
+      "integrity": "sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==",
+      "dependencies": {
+        "@babel/core": "^7.1.0",
+        "@jest/types": "^27.5.1",
+        "babel-plugin-istanbul": "^6.1.1",
+        "chalk": "^4.0.0",
+        "convert-source-map": "^1.4.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "pirates": "^4.0.4",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.1",
+        "write-file-atomic": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/transform/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@jest/transform/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jest/transform/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@jest/transform/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/@jest/transform/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/transform/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@jest/transform/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/types": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
+      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^16.0.0",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/types/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@jest/types/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jest/types/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@jest/types/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/@jest/types/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/types/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
+      "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.0",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
+    "node_modules/@leichtgewicht/ip-codec": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
+      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz",
+      "integrity": "sha512-bcKCAzF0DV2IIROp9ZHkRJa6O4jy7NlnHdWL3GmcUxYWNjLXkK5kfELELwEfSP5hXPfVL/qOGMAROuMQb9GG8Q==",
+      "dependencies": {
+        "ansi-html-community": "^0.0.8",
+        "common-path-prefix": "^3.0.0",
+        "core-js-pure": "^3.8.1",
+        "error-stack-parser": "^2.0.6",
+        "find-up": "^5.0.0",
+        "html-entities": "^2.1.0",
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0",
+        "source-map": "^0.7.3"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "@types/webpack": "4.x || 5.x",
+        "react-refresh": ">=0.10.0 <1.0.0",
+        "sockjs-client": "^1.4.0",
+        "type-fest": ">=0.17.0 <3.0.0",
+        "webpack": ">=4.43.0 <6.0.0",
+        "webpack-dev-server": "3.x || 4.x",
+        "webpack-hot-middleware": "2.x",
+        "webpack-plugin-serve": "0.x || 1.x"
+      },
+      "peerDependenciesMeta": {
+        "@types/webpack": {
+          "optional": true
+        },
+        "sockjs-client": {
+          "optional": true
+        },
+        "type-fest": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        },
+        "webpack-hot-middleware": {
+          "optional": true
+        },
+        "webpack-plugin-serve": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-babel": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
+      "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.10.4",
+        "@rollup/pluginutils": "^3.1.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@types/babel__core": "^7.1.9",
+        "rollup": "^1.20.0||^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/babel__core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
+      "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==",
+      "dependencies": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
+    "node_modules/@rollup/plugin-replace": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz",
+      "integrity": "sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==",
+      "dependencies": {
+        "@rollup/pluginutils": "^3.1.0",
+        "magic-string": "^0.25.7"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0 || ^2.0.0"
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dependencies": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz",
+      "integrity": "sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA=="
+    },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.24.21",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.21.tgz",
+      "integrity": "sha512-II2SIjvxBVJmrGkkZYza/BqNjwx3PWROIA8CZ0/Hn7LV0Mv0CVpZxoyHGBVsQqfFLMv9DmArIeRHTwo76bE6oA=="
+    },
+    "node_modules/@sinonjs/commons": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz",
+      "integrity": "sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==",
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/fake-timers": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz",
+      "integrity": "sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==",
+      "dependencies": {
+        "@sinonjs/commons": "^1.7.0"
+      }
+    },
+    "node_modules/@stencil/core": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.18.1.tgz",
+      "integrity": "sha512-/fXkh1lwZ+X9JQCw50mPjhBogzEHOBvVC5pLoDLZqodVYK0DGWILM2YLV4dcIUBNEK8/HMDpO/Rq81/rS3mNOw==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
+    "node_modules/@surma/rollup-plugin-off-main-thread": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
+      "integrity": "sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==",
+      "dependencies": {
+        "ejs": "^3.1.6",
+        "json5": "^2.2.0",
+        "magic-string": "^0.25.0",
+        "string.prototype.matchall": "^4.0.6"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
+      "integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz",
+      "integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz",
+      "integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz",
+      "integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz",
+      "integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz",
+      "integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz",
+      "integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz",
+      "integrity": "sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.5.0.tgz",
+      "integrity": "sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==",
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "^5.0.1",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1",
+        "@svgr/babel-plugin-svg-dynamic-title": "^5.4.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "^5.4.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "^5.4.0",
+        "@svgr/babel-plugin-transform-svg-component": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.5.0.tgz",
+      "integrity": "sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==",
+      "dependencies": {
+        "@svgr/plugin-jsx": "^5.5.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz",
+      "integrity": "sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==",
+      "dependencies": {
+        "@babel/types": "^7.12.6"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz",
+      "integrity": "sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==",
+      "dependencies": {
+        "@babel/core": "^7.12.3",
+        "@svgr/babel-preset": "^5.5.0",
+        "@svgr/hast-util-to-babel-ast": "^5.5.0",
+        "svg-parser": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-svgo": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz",
+      "integrity": "sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==",
+      "dependencies": {
+        "cosmiconfig": "^7.0.0",
+        "deepmerge": "^4.2.2",
+        "svgo": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/webpack": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.5.0.tgz",
+      "integrity": "sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==",
+      "dependencies": {
+        "@babel/core": "^7.12.3",
+        "@babel/plugin-transform-react-constant-elements": "^7.12.1",
+        "@babel/preset-env": "^7.12.1",
+        "@babel/preset-react": "^7.12.5",
+        "@svgr/core": "^5.5.0",
+        "@svgr/plugin-jsx": "^5.5.0",
+        "@svgr/plugin-svgo": "^5.5.0",
+        "loader-utils": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.1.19",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.19.tgz",
+      "integrity": "sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
+      "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
+      "integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.17.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.17.1.tgz",
+      "integrity": "sha512-kVzjari1s2YVi77D3w1yuvohV2idweYXMCDzqBiVNN63TcDWrIlTVOYpqVrvbbyOE/IyzBoTKF0fdnLPEORFxA==",
+      "dependencies": {
+        "@babel/types": "^7.3.0"
+      }
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect-history-api-fallback": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz",
+      "integrity": "sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==",
+      "dependencies": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/eslint": {
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.5.tgz",
+      "integrity": "sha512-dhsC09y1gpJWnK+Ff4SGvCuSnk9DaU0BJZSzOwa6GVSg65XtTugLBITDAAzRU5duGBoXBHpdR/9jHGxJjNflJQ==",
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
+      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ=="
+    },
+    "node_modules/@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.17.30",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.30.tgz",
+      "integrity": "sha512-gstzbTWro2/nFed1WXtf+TtrpwxH7Ggs4RLYTLbeVgIkUQOI3WG/JKjgeOU1zXDvezllupjrf8OPIdvTbIaVOQ==",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
+    "node_modules/@types/graceful-fs": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
+      "integrity": "sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
+    },
+    "node_modules/@types/http-proxy": {
+      "version": "1.17.9",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.9.tgz",
+      "integrity": "sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
+      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g=="
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
+      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
+    },
+    "node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
+    },
+    "node_modules/@types/node": {
+      "version": "16.11.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.45.tgz",
+      "integrity": "sha512-3rKg/L5x0rofKuuUt5zlXzOnKyIHXmIu5R8A0TuNDMF2062/AOIDBciFIjToLEJ/9F9DzkHNot+BpNsMI1OLdQ=="
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
+    "node_modules/@types/prettier": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.4.tgz",
+      "integrity": "sha512-fOwvpvQYStpb/zHMx0Cauwywu9yLDmzWiiQBC7gJyq5tYLUXFZvDG7VK1B7WBxxjBJNKFOZ0zLoOQn8vmATbhw=="
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "node_modules/@types/q": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
+      "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
+    },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
+    },
+    "node_modules/@types/react": {
+      "version": "18.0.15",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz",
+      "integrity": "sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
+    "node_modules/@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/stack-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
+      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+    },
+    "node_modules/@types/ws": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
+      "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/yargs": {
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
+      "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
+      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.31.0.tgz",
+      "integrity": "sha512-VKW4JPHzG5yhYQrQ1AzXgVgX8ZAJEvCz0QI6mLRX4tf7rnFfh5D8SKm0Pq6w5PyNfAWJk6sv313+nEt3ohWMBQ==",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "5.31.0",
+        "@typescript-eslint/type-utils": "5.31.0",
+        "@typescript-eslint/utils": "5.31.0",
+        "debug": "^4.3.4",
+        "functional-red-black-tree": "^1.0.1",
+        "ignore": "^5.2.0",
+        "regexpp": "^3.2.0",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/experimental-utils": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.31.0.tgz",
+      "integrity": "sha512-Yiar0ggNPyOsvrslJBdOo3jc3wjI6NnmWOQBA8WhR54YPbVqTNLuuHC6zxEt8FIgMozerxRlAncwznEjK+cJVA==",
+      "dependencies": {
+        "@typescript-eslint/utils": "5.31.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.31.0.tgz",
+      "integrity": "sha512-UStjQiZ9OFTFReTrN+iGrC6O/ko9LVDhreEK5S3edmXgR396JGq7CoX2TWIptqt/ESzU2iRKXAHfSF2WJFcWHw==",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "5.31.0",
+        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/typescript-estree": "5.31.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.31.0.tgz",
+      "integrity": "sha512-8jfEzBYDBG88rcXFxajdVavGxb5/XKXyvWgvD8Qix3EEJLCFIdVloJw+r9ww0wbyNLOTYyBsR+4ALNGdlalLLg==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/visitor-keys": "5.31.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.31.0.tgz",
+      "integrity": "sha512-7ZYqFbvEvYXFn9ax02GsPcEOmuWNg+14HIf4q+oUuLnMbpJ6eHAivCg7tZMVwzrIuzX3QCeAOqKoyMZCv5xe+w==",
+      "dependencies": {
+        "@typescript-eslint/utils": "5.31.0",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.31.0.tgz",
+      "integrity": "sha512-/f/rMaEseux+I4wmR6mfpM2wvtNZb1p9hAV77hWfuKc3pmaANp5dLAZSiE3/8oXTYTt3uV9KW5yZKJsMievp6g==",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.31.0.tgz",
+      "integrity": "sha512-3S625TMcARX71wBc2qubHaoUwMEn+l9TCsaIzYI/ET31Xm2c9YQ+zhGgpydjorwQO9pLfR/6peTzS/0G3J/hDw==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/visitor-keys": "5.31.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.31.0.tgz",
+      "integrity": "sha512-kcVPdQS6VIpVTQ7QnGNKMFtdJdvnStkqS5LeALr4rcwx11G6OWb2HB17NMPnlRHvaZP38hL9iK8DdE9Fne7NYg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.31.0",
+        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/typescript-estree": "5.31.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.31.0.tgz",
+      "integrity": "sha512-ZK0jVxSjS4gnPirpVjXHz7mgdOsZUHzNYSfTw2yPa3agfbt9YfqaBiBZFSSxeBWnpWkzCxTfUpnzA3Vily/CSg==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.31.0",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
+      "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
+      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ=="
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
+      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg=="
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
+      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA=="
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
+      "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
+      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q=="
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
+      "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
+      "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
+      "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
+      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ=="
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
+      "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-section": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-opt": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1",
+        "@webassemblyjs/wast-printer": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
+      "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/utf8": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
+      "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
+      "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/utf8": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
+      "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+    },
+    "node_modules/abab": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-globals": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
+      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1"
+      }
+    },
+    "node_modules/acorn-globals/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-import-assertions": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dependencies": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "node_modules/acorn-node/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/address": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.0.tgz",
+      "integrity": "sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/adjust-sourcemap-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
+      "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "regex-parser": "^2.2.11"
+      },
+      "engines": {
+        "node": ">=8.9"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+      "engines": [
+        "node >= 0.8.0"
+      ],
+      "bin": {
+        "ansi-html": "bin/ansi-html"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.2",
+        "@babel/runtime-corejs3": "^7.10.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ=="
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
+      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5",
+        "get-intrinsic": "^1.1.1",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
+      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
+      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.reduce": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.4.tgz",
+      "integrity": "sha512-WnM+AjG/DvLRLo4DDl+r+SvCzYtD2Jd9oeBYMcEaI7t3fFrHY9M53/wdLcTvmZNQ70IU6Htj0emFkZ5TS+lrdw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-array-method-boxes-properly": "^1.0.0",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
+    },
+    "node_modules/async": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.7",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
+      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.20.3",
+        "caniuse-lite": "^1.0.30001335",
+        "fraction.js": "^4.2.0",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
+      "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
+      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
+    },
+    "node_modules/babel-jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
+      "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==",
+      "dependencies": {
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/babel__core": "^7.1.14",
+        "babel-plugin-istanbul": "^6.1.1",
+        "babel-preset-jest": "^27.5.1",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.8.0"
+      }
+    },
+    "node_modules/babel-jest/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/babel-jest/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/babel-jest/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/babel-jest/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/babel-jest/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/babel-jest/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/babel-loader": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz",
+      "integrity": "sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==",
+      "dependencies": {
+        "find-cache-dir": "^3.3.1",
+        "loader-utils": "^2.0.0",
+        "make-dir": "^3.1.0",
+        "schema-utils": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 8.9"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "webpack": ">=2"
+      }
+    },
+    "node_modules/babel-loader/node_modules/schema-utils": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "dependencies": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "node_modules/babel-plugin-istanbul": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
+      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-instrument": "^5.0.4",
+        "test-exclude": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/babel-plugin-jest-hoist": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz",
+      "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==",
+      "dependencies": {
+        "@babel/template": "^7.3.3",
+        "@babel/types": "^7.3.3",
+        "@types/babel__core": "^7.0.0",
+        "@types/babel__traverse": "^7.0.6"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/babel-plugin-named-asset-import": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
+      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
+      "peerDependencies": {
+        "@babel/core": "^7.1.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.2.tgz",
+      "integrity": "sha512-LPnodUl3lS0/4wN3Rb+m+UK8s7lj2jcLRrjho4gLw+OJs+I4bvGXshINesY5xx/apM+biTnQ9reDI8yj+0M5+Q==",
+      "dependencies": {
+        "@babel/compat-data": "^7.17.7",
+        "@babel/helper-define-polyfill-provider": "^0.3.2",
+        "semver": "^6.1.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.3.tgz",
+      "integrity": "sha512-zKsXDh0XjnrUEW0mxIHLfjBfnXSMr5Q/goMe/fxpQnLm07mcOZiIZHBNWCMx60HmdvjxfXcalac0tfFg0wqxyw==",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.3.2",
+        "core-js-compat": "^3.21.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
+      "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-plugin-transform-react-remove-prop-types": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
+      "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA=="
+    },
+    "node_modules/babel-preset-current-node-syntax": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
+      "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
+      "dependencies": {
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.8.3",
+        "@babel/plugin-syntax-import-meta": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.8.3",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-top-level-await": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/babel-preset-jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz",
+      "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==",
+      "dependencies": {
+        "babel-plugin-jest-hoist": "^27.5.1",
+        "babel-preset-current-node-syntax": "^1.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/babel-preset-react-app": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-react-app/-/babel-preset-react-app-10.0.1.tgz",
+      "integrity": "sha512-b0D9IZ1WhhCWkrTXyFuIIgqGzSkRIH5D5AmB0bXbzYAB1OBAwHcUeyWW2LorutLWF5btNo/N7r/cIdmvvKJlYg==",
+      "dependencies": {
+        "@babel/core": "^7.16.0",
+        "@babel/plugin-proposal-class-properties": "^7.16.0",
+        "@babel/plugin-proposal-decorators": "^7.16.4",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
+        "@babel/plugin-proposal-numeric-separator": "^7.16.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.16.0",
+        "@babel/plugin-proposal-private-methods": "^7.16.0",
+        "@babel/plugin-transform-flow-strip-types": "^7.16.0",
+        "@babel/plugin-transform-react-display-name": "^7.16.0",
+        "@babel/plugin-transform-runtime": "^7.16.4",
+        "@babel/preset-env": "^7.16.4",
+        "@babel/preset-react": "^7.16.0",
+        "@babel/preset-typescript": "^7.16.0",
+        "@babel/runtime": "^7.16.3",
+        "babel-plugin-macros": "^3.1.0",
+        "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
+    },
+    "node_modules/bfj": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz",
+      "integrity": "sha512-+e/UqUzwmzJamNF50tBV6tZPTORow7gQ96iFow+8b562OdMpEK0BcJEq2OSPEDmAbSMBQ7PKZ87ubFkgxpYWgw==",
+      "dependencies": {
+        "bluebird": "^3.5.5",
+        "check-types": "^11.1.1",
+        "hoopy": "^0.1.4",
+        "tryer": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
+      "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.10.3",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/bonjour-service": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.13.tgz",
+      "integrity": "sha512-LWKRU/7EqDUC9CTAQtuZl5HzBALoCYwtLhffW3et7vZMwv3bWLpJf8bRYlMD5OCcDpTfnPgNCV4yo9ZIaJGMiA==",
+      "dependencies": {
+        "array-flatten": "^2.1.2",
+        "dns-equal": "^1.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "multicast-dns": "^7.2.5"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browser-process-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
+    },
+    "node_modules/browserslist": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
+      "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001370",
+        "electron-to-chromium": "^1.4.202",
+        "node-releases": "^2.0.6",
+        "update-browserslist-db": "^1.0.5"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/bser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
+      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+      "dependencies": {
+        "node-int64": "^0.4.0"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
+    "node_modules/builtin-modules": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
+      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001370",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001370.tgz",
+      "integrity": "sha512-3PDmaP56wz/qz7G508xzjx8C+MC2qEm4SYhSEzC9IBROo+dGXFWRuaXkWti0A9tuI00g+toiriVqxtWMgl350g==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
+    },
+    "node_modules/case-sensitive-paths-webpack-plugin": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
+      "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/check-types": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
+      "integrity": "sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ=="
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz",
+      "integrity": "sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg=="
+    },
+    "node_modules/cjs-module-lexer": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
+      "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
+    },
+    "node_modules/clean-css": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
+      "integrity": "sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==",
+      "dependencies": {
+        "source-map": "~0.6.0"
+      },
+      "engines": {
+        "node": ">= 10.0"
+      }
+    },
+    "node_modules/clean-css/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
+      "engines": {
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/coa": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
+      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+      "dependencies": {
+        "@types/q": "^1.5.1",
+        "chalk": "^2.4.1",
+        "q": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 4.0"
+      }
+    },
+    "node_modules/collect-v8-coverage": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
+      "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg=="
+    },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/colord": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
+      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ=="
+    },
+    "node_modules/colorette": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
+      "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ=="
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/common-path-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
+      "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w=="
+    },
+    "node_modules/common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
+    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "dependencies": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "node_modules/confusing-browser-globals": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
+      "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA=="
+    },
+    "node_modules/connect-history-api-fallback": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-disposition/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
+      "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
+      "dependencies": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+    },
+    "node_modules/core-js": {
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.0.tgz",
+      "integrity": "sha512-IeOyT8A6iK37Ep4kZDD423mpi6JfPRoPUdQwEWYiGolvn4o6j2diaRzNfDfpTdu3a5qMbrGUzKUpYpRY8jXCkQ==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.24.0.tgz",
+      "integrity": "sha512-F+2E63X3ff/nj8uIrf8Rf24UDGIz7p838+xjEp+Bx3y8OWXj+VTPPZNCtdqovPaS9o7Tka5mCH01Zn5vOd6UQg==",
+      "dependencies": {
+        "browserslist": "^4.21.2",
+        "semver": "7.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-js-compat/node_modules/semver": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/core-js-pure": {
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.24.0.tgz",
+      "integrity": "sha512-uzMmW8cRh7uYw4JQtzqvGWRyC2T5+4zipQLQdi2FmiRqP83k3d6F3stv2iAlNhOs6cXN401FCD5TL0vvleuHgA==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/css-blank-pseudo": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz",
+      "integrity": "sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9"
+      },
+      "bin": {
+        "css-blank-pseudo": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/css-declaration-sorter": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
+      "integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==",
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/css-has-pseudo": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz",
+      "integrity": "sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9"
+      },
+      "bin": {
+        "css-has-pseudo": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/css-loader": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
+      "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.7",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
+      "integrity": "sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==",
+      "dependencies": {
+        "cssnano": "^5.0.6",
+        "jest-worker": "^27.0.2",
+        "postcss": "^8.3.5",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@parcel/css": {
+          "optional": true
+        },
+        "clean-css": {
+          "optional": true
+        },
+        "csso": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-prefers-color-scheme": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
+      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
+      "bin": {
+        "css-prefers-color-scheme": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
+    },
+    "node_modules/css-tree": {
+      "version": "1.0.0-alpha.37",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+      "dependencies": {
+        "mdn-data": "2.0.4",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssdb": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-6.6.3.tgz",
+      "integrity": "sha512-7GDvDSmE+20+WcSMhP17Q1EVWUrLlbxxpMDqG731n8P99JhnQZHR9YvtjPvEHfjFUjvQJvdpKCjlKOX+xe4UVA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssnano": {
+      "version": "5.1.12",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.12.tgz",
+      "integrity": "sha512-TgvArbEZu0lk/dvg2ja+B7kYoD7BBCmn3+k58xD0qjrGHsFzXY/wKTo9M5egcUCabPol05e/PVoIu79s2JN4WQ==",
+      "dependencies": {
+        "cssnano-preset-default": "^5.2.12",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/cssnano"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "5.2.12",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.12.tgz",
+      "integrity": "sha512-OyCBTZi+PXgylz9HAA5kHyoYhfGcYdwFmyaJzWnzxuGRtnMw/kR6ilW9XzlzlRAtB6PLT/r+prYgkef7hngFew==",
+      "dependencies": {
+        "css-declaration-sorter": "^6.3.0",
+        "cssnano-utils": "^3.1.0",
+        "postcss-calc": "^8.2.3",
+        "postcss-colormin": "^5.3.0",
+        "postcss-convert-values": "^5.1.2",
+        "postcss-discard-comments": "^5.1.2",
+        "postcss-discard-duplicates": "^5.1.0",
+        "postcss-discard-empty": "^5.1.1",
+        "postcss-discard-overridden": "^5.1.0",
+        "postcss-merge-longhand": "^5.1.6",
+        "postcss-merge-rules": "^5.1.2",
+        "postcss-minify-font-values": "^5.1.0",
+        "postcss-minify-gradients": "^5.1.1",
+        "postcss-minify-params": "^5.1.3",
+        "postcss-minify-selectors": "^5.2.1",
+        "postcss-normalize-charset": "^5.1.0",
+        "postcss-normalize-display-values": "^5.1.0",
+        "postcss-normalize-positions": "^5.1.1",
+        "postcss-normalize-repeat-style": "^5.1.1",
+        "postcss-normalize-string": "^5.1.0",
+        "postcss-normalize-timing-functions": "^5.1.0",
+        "postcss-normalize-unicode": "^5.1.0",
+        "postcss-normalize-url": "^5.1.0",
+        "postcss-normalize-whitespace": "^5.1.1",
+        "postcss-ordered-values": "^5.1.3",
+        "postcss-reduce-initial": "^5.1.0",
+        "postcss-reduce-transforms": "^5.1.0",
+        "postcss-svgo": "^5.1.0",
+        "postcss-unique-selectors": "^5.1.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dependencies": {
+        "css-tree": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
+    "node_modules/csso/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cssom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
+      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw=="
+    },
+    "node_modules/cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "dependencies": {
+        "cssom": "~0.3.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
+    },
+    "node_modules/csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
+    },
+    "node_modules/data-urls": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
+      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "dependencies": {
+        "abab": "^2.0.3",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
+      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ=="
+    },
+    "node_modules/dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA=="
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
+    },
+    "node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+      "dependencies": {
+        "execa": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dependencies": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ=="
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/detect-newline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+    },
+    "node_modules/detect-port-alt": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
+      "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
+      "dependencies": {
+        "address": "^1.0.1",
+        "debug": "^2.6.0"
+      },
+      "bin": {
+        "detect": "bin/detect-port",
+        "detect-port": "bin/detect-port"
+      },
+      "engines": {
+        "node": ">= 4.2.1"
+      }
+    },
+    "node_modules/detect-port-alt/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/detect-port-alt/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/detective": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+      "dependencies": {
+        "acorn-node": "^1.8.2",
+        "defined": "^1.0.0",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "detective": "bin/detective.js"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
+    "node_modules/diff-sequences": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
+      "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==",
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
+    "node_modules/dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg=="
+    },
+    "node_modules/dns-packet": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.4.0.tgz",
+      "integrity": "sha512-EgqGeaBB8hLiHLZtp/IbaDQTL8pZ0+IvwzSHA6d7VyMDM+B9hgddEMa9xjK5oYnw0ci0JQ6g2XCD7/f6cafU6g==",
+      "dependencies": {
+        "@leichtgewicht/ip-codec": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "dependencies": {
+        "utila": "~0.4"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domexception": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
+      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
+      "dependencies": {
+        "webidl-conversions": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/domexception/node_modules/webidl-conversions": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+      "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/dotenv-expand": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
+    },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "node_modules/ejs": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz",
+      "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.202",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.202.tgz",
+      "integrity": "sha512-JYsK2ex9lmQD27kj19fhXYxzFJ/phLAkLKHv49A5UY6kMRV2xED3qMMLg/voW/+0AR6wMiI+VxlmK9NDtdxlPA=="
+    },
+    "node_modules/emittery": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
+      "integrity": "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
+      "integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
+      "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "function.prototype.name": "^1.1.5",
+        "get-intrinsic": "^1.1.1",
+        "get-symbol-description": "^1.0.0",
+        "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "is-callable": "^1.2.4",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "regexp.prototype.flags": "^1.4.3",
+        "string.prototype.trimend": "^1.0.5",
+        "string.prototype.trimstart": "^1.0.5",
+        "unbox-primitive": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-array-method-boxes-properly": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
+      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
+    },
+    "node_modules/es-module-lexer": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dependencies": {
+        "has": "^1.0.3"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/escodegen": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz",
+      "integrity": "sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/escodegen/node_modules/levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
+      "dependencies": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/optionator": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+      "dependencies": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.6",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "word-wrap": "~1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
+      "dependencies": {
+        "prelude-ls": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.20.0.tgz",
+      "integrity": "sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==",
+      "dependencies": {
+        "@eslint/eslintrc": "^1.3.0",
+        "@humanwhocodes/config-array": "^0.9.2",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.2",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^6.0.1",
+        "globals": "^13.15.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-react-app": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
+      "integrity": "sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==",
+      "dependencies": {
+        "@babel/core": "^7.16.0",
+        "@babel/eslint-parser": "^7.16.3",
+        "@rushstack/eslint-patch": "^1.1.0",
+        "@typescript-eslint/eslint-plugin": "^5.5.0",
+        "@typescript-eslint/parser": "^5.5.0",
+        "babel-preset-react-app": "^10.0.1",
+        "confusing-browser-globals": "^1.0.11",
+        "eslint-plugin-flowtype": "^8.0.3",
+        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-jest": "^25.3.0",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-react": "^7.27.1",
+        "eslint-plugin-react-hooks": "^4.3.0",
+        "eslint-plugin-testing-library": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^8.0.0"
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
+      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "resolve": "^1.20.0"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
+      "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "find-up": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/find-up": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+      "integrity": "sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==",
+      "dependencies": {
+        "locate-path": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/locate-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+      "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==",
+      "dependencies": {
+        "p-locate": "^2.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/p-limit": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+      "dependencies": {
+        "p-try": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/p-locate": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+      "integrity": "sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==",
+      "dependencies": {
+        "p-limit": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/p-try": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+      "integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-plugin-flowtype": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz",
+      "integrity": "sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ==",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "string-natural-compare": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@babel/plugin-syntax-flow": "^7.14.5",
+        "@babel/plugin-transform-react-jsx": "^7.14.9",
+        "eslint": "^8.1.0"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "dependencies": {
+        "array-includes": "^3.1.4",
+        "array.prototype.flat": "^1.2.5",
+        "debug": "^2.6.9",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-module-utils": "^2.7.3",
+        "has": "^1.0.3",
+        "is-core-module": "^2.8.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.values": "^1.1.5",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/eslint-plugin-jest": {
+      "version": "25.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz",
+      "integrity": "sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==",
+      "dependencies": {
+        "@typescript-eslint/experimental-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^4.0.0 || ^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/eslint-plugin": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz",
+      "integrity": "sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.9",
+        "aria-query": "^4.2.2",
+        "array-includes": "^3.1.5",
+        "ast-types-flow": "^0.0.7",
+        "axe-core": "^4.4.3",
+        "axobject-query": "^2.2.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "has": "^1.0.3",
+        "jsx-ast-utils": "^3.3.2",
+        "language-tags": "^1.0.5",
+        "minimatch": "^3.1.2",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.30.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.30.1.tgz",
+      "integrity": "sha512-NbEvI9jtqO46yJA3wcRF9Mo0lF9T/jhdHqhCHXiXtD+Zcb98812wvokjWpU7Q4QH5edo6dmqrukxVvWWXHlsUg==",
+      "dependencies": {
+        "array-includes": "^3.1.5",
+        "array.prototype.flatmap": "^1.3.0",
+        "doctrine": "^2.1.0",
+        "estraverse": "^5.3.0",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.5",
+        "object.fromentries": "^2.0.5",
+        "object.hasown": "^1.1.1",
+        "object.values": "^1.1.5",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.3",
+        "semver": "^6.3.0",
+        "string.prototype.matchall": "^4.0.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.4",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz",
+      "integrity": "sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==",
+      "dependencies": {
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-testing-library": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.5.1.tgz",
+      "integrity": "sha512-plLEkkbAKBjPxsLj7x4jNapcHAg2ernkQlKKrN2I8NrQwPISZHyCUNvg5Hv3EDqOQReToQb5bnqXYbkijJPE/g==",
+      "dependencies": {
+        "@typescript-eslint/utils": "^5.13.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "eslint": "^7.5.0 || ^8.0.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dependencies": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "engines": {
+        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5"
+      }
+    },
+    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/eslint-webpack-plugin": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-3.2.0.tgz",
+      "integrity": "sha512-avrKcGncpPbPSUHX6B3stNGzkKFto3eL+DKM4+VyMrVnhPc3vRczVlCq3uhuFOdRvDHTVXuzwk1ZKUrqDQHQ9w==",
+      "dependencies": {
+        "@types/eslint": "^7.29.0 || ^8.4.1",
+        "jest-worker": "^28.0.2",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/eslint-webpack-plugin/node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/eslint-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/eslint-webpack-plugin/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint-webpack-plugin/node_modules/jest-worker": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz",
+      "integrity": "sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==",
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/eslint-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/eslint-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/eslint-webpack-plugin/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/eslint/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/eslint/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/globals": {
+      "version": "13.17.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+      "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/eslint/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
+      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+      "dependencies": {
+        "acorn": "^8.7.1",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg=="
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/expect": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-27.5.1.tgz",
+      "integrity": "sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
+      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.0",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.10.3",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+    },
+    "node_modules/express/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/express/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/fast-glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
+    },
+    "node_modules/fastq": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/fb-watchman": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
+      "integrity": "sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==",
+      "dependencies": {
+        "bser": "2.1.1"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+      "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/filesize": {
+      "version": "8.0.7",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
+      "integrity": "sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dependencies": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.6.tgz",
+      "integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ=="
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
+      "integrity": "sha512-m5cUmF30xkZ7h4tWUgTAcEaKmUW7tfyUyTqNNOz7OxWJ0v1VWKTcOvH8FWHUwSjlW/356Ijc9vi3XfcPstpQKA==",
+      "dependencies": {
+        "@babel/code-frame": "^7.8.3",
+        "@types/json-schema": "^7.0.5",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.4.2",
+        "cosmiconfig": "^6.0.0",
+        "deepmerge": "^4.2.2",
+        "fs-extra": "^9.0.0",
+        "glob": "^7.1.6",
+        "memfs": "^3.1.2",
+        "minimatch": "^3.0.4",
+        "schema-utils": "2.7.0",
+        "semver": "^7.3.2",
+        "tapable": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "yarn": ">=1.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">= 6",
+        "typescript": ">= 2.7",
+        "vue-template-compiler": "*",
+        "webpack": ">= 4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+      "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.4",
+        "ajv": "^6.12.2",
+        "ajv-keywords": "^3.4.1"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/fs-monkey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
+      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q=="
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g=="
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
+      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
+    },
+    "node_modules/get-package-type": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+    },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/handle-thing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
+    },
+    "node_modules/harmony-reflect": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
+      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g=="
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/hoopy": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
+      "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==",
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
+      }
+    },
+    "node_modules/hpack.js/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/hpack.js/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
+      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "dependencies": {
+        "whatwg-encoding": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/html-entities": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
+      "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA=="
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
+    },
+    "node_modules/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.2.2",
+        "commander": "^8.3.0",
+        "he": "^1.2.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.10.0"
+      },
+      "bin": {
+        "html-minifier-terser": "cli.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/html-webpack-plugin": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
+      "integrity": "sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==",
+      "dependencies": {
+        "@types/html-minifier-terser": "^6.0.0",
+        "html-minifier-terser": "^6.0.2",
+        "lodash": "^4.17.21",
+        "pretty-error": "^4.0.0",
+        "tapable": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/html-webpack-plugin"
+      },
+      "peerDependencies": {
+        "webpack": "^5.20.0"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw=="
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "dependencies": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/http-proxy-middleware": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
+      "dependencies": {
+        "@types/http-proxy": "^1.17.8",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@types/express": "^4.17.13"
+      },
+      "peerDependenciesMeta": {
+        "@types/express": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/idb": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-6.1.5.tgz",
+      "integrity": "sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw=="
+    },
+    "node_modules/identity-obj-proxy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
+      "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
+      "dependencies": {
+        "harmony-reflect": "^1.4.6"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immer": {
+      "version": "9.0.15",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
+      "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/import-local": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
+      "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
+      "dependencies": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "bin": {
+        "import-local-fixture": "fixtures/cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+    },
+    "node_modules/internal-slot": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
+      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ionicons": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
+      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "dependencies": {
+        "@stencil/core": "~2.16.0"
+      }
+    },
+    "node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
+      "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
+      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
+    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-root": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
+      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+    },
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+    },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
+      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.0.tgz",
+      "integrity": "sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==",
+      "dependencies": {
+        "@babel/core": "^7.12.3",
+        "@babel/parser": "^7.14.7",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.2.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^3.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz",
+      "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==",
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jake": {
+      "version": "10.8.5",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
+      "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==",
+      "dependencies": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jake/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jake/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jake/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jake/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jake/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jake/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
+      "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
+      "dependencies": {
+        "@jest/core": "^27.5.1",
+        "import-local": "^3.0.2",
+        "jest-cli": "^27.5.1"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-changed-files": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz",
+      "integrity": "sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "execa": "^5.0.0",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-circus": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-27.5.1.tgz",
+      "integrity": "sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "dedent": "^0.7.0",
+        "expect": "^27.5.1",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-circus/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-circus/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-circus/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-circus/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-circus/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-circus/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-cli": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-27.5.1.tgz",
+      "integrity": "sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==",
+      "dependencies": {
+        "@jest/core": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "import-local": "^3.0.2",
+        "jest-config": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "prompts": "^2.0.1",
+        "yargs": "^16.2.0"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-cli/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-cli/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-cli/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-cli/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-cli/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-cli/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-config": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-27.5.1.tgz",
+      "integrity": "sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==",
+      "dependencies": {
+        "@babel/core": "^7.8.0",
+        "@jest/test-sequencer": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "babel-jest": "^27.5.1",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "deepmerge": "^4.2.2",
+        "glob": "^7.1.1",
+        "graceful-fs": "^4.2.9",
+        "jest-circus": "^27.5.1",
+        "jest-environment-jsdom": "^27.5.1",
+        "jest-environment-node": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-jasmine2": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-runner": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "parse-json": "^5.2.0",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-config/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-config/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-config/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-config/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-config/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-config/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-diff": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
+      "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-diff/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-diff/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-diff/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-diff/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-diff/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-diff/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-docblock": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.5.1.tgz",
+      "integrity": "sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==",
+      "dependencies": {
+        "detect-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-each": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-27.5.1.tgz",
+      "integrity": "sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-each/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-each/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-each/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-each/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-each/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-each/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-environment-jsdom": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz",
+      "integrity": "sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jsdom": "^16.6.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-environment-node": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-27.5.1.tgz",
+      "integrity": "sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-get-type": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
+      "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==",
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-haste-map": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
+      "integrity": "sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/graceful-fs": "^4.1.2",
+        "@types/node": "*",
+        "anymatch": "^3.0.3",
+        "fb-watchman": "^2.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-regex-util": "^27.5.1",
+        "jest-serializer": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "walker": "^1.0.7"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "^2.3.2"
+      }
+    },
+    "node_modules/jest-jasmine2": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz",
+      "integrity": "sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/source-map": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "expect": "^27.5.1",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-jasmine2/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-jasmine2/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-jasmine2/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-jasmine2/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-jasmine2/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-jasmine2/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-leak-detector": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz",
+      "integrity": "sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==",
+      "dependencies": {
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
+      "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-matcher-utils/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-message-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.5.1.tgz",
+      "integrity": "sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==",
+      "dependencies": {
+        "@babel/code-frame": "^7.12.13",
+        "@jest/types": "^27.5.1",
+        "@types/stack-utils": "^2.0.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-message-util/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-mock": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.5.1.tgz",
+      "integrity": "sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-pnp-resolver": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "jest-resolve": "*"
+      },
+      "peerDependenciesMeta": {
+        "jest-resolve": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-regex-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.1.tgz",
+      "integrity": "sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==",
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-resolve": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-27.5.1.tgz",
+      "integrity": "sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-pnp-resolver": "^1.2.2",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "resolve": "^1.20.0",
+        "resolve.exports": "^1.1.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-resolve-dependencies": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz",
+      "integrity": "sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-snapshot": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-resolve/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-resolve/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-resolve/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-resolve/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-resolve/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-resolve/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-runner": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-27.5.1.tgz",
+      "integrity": "sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==",
+      "dependencies": {
+        "@jest/console": "^27.5.1",
+        "@jest/environment": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "emittery": "^0.8.1",
+        "graceful-fs": "^4.2.9",
+        "jest-docblock": "^27.5.1",
+        "jest-environment-jsdom": "^27.5.1",
+        "jest-environment-node": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-leak-detector": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "source-map-support": "^0.5.6",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-runner/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-runner/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-runner/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-runner/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-runner/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-runner/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-runtime": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-27.5.1.tgz",
+      "integrity": "sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/globals": "^27.5.1",
+        "@jest/source-map": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "cjs-module-lexer": "^1.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "execa": "^5.0.0",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-mock": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "slash": "^3.0.0",
+        "strip-bom": "^4.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-runtime/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-runtime/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-runtime/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-runtime/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-runtime/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-runtime/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-serializer": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.5.1.tgz",
+      "integrity": "sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==",
+      "dependencies": {
+        "@types/node": "*",
+        "graceful-fs": "^4.2.9"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-snapshot": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-27.5.1.tgz",
+      "integrity": "sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==",
+      "dependencies": {
+        "@babel/core": "^7.7.2",
+        "@babel/generator": "^7.7.2",
+        "@babel/plugin-syntax-typescript": "^7.7.2",
+        "@babel/traverse": "^7.7.2",
+        "@babel/types": "^7.0.0",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/babel__traverse": "^7.0.4",
+        "@types/prettier": "^2.1.5",
+        "babel-preset-current-node-syntax": "^1.0.0",
+        "chalk": "^4.0.0",
+        "expect": "^27.5.1",
+        "graceful-fs": "^4.2.9",
+        "jest-diff": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "natural-compare": "^1.4.0",
+        "pretty-format": "^27.5.1",
+        "semver": "^7.3.2"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-snapshot/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-snapshot/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-snapshot/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-snapshot/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-snapshot/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-snapshot/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.5.1.tgz",
+      "integrity": "sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-util/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-util/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-util/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-util/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-util/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-util/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-validate": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-27.5.1.tgz",
+      "integrity": "sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^27.5.1",
+        "leven": "^3.1.0",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-validate/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-validate/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-validate/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-validate/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-validate/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-validate/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-watch-typeahead": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/jest-watch-typeahead/-/jest-watch-typeahead-1.1.0.tgz",
+      "integrity": "sha512-Va5nLSJTN7YFtC2jd+7wsoe1pNe5K4ShLux/E5iHEwlB9AxaxmggY7to9KUqKojhaJw3aXqt5WAb4jGPOolpEw==",
+      "dependencies": {
+        "ansi-escapes": "^4.3.1",
+        "chalk": "^4.0.0",
+        "jest-regex-util": "^28.0.0",
+        "jest-watcher": "^28.0.0",
+        "slash": "^4.0.0",
+        "string-length": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "jest": "^27.0.0 || ^28.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/@jest/console": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-28.1.3.tgz",
+      "integrity": "sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==",
+      "dependencies": {
+        "@jest/types": "^28.1.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "jest-message-util": "^28.1.3",
+        "jest-util": "^28.1.3",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/@jest/console/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/@jest/test-result": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-28.1.3.tgz",
+      "integrity": "sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==",
+      "dependencies": {
+        "@jest/console": "^28.1.3",
+        "@jest/types": "^28.1.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "collect-v8-coverage": "^1.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/@jest/types": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-28.1.3.tgz",
+      "integrity": "sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==",
+      "dependencies": {
+        "@jest/schemas": "^28.1.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.8",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/@types/yargs": {
+      "version": "17.0.10",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.10.tgz",
+      "integrity": "sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA==",
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-watch-typeahead/node_modules/emittery": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.10.2.tgz",
+      "integrity": "sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/jest-message-util": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-28.1.3.tgz",
+      "integrity": "sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==",
+      "dependencies": {
+        "@babel/code-frame": "^7.12.13",
+        "@jest/types": "^28.1.3",
+        "@types/stack-utils": "^2.0.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^28.1.3",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/jest-message-util/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/jest-regex-util": {
+      "version": "28.0.2",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-28.0.2.tgz",
+      "integrity": "sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==",
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/jest-util": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-28.1.3.tgz",
+      "integrity": "sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==",
+      "dependencies": {
+        "@jest/types": "^28.1.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/jest-watcher": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-28.1.3.tgz",
+      "integrity": "sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==",
+      "dependencies": {
+        "@jest/test-result": "^28.1.3",
+        "@jest/types": "^28.1.3",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "emittery": "^0.10.2",
+        "jest-util": "^28.1.3",
+        "string-length": "^4.0.1"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/jest-watcher/node_modules/string-length": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+      "dependencies": {
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/jest-watcher/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/pretty-format": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz",
+      "integrity": "sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==",
+      "dependencies": {
+        "@jest/schemas": "^28.1.3",
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/jest-watch-typeahead/node_modules/slash": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/string-length": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+      "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
+      "dependencies": {
+        "char-regex": "^2.0.0",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/string-length/node_modules/char-regex": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz",
+      "integrity": "sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/strip-ansi": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+      "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/strip-ansi/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-watcher": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-27.5.1.tgz",
+      "integrity": "sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==",
+      "dependencies": {
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "jest-util": "^27.5.1",
+        "string-length": "^4.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-watcher/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-watcher/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-watcher/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-watcher/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jest-watcher/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-watcher/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsdom": {
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
+      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
+      "dependencies": {
+        "abab": "^2.0.5",
+        "acorn": "^8.2.4",
+        "acorn-globals": "^6.0.0",
+        "cssom": "^0.4.4",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^2.0.0",
+        "decimal.js": "^10.2.1",
+        "domexception": "^2.0.1",
+        "escodegen": "^2.0.0",
+        "form-data": "^3.0.0",
+        "html-encoding-sniffer": "^2.0.1",
+        "http-proxy-agent": "^4.0.1",
+        "https-proxy-agent": "^5.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.0",
+        "parse5": "6.0.1",
+        "saxes": "^5.0.1",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.0.0",
+        "w3c-hr-time": "^1.0.2",
+        "w3c-xmlserializer": "^2.0.0",
+        "webidl-conversions": "^6.1.0",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.5.0",
+        "ws": "^7.4.6",
+        "xml-name-validator": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
+    },
+    "node_modules/json5": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonpointer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
+      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.2.tgz",
+      "integrity": "sha512-4ZCADZHRkno244xlNnn4AOG6sRQ7iBZ5BbgZ4vW4y5IZw7cVUD1PPeblm1xx/nfmMxPdt/LHsXZW8z/j58+l9Q==",
+      "dependencies": {
+        "array-includes": "^3.1.5",
+        "object.assign": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/klona": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
+      "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.22",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz",
+      "integrity": "sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w=="
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
+      "integrity": "sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==",
+      "dependencies": {
+        "language-subtag-registry": "~0.3.2"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
+    "node_modules/loader-runner": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+      "engines": {
+        "node": ">=6.11.5"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
+    "node_modules/lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/makeerror": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
+      "dependencies": {
+        "tmpl": "1.0.5"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/memfs": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.7.tgz",
+      "integrity": "sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==",
+      "dependencies": {
+        "fs-monkey": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz",
+      "integrity": "sha512-wd+SD57/K6DiV7jIR34P+s3uckTRuQvx0tKPcvjFlrEylk6P4mQ2KSWk1hblj1Kxaqok7LogKOieygXqBczNlg==",
+      "dependencies": {
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/multicast-dns": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
+      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
+      "dependencies": {
+        "dns-packet": "^5.2.2",
+        "thunky": "^1.0.2"
+      },
+      "bin": {
+        "multicast-dns": "cli.js"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/node-forge": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+      "engines": {
+        "node": ">= 6.13.0"
+      }
+    },
+    "node_modules/node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
+      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg=="
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/nwsapi": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.1.tgz",
+      "integrity": "sha512-JYOWTeFoS0Z93587vRJgASD5Ut11fYl5NyihP3KrYBvMe1FRRs6RN7m20SA/16GM4P6hTnZjT+UmDOt38UeXNg=="
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
+      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
+      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.getownpropertydescriptors": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.4.tgz",
+      "integrity": "sha512-sccv3L/pMModT6dJAYF3fzGMVcb38ysQ0tEE6ixv2yXJDtEIPph268OlAdJj5/qZMZDq2g/jqvwppt36uS/uQQ==",
+      "dependencies": {
+        "array.prototype.reduce": "^1.0.4",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.hasown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
+      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
+      "dependencies": {
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
+      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-retry": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
+      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "dependencies": {
+        "@types/retry": "0.12.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-up": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
+      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+      "dependencies": {
+        "find-up": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-up/node_modules/find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-up/node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-up/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pkg-up/node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-up/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-attribute-case-insensitive": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz",
+      "integrity": "sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-browser-comments": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
+      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "browserslist": ">=4",
+        "postcss": ">=8"
+      }
+    },
+    "node_modules/postcss-calc": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
+      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.2"
+      }
+    },
+    "node_modules/postcss-clamp": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz",
+      "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=7.6.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.6"
+      }
+    },
+    "node_modules/postcss-color-functional-notation": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz",
+      "integrity": "sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-color-hex-alpha": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.4.tgz",
+      "integrity": "sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-color-rebeccapurple": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz",
+      "integrity": "sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-colormin": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.0.tgz",
+      "integrity": "sha512-WdDO4gOFG2Z8n4P8TWBpshnL3JpmNmJwdnfP2gbk2qBA8PWwOYcmjmI/t3CmMeL72a7Hkd+x/Mg9O2/0rD54Pg==",
+      "dependencies": {
+        "browserslist": "^4.16.6",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-convert-values": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.2.tgz",
+      "integrity": "sha512-c6Hzc4GAv95B7suy4udszX9Zy4ETyMCgFPUDtWjdFTKH1SE9eFY/jEpHSwTH1QPuwxHpWslhckUQWbNRM4ho5g==",
+      "dependencies": {
+        "browserslist": "^4.20.3",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-custom-media": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz",
+      "integrity": "sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3"
+      }
+    },
+    "node_modules/postcss-custom-properties": {
+      "version": "12.1.8",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.8.tgz",
+      "integrity": "sha512-8rbj8kVu00RQh2fQF81oBqtduiANu4MIxhyf0HbbStgPtnFlWn0yiaYTpLHrPnJbffVY1s9apWsIoVZcc68FxA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-custom-selectors": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz",
+      "integrity": "sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3"
+      }
+    },
+    "node_modules/postcss-dir-pseudo-class": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz",
+      "integrity": "sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-double-position-gradients": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz",
+      "integrity": "sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==",
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-env-function": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-4.0.6.tgz",
+      "integrity": "sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-flexbugs-fixes": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
+      "peerDependencies": {
+        "postcss": "^8.1.4"
+      }
+    },
+    "node_modules/postcss-focus-visible": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-6.0.4.tgz",
+      "integrity": "sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-focus-within": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-5.0.4.tgz",
+      "integrity": "sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-font-variant": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-gap-properties": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz",
+      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==",
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-image-set-function": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz",
+      "integrity": "sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-initial": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
+      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
+    "node_modules/postcss-lab-function": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz",
+      "integrity": "sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==",
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-loader": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
+      "integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==",
+      "dependencies": {
+        "cosmiconfig": "^7.0.0",
+        "klona": "^2.0.5",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/postcss-logical": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
+      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-media-minmax": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
+      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-merge-longhand": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.6.tgz",
+      "integrity": "sha512-6C/UGF/3T5OE2CEbOuX7iNO63dnvqhGZeUnKkDeifebY0XqkkvrctYSZurpNE902LDf2yKwwPFgotnfSoPhQiw==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^5.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.2.tgz",
+      "integrity": "sha512-zKMUlnw+zYCWoPN6yhPjtcEdlJaMUZ0WyVcxTAmw3lkkN/NDMRkOkiuctQEoWAOvH7twaxUUdvBWl0d4+hifRQ==",
+      "dependencies": {
+        "browserslist": "^4.16.6",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^3.1.0",
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
+      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
+      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+      "dependencies": {
+        "colord": "^2.9.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.3.tgz",
+      "integrity": "sha512-bkzpWcjykkqIujNL+EVEPOlLYi/eZ050oImVtHU7b4lFS82jPnsCb44gvC6pxaNt38Els3jWYDHTjHKf0koTgg==",
+      "dependencies": {
+        "browserslist": "^4.16.6",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
+      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.6"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-nesting": {
+      "version": "10.1.10",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.1.10.tgz",
+      "integrity": "sha512-lqd7LXCq0gWc0wKXtoKDru5wEUNjm3OryLVNRZ8OnW8km6fSNUuFrjEhU3nklxXE2jvd4qrox566acgh+xQt8w==",
+      "dependencies": {
+        "@csstools/selector-specificity": "^2.0.0",
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-normalize": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize/-/postcss-normalize-10.0.1.tgz",
+      "integrity": "sha512-+5w18/rDev5mqERcG3W5GZNMJa1eoYYNGo8gB7tEwaos0ajk3ZXAI4mHGcNT47NE+ZnZD1pEpUOFLvltIwmeJA==",
+      "dependencies": {
+        "@csstools/normalize.css": "*",
+        "postcss-browser-comments": "^4",
+        "sanitize.css": "*"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4",
+        "postcss": ">= 8"
+      }
+    },
+    "node_modules/postcss-normalize-charset": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
+      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
+      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
+      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
+      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
+      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.0.tgz",
+      "integrity": "sha512-J6M3MizAAZ2dOdSjy2caayJLQT8E8K9XjLce8AUQMwOrCvjCHv24aLC/Lps1R1ylOfol5VIDMaM/Lo9NGlk1SQ==",
+      "dependencies": {
+        "browserslist": "^4.16.6",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
+      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+      "dependencies": {
+        "normalize-url": "^6.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
+      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-opacity-percentage": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.2.tgz",
+      "integrity": "sha512-lyUfF7miG+yewZ8EAk9XUBIlrHyUE6fijnesuz+Mj5zrIHIEw6KcIZSOk/elVMqzLvREmXB83Zi/5QpNRYd47w==",
+      "funding": [
+        {
+          "type": "kofi",
+          "url": "https://ko-fi.com/mrcgrtz"
+        },
+        {
+          "type": "liberapay",
+          "url": "https://liberapay.com/mrcgrtz"
+        }
+      ],
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
+      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+      "dependencies": {
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-overflow-shorthand": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz",
+      "integrity": "sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-page-break": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
+      "peerDependencies": {
+        "postcss": "^8"
+      }
+    },
+    "node_modules/postcss-place": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-7.0.5.tgz",
+      "integrity": "sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-preset-env": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.7.2.tgz",
+      "integrity": "sha512-1q0ih7EDsZmCb/FMDRvosna7Gsbdx8CvYO5hYT120hcp2ZAuOHpSzibujZ4JpIUcAC02PG6b+eftxqjTFh5BNA==",
+      "dependencies": {
+        "@csstools/postcss-cascade-layers": "^1.0.4",
+        "@csstools/postcss-color-function": "^1.1.0",
+        "@csstools/postcss-font-format-keywords": "^1.0.0",
+        "@csstools/postcss-hwb-function": "^1.0.1",
+        "@csstools/postcss-ic-unit": "^1.0.0",
+        "@csstools/postcss-is-pseudo-class": "^2.0.6",
+        "@csstools/postcss-normalize-display-values": "^1.0.0",
+        "@csstools/postcss-oklab-function": "^1.1.0",
+        "@csstools/postcss-progressive-custom-properties": "^1.3.0",
+        "@csstools/postcss-stepped-value-functions": "^1.0.0",
+        "@csstools/postcss-trigonometric-functions": "^1.0.1",
+        "@csstools/postcss-unset-value": "^1.0.1",
+        "autoprefixer": "^10.4.7",
+        "browserslist": "^4.21.0",
+        "css-blank-pseudo": "^3.0.3",
+        "css-has-pseudo": "^3.0.4",
+        "css-prefers-color-scheme": "^6.0.3",
+        "cssdb": "^6.6.3",
+        "postcss-attribute-case-insensitive": "^5.0.1",
+        "postcss-clamp": "^4.1.0",
+        "postcss-color-functional-notation": "^4.2.3",
+        "postcss-color-hex-alpha": "^8.0.4",
+        "postcss-color-rebeccapurple": "^7.1.0",
+        "postcss-custom-media": "^8.0.2",
+        "postcss-custom-properties": "^12.1.8",
+        "postcss-custom-selectors": "^6.0.3",
+        "postcss-dir-pseudo-class": "^6.0.4",
+        "postcss-double-position-gradients": "^3.1.1",
+        "postcss-env-function": "^4.0.6",
+        "postcss-focus-visible": "^6.0.4",
+        "postcss-focus-within": "^5.0.4",
+        "postcss-font-variant": "^5.0.0",
+        "postcss-gap-properties": "^3.0.3",
+        "postcss-image-set-function": "^4.0.6",
+        "postcss-initial": "^4.0.1",
+        "postcss-lab-function": "^4.2.0",
+        "postcss-logical": "^5.0.4",
+        "postcss-media-minmax": "^5.0.0",
+        "postcss-nesting": "^10.1.9",
+        "postcss-opacity-percentage": "^1.1.2",
+        "postcss-overflow-shorthand": "^3.0.3",
+        "postcss-page-break": "^3.0.4",
+        "postcss-place": "^7.0.4",
+        "postcss-pseudo-class-any-link": "^7.1.5",
+        "postcss-replace-overflow-wrap": "^4.0.0",
+        "postcss-selector-not": "^6.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-pseudo-class-any-link": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz",
+      "integrity": "sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-reduce-initial": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz",
+      "integrity": "sha512-5OgTUviz0aeH6MtBjHfbr57tml13PuedK/Ecg8szzd4XRMbYxH4572JFG067z+FqBIf6Zp/d+0581glkvvWMFw==",
+      "dependencies": {
+        "browserslist": "^4.16.6",
+        "caniuse-api": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-transforms": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
+      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-replace-overflow-wrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
+      "peerDependencies": {
+        "postcss": "^8.0.3"
+      }
+    },
+    "node_modules/postcss-selector-not": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz",
+      "integrity": "sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-svgo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
+      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^2.7.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
+    "node_modules/postcss-svgo/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/svgo": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/postcss-unique-selectors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
+      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/pretty-bytes": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
+      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pretty-error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
+      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
+      "dependencies": {
+        "lodash": "^4.17.20",
+        "renderkid": "^3.0.0"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "node_modules/promise": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz",
+      "integrity": "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==",
+      "dependencies": {
+        "asap": "~2.0.6"
+      }
+    },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/proxy-addr/node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/psl": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
+    },
+    "node_modules/punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
+      "engines": {
+        "node": ">=0.6.0",
+        "teleport": ">=0.2.0"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-app-polyfill": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
+      "integrity": "sha512-sZ41cxiU5llIB003yxxQBYrARBqe0repqPTTYBTmMqTz9szeBbE37BehCE891NZsmdZqqP+xWKdT3eo3vOzN8w==",
+      "dependencies": {
+        "core-js": "^3.19.2",
+        "object-assign": "^4.1.1",
+        "promise": "^8.1.0",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.9",
+        "whatwg-fetch": "^3.6.2"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/react-dev-utils": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
+      "integrity": "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==",
+      "dependencies": {
+        "@babel/code-frame": "^7.16.0",
+        "address": "^1.1.2",
+        "browserslist": "^4.18.1",
+        "chalk": "^4.1.2",
+        "cross-spawn": "^7.0.3",
+        "detect-port-alt": "^1.1.6",
+        "escape-string-regexp": "^4.0.0",
+        "filesize": "^8.0.6",
+        "find-up": "^5.0.0",
+        "fork-ts-checker-webpack-plugin": "^6.5.0",
+        "global-modules": "^2.0.0",
+        "globby": "^11.0.4",
+        "gzip-size": "^6.0.0",
+        "immer": "^9.0.7",
+        "is-root": "^2.1.0",
+        "loader-utils": "^3.2.0",
+        "open": "^8.4.0",
+        "pkg-up": "^3.1.0",
+        "prompts": "^2.4.2",
+        "react-error-overlay": "^6.0.11",
+        "recursive-readdir": "^2.2.2",
+        "shell-quote": "^1.7.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/react-dev-utils/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/loader-utils": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.0.tgz",
+      "integrity": "sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ==",
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/react-error-overlay": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
+      "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
+    },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
+    "node_modules/react-refresh": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
+      "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-scripts": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
+      "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
+      "dependencies": {
+        "@babel/core": "^7.16.0",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+        "@svgr/webpack": "^5.5.0",
+        "babel-jest": "^27.4.2",
+        "babel-loader": "^8.2.3",
+        "babel-plugin-named-asset-import": "^0.3.8",
+        "babel-preset-react-app": "^10.0.1",
+        "bfj": "^7.0.2",
+        "browserslist": "^4.18.1",
+        "camelcase": "^6.2.1",
+        "case-sensitive-paths-webpack-plugin": "^2.4.0",
+        "css-loader": "^6.5.1",
+        "css-minimizer-webpack-plugin": "^3.2.0",
+        "dotenv": "^10.0.0",
+        "dotenv-expand": "^5.1.0",
+        "eslint": "^8.3.0",
+        "eslint-config-react-app": "^7.0.1",
+        "eslint-webpack-plugin": "^3.1.1",
+        "file-loader": "^6.2.0",
+        "fs-extra": "^10.0.0",
+        "html-webpack-plugin": "^5.5.0",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^27.4.3",
+        "jest-resolve": "^27.4.2",
+        "jest-watch-typeahead": "^1.0.0",
+        "mini-css-extract-plugin": "^2.4.5",
+        "postcss": "^8.4.4",
+        "postcss-flexbugs-fixes": "^5.0.2",
+        "postcss-loader": "^6.2.1",
+        "postcss-normalize": "^10.0.1",
+        "postcss-preset-env": "^7.0.1",
+        "prompts": "^2.4.2",
+        "react-app-polyfill": "^3.0.0",
+        "react-dev-utils": "^12.0.1",
+        "react-refresh": "^0.11.0",
+        "resolve": "^1.20.0",
+        "resolve-url-loader": "^4.0.0",
+        "sass-loader": "^12.3.0",
+        "semver": "^7.3.5",
+        "source-map-loader": "^3.0.0",
+        "style-loader": "^3.3.1",
+        "tailwindcss": "^3.0.2",
+        "terser-webpack-plugin": "^5.2.5",
+        "webpack": "^5.64.4",
+        "webpack-dev-server": "^4.6.0",
+        "webpack-manifest-plugin": "^4.0.2",
+        "workbox-webpack-plugin": "^6.4.1"
+      },
+      "bin": {
+        "react-scripts": "bin/react-scripts.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "^2.3.2"
+      },
+      "peerDependencies": {
+        "react": ">= 16",
+        "typescript": "^3.2.1 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/recursive-readdir": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
+      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "dependencies": {
+        "minimatch": "3.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/recursive-readdir/node_modules/minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz",
+      "integrity": "sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==",
+      "dependencies": {
+        "regenerate": "^1.4.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
+    "node_modules/regenerator-transform": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.0.tgz",
+      "integrity": "sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "node_modules/regex-parser": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
+      "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q=="
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      }
+    },
+    "node_modules/regexpu-core": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.1.0.tgz",
+      "integrity": "sha512-bb6hk+xWd2PEOkj5It46A16zFMs2mv86Iwpdu94la4S3sJ7C973h2dHpYKwIBGaWSO7cIRJ+UX0IeMaWcO4qwA==",
+      "dependencies": {
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.0.1",
+        "regjsgen": "^0.6.0",
+        "regjsparser": "^0.8.2",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regjsgen": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.6.0.tgz",
+      "integrity": "sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA=="
+    },
+    "node_modules/regjsparser": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.8.4.tgz",
+      "integrity": "sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==",
+      "dependencies": {
+        "jsesc": "~0.5.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      }
+    },
+    "node_modules/relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/renderkid": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
+      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
+      "dependencies": {
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^6.0.1"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
+    "node_modules/resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "dependencies": {
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-url-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
+      "integrity": "sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA==",
+      "dependencies": {
+        "adjust-sourcemap-loader": "^4.0.0",
+        "convert-source-map": "^1.7.0",
+        "loader-utils": "^2.0.0",
+        "postcss": "^7.0.35",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">=8.9"
+      },
+      "peerDependencies": {
+        "rework": "1.0.1",
+        "rework-visit": "1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rework": {
+          "optional": true
+        },
+        "rework-visit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
+    },
+    "node_modules/resolve-url-loader/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve.exports": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz",
+      "integrity": "sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "2.77.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
+      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rollup-plugin-terser": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "jest-worker": "^26.2.1",
+        "serialize-javascript": "^4.0.0",
+        "terser": "^5.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0"
+      }
+    },
+    "node_modules/rollup-plugin-terser/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rollup-plugin-terser/node_modules/jest-worker": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/rollup-plugin-terser/node_modules/serialize-javascript": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/rollup-plugin-terser/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/sanitize.css": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
+      "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
+    },
+    "node_modules/sass-loader": {
+      "version": "12.6.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
+      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
+      "dependencies": {
+        "klona": "^2.0.4",
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
+    "node_modules/saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
+    },
+    "node_modules/selfsigned": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.1.tgz",
+      "integrity": "sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==",
+      "dependencies": {
+        "node-forge": "^1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
+      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
+    "node_modules/serve-index/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/serve-index/node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+    },
+    "node_modules/serve-index/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.18.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz",
+      "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw=="
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sockjs": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
+      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+      "dependencies": {
+        "faye-websocket": "^0.11.3",
+        "uuid": "^8.3.2",
+        "websocket-driver": "^0.7.4"
+      }
+    },
+    "node_modules/source-list-map": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
+    },
+    "node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-loader": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.1.tgz",
+      "integrity": "sha512-Vp1UsfyPvgujKQzi4pyDiTOnE3E4H+yHvkVRN3c/9PJmQS4CQJExvcDvaX/D+RV+xQben9HJ56jMJS3CgUeWyA==",
+      "dependencies": {
+        "abab": "^2.0.5",
+        "iconv-lite": "^0.6.3",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
+    "node_modules/spdy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "dependencies": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "dependencies": {
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
+    "node_modules/stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility"
+    },
+    "node_modules/stack-utils": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.5.tgz",
+      "integrity": "sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==",
+      "dependencies": {
+        "escape-string-regexp": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/stack-utils/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/string-length": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+      "dependencies": {
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/string-natural-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-3.0.1.tgz",
+      "integrity": "sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw=="
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz",
+      "integrity": "sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1",
+        "get-intrinsic": "^1.1.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.4.1",
+        "side-channel": "^1.0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
+      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
+      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dependencies": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
+      "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/stylehacks": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
+      "integrity": "sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q==",
+      "dependencies": {
+        "browserslist": "^4.16.6",
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/supports-hyperlinks": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz",
+      "integrity": "sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==",
+      "dependencies": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-hyperlinks/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-hyperlinks/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
+    },
+    "node_modules/svgo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
+      "deprecated": "This SVGO version is no longer supported. Upgrade to v2.x.x.",
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "coa": "^2.0.2",
+        "css-select": "^2.0.0",
+        "css-select-base-adapter": "^0.1.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "^4.0.2",
+        "js-yaml": "^3.13.1",
+        "mkdirp": "~0.5.1",
+        "object.values": "^1.1.0",
+        "sax": "~1.2.4",
+        "stable": "^0.1.8",
+        "unquote": "~1.1.1",
+        "util.promisify": "~1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/svgo/node_modules/css-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^3.2.1",
+        "domutils": "^1.7.0",
+        "nth-check": "^1.0.2"
+      }
+    },
+    "node_modules/svgo/node_modules/css-what": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/svgo/node_modules/dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/svgo/node_modules/domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "dependencies": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/svgo/node_modules/domutils/node_modules/domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+    },
+    "node_modules/svgo/node_modules/nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "dependencies": {
+        "boolbase": "~1.0.0"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.6.tgz",
+      "integrity": "sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==",
+      "dependencies": {
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "color-name": "^1.1.4",
+        "detective": "^5.2.1",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.11",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "lilconfig": "^2.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.4",
+        "postcss-nested": "5.0.6",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.22.1"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/temp-dir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
+      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tempy": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.6.0.tgz",
+      "integrity": "sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==",
+      "dependencies": {
+        "is-stream": "^2.0.0",
+        "temp-dir": "^2.0.0",
+        "type-fest": "^0.16.0",
+        "unique-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/tempy/node_modules/type-fest": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
+      "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/terminal-link": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
+      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
+      "dependencies": {
+        "ansi-escapes": "^4.2.1",
+        "supports-hyperlinks": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz",
+      "integrity": "sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.7",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.0",
+        "terser": "^5.7.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "node_modules/test-exclude": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+    },
+    "node_modules/throat": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
+      "integrity": "sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w=="
+    },
+    "node_modules/thunky": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
+    },
+    "node_modules/tmpl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
+      "integrity": "sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
+      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
+      "dependencies": {
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tryer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
+      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
+      "integrity": "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.1",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/json5": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "node_modules/tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dependencies": {
+        "tslib": "^1.8.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+      }
+    },
+    "node_modules/tsutils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg=="
+    },
+    "node_modules/upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz",
+      "integrity": "sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "browserslist-lint": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/util.promisify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
+      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.2",
+        "has-symbols": "^1.0.1",
+        "object.getownpropertydescriptors": "^2.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
+    },
+    "node_modules/v8-to-istanbul": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
+      "integrity": "sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^1.6.0",
+        "source-map": "^0.7.3"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/w3c-hr-time": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "dependencies": {
+        "browser-process-hrtime": "^1.0.0"
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
+      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "dependencies": {
+        "xml-name-validator": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/walker": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
+      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
+      "dependencies": {
+        "makeerror": "1.0.12"
+      }
+    },
+    "node_modules/watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "dependencies": {
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "node_modules/web-vitals": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
+      "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
+    },
+    "node_modules/webidl-conversions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
+      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
+      "engines": {
+        "node": ">=10.4"
+      }
+    },
+    "node_modules/webpack": {
+      "version": "5.74.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
+      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^0.0.51",
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/wasm-edit": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1",
+        "acorn": "^8.7.1",
+        "acorn-import-assertions": "^1.7.6",
+        "browserslist": "^4.14.5",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.10.0",
+        "es-module-lexer": "^0.9.0",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.9",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.1.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.1.3",
+        "watchpack": "^2.4.0",
+        "webpack-sources": "^3.2.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-dev-middleware": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
+      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "dependencies": {
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.3",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/webpack-dev-server": {
+      "version": "4.9.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.3.tgz",
+      "integrity": "sha512-3qp/eoboZG5/6QgiZ3llN8TUzkSpYg1Ko9khWX1h40MIEUNS2mDoIa8aXsPfskER+GbTvs/IJZ1QTBBhhuetSw==",
+      "dependencies": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/serve-static": "^1.13.10",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.5.1",
+        "ansi-html-community": "^0.0.8",
+        "bonjour-service": "^1.0.11",
+        "chokidar": "^3.5.3",
+        "colorette": "^2.0.10",
+        "compression": "^1.7.4",
+        "connect-history-api-fallback": "^2.0.0",
+        "default-gateway": "^6.0.3",
+        "express": "^4.17.3",
+        "graceful-fs": "^4.2.6",
+        "html-entities": "^2.3.2",
+        "http-proxy-middleware": "^2.0.3",
+        "ipaddr.js": "^2.0.1",
+        "open": "^8.0.9",
+        "p-retry": "^4.5.0",
+        "rimraf": "^3.0.2",
+        "schema-utils": "^4.0.0",
+        "selfsigned": "^2.0.1",
+        "serve-index": "^1.9.1",
+        "sockjs": "^0.3.24",
+        "spdy": "^4.0.2",
+        "webpack-dev-middleware": "^5.3.1",
+        "ws": "^8.4.2"
+      },
+      "bin": {
+        "webpack-dev-server": "bin/webpack-dev-server.js"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.37.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/webpack-dev-server/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ws": {
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz",
+      "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-manifest-plugin": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz",
+      "integrity": "sha512-YXUAwxtfKIJIKkhg03MKuiFAD72PlrqCiwdwO4VEXdRO5V0ORCNwaOwAZawPZalCbmH9kBDmXnNeQOw+BIEiow==",
+      "dependencies": {
+        "tapable": "^2.0.0",
+        "webpack-sources": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.44.2 || ^5.47.0"
+      }
+    },
+    "node_modules/webpack-manifest-plugin/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/webpack-manifest-plugin/node_modules/webpack-sources": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz",
+      "integrity": "sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==",
+      "dependencies": {
+        "source-list-map": "^2.0.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack/node_modules/@types/estree": {
+      "version": "0.0.51",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
+      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ=="
+    },
+    "node_modules/webpack/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/webpack/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "dependencies": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/whatwg-fetch": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
+      "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
+      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
+      "dependencies": {
+        "lodash": "^4.7.0",
+        "tr46": "^2.1.0",
+        "webidl-conversions": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/workbox-background-sync": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.5.3.tgz",
+      "integrity": "sha512-0DD/V05FAcek6tWv9XYj2w5T/plxhDSpclIcAGjA/b7t/6PdaRkQ7ZgtAX6Q/L7kV7wZ8uYRJUoH11VjNipMZw==",
+      "dependencies": {
+        "idb": "^6.1.4",
+        "workbox-core": "6.5.3"
+      }
+    },
+    "node_modules/workbox-broadcast-update": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.5.3.tgz",
+      "integrity": "sha512-4AwCIA5DiDrYhlN+Miv/fp5T3/whNmSL+KqhTwRBTZIL6pvTgE4lVuRzAt1JltmqyMcQ3SEfCdfxczuI4kwFQg==",
+      "dependencies": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "node_modules/workbox-build": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.5.3.tgz",
+      "integrity": "sha512-8JNHHS7u13nhwIYCDea9MNXBNPHXCs5KDZPKI/ZNTr3f4sMGoD7hgFGecbyjX1gw4z6e9bMpMsOEJNyH5htA/w==",
+      "dependencies": {
+        "@apideck/better-ajv-errors": "^0.3.1",
+        "@babel/core": "^7.11.1",
+        "@babel/preset-env": "^7.11.0",
+        "@babel/runtime": "^7.11.2",
+        "@rollup/plugin-babel": "^5.2.0",
+        "@rollup/plugin-node-resolve": "^11.2.1",
+        "@rollup/plugin-replace": "^2.4.1",
+        "@surma/rollup-plugin-off-main-thread": "^2.2.3",
+        "ajv": "^8.6.0",
+        "common-tags": "^1.8.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "fs-extra": "^9.0.1",
+        "glob": "^7.1.6",
+        "lodash": "^4.17.20",
+        "pretty-bytes": "^5.3.0",
+        "rollup": "^2.43.1",
+        "rollup-plugin-terser": "^7.0.0",
+        "source-map": "^0.8.0-beta.0",
+        "stringify-object": "^3.3.0",
+        "strip-comments": "^2.0.1",
+        "tempy": "^0.6.0",
+        "upath": "^1.2.0",
+        "workbox-background-sync": "6.5.3",
+        "workbox-broadcast-update": "6.5.3",
+        "workbox-cacheable-response": "6.5.3",
+        "workbox-core": "6.5.3",
+        "workbox-expiration": "6.5.3",
+        "workbox-google-analytics": "6.5.3",
+        "workbox-navigation-preload": "6.5.3",
+        "workbox-precaching": "6.5.3",
+        "workbox-range-requests": "6.5.3",
+        "workbox-recipes": "6.5.3",
+        "workbox-routing": "6.5.3",
+        "workbox-strategies": "6.5.3",
+        "workbox-streams": "6.5.3",
+        "workbox-sw": "6.5.3",
+        "workbox-window": "6.5.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/workbox-build/node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/workbox-build/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/workbox-build/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/workbox-build/node_modules/source-map": {
+      "version": "0.8.0-beta.0",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
+      "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
+      "dependencies": {
+        "whatwg-url": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/workbox-build/node_modules/tr46": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+      "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/workbox-build/node_modules/webidl-conversions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
+    },
+    "node_modules/workbox-build/node_modules/whatwg-url": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
+      "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+      "dependencies": {
+        "lodash.sortby": "^4.7.0",
+        "tr46": "^1.0.1",
+        "webidl-conversions": "^4.0.2"
+      }
+    },
+    "node_modules/workbox-cacheable-response": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.5.3.tgz",
+      "integrity": "sha512-6JE/Zm05hNasHzzAGKDkqqgYtZZL2H06ic2GxuRLStA4S/rHUfm2mnLFFXuHAaGR1XuuYyVCEey1M6H3PdZ7SQ==",
+      "dependencies": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "node_modules/workbox-core": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.5.3.tgz",
+      "integrity": "sha512-Bb9ey5n/M9x+l3fBTlLpHt9ASTzgSGj6vxni7pY72ilB/Pb3XtN+cZ9yueboVhD5+9cNQrC9n/E1fSrqWsUz7Q=="
+    },
+    "node_modules/workbox-expiration": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.5.3.tgz",
+      "integrity": "sha512-jzYopYR1zD04ZMdlbn/R2Ik6ixiXbi15c9iX5H8CTi6RPDz7uhvMLZPKEndZTpfgmUk8mdmT9Vx/AhbuCl5Sqw==",
+      "dependencies": {
+        "idb": "^6.1.4",
+        "workbox-core": "6.5.3"
+      }
+    },
+    "node_modules/workbox-google-analytics": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.5.3.tgz",
+      "integrity": "sha512-3GLCHotz5umoRSb4aNQeTbILETcrTVEozSfLhHSBaegHs1PnqCmN0zbIy2TjTpph2AGXiNwDrWGF0AN+UgDNTw==",
+      "dependencies": {
+        "workbox-background-sync": "6.5.3",
+        "workbox-core": "6.5.3",
+        "workbox-routing": "6.5.3",
+        "workbox-strategies": "6.5.3"
+      }
+    },
+    "node_modules/workbox-navigation-preload": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.5.3.tgz",
+      "integrity": "sha512-bK1gDFTc5iu6lH3UQ07QVo+0ovErhRNGvJJO/1ngknT0UQ702nmOUhoN9qE5mhuQSrnK+cqu7O7xeaJ+Rd9Tmg==",
+      "dependencies": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "node_modules/workbox-precaching": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.5.3.tgz",
+      "integrity": "sha512-sjNfgNLSsRX5zcc63H/ar/hCf+T19fRtTqvWh795gdpghWb5xsfEkecXEvZ8biEi1QD7X/ljtHphdaPvXDygMQ==",
+      "dependencies": {
+        "workbox-core": "6.5.3",
+        "workbox-routing": "6.5.3",
+        "workbox-strategies": "6.5.3"
+      }
+    },
+    "node_modules/workbox-range-requests": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.5.3.tgz",
+      "integrity": "sha512-pGCP80Bpn/0Q0MQsfETSfmtXsQcu3M2QCJwSFuJ6cDp8s2XmbUXkzbuQhCUzKR86ZH2Vex/VUjb2UaZBGamijA==",
+      "dependencies": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "node_modules/workbox-recipes": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.5.3.tgz",
+      "integrity": "sha512-IcgiKYmbGiDvvf3PMSEtmwqxwfQ5zwI7OZPio3GWu4PfehA8jI8JHI3KZj+PCfRiUPZhjQHJ3v1HbNs+SiSkig==",
+      "dependencies": {
+        "workbox-cacheable-response": "6.5.3",
+        "workbox-core": "6.5.3",
+        "workbox-expiration": "6.5.3",
+        "workbox-precaching": "6.5.3",
+        "workbox-routing": "6.5.3",
+        "workbox-strategies": "6.5.3"
+      }
+    },
+    "node_modules/workbox-routing": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.5.3.tgz",
+      "integrity": "sha512-DFjxcuRAJjjt4T34RbMm3MCn+xnd36UT/2RfPRfa8VWJGItGJIn7tG+GwVTdHmvE54i/QmVTJepyAGWtoLPTmg==",
+      "dependencies": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "node_modules/workbox-strategies": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.5.3.tgz",
+      "integrity": "sha512-MgmGRrDVXs7rtSCcetZgkSZyMpRGw8HqL2aguszOc3nUmzGZsT238z/NN9ZouCxSzDu3PQ3ZSKmovAacaIhu1w==",
+      "dependencies": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "node_modules/workbox-streams": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.5.3.tgz",
+      "integrity": "sha512-vN4Qi8o+b7zj1FDVNZ+PlmAcy1sBoV7SC956uhqYvZ9Sg1fViSbOpydULOssVJ4tOyKRifH/eoi6h99d+sJ33w==",
+      "dependencies": {
+        "workbox-core": "6.5.3",
+        "workbox-routing": "6.5.3"
+      }
+    },
+    "node_modules/workbox-sw": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.5.3.tgz",
+      "integrity": "sha512-BQBzm092w+NqdIEF2yhl32dERt9j9MDGUTa2Eaa+o3YKL4Qqw55W9yQC6f44FdAHdAJrJvp0t+HVrfh8AiGj8A=="
+    },
+    "node_modules/workbox-webpack-plugin": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.3.tgz",
+      "integrity": "sha512-Es8Xr02Gi6Kc3zaUwR691ZLy61hz3vhhs5GztcklQ7kl5k2qAusPh0s6LF3wEtlpfs9ZDErnmy5SErwoll7jBA==",
+      "dependencies": {
+        "fast-json-stable-stringify": "^2.1.0",
+        "pretty-bytes": "^5.4.1",
+        "upath": "^1.2.0",
+        "webpack-sources": "^1.4.3",
+        "workbox-build": "6.5.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.4.0 || ^5.9.0"
+      }
+    },
+    "node_modules/workbox-webpack-plugin/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/workbox-webpack-plugin/node_modules/webpack-sources": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
+      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+      "dependencies": {
+        "source-list-map": "^2.0.0",
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/workbox-window": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-6.5.3.tgz",
+      "integrity": "sha512-GnJbx1kcKXDtoJBVZs/P7ddP0Yt52NNy4nocjBpYPiRhMqTpJCNrSL+fGHZ/i/oP6p/vhE8II0sA6AZGKGnssw==",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2",
+        "workbox-core": "6.5.3"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    },
+    "node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  },
+  "dependencies": {
+    "@ampproject/remapping": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
+      "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.1.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@apideck/better-ajv-errors": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
+      "integrity": "sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==",
+      "requires": {
+        "json-schema": "^0.4.0",
+        "jsonpointer": "^5.0.0",
+        "leven": "^3.1.0"
+      }
+    },
+    "@babel/code-frame": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
+      "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
+      "requires": {
+        "@babel/highlight": "^7.18.6"
+      }
+    },
+    "@babel/compat-data": {
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.8.tgz",
+      "integrity": "sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ=="
+    },
+    "@babel/core": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.9.tgz",
+      "integrity": "sha512-1LIb1eL8APMy91/IMW+31ckrfBM4yCoLaVzoDhZUKSM4cu1L1nIidyxkCgzPAgrC5WEz36IPEr/eSeSF9pIn+g==",
+      "requires": {
+        "@ampproject/remapping": "^2.1.0",
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.18.9",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-module-transforms": "^7.18.9",
+        "@babel/helpers": "^7.18.9",
+        "@babel/parser": "^7.18.9",
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "@babel/eslint-parser": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz",
+      "integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==",
+      "requires": {
+        "eslint-scope": "^5.1.1",
+        "eslint-visitor-keys": "^2.1.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw=="
+        },
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "@babel/generator": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.9.tgz",
+      "integrity": "sha512-wt5Naw6lJrL1/SGkipMiFxJjtyczUWTP38deiP1PO60HsBjDeKk08CGC3S8iVuvf0FmTdgKwU1KIXzSKL1G0Ug==",
+      "requires": {
+        "@babel/types": "^7.18.9",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "jsesc": "^2.5.1"
+      },
+      "dependencies": {
+        "@jridgewell/gen-mapping": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+          "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+          "requires": {
+            "@jridgewell/set-array": "^1.0.1",
+            "@jridgewell/sourcemap-codec": "^1.4.10",
+            "@jridgewell/trace-mapping": "^0.3.9"
+          }
+        }
+      }
+    },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
+      "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+      "requires": {
+        "@babel/types": "^7.18.6"
+      }
+    },
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz",
+      "integrity": "sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==",
+      "requires": {
+        "@babel/helper-explode-assignable-expression": "^7.18.6",
+        "@babel/types": "^7.18.9"
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz",
+      "integrity": "sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==",
+      "requires": {
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-validator-option": "^7.18.6",
+        "browserslist": "^4.20.2",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.9.tgz",
+      "integrity": "sha512-WvypNAYaVh23QcjpMR24CwZY2Nz6hqdOcFdPbNpV56hL5H6KiFheO7Xm1aPdlLQ7d5emYZX7VZwPp9x3z+2opw==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-split-export-declaration": "^7.18.6"
+      }
+    },
+    "@babel/helper-create-regexp-features-plugin": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.18.6.tgz",
+      "integrity": "sha512-7LcpH1wnQLGrI+4v+nPp+zUvIkF9x0ddv1Hkdue10tg3gmRnLy97DXh4STiOf1qeIInyD69Qv5kKSZzKD8B/7A==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "regexpu-core": "^5.1.0"
+      }
+    },
+    "@babel/helper-define-polyfill-provider": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.2.tgz",
+      "integrity": "sha512-r9QJJ+uDWrd+94BSPcP6/de67ygLtvVy6cK4luE6MOuDsZIdoaPBnfSpbO/+LTifjPckbKXRuI9BB/Z2/y3iTg==",
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.17.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "@babel/helper-environment-visitor": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
+      "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg=="
+    },
+    "@babel/helper-explode-assignable-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz",
+      "integrity": "sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==",
+      "requires": {
+        "@babel/types": "^7.18.6"
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz",
+      "integrity": "sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==",
+      "requires": {
+        "@babel/template": "^7.18.6",
+        "@babel/types": "^7.18.9"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
+      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+      "requires": {
+        "@babel/types": "^7.18.6"
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz",
+      "integrity": "sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==",
+      "requires": {
+        "@babel/types": "^7.18.9"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+      "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
+      "requires": {
+        "@babel/types": "^7.18.6"
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz",
+      "integrity": "sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==",
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-simple-access": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
+      "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
+      "requires": {
+        "@babel/types": "^7.18.6"
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz",
+      "integrity": "sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w=="
+    },
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz",
+      "integrity": "sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-wrap-function": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      }
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.18.9.tgz",
+      "integrity": "sha512-dNsWibVI4lNT6HiuOIBr1oyxo40HvIVmbwPUm3XZ7wMh4k2WxrxTqZwSqw/eEmXDS9np0ey5M2bz9tBmO9c+YQ==",
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      }
+    },
+    "@babel/helper-simple-access": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz",
+      "integrity": "sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==",
+      "requires": {
+        "@babel/types": "^7.18.6"
+      }
+    },
+    "@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.9.tgz",
+      "integrity": "sha512-imytd2gHi3cJPsybLRbmFrF7u5BIEuI2cNheyKi3/iOBC63kNn3q8Crn2xVuESli0aM4KYsyEqKyS7lFL8YVtw==",
+      "requires": {
+        "@babel/types": "^7.18.9"
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
+      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+      "requires": {
+        "@babel/types": "^7.18.6"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz",
+      "integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g=="
+    },
+    "@babel/helper-validator-option": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz",
+      "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw=="
+    },
+    "@babel/helper-wrap-function": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.18.9.tgz",
+      "integrity": "sha512-cG2ru3TRAL6a60tfQflpEfs4ldiPwF6YW3zfJiRgmoFVIaC1vGnBBgatfec+ZUziPHkHSaXAuEck3Cdkf3eRpQ==",
+      "requires": {
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      }
+    },
+    "@babel/helpers": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.9.tgz",
+      "integrity": "sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==",
+      "requires": {
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/parser": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
+      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg=="
+    },
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz",
+      "integrity": "sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz",
+      "integrity": "sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
+        "@babel/plugin-proposal-optional-chaining": "^7.18.9"
+      }
+    },
+    "@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.6.tgz",
+      "integrity": "sha512-WAz4R9bvozx4qwf74M+sfqPMKfSqwM0phxPTR6iJIi8robgzXwkEgmeJG1gEKhm6sDqT/U9aV3lfcqybIpev8w==",
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-remap-async-to-generator": "^7.18.6",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      }
+    },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
+      "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-proposal-class-static-block": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz",
+      "integrity": "sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      }
+    },
+    "@babel/plugin-proposal-decorators": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.18.9.tgz",
+      "integrity": "sha512-KD7zDNaD14CRpjQjVbV4EnH9lsKYlcpUrhZH37ei2IY+AlXrfAPy5pTmRUE4X6X1k8EsKXPraykxeaogqQvSGA==",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/plugin-syntax-decorators": "^7.18.6"
+      }
+    },
+    "@babel/plugin-proposal-dynamic-import": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz",
+      "integrity": "sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz",
+      "integrity": "sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-json-strings": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz",
+      "integrity": "sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz",
+      "integrity": "sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz",
+      "integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-numeric-separator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz",
+      "integrity": "sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.9.tgz",
+      "integrity": "sha512-kDDHQ5rflIeY5xl69CEqGEZ0KY369ehsCIEbTGb4siHG5BE9sga/T0r0OUwyZNLMmZE79E1kbsqAjwFCW4ds6Q==",
+      "requires": {
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.18.8"
+      }
+    },
+    "@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz",
+      "integrity": "sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-optional-chaining": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz",
+      "integrity": "sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-private-methods": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
+      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz",
+      "integrity": "sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      }
+    },
+    "@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
+      "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-bigint": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
+      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-decorators": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.18.6.tgz",
+      "integrity": "sha512-fqyLgjcxf/1yhyZ6A+yo1u9gJ7eleFQod2lkaUsF9DQ7sbbY3Ligym3L0+I2c0WmqNKDpoD9UTb1AKP3qRMOAQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
+    },
+    "@babel/plugin-syntax-flow": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.18.6.tgz",
+      "integrity": "sha512-LUbR+KNTBWCUAqRG9ex5Gnzu2IOkt8jRJbHHXFT9q+L9zm7M/QQbEqXyw1n1pohYvOyWC8CjeyjrSaIwiYjK7A==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-syntax-import-assertions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.18.6.tgz",
+      "integrity": "sha512-/DU3RXad9+bZwrgWJQKbr39gYbJpLJHezqEzRzi/BHRlJ9zsQb4CK2CA/5apllXNomwA1qHwzvHl+AdEmC5krQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz",
+      "integrity": "sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-typescript": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.18.6.tgz",
+      "integrity": "sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz",
+      "integrity": "sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-async-to-generator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz",
+      "integrity": "sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-remap-async-to-generator": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz",
+      "integrity": "sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.9.tgz",
+      "integrity": "sha512-5sDIJRV1KtQVEbt/EIBwGy4T01uYIo4KRB3VUqzkhrAIOGx7AoctL9+Ux88btY0zXdDyPJ9mW+bg+v+XEkGmtw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-classes": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.9.tgz",
+      "integrity": "sha512-EkRQxsxoytpTlKJmSPYrsOMjCILacAjtSVkd4gChEe2kXjFCun3yohhW5I7plXJhCemM0gKsaGMcO8tinvCA5g==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz",
+      "integrity": "sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.9.tgz",
+      "integrity": "sha512-p5VCYNddPLkZTq4XymQIaIfZNJwT9YsjkPOhkVEqt6QIpQFZVM9IltqqYpOEkJoN1DPznmxUDyZ5CTZs/ZCuHA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz",
+      "integrity": "sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==",
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz",
+      "integrity": "sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz",
+      "integrity": "sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==",
+      "requires": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-flow-strip-types": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.18.9.tgz",
+      "integrity": "sha512-+G6rp2zRuOAInY5wcggsx4+QVao1qPM0osC9fTUVlAV3zOrzTCnrMAFVnR6+a3T8wz1wFIH7KhYMcMB3u1n80A==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-flow": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-for-of": {
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz",
+      "integrity": "sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-function-name": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz",
+      "integrity": "sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==",
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz",
+      "integrity": "sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-member-expression-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz",
+      "integrity": "sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-modules-amd": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.18.6.tgz",
+      "integrity": "sha512-Pra5aXsmTsOnjM3IajS8rTaLCy++nGM4v3YR4esk5PCsyg9z8NA5oQLwxzMUtDBd8F+UmVza3VxoAaWCbzH1rg==",
+      "requires": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-commonjs": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.6.tgz",
+      "integrity": "sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q==",
+      "requires": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-simple-access": "^7.18.6",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-systemjs": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.9.tgz",
+      "integrity": "sha512-zY/VSIbbqtoRoJKo2cDTewL364jSlZGvn0LKOf9ntbfxOvjfmyrdtEEOAdswOswhZEb8UH3jDkCKHd1sPgsS0A==",
+      "requires": {
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-module-transforms": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-umd": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz",
+      "integrity": "sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==",
+      "requires": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.18.6.tgz",
+      "integrity": "sha512-UmEOGF8XgaIqD74bC8g7iV3RYj8lMf0Bw7NJzvnS9qQhM4mg+1WHKotUIdjxgD2RGrgFLZZPCFPFj3P/kVDYhg==",
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-new-target": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz",
+      "integrity": "sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-object-super": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
+      "integrity": "sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-parameters": {
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.18.8.tgz",
+      "integrity": "sha512-ivfbE3X2Ss+Fj8nnXvKJS6sjRG4gzwPMsP+taZC+ZzEGjAYlvENixmt1sZ5Ca6tWls+BlKSGKPJ6OOXvXCbkFg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-property-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz",
+      "integrity": "sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-react-constant-elements": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.18.9.tgz",
+      "integrity": "sha512-IrTYh1I3YCEL1trjknnlLKTp5JggjzhKl/d3ibzPc97JhpFcDTr38Jdek/oX4cFbS6By0bXJcOkpRvJ5ZHK2wQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-react-display-name": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz",
+      "integrity": "sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-react-jsx": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.18.6.tgz",
+      "integrity": "sha512-Mz7xMPxoy9kPS/JScj6fJs03TZ/fZ1dJPlMjRAgTaxaS0fUBk8FV/A2rRgfPsVCZqALNwMexD+0Uaf5zlcKPpw==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-jsx": "^7.18.6",
+        "@babel/types": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-react-jsx-development": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz",
+      "integrity": "sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==",
+      "requires": {
+        "@babel/plugin-transform-react-jsx": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz",
+      "integrity": "sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-regenerator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz",
+      "integrity": "sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "regenerator-transform": "^0.15.0"
+      }
+    },
+    "@babel/plugin-transform-reserved-words": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz",
+      "integrity": "sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-runtime": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.9.tgz",
+      "integrity": "sha512-wS8uJwBt7/b/mzE13ktsJdmS4JP/j7PQSaADtnb4I2wL0zK51MQ0pmF8/Jy0wUIS96fr+fXT6S/ifiPXnvrlSg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "babel-plugin-polyfill-corejs2": "^0.3.1",
+        "babel-plugin-polyfill-corejs3": "^0.5.2",
+        "babel-plugin-polyfill-regenerator": "^0.3.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "@babel/plugin-transform-shorthand-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz",
+      "integrity": "sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-spread": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.18.9.tgz",
+      "integrity": "sha512-39Q814wyoOPtIB/qGopNIL9xDChOE1pNU0ZY5dO0owhiVt/5kFm4li+/bBtwc7QotG0u5EPzqhZdjMtmqBqyQA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-sticky-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz",
+      "integrity": "sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-template-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz",
+      "integrity": "sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-typeof-symbol": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz",
+      "integrity": "sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-typescript": {
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.18.8.tgz",
+      "integrity": "sha512-p2xM8HI83UObjsZGofMV/EdYjamsDm6MoN3hXPYIT0+gxIoopE+B7rPYKAxfrz9K9PK7JafTTjqYC6qipLExYA==",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-typescript": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.6.tgz",
+      "integrity": "sha512-XNRwQUXYMP7VLuy54cr/KS/WeL3AZeORhrmeZ7iewgu+X2eBqmpaLI/hzqr9ZxCeUoq0ASK4GUzSM0BDhZkLFw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-unicode-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz",
+      "integrity": "sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==",
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/preset-env": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.18.9.tgz",
+      "integrity": "sha512-75pt/q95cMIHWssYtyfjVlvI+QEZQThQbKvR9xH+F/Agtw/s4Wfc2V9Bwd/P39VtixB7oWxGdH4GteTTwYJWMg==",
+      "requires": {
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-validator-option": "^7.18.6",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.18.9",
+        "@babel/plugin-proposal-async-generator-functions": "^7.18.6",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-class-static-block": "^7.18.6",
+        "@babel/plugin-proposal-dynamic-import": "^7.18.6",
+        "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+        "@babel/plugin-proposal-json-strings": "^7.18.6",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.18.9",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+        "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.18.6",
+        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.18.6",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-transform-arrow-functions": "^7.18.6",
+        "@babel/plugin-transform-async-to-generator": "^7.18.6",
+        "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
+        "@babel/plugin-transform-block-scoping": "^7.18.9",
+        "@babel/plugin-transform-classes": "^7.18.9",
+        "@babel/plugin-transform-computed-properties": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.18.9",
+        "@babel/plugin-transform-dotall-regex": "^7.18.6",
+        "@babel/plugin-transform-duplicate-keys": "^7.18.9",
+        "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
+        "@babel/plugin-transform-for-of": "^7.18.8",
+        "@babel/plugin-transform-function-name": "^7.18.9",
+        "@babel/plugin-transform-literals": "^7.18.9",
+        "@babel/plugin-transform-member-expression-literals": "^7.18.6",
+        "@babel/plugin-transform-modules-amd": "^7.18.6",
+        "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.18.9",
+        "@babel/plugin-transform-modules-umd": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.18.6",
+        "@babel/plugin-transform-new-target": "^7.18.6",
+        "@babel/plugin-transform-object-super": "^7.18.6",
+        "@babel/plugin-transform-parameters": "^7.18.8",
+        "@babel/plugin-transform-property-literals": "^7.18.6",
+        "@babel/plugin-transform-regenerator": "^7.18.6",
+        "@babel/plugin-transform-reserved-words": "^7.18.6",
+        "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+        "@babel/plugin-transform-spread": "^7.18.9",
+        "@babel/plugin-transform-sticky-regex": "^7.18.6",
+        "@babel/plugin-transform-template-literals": "^7.18.9",
+        "@babel/plugin-transform-typeof-symbol": "^7.18.9",
+        "@babel/plugin-transform-unicode-escapes": "^7.18.6",
+        "@babel/plugin-transform-unicode-regex": "^7.18.6",
+        "@babel/preset-modules": "^0.1.5",
+        "@babel/types": "^7.18.9",
+        "babel-plugin-polyfill-corejs2": "^0.3.1",
+        "babel-plugin-polyfill-corejs3": "^0.5.2",
+        "babel-plugin-polyfill-regenerator": "^0.3.1",
+        "core-js-compat": "^3.22.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "@babel/preset-modules": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
+      "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      }
+    },
+    "@babel/preset-react": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.18.6.tgz",
+      "integrity": "sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-validator-option": "^7.18.6",
+        "@babel/plugin-transform-react-display-name": "^7.18.6",
+        "@babel/plugin-transform-react-jsx": "^7.18.6",
+        "@babel/plugin-transform-react-jsx-development": "^7.18.6",
+        "@babel/plugin-transform-react-pure-annotations": "^7.18.6"
+      }
+    },
+    "@babel/preset-typescript": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz",
+      "integrity": "sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-validator-option": "^7.18.6",
+        "@babel/plugin-transform-typescript": "^7.18.6"
+      }
+    },
+    "@babel/runtime": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+      "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/runtime-corejs3": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.18.9.tgz",
+      "integrity": "sha512-qZEWeccZCrHA2Au4/X05QW5CMdm4VjUDCrGq5gf1ZDcM4hRqreKrtwAn7yci9zfgAS9apvnsFXiGBHBAxZdK9A==",
+      "requires": {
+        "core-js-pure": "^3.20.2",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/template": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.6.tgz",
+      "integrity": "sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==",
+      "requires": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/parser": "^7.18.6",
+        "@babel/types": "^7.18.6"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.9.tgz",
+      "integrity": "sha512-LcPAnujXGwBgv3/WHv01pHtb2tihcyW1XuL9wd7jqh1Z8AQkTd+QVjMrMijrln0T7ED3UXLIy36P9Ao7W75rYg==",
+      "requires": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.18.9",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/parser": "^7.18.9",
+        "@babel/types": "^7.18.9",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.9.tgz",
+      "integrity": "sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
+    },
+    "@csstools/normalize.css": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
+      "integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
+    },
+    "@csstools/postcss-cascade-layers": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.0.5.tgz",
+      "integrity": "sha512-Id/9wBT7FkgFzdEpiEWrsVd4ltDxN0rI0QS0SChbeQiSuux3z21SJCRLu6h2cvCEUmaRi+VD0mHFj+GJD4GFnw==",
+      "requires": {
+        "@csstools/selector-specificity": "^2.0.2",
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "@csstools/postcss-color-function": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz",
+      "integrity": "sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==",
+      "requires": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-font-format-keywords": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz",
+      "integrity": "sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-hwb-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz",
+      "integrity": "sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-ic-unit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz",
+      "integrity": "sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==",
+      "requires": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-is-pseudo-class": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz",
+      "integrity": "sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==",
+      "requires": {
+        "@csstools/selector-specificity": "^2.0.0",
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "@csstools/postcss-normalize-display-values": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz",
+      "integrity": "sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-oklab-function": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz",
+      "integrity": "sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==",
+      "requires": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-progressive-custom-properties": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz",
+      "integrity": "sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-stepped-value-functions": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz",
+      "integrity": "sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-trigonometric-functions": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz",
+      "integrity": "sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-unset-value": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz",
+      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g=="
+    },
+    "@csstools/selector-specificity": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
+      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg=="
+    },
+    "@eslint/eslintrc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
+      "integrity": "sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==",
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.3.2",
+        "globals": "^13.15.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
+        "globals": {
+          "version": "13.17.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+          "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "requires": {
+            "argparse": "^2.0.1"
+          }
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
+        }
+      }
+    },
+    "@humanwhocodes/config-array": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "requires": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
+    },
+    "@ionic/core": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
+      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
+      "requires": {
+        "@stencil/core": "^2.18.0",
+        "ionicons": "^6.0.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@ionic/react": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.2.tgz",
+      "integrity": "sha512-+YZkUlOvygnowTmtEACd+B1fhmets3sSazr5Ipnv/O/genGgcY5llpxI+LeqvrWt0ECAtiNdF3c35M1IcoAuxA==",
+      "requires": {
+        "@ionic/core": "^6.3.2",
+        "ionicons": "^6.0.2",
+        "tslib": "*"
+      }
+    },
+    "@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "requires": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        }
+      }
+    },
+    "@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA=="
+    },
+    "@jest/console": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-27.5.1.tgz",
+      "integrity": "sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==",
+      "requires": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "jest-message-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "slash": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@jest/core": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-27.5.1.tgz",
+      "integrity": "sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==",
+      "requires": {
+        "@jest/console": "^27.5.1",
+        "@jest/reporters": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "emittery": "^0.8.1",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "jest-changed-files": "^27.5.1",
+        "jest-config": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-resolve-dependencies": "^27.5.1",
+        "jest-runner": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "jest-watcher": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "rimraf": "^3.0.0",
+        "slash": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@jest/environment": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-27.5.1.tgz",
+      "integrity": "sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==",
+      "requires": {
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1"
+      }
+    },
+    "@jest/fake-timers": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
+      "integrity": "sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==",
+      "requires": {
+        "@jest/types": "^27.5.1",
+        "@sinonjs/fake-timers": "^8.0.1",
+        "@types/node": "*",
+        "jest-message-util": "^27.5.1",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1"
+      }
+    },
+    "@jest/globals": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-27.5.1.tgz",
+      "integrity": "sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==",
+      "requires": {
+        "@jest/environment": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "expect": "^27.5.1"
+      }
+    },
+    "@jest/reporters": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-27.5.1.tgz",
+      "integrity": "sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==",
+      "requires": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.2",
+        "graceful-fs": "^4.2.9",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^5.1.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.1.3",
+        "jest-haste-map": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.0",
+        "string-length": "^4.0.1",
+        "terminal-link": "^2.0.0",
+        "v8-to-istanbul": "^8.1.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@jest/schemas": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.1.3.tgz",
+      "integrity": "sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==",
+      "requires": {
+        "@sinclair/typebox": "^0.24.1"
+      }
+    },
+    "@jest/source-map": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-27.5.1.tgz",
+      "integrity": "sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==",
+      "requires": {
+        "callsites": "^3.0.0",
+        "graceful-fs": "^4.2.9",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "@jest/test-result": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-27.5.1.tgz",
+      "integrity": "sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==",
+      "requires": {
+        "@jest/console": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "collect-v8-coverage": "^1.0.0"
+      }
+    },
+    "@jest/test-sequencer": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz",
+      "integrity": "sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==",
+      "requires": {
+        "@jest/test-result": "^27.5.1",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-runtime": "^27.5.1"
+      }
+    },
+    "@jest/transform": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.5.1.tgz",
+      "integrity": "sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==",
+      "requires": {
+        "@babel/core": "^7.1.0",
+        "@jest/types": "^27.5.1",
+        "babel-plugin-istanbul": "^6.1.1",
+        "chalk": "^4.0.0",
+        "convert-source-map": "^1.4.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "pirates": "^4.0.4",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.1",
+        "write-file-atomic": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@jest/types": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
+      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
+      "requires": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^16.0.0",
+        "chalk": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@jridgewell/gen-mapping": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
+      "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
+      "requires": {
+        "@jridgewell/set-array": "^1.0.0",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w=="
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "dependencies": {
+        "@jridgewell/gen-mapping": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+          "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+          "requires": {
+            "@jridgewell/set-array": "^1.0.1",
+            "@jridgewell/sourcemap-codec": "^1.4.10",
+            "@jridgewell/trace-mapping": "^0.3.9"
+          }
+        }
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
+    "@leichtgewicht/ip-codec": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
+      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz",
+      "integrity": "sha512-bcKCAzF0DV2IIROp9ZHkRJa6O4jy7NlnHdWL3GmcUxYWNjLXkK5kfELELwEfSP5hXPfVL/qOGMAROuMQb9GG8Q==",
+      "requires": {
+        "ansi-html-community": "^0.0.8",
+        "common-path-prefix": "^3.0.0",
+        "core-js-pure": "^3.8.1",
+        "error-stack-parser": "^2.0.6",
+        "find-up": "^5.0.0",
+        "html-entities": "^2.1.0",
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0",
+        "source-map": "^0.7.3"
+      }
+    },
+    "@rollup/plugin-babel": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
+      "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.10.4",
+        "@rollup/pluginutils": "^3.1.0"
+      }
+    },
+    "@rollup/plugin-node-resolve": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
+      "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==",
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.19.0"
+      }
+    },
+    "@rollup/plugin-replace": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz",
+      "integrity": "sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==",
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "dependencies": {
+        "@types/estree": {
+          "version": "0.0.39",
+          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+          "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
+        }
+      }
+    },
+    "@rushstack/eslint-patch": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz",
+      "integrity": "sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA=="
+    },
+    "@sinclair/typebox": {
+      "version": "0.24.21",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.21.tgz",
+      "integrity": "sha512-II2SIjvxBVJmrGkkZYza/BqNjwx3PWROIA8CZ0/Hn7LV0Mv0CVpZxoyHGBVsQqfFLMv9DmArIeRHTwo76bE6oA=="
+    },
+    "@sinonjs/commons": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz",
+      "integrity": "sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==",
+      "requires": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "@sinonjs/fake-timers": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz",
+      "integrity": "sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==",
+      "requires": {
+        "@sinonjs/commons": "^1.7.0"
+      }
+    },
+    "@stencil/core": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.18.1.tgz",
+      "integrity": "sha512-/fXkh1lwZ+X9JQCw50mPjhBogzEHOBvVC5pLoDLZqodVYK0DGWILM2YLV4dcIUBNEK8/HMDpO/Rq81/rS3mNOw=="
+    },
+    "@surma/rollup-plugin-off-main-thread": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
+      "integrity": "sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==",
+      "requires": {
+        "ejs": "^3.1.6",
+        "json5": "^2.2.0",
+        "magic-string": "^0.25.0",
+        "string.prototype.matchall": "^4.0.6"
+      }
+    },
+    "@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
+      "integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg=="
+    },
+    "@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz",
+      "integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg=="
+    },
+    "@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz",
+      "integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA=="
+    },
+    "@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz",
+      "integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ=="
+    },
+    "@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz",
+      "integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg=="
+    },
+    "@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz",
+      "integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw=="
+    },
+    "@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz",
+      "integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q=="
+    },
+    "@svgr/babel-plugin-transform-svg-component": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz",
+      "integrity": "sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ=="
+    },
+    "@svgr/babel-preset": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.5.0.tgz",
+      "integrity": "sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==",
+      "requires": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "^5.0.1",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1",
+        "@svgr/babel-plugin-svg-dynamic-title": "^5.4.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "^5.4.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "^5.4.0",
+        "@svgr/babel-plugin-transform-svg-component": "^5.5.0"
+      }
+    },
+    "@svgr/core": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.5.0.tgz",
+      "integrity": "sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==",
+      "requires": {
+        "@svgr/plugin-jsx": "^5.5.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^7.0.0"
+      }
+    },
+    "@svgr/hast-util-to-babel-ast": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz",
+      "integrity": "sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==",
+      "requires": {
+        "@babel/types": "^7.12.6"
+      }
+    },
+    "@svgr/plugin-jsx": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz",
+      "integrity": "sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==",
+      "requires": {
+        "@babel/core": "^7.12.3",
+        "@svgr/babel-preset": "^5.5.0",
+        "@svgr/hast-util-to-babel-ast": "^5.5.0",
+        "svg-parser": "^2.0.2"
+      }
+    },
+    "@svgr/plugin-svgo": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz",
+      "integrity": "sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==",
+      "requires": {
+        "cosmiconfig": "^7.0.0",
+        "deepmerge": "^4.2.2",
+        "svgo": "^1.2.2"
+      }
+    },
+    "@svgr/webpack": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.5.0.tgz",
+      "integrity": "sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==",
+      "requires": {
+        "@babel/core": "^7.12.3",
+        "@babel/plugin-transform-react-constant-elements": "^7.12.1",
+        "@babel/preset-env": "^7.12.1",
+        "@babel/preset-react": "^7.12.5",
+        "@svgr/core": "^5.5.0",
+        "@svgr/plugin-jsx": "^5.5.0",
+        "@svgr/plugin-svgo": "^5.5.0",
+        "loader-utils": "^2.0.0"
+      }
+    },
+    "@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw=="
+    },
+    "@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
+    },
+    "@types/babel__core": {
+      "version": "7.1.19",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.19.tgz",
+      "integrity": "sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==",
+      "requires": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "@types/babel__generator": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
+      "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@types/babel__template": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
+      "integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==",
+      "requires": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@types/babel__traverse": {
+      "version": "7.17.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.17.1.tgz",
+      "integrity": "sha512-kVzjari1s2YVi77D3w1yuvohV2idweYXMCDzqBiVNN63TcDWrIlTVOYpqVrvbbyOE/IyzBoTKF0fdnLPEORFxA==",
+      "requires": {
+        "@babel/types": "^7.3.0"
+      }
+    },
+    "@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect-history-api-fallback": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz",
+      "integrity": "sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==",
+      "requires": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/eslint": {
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.5.tgz",
+      "integrity": "sha512-dhsC09y1gpJWnK+Ff4SGvCuSnk9DaU0BJZSzOwa6GVSg65XtTugLBITDAAzRU5duGBoXBHpdR/9jHGxJjNflJQ==",
+      "requires": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "@types/eslint-scope": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
+      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
+      "requires": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
+    "@types/estree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ=="
+    },
+    "@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.30",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.30.tgz",
+      "integrity": "sha512-gstzbTWro2/nFed1WXtf+TtrpwxH7Ggs4RLYTLbeVgIkUQOI3WG/JKjgeOU1zXDvezllupjrf8OPIdvTbIaVOQ==",
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
+    "@types/graceful-fs": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
+      "integrity": "sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
+    },
+    "@types/http-proxy": {
+      "version": "1.17.9",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.9.tgz",
+      "integrity": "sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/istanbul-lib-coverage": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
+      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g=="
+    },
+    "@types/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "requires": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "@types/istanbul-reports": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
+      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "requires": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "@types/json-schema": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
+    },
+    "@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
+    },
+    "@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
+    },
+    "@types/node": {
+      "version": "16.11.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.45.tgz",
+      "integrity": "sha512-3rKg/L5x0rofKuuUt5zlXzOnKyIHXmIu5R8A0TuNDMF2062/AOIDBciFIjToLEJ/9F9DzkHNot+BpNsMI1OLdQ=="
+    },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
+    "@types/prettier": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.4.tgz",
+      "integrity": "sha512-fOwvpvQYStpb/zHMx0Cauwywu9yLDmzWiiQBC7gJyq5tYLUXFZvDG7VK1B7WBxxjBJNKFOZ0zLoOQn8vmATbhw=="
+    },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "@types/q": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
+      "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
+    },
+    "@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
+    },
+    "@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
+    },
+    "@types/react": {
+      "version": "18.0.15",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz",
+      "integrity": "sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-dom": {
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
+    "@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "requires": {
+        "@types/express": "*"
+      }
+    },
+    "@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "requires": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/stack-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
+      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
+    },
+    "@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+    },
+    "@types/ws": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
+      "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/yargs": {
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
+      "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
+      "requires": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "@types/yargs-parser": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
+      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
+    },
+    "@typescript-eslint/eslint-plugin": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.31.0.tgz",
+      "integrity": "sha512-VKW4JPHzG5yhYQrQ1AzXgVgX8ZAJEvCz0QI6mLRX4tf7rnFfh5D8SKm0Pq6w5PyNfAWJk6sv313+nEt3ohWMBQ==",
+      "requires": {
+        "@typescript-eslint/scope-manager": "5.31.0",
+        "@typescript-eslint/type-utils": "5.31.0",
+        "@typescript-eslint/utils": "5.31.0",
+        "debug": "^4.3.4",
+        "functional-red-black-tree": "^1.0.1",
+        "ignore": "^5.2.0",
+        "regexpp": "^3.2.0",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      }
+    },
+    "@typescript-eslint/experimental-utils": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.31.0.tgz",
+      "integrity": "sha512-Yiar0ggNPyOsvrslJBdOo3jc3wjI6NnmWOQBA8WhR54YPbVqTNLuuHC6zxEt8FIgMozerxRlAncwznEjK+cJVA==",
+      "requires": {
+        "@typescript-eslint/utils": "5.31.0"
+      }
+    },
+    "@typescript-eslint/parser": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.31.0.tgz",
+      "integrity": "sha512-UStjQiZ9OFTFReTrN+iGrC6O/ko9LVDhreEK5S3edmXgR396JGq7CoX2TWIptqt/ESzU2iRKXAHfSF2WJFcWHw==",
+      "requires": {
+        "@typescript-eslint/scope-manager": "5.31.0",
+        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/typescript-estree": "5.31.0",
+        "debug": "^4.3.4"
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.31.0.tgz",
+      "integrity": "sha512-8jfEzBYDBG88rcXFxajdVavGxb5/XKXyvWgvD8Qix3EEJLCFIdVloJw+r9ww0wbyNLOTYyBsR+4ALNGdlalLLg==",
+      "requires": {
+        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/visitor-keys": "5.31.0"
+      }
+    },
+    "@typescript-eslint/type-utils": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.31.0.tgz",
+      "integrity": "sha512-7ZYqFbvEvYXFn9ax02GsPcEOmuWNg+14HIf4q+oUuLnMbpJ6eHAivCg7tZMVwzrIuzX3QCeAOqKoyMZCv5xe+w==",
+      "requires": {
+        "@typescript-eslint/utils": "5.31.0",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.31.0.tgz",
+      "integrity": "sha512-/f/rMaEseux+I4wmR6mfpM2wvtNZb1p9hAV77hWfuKc3pmaANp5dLAZSiE3/8oXTYTt3uV9KW5yZKJsMievp6g=="
+    },
+    "@typescript-eslint/typescript-estree": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.31.0.tgz",
+      "integrity": "sha512-3S625TMcARX71wBc2qubHaoUwMEn+l9TCsaIzYI/ET31Xm2c9YQ+zhGgpydjorwQO9pLfR/6peTzS/0G3J/hDw==",
+      "requires": {
+        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/visitor-keys": "5.31.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      }
+    },
+    "@typescript-eslint/utils": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.31.0.tgz",
+      "integrity": "sha512-kcVPdQS6VIpVTQ7QnGNKMFtdJdvnStkqS5LeALr4rcwx11G6OWb2HB17NMPnlRHvaZP38hL9iK8DdE9Fne7NYg==",
+      "requires": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.31.0",
+        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/typescript-estree": "5.31.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+        }
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.31.0.tgz",
+      "integrity": "sha512-ZK0jVxSjS4gnPirpVjXHz7mgdOsZUHzNYSfTw2yPa3agfbt9YfqaBiBZFSSxeBWnpWkzCxTfUpnzA3Vily/CSg==",
+      "requires": {
+        "@typescript-eslint/types": "5.31.0",
+        "eslint-visitor-keys": "^3.3.0"
+      }
+    },
+    "@webassemblyjs/ast": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
+      "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+      "requires": {
+        "@webassemblyjs/helper-numbers": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+      }
+    },
+    "@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
+      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ=="
+    },
+    "@webassemblyjs/helper-api-error": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
+      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg=="
+    },
+    "@webassemblyjs/helper-buffer": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
+      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA=="
+    },
+    "@webassemblyjs/helper-numbers": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
+      "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
+      "requires": {
+        "@webassemblyjs/floating-point-hex-parser": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
+      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q=="
+    },
+    "@webassemblyjs/helper-wasm-section": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
+      "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1"
+      }
+    },
+    "@webassemblyjs/ieee754": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
+      "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
+      "requires": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "@webassemblyjs/leb128": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
+      "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
+      "requires": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/utf8": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
+      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ=="
+    },
+    "@webassemblyjs/wasm-edit": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
+      "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-section": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-opt": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1",
+        "@webassemblyjs/wast-printer": "1.11.1"
+      }
+    },
+    "@webassemblyjs/wasm-gen": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
+      "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/utf8": "1.11.1"
+      }
+    },
+    "@webassemblyjs/wasm-opt": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
+      "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1"
+      }
+    },
+    "@webassemblyjs/wasm-parser": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
+      "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/utf8": "1.11.1"
+      }
+    },
+    "@webassemblyjs/wast-printer": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
+      "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+    },
+    "@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+    },
+    "abab": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
+    },
+    "accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "requires": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      }
+    },
+    "acorn": {
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w=="
+    },
+    "acorn-globals": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
+      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
+      "requires": {
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+        }
+      }
+    },
+    "acorn-import-assertions": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw=="
+    },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
+    },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+        }
+      }
+    },
+    "acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
+    },
+    "address": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.0.tgz",
+      "integrity": "sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig=="
+    },
+    "adjust-sourcemap-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
+      "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==",
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "regex-parser": "^2.2.11"
+      }
+    },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "requires": {
+        "debug": "4"
+      }
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "requires": {
+        "ajv": "^8.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        }
+      }
+    },
+    "ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
+    },
+    "ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "requires": {
+        "type-fest": "^0.21.3"
+      }
+    },
+    "ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw=="
+    },
+    "ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "@babel/runtime-corejs3": "^7.10.2"
+      }
+    },
+    "array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ=="
+    },
+    "array-includes": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
+      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5",
+        "get-intrinsic": "^1.1.1",
+        "is-string": "^1.0.7"
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
+    },
+    "array.prototype.flat": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
+      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "array.prototype.flatmap": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
+      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "array.prototype.reduce": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.4.tgz",
+      "integrity": "sha512-WnM+AjG/DvLRLo4DDl+r+SvCzYtD2Jd9oeBYMcEaI7t3fFrHY9M53/wdLcTvmZNQ70IU6Htj0emFkZ5TS+lrdw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-array-method-boxes-properly": "^1.0.0",
+        "is-string": "^1.0.7"
+      }
+    },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+    },
+    "ast-types-flow": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
+    },
+    "async": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
+    },
+    "autoprefixer": {
+      "version": "10.4.7",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
+      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+      "requires": {
+        "browserslist": "^4.20.3",
+        "caniuse-lite": "^1.0.30001335",
+        "fraction.js": "^4.2.0",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "axe-core": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
+      "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
+    },
+    "axobject-query": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
+      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
+    },
+    "babel-jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
+      "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==",
+      "requires": {
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/babel__core": "^7.1.14",
+        "babel-plugin-istanbul": "^6.1.1",
+        "babel-preset-jest": "^27.5.1",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "slash": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "babel-loader": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz",
+      "integrity": "sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==",
+      "requires": {
+        "find-cache-dir": "^3.3.1",
+        "loader-utils": "^2.0.0",
+        "make-dir": "^3.1.0",
+        "schema-utils": "^2.6.5"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+          "requires": {
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "requires": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "babel-plugin-istanbul": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
+      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-instrument": "^5.0.4",
+        "test-exclude": "^6.0.0"
+      }
+    },
+    "babel-plugin-jest-hoist": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz",
+      "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==",
+      "requires": {
+        "@babel/template": "^7.3.3",
+        "@babel/types": "^7.3.3",
+        "@types/babel__core": "^7.0.0",
+        "@types/babel__traverse": "^7.0.6"
+      }
+    },
+    "babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      }
+    },
+    "babel-plugin-named-asset-import": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
+      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q=="
+    },
+    "babel-plugin-polyfill-corejs2": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.2.tgz",
+      "integrity": "sha512-LPnodUl3lS0/4wN3Rb+m+UK8s7lj2jcLRrjho4gLw+OJs+I4bvGXshINesY5xx/apM+biTnQ9reDI8yj+0M5+Q==",
+      "requires": {
+        "@babel/compat-data": "^7.17.7",
+        "@babel/helper-define-polyfill-provider": "^0.3.2",
+        "semver": "^6.1.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "babel-plugin-polyfill-corejs3": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.3.tgz",
+      "integrity": "sha512-zKsXDh0XjnrUEW0mxIHLfjBfnXSMr5Q/goMe/fxpQnLm07mcOZiIZHBNWCMx60HmdvjxfXcalac0tfFg0wqxyw==",
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.3.2",
+        "core-js-compat": "^3.21.0"
+      }
+    },
+    "babel-plugin-polyfill-regenerator": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
+      "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.3.1"
+      }
+    },
+    "babel-plugin-transform-react-remove-prop-types": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
+      "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA=="
+    },
+    "babel-preset-current-node-syntax": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
+      "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
+      "requires": {
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.8.3",
+        "@babel/plugin-syntax-import-meta": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.8.3",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-top-level-await": "^7.8.3"
+      }
+    },
+    "babel-preset-jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz",
+      "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==",
+      "requires": {
+        "babel-plugin-jest-hoist": "^27.5.1",
+        "babel-preset-current-node-syntax": "^1.0.0"
+      }
+    },
+    "babel-preset-react-app": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-react-app/-/babel-preset-react-app-10.0.1.tgz",
+      "integrity": "sha512-b0D9IZ1WhhCWkrTXyFuIIgqGzSkRIH5D5AmB0bXbzYAB1OBAwHcUeyWW2LorutLWF5btNo/N7r/cIdmvvKJlYg==",
+      "requires": {
+        "@babel/core": "^7.16.0",
+        "@babel/plugin-proposal-class-properties": "^7.16.0",
+        "@babel/plugin-proposal-decorators": "^7.16.4",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
+        "@babel/plugin-proposal-numeric-separator": "^7.16.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.16.0",
+        "@babel/plugin-proposal-private-methods": "^7.16.0",
+        "@babel/plugin-transform-flow-strip-types": "^7.16.0",
+        "@babel/plugin-transform-react-display-name": "^7.16.0",
+        "@babel/plugin-transform-runtime": "^7.16.4",
+        "@babel/preset-env": "^7.16.4",
+        "@babel/preset-react": "^7.16.0",
+        "@babel/preset-typescript": "^7.16.0",
+        "@babel/runtime": "^7.16.3",
+        "babel-plugin-macros": "^3.1.0",
+        "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
+    },
+    "bfj": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz",
+      "integrity": "sha512-+e/UqUzwmzJamNF50tBV6tZPTORow7gQ96iFow+8b562OdMpEK0BcJEq2OSPEDmAbSMBQ7PKZ87ubFkgxpYWgw==",
+      "requires": {
+        "bluebird": "^3.5.5",
+        "check-types": "^11.1.1",
+        "hoopy": "^0.1.4",
+        "tryer": "^1.0.1"
+      }
+    },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+    },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+    },
+    "body-parser": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
+      "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
+      "requires": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.10.3",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.4.24",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
+    "bonjour-service": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.13.tgz",
+      "integrity": "sha512-LWKRU/7EqDUC9CTAQtuZl5HzBALoCYwtLhffW3et7vZMwv3bWLpJf8bRYlMD5OCcDpTfnPgNCV4yo9ZIaJGMiA==",
+      "requires": {
+        "array-flatten": "^2.1.2",
+        "dns-equal": "^1.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "multicast-dns": "^7.2.5"
+      }
+    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "browser-process-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
+    },
+    "browserslist": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
+      "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
+      "requires": {
+        "caniuse-lite": "^1.0.30001370",
+        "electron-to-chromium": "^1.4.202",
+        "node-releases": "^2.0.6",
+        "update-browserslist-db": "^1.0.5"
+      }
+    },
+    "bser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
+      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+      "requires": {
+        "node-int64": "^0.4.0"
+      }
+    },
+    "buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
+    "builtin-modules": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
+      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw=="
+    },
+    "bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw=="
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
+    },
+    "camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "requires": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA=="
+    },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
+    },
+    "caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "requires": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001370",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001370.tgz",
+      "integrity": "sha512-3PDmaP56wz/qz7G508xzjx8C+MC2qEm4SYhSEzC9IBROo+dGXFWRuaXkWti0A9tuI00g+toiriVqxtWMgl350g=="
+    },
+    "case-sensitive-paths-webpack-plugin": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
+      "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw=="
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
+    },
+    "check-types": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
+      "integrity": "sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ=="
+    },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
+    "chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg=="
+    },
+    "ci-info": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz",
+      "integrity": "sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg=="
+    },
+    "cjs-module-lexer": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
+      "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
+    },
+    "clean-css": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
+      "integrity": "sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==",
+      "requires": {
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ=="
+    },
+    "coa": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
+      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+      "requires": {
+        "@types/q": "^1.5.1",
+        "chalk": "^2.4.1",
+        "q": "^1.1.2"
+      }
+    },
+    "collect-v8-coverage": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
+      "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg=="
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "colord": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
+      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ=="
+    },
+    "colorette": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
+      "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ=="
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
+    },
+    "common-path-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
+      "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w=="
+    },
+    "common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA=="
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
+    },
+    "compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "requires": {
+        "mime-db": ">= 1.43.0 < 2"
+      }
+    },
+    "compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "requires": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "confusing-browser-globals": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
+      "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA=="
+    },
+    "connect-history-api-fallback": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA=="
+    },
+    "content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "requires": {
+        "safe-buffer": "5.2.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        }
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "convert-source-map": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
+      "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
+      "requires": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+    },
+    "core-js": {
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.0.tgz",
+      "integrity": "sha512-IeOyT8A6iK37Ep4kZDD423mpi6JfPRoPUdQwEWYiGolvn4o6j2diaRzNfDfpTdu3a5qMbrGUzKUpYpRY8jXCkQ=="
+    },
+    "core-js-compat": {
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.24.0.tgz",
+      "integrity": "sha512-F+2E63X3ff/nj8uIrf8Rf24UDGIz7p838+xjEp+Bx3y8OWXj+VTPPZNCtdqovPaS9o7Tka5mCH01Zn5vOd6UQg==",
+      "requires": {
+        "browserslist": "^4.21.2",
+        "semver": "7.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A=="
+        }
+      }
+    },
+    "core-js-pure": {
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.24.0.tgz",
+      "integrity": "sha512-uzMmW8cRh7uYw4JQtzqvGWRyC2T5+4zipQLQdi2FmiRqP83k3d6F3stv2iAlNhOs6cXN401FCD5TL0vvleuHgA=="
+    },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
+    "cosmiconfig": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      }
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="
+    },
+    "css-blank-pseudo": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz",
+      "integrity": "sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.9"
+      }
+    },
+    "css-declaration-sorter": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
+      "integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og=="
+    },
+    "css-has-pseudo": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz",
+      "integrity": "sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.9"
+      }
+    },
+    "css-loader": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
+      "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
+      "requires": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.7",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.5"
+      }
+    },
+    "css-minimizer-webpack-plugin": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
+      "integrity": "sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==",
+      "requires": {
+        "cssnano": "^5.0.6",
+        "jest-worker": "^27.0.2",
+        "postcss": "^8.3.5",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "css-prefers-color-scheme": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
+      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA=="
+    },
+    "css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      }
+    },
+    "css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
+    },
+    "css-tree": {
+      "version": "1.0.0-alpha.37",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+      "requires": {
+        "mdn-data": "2.0.4",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
+    },
+    "cssdb": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-6.6.3.tgz",
+      "integrity": "sha512-7GDvDSmE+20+WcSMhP17Q1EVWUrLlbxxpMDqG731n8P99JhnQZHR9YvtjPvEHfjFUjvQJvdpKCjlKOX+xe4UVA=="
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
+    },
+    "cssnano": {
+      "version": "5.1.12",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.12.tgz",
+      "integrity": "sha512-TgvArbEZu0lk/dvg2ja+B7kYoD7BBCmn3+k58xD0qjrGHsFzXY/wKTo9M5egcUCabPol05e/PVoIu79s2JN4WQ==",
+      "requires": {
+        "cssnano-preset-default": "^5.2.12",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      }
+    },
+    "cssnano-preset-default": {
+      "version": "5.2.12",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.12.tgz",
+      "integrity": "sha512-OyCBTZi+PXgylz9HAA5kHyoYhfGcYdwFmyaJzWnzxuGRtnMw/kR6ilW9XzlzlRAtB6PLT/r+prYgkef7hngFew==",
+      "requires": {
+        "css-declaration-sorter": "^6.3.0",
+        "cssnano-utils": "^3.1.0",
+        "postcss-calc": "^8.2.3",
+        "postcss-colormin": "^5.3.0",
+        "postcss-convert-values": "^5.1.2",
+        "postcss-discard-comments": "^5.1.2",
+        "postcss-discard-duplicates": "^5.1.0",
+        "postcss-discard-empty": "^5.1.1",
+        "postcss-discard-overridden": "^5.1.0",
+        "postcss-merge-longhand": "^5.1.6",
+        "postcss-merge-rules": "^5.1.2",
+        "postcss-minify-font-values": "^5.1.0",
+        "postcss-minify-gradients": "^5.1.1",
+        "postcss-minify-params": "^5.1.3",
+        "postcss-minify-selectors": "^5.2.1",
+        "postcss-normalize-charset": "^5.1.0",
+        "postcss-normalize-display-values": "^5.1.0",
+        "postcss-normalize-positions": "^5.1.1",
+        "postcss-normalize-repeat-style": "^5.1.1",
+        "postcss-normalize-string": "^5.1.0",
+        "postcss-normalize-timing-functions": "^5.1.0",
+        "postcss-normalize-unicode": "^5.1.0",
+        "postcss-normalize-url": "^5.1.0",
+        "postcss-normalize-whitespace": "^5.1.1",
+        "postcss-ordered-values": "^5.1.3",
+        "postcss-reduce-initial": "^5.1.0",
+        "postcss-reduce-transforms": "^5.1.0",
+        "postcss-svgo": "^5.1.0",
+        "postcss-unique-selectors": "^5.1.1"
+      }
+    },
+    "cssnano-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA=="
+    },
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "requires": {
+        "css-tree": "^1.1.2"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+          "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+          "requires": {
+            "mdn-data": "2.0.14",
+            "source-map": "^0.6.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.14",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "cssom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
+      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw=="
+    },
+    "cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "requires": {
+        "cssom": "~0.3.6"
+      },
+      "dependencies": {
+        "cssom": {
+          "version": "0.3.8",
+          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
+        }
+      }
+    },
+    "csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+    },
+    "damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
+    },
+    "data-urls": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
+      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "requires": {
+        "abab": "^2.0.3",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0"
+      }
+    },
+    "debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "decimal.js": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
+      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ=="
+    },
+    "dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA=="
+    },
+    "deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
+    },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
+    "default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+      "requires": {
+        "execa": "^5.0.0"
+      }
+    },
+    "define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og=="
+    },
+    "define-properties": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "requires": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ=="
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
+    "depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+    },
+    "destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
+    },
+    "detect-newline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA=="
+    },
+    "detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+    },
+    "detect-port-alt": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
+      "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
+      "requires": {
+        "address": "^1.0.1",
+        "debug": "^2.6.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
+    "detective": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+      "requires": {
+        "acorn-node": "^1.8.2",
+        "defined": "^1.0.0",
+        "minimist": "^1.2.6"
+      }
+    },
+    "didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
+    "diff-sequences": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
+      "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ=="
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
+    "dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg=="
+    },
+    "dns-packet": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.4.0.tgz",
+      "integrity": "sha512-EgqGeaBB8hLiHLZtp/IbaDQTL8pZ0+IvwzSHA6d7VyMDM+B9hgddEMa9xjK5oYnw0ci0JQ6g2XCD7/f6cafU6g==",
+      "requires": {
+        "@leichtgewicht/ip-codec": "^2.0.1"
+      }
+    },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
+    "dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "requires": {
+        "utila": "~0.4"
+      }
+    },
+    "dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+    },
+    "domexception": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
+      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
+      "requires": {
+        "webidl-conversions": "^5.0.0"
+      },
+      "dependencies": {
+        "webidl-conversions": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+          "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA=="
+        }
+      }
+    },
+    "domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "requires": {
+        "domelementtype": "^2.2.0"
+      }
+    },
+    "domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      }
+    },
+    "dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
+    },
+    "dotenv-expand": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
+    },
+    "duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "ejs": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz",
+      "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==",
+      "requires": {
+        "jake": "^10.8.5"
+      }
+    },
+    "electron-to-chromium": {
+      "version": "1.4.202",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.202.tgz",
+      "integrity": "sha512-JYsK2ex9lmQD27kj19fhXYxzFJ/phLAkLKHv49A5UY6kMRV2xED3qMMLg/voW/+0AR6wMiI+VxlmK9NDtdxlPA=="
+    },
+    "emittery": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
+      "integrity": "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg=="
+    },
+    "emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
+    },
+    "enhanced-resolve": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
+      "integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
+      "requires": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      }
+    },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "requires": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "es-abstract": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
+      "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "function.prototype.name": "^1.1.5",
+        "get-intrinsic": "^1.1.1",
+        "get-symbol-description": "^1.0.0",
+        "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "is-callable": "^1.2.4",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "regexp.prototype.flags": "^1.4.3",
+        "string.prototype.trimend": "^1.0.5",
+        "string.prototype.trimstart": "^1.0.5",
+        "unbox-primitive": "^1.0.2"
+      }
+    },
+    "es-array-method-boxes-properly": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
+      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
+    },
+    "es-module-lexer": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
+    },
+    "es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+    },
+    "escodegen": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz",
+      "integrity": "sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==",
+      "requires": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "levn": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+          "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
+          "requires": {
+            "prelude-ls": "~1.1.2",
+            "type-check": "~0.3.2"
+          }
+        },
+        "optionator": {
+          "version": "0.8.3",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+          "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+          "requires": {
+            "deep-is": "~0.1.3",
+            "fast-levenshtein": "~2.0.6",
+            "levn": "~0.3.0",
+            "prelude-ls": "~1.1.2",
+            "type-check": "~0.3.2",
+            "word-wrap": "~1.2.3"
+          }
+        },
+        "prelude-ls": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+          "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "optional": true
+        },
+        "type-check": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+          "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
+          "requires": {
+            "prelude-ls": "~1.1.2"
+          }
+        }
+      }
+    },
+    "eslint": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.20.0.tgz",
+      "integrity": "sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==",
+      "requires": {
+        "@eslint/eslintrc": "^1.3.0",
+        "@humanwhocodes/config-array": "^0.9.2",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.2",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^6.0.1",
+        "globals": "^13.15.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "globals": {
+          "version": "13.17.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+          "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "requires": {
+            "argparse": "^2.0.1"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
+        }
+      }
+    },
+    "eslint-config-react-app": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
+      "integrity": "sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==",
+      "requires": {
+        "@babel/core": "^7.16.0",
+        "@babel/eslint-parser": "^7.16.3",
+        "@rushstack/eslint-patch": "^1.1.0",
+        "@typescript-eslint/eslint-plugin": "^5.5.0",
+        "@typescript-eslint/parser": "^5.5.0",
+        "babel-preset-react-app": "^10.0.1",
+        "confusing-browser-globals": "^1.0.11",
+        "eslint-plugin-flowtype": "^8.0.3",
+        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-jest": "^25.3.0",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-react": "^7.27.1",
+        "eslint-plugin-react-hooks": "^4.3.0",
+        "eslint-plugin-testing-library": "^5.0.1"
+      }
+    },
+    "eslint-import-resolver-node": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
+      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "requires": {
+        "debug": "^3.2.7",
+        "resolve": "^1.20.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "eslint-module-utils": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
+      "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==",
+      "requires": {
+        "debug": "^3.2.7",
+        "find-up": "^2.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==",
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==",
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==",
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww=="
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ=="
+        }
+      }
+    },
+    "eslint-plugin-flowtype": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz",
+      "integrity": "sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ==",
+      "requires": {
+        "lodash": "^4.17.21",
+        "string-natural-compare": "^3.0.1"
+      }
+    },
+    "eslint-plugin-import": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "requires": {
+        "array-includes": "^3.1.4",
+        "array.prototype.flat": "^1.2.5",
+        "debug": "^2.6.9",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-module-utils": "^2.7.3",
+        "has": "^1.0.3",
+        "is-core-module": "^2.8.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.values": "^1.1.5",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
+    "eslint-plugin-jest": {
+      "version": "25.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz",
+      "integrity": "sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==",
+      "requires": {
+        "@typescript-eslint/experimental-utils": "^5.0.0"
+      }
+    },
+    "eslint-plugin-jsx-a11y": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz",
+      "integrity": "sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==",
+      "requires": {
+        "@babel/runtime": "^7.18.9",
+        "aria-query": "^4.2.2",
+        "array-includes": "^3.1.5",
+        "ast-types-flow": "^0.0.7",
+        "axe-core": "^4.4.3",
+        "axobject-query": "^2.2.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "has": "^1.0.3",
+        "jsx-ast-utils": "^3.3.2",
+        "language-tags": "^1.0.5",
+        "minimatch": "^3.1.2",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "eslint-plugin-react": {
+      "version": "7.30.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.30.1.tgz",
+      "integrity": "sha512-NbEvI9jtqO46yJA3wcRF9Mo0lF9T/jhdHqhCHXiXtD+Zcb98812wvokjWpU7Q4QH5edo6dmqrukxVvWWXHlsUg==",
+      "requires": {
+        "array-includes": "^3.1.5",
+        "array.prototype.flatmap": "^1.3.0",
+        "doctrine": "^2.1.0",
+        "estraverse": "^5.3.0",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.5",
+        "object.fromentries": "^2.0.5",
+        "object.hasown": "^1.1.1",
+        "object.values": "^1.1.5",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.3",
+        "semver": "^6.3.0",
+        "string.prototype.matchall": "^4.0.7"
+      },
+      "dependencies": {
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "resolve": {
+          "version": "2.0.0-next.4",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz",
+          "integrity": "sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==",
+          "requires": {
+            "is-core-module": "^2.9.0",
+            "path-parse": "^1.0.7",
+            "supports-preserve-symlinks-flag": "^1.0.0"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "eslint-plugin-react-hooks": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g=="
+    },
+    "eslint-plugin-testing-library": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.5.1.tgz",
+      "integrity": "sha512-plLEkkbAKBjPxsLj7x4jNapcHAg2ernkQlKKrN2I8NrQwPISZHyCUNvg5Hv3EDqOQReToQb5bnqXYbkijJPE/g==",
+      "requires": {
+        "@typescript-eslint/utils": "^5.13.0"
+      }
+    },
+    "eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      }
+    },
+    "eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "requires": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw=="
+        }
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA=="
+    },
+    "eslint-webpack-plugin": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-3.2.0.tgz",
+      "integrity": "sha512-avrKcGncpPbPSUHX6B3stNGzkKFto3eL+DKM4+VyMrVnhPc3vRczVlCq3uhuFOdRvDHTVXuzwk1ZKUrqDQHQ9w==",
+      "requires": {
+        "@types/eslint": "^7.29.0 || ^8.4.1",
+        "jest-worker": "^28.0.2",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "jest-worker": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz",
+          "integrity": "sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==",
+          "requires": {
+            "@types/node": "*",
+            "merge-stream": "^2.0.0",
+            "supports-color": "^8.0.0"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "espree": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
+      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+      "requires": {
+        "acorn": "^8.7.1",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.3.0"
+      }
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+    },
+    "esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "requires": {
+        "estraverse": "^5.1.0"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "requires": {
+        "estraverse": "^5.2.0"
+      }
+    },
+    "estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
+    },
+    "estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg=="
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
+    },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
+    "events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+    },
+    "execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "requires": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      }
+    },
+    "exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ=="
+    },
+    "expect": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-27.5.1.tgz",
+      "integrity": "sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==",
+      "requires": {
+        "@jest/types": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1"
+      }
+    },
+    "express": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
+      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "requires": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.0",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.10.3",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "array-flatten": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+          "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        }
+      }
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "fast-glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
+    },
+    "fastq": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "requires": {
+        "websocket-driver": ">=0.5.1"
+      }
+    },
+    "fb-watchman": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
+      "integrity": "sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==",
+      "requires": {
+        "bser": "2.1.1"
+      }
+    },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
+    "file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      }
+    },
+    "filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "requires": {
+        "minimatch": "^5.0.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+          "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
+    "filesize": {
+      "version": "8.0.7",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
+      "integrity": "sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ=="
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "finalhandler": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
+    "find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      }
+    },
+    "find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "requires": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "requires": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      }
+    },
+    "flatted": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.6.tgz",
+      "integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ=="
+    },
+    "follow-redirects": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
+    },
+    "fork-ts-checker-webpack-plugin": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
+      "integrity": "sha512-m5cUmF30xkZ7h4tWUgTAcEaKmUW7tfyUyTqNNOz7OxWJ0v1VWKTcOvH8FWHUwSjlW/356Ijc9vi3XfcPstpQKA==",
+      "requires": {
+        "@babel/code-frame": "^7.8.3",
+        "@types/json-schema": "^7.0.5",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.4.2",
+        "cosmiconfig": "^6.0.0",
+        "deepmerge": "^4.2.2",
+        "fs-extra": "^9.0.0",
+        "glob": "^7.1.6",
+        "memfs": "^3.1.2",
+        "minimatch": "^3.0.4",
+        "schema-utils": "2.7.0",
+        "semver": "^7.3.2",
+        "tapable": "^1.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "schema-utils": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+          "requires": {
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "tapable": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+          "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
+        }
+      }
+    },
+    "form-data": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
+    },
+    "fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
+    },
+    "fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
+    "fs-monkey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
+      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q=="
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      }
+    },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g=="
+    },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
+    },
+    "gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+    },
+    "get-intrinsic": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
+      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3"
+      }
+    },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
+    },
+    "get-package-type": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q=="
+    },
+    "get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
+    },
+    "get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "requires": {
+        "is-glob": "^4.0.3"
+      }
+    },
+    "glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
+    "global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "requires": {
+        "global-prefix": "^3.0.0"
+      }
+    },
+    "global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "requires": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "dependencies": {
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
+    "globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
+    },
+    "globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+    },
+    "gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "requires": {
+        "duplexer": "^0.1.2"
+      }
+    },
+    "handle-thing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
+    },
+    "harmony-reflect": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
+      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g=="
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ=="
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+    },
+    "has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "requires": {
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+    },
+    "hoopy": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
+      "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ=="
+    },
+    "hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+      "requires": {
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "html-encoding-sniffer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
+      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "requires": {
+        "whatwg-encoding": "^1.0.5"
+      }
+    },
+    "html-entities": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
+      "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA=="
+    },
+    "html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
+    },
+    "html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+      "requires": {
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.2.2",
+        "commander": "^8.3.0",
+        "he": "^1.2.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.10.0"
+      }
+    },
+    "html-webpack-plugin": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
+      "integrity": "sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==",
+      "requires": {
+        "@types/html-minifier-terser": "^6.0.0",
+        "html-minifier-terser": "^6.0.2",
+        "lodash": "^4.17.21",
+        "pretty-error": "^4.0.0",
+        "tapable": "^2.0.0"
+      }
+    },
+    "htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw=="
+    },
+    "http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "requires": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      }
+    },
+    "http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
+    },
+    "http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "requires": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "requires": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
+    "http-proxy-middleware": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
+      "requires": {
+        "@types/http-proxy": "^1.17.8",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      }
+    },
+    "https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "requires": {
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
+    "human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
+    },
+    "iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      }
+    },
+    "icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
+    },
+    "idb": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-6.1.5.tgz",
+      "integrity": "sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw=="
+    },
+    "identity-obj-proxy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
+      "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
+      "requires": {
+        "harmony-reflect": "^1.4.6"
+      }
+    },
+    "ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ=="
+    },
+    "immer": {
+      "version": "9.0.15",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
+      "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ=="
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        }
+      }
+    },
+    "import-local": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
+      "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
+      "requires": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+    },
+    "internal-slot": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
+      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "requires": {
+        "get-intrinsic": "^1.1.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "ionicons": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
+      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "requires": {
+        "@stencil/core": "~2.16.0"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "2.16.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+          "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
+        }
+      }
+    },
+    "ipaddr.js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
+      "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng=="
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
+    "is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "requires": {
+        "has-bigints": "^1.0.1"
+      }
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-callable": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w=="
+    },
+    "is-core-module": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
+      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
+    },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+    },
+    "is-generator-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ=="
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="
+    },
+    "is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA=="
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+    },
+    "is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg=="
+    },
+    "is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA=="
+    },
+    "is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
+    },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA=="
+    },
+    "is-root": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
+      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg=="
+    },
+    "is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="
+    },
+    "is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+    },
+    "is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "requires": {
+        "is-docker": "^2.0.0"
+      }
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+    },
+    "istanbul-lib-coverage": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
+      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw=="
+    },
+    "istanbul-lib-instrument": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.0.tgz",
+      "integrity": "sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==",
+      "requires": {
+        "@babel/core": "^7.12.3",
+        "@babel/parser": "^7.14.7",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.2.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
+      "requires": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^3.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "istanbul-lib-source-maps": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+      "requires": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "istanbul-reports": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz",
+      "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==",
+      "requires": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      }
+    },
+    "jake": {
+      "version": "10.8.5",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
+      "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==",
+      "requires": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
+      "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
+      "requires": {
+        "@jest/core": "^27.5.1",
+        "import-local": "^3.0.2",
+        "jest-cli": "^27.5.1"
+      }
+    },
+    "jest-changed-files": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz",
+      "integrity": "sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==",
+      "requires": {
+        "@jest/types": "^27.5.1",
+        "execa": "^5.0.0",
+        "throat": "^6.0.1"
+      }
+    },
+    "jest-circus": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-27.5.1.tgz",
+      "integrity": "sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==",
+      "requires": {
+        "@jest/environment": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "dedent": "^0.7.0",
+        "expect": "^27.5.1",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3",
+        "throat": "^6.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-cli": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-27.5.1.tgz",
+      "integrity": "sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==",
+      "requires": {
+        "@jest/core": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "import-local": "^3.0.2",
+        "jest-config": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "prompts": "^2.0.1",
+        "yargs": "^16.2.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-config": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-27.5.1.tgz",
+      "integrity": "sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==",
+      "requires": {
+        "@babel/core": "^7.8.0",
+        "@jest/test-sequencer": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "babel-jest": "^27.5.1",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "deepmerge": "^4.2.2",
+        "glob": "^7.1.1",
+        "graceful-fs": "^4.2.9",
+        "jest-circus": "^27.5.1",
+        "jest-environment-jsdom": "^27.5.1",
+        "jest-environment-node": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-jasmine2": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-runner": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "parse-json": "^5.2.0",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-diff": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
+      "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==",
+      "requires": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-docblock": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.5.1.tgz",
+      "integrity": "sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==",
+      "requires": {
+        "detect-newline": "^3.0.0"
+      }
+    },
+    "jest-each": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-27.5.1.tgz",
+      "integrity": "sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==",
+      "requires": {
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-environment-jsdom": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz",
+      "integrity": "sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==",
+      "requires": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jsdom": "^16.6.0"
+      }
+    },
+    "jest-environment-node": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-27.5.1.tgz",
+      "integrity": "sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==",
+      "requires": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1"
+      }
+    },
+    "jest-get-type": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
+      "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw=="
+    },
+    "jest-haste-map": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
+      "integrity": "sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==",
+      "requires": {
+        "@jest/types": "^27.5.1",
+        "@types/graceful-fs": "^4.1.2",
+        "@types/node": "*",
+        "anymatch": "^3.0.3",
+        "fb-watchman": "^2.0.0",
+        "fsevents": "^2.3.2",
+        "graceful-fs": "^4.2.9",
+        "jest-regex-util": "^27.5.1",
+        "jest-serializer": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "walker": "^1.0.7"
+      }
+    },
+    "jest-jasmine2": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz",
+      "integrity": "sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==",
+      "requires": {
+        "@jest/environment": "^27.5.1",
+        "@jest/source-map": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "expect": "^27.5.1",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1",
+        "throat": "^6.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-leak-detector": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz",
+      "integrity": "sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==",
+      "requires": {
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      }
+    },
+    "jest-matcher-utils": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
+      "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==",
+      "requires": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-message-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.5.1.tgz",
+      "integrity": "sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==",
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@jest/types": "^27.5.1",
+        "@types/stack-utils": "^2.0.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-mock": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.5.1.tgz",
+      "integrity": "sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==",
+      "requires": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*"
+      }
+    },
+    "jest-pnp-resolver": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
+    },
+    "jest-regex-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.1.tgz",
+      "integrity": "sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg=="
+    },
+    "jest-resolve": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-27.5.1.tgz",
+      "integrity": "sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==",
+      "requires": {
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-pnp-resolver": "^1.2.2",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "resolve": "^1.20.0",
+        "resolve.exports": "^1.1.0",
+        "slash": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-resolve-dependencies": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz",
+      "integrity": "sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==",
+      "requires": {
+        "@jest/types": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-snapshot": "^27.5.1"
+      }
+    },
+    "jest-runner": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-27.5.1.tgz",
+      "integrity": "sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==",
+      "requires": {
+        "@jest/console": "^27.5.1",
+        "@jest/environment": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "emittery": "^0.8.1",
+        "graceful-fs": "^4.2.9",
+        "jest-docblock": "^27.5.1",
+        "jest-environment-jsdom": "^27.5.1",
+        "jest-environment-node": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-leak-detector": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "source-map-support": "^0.5.6",
+        "throat": "^6.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-runtime": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-27.5.1.tgz",
+      "integrity": "sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==",
+      "requires": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/globals": "^27.5.1",
+        "@jest/source-map": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "cjs-module-lexer": "^1.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "execa": "^5.0.0",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-mock": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "slash": "^3.0.0",
+        "strip-bom": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-serializer": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.5.1.tgz",
+      "integrity": "sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==",
+      "requires": {
+        "@types/node": "*",
+        "graceful-fs": "^4.2.9"
+      }
+    },
+    "jest-snapshot": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-27.5.1.tgz",
+      "integrity": "sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==",
+      "requires": {
+        "@babel/core": "^7.7.2",
+        "@babel/generator": "^7.7.2",
+        "@babel/plugin-syntax-typescript": "^7.7.2",
+        "@babel/traverse": "^7.7.2",
+        "@babel/types": "^7.0.0",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/babel__traverse": "^7.0.4",
+        "@types/prettier": "^2.1.5",
+        "babel-preset-current-node-syntax": "^1.0.0",
+        "chalk": "^4.0.0",
+        "expect": "^27.5.1",
+        "graceful-fs": "^4.2.9",
+        "jest-diff": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "natural-compare": "^1.4.0",
+        "pretty-format": "^27.5.1",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.5.1.tgz",
+      "integrity": "sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==",
+      "requires": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-validate": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-27.5.1.tgz",
+      "integrity": "sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==",
+      "requires": {
+        "@jest/types": "^27.5.1",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^27.5.1",
+        "leven": "^3.1.0",
+        "pretty-format": "^27.5.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-watch-typeahead": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/jest-watch-typeahead/-/jest-watch-typeahead-1.1.0.tgz",
+      "integrity": "sha512-Va5nLSJTN7YFtC2jd+7wsoe1pNe5K4ShLux/E5iHEwlB9AxaxmggY7to9KUqKojhaJw3aXqt5WAb4jGPOolpEw==",
+      "requires": {
+        "ansi-escapes": "^4.3.1",
+        "chalk": "^4.0.0",
+        "jest-regex-util": "^28.0.0",
+        "jest-watcher": "^28.0.0",
+        "slash": "^4.0.0",
+        "string-length": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "dependencies": {
+        "@jest/console": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/@jest/console/-/console-28.1.3.tgz",
+          "integrity": "sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==",
+          "requires": {
+            "@jest/types": "^28.1.3",
+            "@types/node": "*",
+            "chalk": "^4.0.0",
+            "jest-message-util": "^28.1.3",
+            "jest-util": "^28.1.3",
+            "slash": "^3.0.0"
+          },
+          "dependencies": {
+            "slash": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+              "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
+            }
+          }
+        },
+        "@jest/test-result": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-28.1.3.tgz",
+          "integrity": "sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==",
+          "requires": {
+            "@jest/console": "^28.1.3",
+            "@jest/types": "^28.1.3",
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "collect-v8-coverage": "^1.0.0"
+          }
+        },
+        "@jest/types": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-28.1.3.tgz",
+          "integrity": "sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==",
+          "requires": {
+            "@jest/schemas": "^28.1.3",
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^3.0.0",
+            "@types/node": "*",
+            "@types/yargs": "^17.0.8",
+            "chalk": "^4.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "17.0.10",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.10.tgz",
+          "integrity": "sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA==",
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "emittery": {
+          "version": "0.10.2",
+          "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.10.2.tgz",
+          "integrity": "sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "jest-message-util": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-28.1.3.tgz",
+          "integrity": "sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@jest/types": "^28.1.3",
+            "@types/stack-utils": "^2.0.0",
+            "chalk": "^4.0.0",
+            "graceful-fs": "^4.2.9",
+            "micromatch": "^4.0.4",
+            "pretty-format": "^28.1.3",
+            "slash": "^3.0.0",
+            "stack-utils": "^2.0.3"
+          },
+          "dependencies": {
+            "slash": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+              "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
+            }
+          }
+        },
+        "jest-regex-util": {
+          "version": "28.0.2",
+          "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-28.0.2.tgz",
+          "integrity": "sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw=="
+        },
+        "jest-util": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-28.1.3.tgz",
+          "integrity": "sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==",
+          "requires": {
+            "@jest/types": "^28.1.3",
+            "@types/node": "*",
+            "chalk": "^4.0.0",
+            "ci-info": "^3.2.0",
+            "graceful-fs": "^4.2.9",
+            "picomatch": "^2.2.3"
+          }
+        },
+        "jest-watcher": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-28.1.3.tgz",
+          "integrity": "sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==",
+          "requires": {
+            "@jest/test-result": "^28.1.3",
+            "@jest/types": "^28.1.3",
+            "@types/node": "*",
+            "ansi-escapes": "^4.2.1",
+            "chalk": "^4.0.0",
+            "emittery": "^0.10.2",
+            "jest-util": "^28.1.3",
+            "string-length": "^4.0.1"
+          },
+          "dependencies": {
+            "string-length": {
+              "version": "4.0.2",
+              "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+              "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+              "requires": {
+                "char-regex": "^1.0.2",
+                "strip-ansi": "^6.0.0"
+              }
+            },
+            "strip-ansi": {
+              "version": "6.0.1",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+              "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+              "requires": {
+                "ansi-regex": "^5.0.1"
+              }
+            }
+          }
+        },
+        "pretty-format": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz",
+          "integrity": "sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==",
+          "requires": {
+            "@jest/schemas": "^28.1.3",
+            "ansi-regex": "^5.0.1",
+            "ansi-styles": "^5.0.0",
+            "react-is": "^18.0.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+              "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
+            }
+          }
+        },
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        },
+        "slash": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+          "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew=="
+        },
+        "string-length": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+          "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
+          "requires": {
+            "char-regex": "^2.0.0",
+            "strip-ansi": "^7.0.1"
+          },
+          "dependencies": {
+            "char-regex": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz",
+              "integrity": "sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw=="
+            }
+          }
+        },
+        "strip-ansi": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+          "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "6.0.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+              "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
+            }
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-watcher": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-27.5.1.tgz",
+      "integrity": "sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==",
+      "requires": {
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "jest-util": "^27.5.1",
+        "string-length": "^4.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "requires": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
+    "jsdom": {
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
+      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
+      "requires": {
+        "abab": "^2.0.5",
+        "acorn": "^8.2.4",
+        "acorn-globals": "^6.0.0",
+        "cssom": "^0.4.4",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^2.0.0",
+        "decimal.js": "^10.2.1",
+        "domexception": "^2.0.1",
+        "escodegen": "^2.0.0",
+        "form-data": "^3.0.0",
+        "html-encoding-sniffer": "^2.0.1",
+        "http-proxy-agent": "^4.0.1",
+        "https-proxy-agent": "^5.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.0",
+        "parse5": "6.0.1",
+        "saxes": "^5.0.1",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.0.0",
+        "w3c-hr-time": "^1.0.2",
+        "w3c-xmlserializer": "^2.0.0",
+        "webidl-conversions": "^6.1.0",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.5.0",
+        "ws": "^7.4.6",
+        "xml-name-validator": "^3.0.0"
+      }
+    },
+    "jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
+    },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
+    "json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
+    },
+    "json5": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
+    },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
+    "jsonpointer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
+      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="
+    },
+    "jsx-ast-utils": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.2.tgz",
+      "integrity": "sha512-4ZCADZHRkno244xlNnn4AOG6sRQ7iBZ5BbgZ4vW4y5IZw7cVUD1PPeblm1xx/nfmMxPdt/LHsXZW8z/j58+l9Q==",
+      "requires": {
+        "array-includes": "^3.1.5",
+        "object.assign": "^4.1.2"
+      }
+    },
+    "kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+    },
+    "kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
+    },
+    "klona": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
+      "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ=="
+    },
+    "language-subtag-registry": {
+      "version": "0.3.22",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz",
+      "integrity": "sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w=="
+    },
+    "language-tags": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
+      "integrity": "sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==",
+      "requires": {
+        "language-subtag-registry": "~0.3.2"
+      }
+    },
+    "leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="
+    },
+    "levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "requires": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      }
+    },
+    "lilconfig": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg=="
+    },
+    "lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
+    "loader-runner": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg=="
+    },
+    "loader-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      }
+    },
+    "locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "requires": {
+        "p-locate": "^5.0.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
+    },
+    "lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "requires": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "requires": {
+        "semver": "^6.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "makeerror": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
+      "requires": {
+        "tmpl": "1.0.5"
+      }
+    },
+    "mdn-data": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
+    },
+    "memfs": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.7.tgz",
+      "integrity": "sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==",
+      "requires": {
+        "fs-monkey": "^1.0.3"
+      }
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+    },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w=="
+    },
+    "micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "requires": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      }
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
+    "mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
+    },
+    "mini-css-extract-plugin": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz",
+      "integrity": "sha512-wd+SD57/K6DiV7jIR34P+s3uckTRuQvx0tKPcvjFlrEylk6P4mQ2KSWk1hblj1Kxaqok7LogKOieygXqBczNlg==",
+      "requires": {
+        "schema-utils": "^4.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        }
+      }
+    },
+    "minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+    },
+    "minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+    },
+    "mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "requires": {
+        "minimist": "^1.2.6"
+      }
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "multicast-dns": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
+      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
+      "requires": {
+        "dns-packet": "^5.2.2",
+        "thunky": "^1.0.2"
+      }
+    },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+    },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
+    },
+    "negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
+    },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
+    "no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "requires": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node-forge": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="
+    },
+    "node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
+    },
+    "node-releases": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
+      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg=="
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="
+    },
+    "normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A=="
+    },
+    "npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "requires": {
+        "path-key": "^3.0.0"
+      }
+    },
+    "nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
+    "nwsapi": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.1.tgz",
+      "integrity": "sha512-JYOWTeFoS0Z93587vRJgASD5Ut11fYl5NyihP3KrYBvMe1FRRs6RN7m20SA/16GM4P6hTnZjT+UmDOt38UeXNg=="
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
+    "object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
+    },
+    "object-inspect": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+    },
+    "object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "object.entries": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
+      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      }
+    },
+    "object.fromentries": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
+      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      }
+    },
+    "object.getownpropertydescriptors": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.4.tgz",
+      "integrity": "sha512-sccv3L/pMModT6dJAYF3fzGMVcb38ysQ0tEE6ixv2yXJDtEIPph268OlAdJj5/qZMZDq2g/jqvwppt36uS/uQQ==",
+      "requires": {
+        "array.prototype.reduce": "^1.0.4",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.1"
+      }
+    },
+    "object.hasown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
+      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
+      "requires": {
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      }
+    },
+    "object.values": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
+      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      }
+    },
+    "obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
+    },
+    "on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "requires": {
+        "mimic-fn": "^2.1.0"
+      }
+    },
+    "open": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+      "requires": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      }
+    },
+    "optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "requires": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      }
+    },
+    "p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "requires": {
+        "yocto-queue": "^0.1.0"
+      }
+    },
+    "p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "requires": {
+        "p-limit": "^3.0.2"
+      }
+    },
+    "p-retry": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
+      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "requires": {
+        "@types/retry": "0.12.0",
+        "retry": "^0.13.1"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+    },
+    "param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
+    "parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
+    },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
+    },
+    "pirates": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ=="
+    },
+    "pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "requires": {
+        "find-up": "^4.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        }
+      }
+    },
+    "pkg-up": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
+      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+      "requires": {
+        "find-up": "^3.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ=="
+        }
+      }
+    },
+    "postcss": {
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "requires": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "postcss-attribute-case-insensitive": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz",
+      "integrity": "sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "postcss-browser-comments": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
+      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg=="
+    },
+    "postcss-calc": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
+      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-clamp": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz",
+      "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-color-functional-notation": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz",
+      "integrity": "sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-color-hex-alpha": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.4.tgz",
+      "integrity": "sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-color-rebeccapurple": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz",
+      "integrity": "sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-colormin": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.0.tgz",
+      "integrity": "sha512-WdDO4gOFG2Z8n4P8TWBpshnL3JpmNmJwdnfP2gbk2qBA8PWwOYcmjmI/t3CmMeL72a7Hkd+x/Mg9O2/0rD54Pg==",
+      "requires": {
+        "browserslist": "^4.16.6",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-convert-values": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.2.tgz",
+      "integrity": "sha512-c6Hzc4GAv95B7suy4udszX9Zy4ETyMCgFPUDtWjdFTKH1SE9eFY/jEpHSwTH1QPuwxHpWslhckUQWbNRM4ho5g==",
+      "requires": {
+        "browserslist": "^4.20.3",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-custom-media": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz",
+      "integrity": "sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-custom-properties": {
+      "version": "12.1.8",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.8.tgz",
+      "integrity": "sha512-8rbj8kVu00RQh2fQF81oBqtduiANu4MIxhyf0HbbStgPtnFlWn0yiaYTpLHrPnJbffVY1s9apWsIoVZcc68FxA==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-custom-selectors": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz",
+      "integrity": "sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "postcss-dir-pseudo-class": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz",
+      "integrity": "sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "postcss-discard-comments": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ=="
+    },
+    "postcss-discard-duplicates": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw=="
+    },
+    "postcss-discard-empty": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A=="
+    },
+    "postcss-discard-overridden": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw=="
+    },
+    "postcss-double-position-gradients": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz",
+      "integrity": "sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==",
+      "requires": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-env-function": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-4.0.6.tgz",
+      "integrity": "sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-flexbugs-fixes": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ=="
+    },
+    "postcss-focus-visible": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-6.0.4.tgz",
+      "integrity": "sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.9"
+      }
+    },
+    "postcss-focus-within": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-5.0.4.tgz",
+      "integrity": "sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.9"
+      }
+    },
+    "postcss-font-variant": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA=="
+    },
+    "postcss-gap-properties": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz",
+      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg=="
+    },
+    "postcss-image-set-function": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz",
+      "integrity": "sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "requires": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
+    "postcss-initial": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
+      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ=="
+    },
+    "postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "requires": {
+        "camelcase-css": "^2.0.1"
+      }
+    },
+    "postcss-lab-function": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz",
+      "integrity": "sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==",
+      "requires": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "requires": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      }
+    },
+    "postcss-loader": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
+      "integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==",
+      "requires": {
+        "cosmiconfig": "^7.0.0",
+        "klona": "^2.0.5",
+        "semver": "^7.3.5"
+      }
+    },
+    "postcss-logical": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
+      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g=="
+    },
+    "postcss-media-minmax": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
+      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ=="
+    },
+    "postcss-merge-longhand": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.6.tgz",
+      "integrity": "sha512-6C/UGF/3T5OE2CEbOuX7iNO63dnvqhGZeUnKkDeifebY0XqkkvrctYSZurpNE902LDf2yKwwPFgotnfSoPhQiw==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^5.1.0"
+      }
+    },
+    "postcss-merge-rules": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.2.tgz",
+      "integrity": "sha512-zKMUlnw+zYCWoPN6yhPjtcEdlJaMUZ0WyVcxTAmw3lkkN/NDMRkOkiuctQEoWAOvH7twaxUUdvBWl0d4+hifRQ==",
+      "requires": {
+        "browserslist": "^4.16.6",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^3.1.0",
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
+    "postcss-minify-font-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
+      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-gradients": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
+      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+      "requires": {
+        "colord": "^2.9.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-params": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.3.tgz",
+      "integrity": "sha512-bkzpWcjykkqIujNL+EVEPOlLYi/eZ050oImVtHU7b4lFS82jPnsCb44gvC6pxaNt38Els3jWYDHTjHKf0koTgg==",
+      "requires": {
+        "browserslist": "^4.16.6",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-selectors": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
+      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
+    },
+    "postcss-modules-local-by-default": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "requires": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "requires": {
+        "icss-utils": "^5.0.0"
+      }
+    },
+    "postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.6"
+      }
+    },
+    "postcss-nesting": {
+      "version": "10.1.10",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.1.10.tgz",
+      "integrity": "sha512-lqd7LXCq0gWc0wKXtoKDru5wEUNjm3OryLVNRZ8OnW8km6fSNUuFrjEhU3nklxXE2jvd4qrox566acgh+xQt8w==",
+      "requires": {
+        "@csstools/selector-specificity": "^2.0.0",
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "postcss-normalize": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize/-/postcss-normalize-10.0.1.tgz",
+      "integrity": "sha512-+5w18/rDev5mqERcG3W5GZNMJa1eoYYNGo8gB7tEwaos0ajk3ZXAI4mHGcNT47NE+ZnZD1pEpUOFLvltIwmeJA==",
+      "requires": {
+        "@csstools/normalize.css": "*",
+        "postcss-browser-comments": "^4",
+        "sanitize.css": "*"
+      }
+    },
+    "postcss-normalize-charset": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg=="
+    },
+    "postcss-normalize-display-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
+      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-positions": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
+      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-repeat-style": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
+      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-string": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
+      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-timing-functions": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
+      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-unicode": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.0.tgz",
+      "integrity": "sha512-J6M3MizAAZ2dOdSjy2caayJLQT8E8K9XjLce8AUQMwOrCvjCHv24aLC/Lps1R1ylOfol5VIDMaM/Lo9NGlk1SQ==",
+      "requires": {
+        "browserslist": "^4.16.6",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
+      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+      "requires": {
+        "normalize-url": "^6.0.1",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-whitespace": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
+      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-opacity-percentage": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.2.tgz",
+      "integrity": "sha512-lyUfF7miG+yewZ8EAk9XUBIlrHyUE6fijnesuz+Mj5zrIHIEw6KcIZSOk/elVMqzLvREmXB83Zi/5QpNRYd47w=="
+    },
+    "postcss-ordered-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
+      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+      "requires": {
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-overflow-shorthand": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz",
+      "integrity": "sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-page-break": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ=="
+    },
+    "postcss-place": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-7.0.5.tgz",
+      "integrity": "sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-preset-env": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.7.2.tgz",
+      "integrity": "sha512-1q0ih7EDsZmCb/FMDRvosna7Gsbdx8CvYO5hYT120hcp2ZAuOHpSzibujZ4JpIUcAC02PG6b+eftxqjTFh5BNA==",
+      "requires": {
+        "@csstools/postcss-cascade-layers": "^1.0.4",
+        "@csstools/postcss-color-function": "^1.1.0",
+        "@csstools/postcss-font-format-keywords": "^1.0.0",
+        "@csstools/postcss-hwb-function": "^1.0.1",
+        "@csstools/postcss-ic-unit": "^1.0.0",
+        "@csstools/postcss-is-pseudo-class": "^2.0.6",
+        "@csstools/postcss-normalize-display-values": "^1.0.0",
+        "@csstools/postcss-oklab-function": "^1.1.0",
+        "@csstools/postcss-progressive-custom-properties": "^1.3.0",
+        "@csstools/postcss-stepped-value-functions": "^1.0.0",
+        "@csstools/postcss-trigonometric-functions": "^1.0.1",
+        "@csstools/postcss-unset-value": "^1.0.1",
+        "autoprefixer": "^10.4.7",
+        "browserslist": "^4.21.0",
+        "css-blank-pseudo": "^3.0.3",
+        "css-has-pseudo": "^3.0.4",
+        "css-prefers-color-scheme": "^6.0.3",
+        "cssdb": "^6.6.3",
+        "postcss-attribute-case-insensitive": "^5.0.1",
+        "postcss-clamp": "^4.1.0",
+        "postcss-color-functional-notation": "^4.2.3",
+        "postcss-color-hex-alpha": "^8.0.4",
+        "postcss-color-rebeccapurple": "^7.1.0",
+        "postcss-custom-media": "^8.0.2",
+        "postcss-custom-properties": "^12.1.8",
+        "postcss-custom-selectors": "^6.0.3",
+        "postcss-dir-pseudo-class": "^6.0.4",
+        "postcss-double-position-gradients": "^3.1.1",
+        "postcss-env-function": "^4.0.6",
+        "postcss-focus-visible": "^6.0.4",
+        "postcss-focus-within": "^5.0.4",
+        "postcss-font-variant": "^5.0.0",
+        "postcss-gap-properties": "^3.0.3",
+        "postcss-image-set-function": "^4.0.6",
+        "postcss-initial": "^4.0.1",
+        "postcss-lab-function": "^4.2.0",
+        "postcss-logical": "^5.0.4",
+        "postcss-media-minmax": "^5.0.0",
+        "postcss-nesting": "^10.1.9",
+        "postcss-opacity-percentage": "^1.1.2",
+        "postcss-overflow-shorthand": "^3.0.3",
+        "postcss-page-break": "^3.0.4",
+        "postcss-place": "^7.0.4",
+        "postcss-pseudo-class-any-link": "^7.1.5",
+        "postcss-replace-overflow-wrap": "^4.0.0",
+        "postcss-selector-not": "^6.0.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-pseudo-class-any-link": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz",
+      "integrity": "sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "postcss-reduce-initial": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz",
+      "integrity": "sha512-5OgTUviz0aeH6MtBjHfbr57tml13PuedK/Ecg8szzd4XRMbYxH4572JFG067z+FqBIf6Zp/d+0581glkvvWMFw==",
+      "requires": {
+        "browserslist": "^4.16.6",
+        "caniuse-api": "^3.0.0"
+      }
+    },
+    "postcss-reduce-transforms": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
+      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-replace-overflow-wrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw=="
+    },
+    "postcss-selector-not": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz",
+      "integrity": "sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-svgo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
+      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^2.7.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+        },
+        "css-tree": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+          "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+          "requires": {
+            "mdn-data": "2.0.14",
+            "source-map": "^0.6.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.14",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "svgo": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+          "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+          "requires": {
+            "@trysound/sax": "0.2.0",
+            "commander": "^7.2.0",
+            "css-select": "^4.1.3",
+            "css-tree": "^1.1.3",
+            "csso": "^4.2.0",
+            "picocolors": "^1.0.0",
+            "stable": "^0.1.8"
+          }
+        }
+      }
+    },
+    "postcss-unique-selectors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
+      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
+    "prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
+    },
+    "pretty-bytes": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
+      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg=="
+    },
+    "pretty-error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
+      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
+      "requires": {
+        "lodash": "^4.17.20",
+        "renderkid": "^3.0.0"
+      }
+    },
+    "pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "requires": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
+        }
+      }
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "promise": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz",
+      "integrity": "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==",
+      "requires": {
+        "asap": "~2.0.6"
+      }
+    },
+    "prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "requires": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
+    "proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "requires": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "dependencies": {
+        "ipaddr.js": {
+          "version": "1.9.1",
+          "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+          "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+        }
+      }
+    },
+    "psl": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+    },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
+    },
+    "qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
+    },
+    "quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
+    },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "requires": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="
+        },
+        "iconv-lite": {
+          "version": "0.4.24",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        }
+      }
+    },
+    "react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "react-app-polyfill": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
+      "integrity": "sha512-sZ41cxiU5llIB003yxxQBYrARBqe0repqPTTYBTmMqTz9szeBbE37BehCE891NZsmdZqqP+xWKdT3eo3vOzN8w==",
+      "requires": {
+        "core-js": "^3.19.2",
+        "object-assign": "^4.1.1",
+        "promise": "^8.1.0",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.9",
+        "whatwg-fetch": "^3.6.2"
+      }
+    },
+    "react-dev-utils": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
+      "integrity": "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==",
+      "requires": {
+        "@babel/code-frame": "^7.16.0",
+        "address": "^1.1.2",
+        "browserslist": "^4.18.1",
+        "chalk": "^4.1.2",
+        "cross-spawn": "^7.0.3",
+        "detect-port-alt": "^1.1.6",
+        "escape-string-regexp": "^4.0.0",
+        "filesize": "^8.0.6",
+        "find-up": "^5.0.0",
+        "fork-ts-checker-webpack-plugin": "^6.5.0",
+        "global-modules": "^2.0.0",
+        "globby": "^11.0.4",
+        "gzip-size": "^6.0.0",
+        "immer": "^9.0.7",
+        "is-root": "^2.1.0",
+        "loader-utils": "^3.2.0",
+        "open": "^8.4.0",
+        "pkg-up": "^3.1.0",
+        "prompts": "^2.4.2",
+        "react-error-overlay": "^6.0.11",
+        "recursive-readdir": "^2.2.2",
+        "shell-quote": "^1.7.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "loader-utils": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.0.tgz",
+          "integrity": "sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      }
+    },
+    "react-error-overlay": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
+      "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
+    },
+    "react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
+    "react-refresh": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
+      "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
+    },
+    "react-scripts": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
+      "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
+      "requires": {
+        "@babel/core": "^7.16.0",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+        "@svgr/webpack": "^5.5.0",
+        "babel-jest": "^27.4.2",
+        "babel-loader": "^8.2.3",
+        "babel-plugin-named-asset-import": "^0.3.8",
+        "babel-preset-react-app": "^10.0.1",
+        "bfj": "^7.0.2",
+        "browserslist": "^4.18.1",
+        "camelcase": "^6.2.1",
+        "case-sensitive-paths-webpack-plugin": "^2.4.0",
+        "css-loader": "^6.5.1",
+        "css-minimizer-webpack-plugin": "^3.2.0",
+        "dotenv": "^10.0.0",
+        "dotenv-expand": "^5.1.0",
+        "eslint": "^8.3.0",
+        "eslint-config-react-app": "^7.0.1",
+        "eslint-webpack-plugin": "^3.1.1",
+        "file-loader": "^6.2.0",
+        "fs-extra": "^10.0.0",
+        "fsevents": "^2.3.2",
+        "html-webpack-plugin": "^5.5.0",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^27.4.3",
+        "jest-resolve": "^27.4.2",
+        "jest-watch-typeahead": "^1.0.0",
+        "mini-css-extract-plugin": "^2.4.5",
+        "postcss": "^8.4.4",
+        "postcss-flexbugs-fixes": "^5.0.2",
+        "postcss-loader": "^6.2.1",
+        "postcss-normalize": "^10.0.1",
+        "postcss-preset-env": "^7.0.1",
+        "prompts": "^2.4.2",
+        "react-app-polyfill": "^3.0.0",
+        "react-dev-utils": "^12.0.1",
+        "react-refresh": "^0.11.0",
+        "resolve": "^1.20.0",
+        "resolve-url-loader": "^4.0.0",
+        "sass-loader": "^12.3.0",
+        "semver": "^7.3.5",
+        "source-map-loader": "^3.0.0",
+        "style-loader": "^3.3.1",
+        "tailwindcss": "^3.0.2",
+        "terser-webpack-plugin": "^5.2.5",
+        "webpack": "^5.64.4",
+        "webpack-dev-server": "^4.6.0",
+        "webpack-manifest-plugin": "^4.0.2",
+        "workbox-webpack-plugin": "^6.4.1"
+      }
+    },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
+    "readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "recursive-readdir": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
+      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "requires": {
+        "minimatch": "3.0.4"
+      },
+      "dependencies": {
+        "minimatch": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        }
+      }
+    },
+    "regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
+    },
+    "regenerate-unicode-properties": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz",
+      "integrity": "sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==",
+      "requires": {
+        "regenerate": "^1.4.2"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
+    "regenerator-transform": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.0.tgz",
+      "integrity": "sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==",
+      "requires": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "regex-parser": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
+      "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q=="
+    },
+    "regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      }
+    },
+    "regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg=="
+    },
+    "regexpu-core": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.1.0.tgz",
+      "integrity": "sha512-bb6hk+xWd2PEOkj5It46A16zFMs2mv86Iwpdu94la4S3sJ7C973h2dHpYKwIBGaWSO7cIRJ+UX0IeMaWcO4qwA==",
+      "requires": {
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.0.1",
+        "regjsgen": "^0.6.0",
+        "regjsparser": "^0.8.2",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.0.0"
+      }
+    },
+    "regjsgen": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.6.0.tgz",
+      "integrity": "sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA=="
+    },
+    "regjsparser": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.8.4.tgz",
+      "integrity": "sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==",
+      "requires": {
+        "jsesc": "~0.5.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA=="
+        }
+      }
+    },
+    "relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog=="
+    },
+    "renderkid": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
+      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
+      "requires": {
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^6.0.1"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
+    },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
+    },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
+    "resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "requires": {
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "requires": {
+        "resolve-from": "^5.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
+    },
+    "resolve-url-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
+      "integrity": "sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA==",
+      "requires": {
+        "adjust-sourcemap-loader": "^4.0.0",
+        "convert-source-map": "^1.7.0",
+        "loader-utils": "^2.0.0",
+        "postcss": "^7.0.35",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "resolve.exports": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz",
+      "integrity": "sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ=="
+    },
+    "retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg=="
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "rollup": {
+      "version": "2.77.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
+      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "requires": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "rollup-plugin-terser": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+      "requires": {
+        "@babel/code-frame": "^7.10.4",
+        "jest-worker": "^26.2.1",
+        "serialize-javascript": "^4.0.0",
+        "terser": "^5.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "jest-worker": {
+          "version": "26.6.2",
+          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+          "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+          "requires": {
+            "@types/node": "*",
+            "merge-stream": "^2.0.0",
+            "supports-color": "^7.0.0"
+          }
+        },
+        "serialize-javascript": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "sanitize.css": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
+      "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
+    },
+    "sass-loader": {
+      "version": "12.6.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
+      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
+      "requires": {
+        "klona": "^2.0.4",
+        "neo-async": "^2.6.2"
+      }
+    },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
+    "saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "requires": {
+        "xmlchars": "^2.2.0"
+      }
+    },
+    "scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "requires": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      }
+    },
+    "select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
+    },
+    "selfsigned": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.1.tgz",
+      "integrity": "sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==",
+      "requires": {
+        "node-forge": "^1"
+      }
+    },
+    "semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "requires": {
+        "lru-cache": "^6.0.0"
+      }
+    },
+    "send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+              "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+            }
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
+    "serialize-javascript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
+      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+      "requires": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "depd": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+          "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ=="
+        },
+        "http-errors": {
+          "version": "1.6.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.1.0",
+            "statuses": ">= 1.4.0 < 2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        },
+        "setprototypeof": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+        },
+        "statuses": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+          "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.18.0"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
+    },
+    "shell-quote": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz",
+      "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw=="
+    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
+    "signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+    },
+    "sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
+    },
+    "sockjs": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
+      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+      "requires": {
+        "faye-websocket": "^0.11.3",
+        "uuid": "^8.3.2",
+        "websocket-driver": "^0.7.4"
+      }
+    },
+    "source-list-map": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
+    },
+    "source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
+    "source-map-loader": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.1.tgz",
+      "integrity": "sha512-Vp1UsfyPvgujKQzi4pyDiTOnE3E4H+yHvkVRN3c/9PJmQS4CQJExvcDvaX/D+RV+xQben9HJ56jMJS3CgUeWyA==",
+      "requires": {
+        "abab": "^2.0.5",
+        "iconv-lite": "^0.6.3",
+        "source-map-js": "^1.0.1"
+      }
+    },
+    "source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
+    "spdy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "requires": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
+      }
+    },
+    "spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "requires": {
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      }
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
+    },
+    "stack-utils": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.5.tgz",
+      "integrity": "sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==",
+      "requires": {
+        "escape-string-regexp": "^2.0.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
+        }
+      }
+    },
+    "stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
+    },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        }
+      }
+    },
+    "string-length": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+      "requires": {
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "string-natural-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-3.0.1.tgz",
+      "integrity": "sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw=="
+    },
+    "string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        }
+      }
+    },
+    "string.prototype.matchall": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz",
+      "integrity": "sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1",
+        "get-intrinsic": "^1.1.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.4.1",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
+      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
+      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      }
+    },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "requires": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
+    "strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w=="
+    },
+    "strip-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
+      "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw=="
+    },
+    "strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA=="
+    },
+    "strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
+    },
+    "style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
+    },
+    "stylehacks": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
+      "integrity": "sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q==",
+      "requires": {
+        "browserslist": "^4.16.6",
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "supports-hyperlinks": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz",
+      "integrity": "sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==",
+      "requires": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
+    },
+    "svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
+    },
+    "svgo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
+      "requires": {
+        "chalk": "^2.4.1",
+        "coa": "^2.0.2",
+        "css-select": "^2.0.0",
+        "css-select-base-adapter": "^0.1.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "^4.0.2",
+        "js-yaml": "^3.13.1",
+        "mkdirp": "~0.5.1",
+        "object.values": "^1.1.0",
+        "sax": "~1.2.4",
+        "stable": "^0.1.8",
+        "unquote": "~1.1.1",
+        "util.promisify": "~1.0.0"
+      },
+      "dependencies": {
+        "css-select": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+          "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^3.2.1",
+            "domutils": "^1.7.0",
+            "nth-check": "^1.0.2"
+          }
+        },
+        "css-what": {
+          "version": "3.4.2",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+          "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ=="
+        },
+        "dom-serializer": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+          "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "entities": "^2.0.0"
+          }
+        },
+        "domutils": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          },
+          "dependencies": {
+            "domelementtype": {
+              "version": "1.3.1",
+              "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+              "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+            }
+          }
+        },
+        "nth-check": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+          "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+          "requires": {
+            "boolbase": "~1.0.0"
+          }
+        }
+      }
+    },
+    "symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
+    },
+    "tailwindcss": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.6.tgz",
+      "integrity": "sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==",
+      "requires": {
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "color-name": "^1.1.4",
+        "detective": "^5.2.1",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.11",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "lilconfig": "^2.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.4",
+        "postcss-nested": "5.0.6",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.22.1"
+      },
+      "dependencies": {
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        }
+      }
+    },
+    "tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
+    },
+    "temp-dir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
+      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg=="
+    },
+    "tempy": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.6.0.tgz",
+      "integrity": "sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==",
+      "requires": {
+        "is-stream": "^2.0.0",
+        "temp-dir": "^2.0.0",
+        "type-fest": "^0.16.0",
+        "unique-string": "^2.0.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.16.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
+          "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg=="
+        }
+      }
+    },
+    "terminal-link": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
+      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
+      "requires": {
+        "ansi-escapes": "^4.2.1",
+        "supports-hyperlinks": "^2.0.0"
+      }
+    },
+    "terser": {
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
+      "requires": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        }
+      }
+    },
+    "terser-webpack-plugin": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz",
+      "integrity": "sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==",
+      "requires": {
+        "@jridgewell/trace-mapping": "^0.3.7",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.0",
+        "terser": "^5.7.2"
+      }
+    },
+    "test-exclude": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "requires": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+    },
+    "throat": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
+      "integrity": "sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w=="
+    },
+    "thunky": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
+    },
+    "tmpl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="
+    },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
+    },
+    "tough-cookie": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
+      "integrity": "sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==",
+      "requires": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.1.2"
+      },
+      "dependencies": {
+        "universalify": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+        }
+      }
+    },
+    "tr46": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
+      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
+      "requires": {
+        "punycode": "^2.1.1"
+      }
+    },
+    "tryer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
+      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
+    },
+    "tsconfig-paths": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
+      "integrity": "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==",
+      "requires": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.1",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="
+        }
+      }
+    },
+    "tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "requires": {
+        "tslib": "^1.8.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "requires": {
+        "prelude-ls": "^1.2.1"
+      }
+    },
+    "type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g=="
+    },
+    "type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "typescript": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ=="
+    },
+    "unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      }
+    },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ=="
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "requires": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      }
+    },
+    "unicode-match-property-value-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw=="
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ=="
+    },
+    "unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "requires": {
+        "crypto-random-string": "^2.0.0"
+      }
+    },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="
+    },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg=="
+    },
+    "upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
+    },
+    "update-browserslist-db": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz",
+      "integrity": "sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==",
+      "requires": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      }
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "util.promisify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
+      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.2",
+        "has-symbols": "^1.0.1",
+        "object.getownpropertydescriptors": "^2.1.0"
+      }
+    },
+    "utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
+    },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+    },
+    "v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
+    },
+    "v8-to-istanbul": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
+      "integrity": "sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==",
+      "requires": {
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^1.6.0",
+        "source-map": "^0.7.3"
+      }
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
+    },
+    "w3c-hr-time": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "requires": {
+        "browser-process-hrtime": "^1.0.0"
+      }
+    },
+    "w3c-xmlserializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
+      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "requires": {
+        "xml-name-validator": "^3.0.0"
+      }
+    },
+    "walker": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
+      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
+      "requires": {
+        "makeerror": "1.0.12"
+      }
+    },
+    "watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "requires": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      }
+    },
+    "wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "requires": {
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "web-vitals": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
+      "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
+    },
+    "webidl-conversions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
+      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
+    },
+    "webpack": {
+      "version": "5.74.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
+      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
+      "requires": {
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^0.0.51",
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/wasm-edit": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1",
+        "acorn": "^8.7.1",
+        "acorn-import-assertions": "^1.7.6",
+        "browserslist": "^4.14.5",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.10.0",
+        "es-module-lexer": "^0.9.0",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.9",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.1.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.1.3",
+        "watchpack": "^2.4.0",
+        "webpack-sources": "^3.2.3"
+      },
+      "dependencies": {
+        "@types/estree": {
+          "version": "0.0.51",
+          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
+          "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ=="
+        },
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+        }
+      }
+    },
+    "webpack-dev-middleware": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
+      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "requires": {
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.3",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        }
+      }
+    },
+    "webpack-dev-server": {
+      "version": "4.9.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.3.tgz",
+      "integrity": "sha512-3qp/eoboZG5/6QgiZ3llN8TUzkSpYg1Ko9khWX1h40MIEUNS2mDoIa8aXsPfskER+GbTvs/IJZ1QTBBhhuetSw==",
+      "requires": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/serve-static": "^1.13.10",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.5.1",
+        "ansi-html-community": "^0.0.8",
+        "bonjour-service": "^1.0.11",
+        "chokidar": "^3.5.3",
+        "colorette": "^2.0.10",
+        "compression": "^1.7.4",
+        "connect-history-api-fallback": "^2.0.0",
+        "default-gateway": "^6.0.3",
+        "express": "^4.17.3",
+        "graceful-fs": "^4.2.6",
+        "html-entities": "^2.3.2",
+        "http-proxy-middleware": "^2.0.3",
+        "ipaddr.js": "^2.0.1",
+        "open": "^8.0.9",
+        "p-retry": "^4.5.0",
+        "rimraf": "^3.0.2",
+        "schema-utils": "^4.0.0",
+        "selfsigned": "^2.0.1",
+        "serve-index": "^1.9.1",
+        "sockjs": "^0.3.24",
+        "spdy": "^4.0.2",
+        "webpack-dev-middleware": "^5.3.1",
+        "ws": "^8.4.2"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        },
+        "ws": {
+          "version": "8.8.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz",
+          "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA=="
+        }
+      }
+    },
+    "webpack-manifest-plugin": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz",
+      "integrity": "sha512-YXUAwxtfKIJIKkhg03MKuiFAD72PlrqCiwdwO4VEXdRO5V0ORCNwaOwAZawPZalCbmH9kBDmXnNeQOw+BIEiow==",
+      "requires": {
+        "tapable": "^2.0.0",
+        "webpack-sources": "^2.2.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "webpack-sources": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz",
+          "integrity": "sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==",
+          "requires": {
+            "source-list-map": "^2.0.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w=="
+    },
+    "websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "requires": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      }
+    },
+    "websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
+    },
+    "whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "requires": {
+        "iconv-lite": "0.4.24"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.4.24",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        }
+      }
+    },
+    "whatwg-fetch": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
+      "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
+    },
+    "whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g=="
+    },
+    "whatwg-url": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
+      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
+      "requires": {
+        "lodash": "^4.7.0",
+        "tr46": "^2.1.0",
+        "webidl-conversions": "^6.1.0"
+      }
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
+    },
+    "workbox-background-sync": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.5.3.tgz",
+      "integrity": "sha512-0DD/V05FAcek6tWv9XYj2w5T/plxhDSpclIcAGjA/b7t/6PdaRkQ7ZgtAX6Q/L7kV7wZ8uYRJUoH11VjNipMZw==",
+      "requires": {
+        "idb": "^6.1.4",
+        "workbox-core": "6.5.3"
+      }
+    },
+    "workbox-broadcast-update": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.5.3.tgz",
+      "integrity": "sha512-4AwCIA5DiDrYhlN+Miv/fp5T3/whNmSL+KqhTwRBTZIL6pvTgE4lVuRzAt1JltmqyMcQ3SEfCdfxczuI4kwFQg==",
+      "requires": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "workbox-build": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.5.3.tgz",
+      "integrity": "sha512-8JNHHS7u13nhwIYCDea9MNXBNPHXCs5KDZPKI/ZNTr3f4sMGoD7hgFGecbyjX1gw4z6e9bMpMsOEJNyH5htA/w==",
+      "requires": {
+        "@apideck/better-ajv-errors": "^0.3.1",
+        "@babel/core": "^7.11.1",
+        "@babel/preset-env": "^7.11.0",
+        "@babel/runtime": "^7.11.2",
+        "@rollup/plugin-babel": "^5.2.0",
+        "@rollup/plugin-node-resolve": "^11.2.1",
+        "@rollup/plugin-replace": "^2.4.1",
+        "@surma/rollup-plugin-off-main-thread": "^2.2.3",
+        "ajv": "^8.6.0",
+        "common-tags": "^1.8.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "fs-extra": "^9.0.1",
+        "glob": "^7.1.6",
+        "lodash": "^4.17.20",
+        "pretty-bytes": "^5.3.0",
+        "rollup": "^2.43.1",
+        "rollup-plugin-terser": "^7.0.0",
+        "source-map": "^0.8.0-beta.0",
+        "stringify-object": "^3.3.0",
+        "strip-comments": "^2.0.1",
+        "tempy": "^0.6.0",
+        "upath": "^1.2.0",
+        "workbox-background-sync": "6.5.3",
+        "workbox-broadcast-update": "6.5.3",
+        "workbox-cacheable-response": "6.5.3",
+        "workbox-core": "6.5.3",
+        "workbox-expiration": "6.5.3",
+        "workbox-google-analytics": "6.5.3",
+        "workbox-navigation-preload": "6.5.3",
+        "workbox-precaching": "6.5.3",
+        "workbox-range-requests": "6.5.3",
+        "workbox-recipes": "6.5.3",
+        "workbox-routing": "6.5.3",
+        "workbox-strategies": "6.5.3",
+        "workbox-streams": "6.5.3",
+        "workbox-sw": "6.5.3",
+        "workbox-window": "6.5.3"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        },
+        "source-map": {
+          "version": "0.8.0-beta.0",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
+          "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
+          "requires": {
+            "whatwg-url": "^7.0.0"
+          }
+        },
+        "tr46": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+          "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
+          "requires": {
+            "punycode": "^2.1.0"
+          }
+        },
+        "webidl-conversions": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+          "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
+        },
+        "whatwg-url": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
+          "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+          "requires": {
+            "lodash.sortby": "^4.7.0",
+            "tr46": "^1.0.1",
+            "webidl-conversions": "^4.0.2"
+          }
+        }
+      }
+    },
+    "workbox-cacheable-response": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.5.3.tgz",
+      "integrity": "sha512-6JE/Zm05hNasHzzAGKDkqqgYtZZL2H06ic2GxuRLStA4S/rHUfm2mnLFFXuHAaGR1XuuYyVCEey1M6H3PdZ7SQ==",
+      "requires": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "workbox-core": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.5.3.tgz",
+      "integrity": "sha512-Bb9ey5n/M9x+l3fBTlLpHt9ASTzgSGj6vxni7pY72ilB/Pb3XtN+cZ9yueboVhD5+9cNQrC9n/E1fSrqWsUz7Q=="
+    },
+    "workbox-expiration": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.5.3.tgz",
+      "integrity": "sha512-jzYopYR1zD04ZMdlbn/R2Ik6ixiXbi15c9iX5H8CTi6RPDz7uhvMLZPKEndZTpfgmUk8mdmT9Vx/AhbuCl5Sqw==",
+      "requires": {
+        "idb": "^6.1.4",
+        "workbox-core": "6.5.3"
+      }
+    },
+    "workbox-google-analytics": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.5.3.tgz",
+      "integrity": "sha512-3GLCHotz5umoRSb4aNQeTbILETcrTVEozSfLhHSBaegHs1PnqCmN0zbIy2TjTpph2AGXiNwDrWGF0AN+UgDNTw==",
+      "requires": {
+        "workbox-background-sync": "6.5.3",
+        "workbox-core": "6.5.3",
+        "workbox-routing": "6.5.3",
+        "workbox-strategies": "6.5.3"
+      }
+    },
+    "workbox-navigation-preload": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.5.3.tgz",
+      "integrity": "sha512-bK1gDFTc5iu6lH3UQ07QVo+0ovErhRNGvJJO/1ngknT0UQ702nmOUhoN9qE5mhuQSrnK+cqu7O7xeaJ+Rd9Tmg==",
+      "requires": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "workbox-precaching": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.5.3.tgz",
+      "integrity": "sha512-sjNfgNLSsRX5zcc63H/ar/hCf+T19fRtTqvWh795gdpghWb5xsfEkecXEvZ8biEi1QD7X/ljtHphdaPvXDygMQ==",
+      "requires": {
+        "workbox-core": "6.5.3",
+        "workbox-routing": "6.5.3",
+        "workbox-strategies": "6.5.3"
+      }
+    },
+    "workbox-range-requests": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.5.3.tgz",
+      "integrity": "sha512-pGCP80Bpn/0Q0MQsfETSfmtXsQcu3M2QCJwSFuJ6cDp8s2XmbUXkzbuQhCUzKR86ZH2Vex/VUjb2UaZBGamijA==",
+      "requires": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "workbox-recipes": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.5.3.tgz",
+      "integrity": "sha512-IcgiKYmbGiDvvf3PMSEtmwqxwfQ5zwI7OZPio3GWu4PfehA8jI8JHI3KZj+PCfRiUPZhjQHJ3v1HbNs+SiSkig==",
+      "requires": {
+        "workbox-cacheable-response": "6.5.3",
+        "workbox-core": "6.5.3",
+        "workbox-expiration": "6.5.3",
+        "workbox-precaching": "6.5.3",
+        "workbox-routing": "6.5.3",
+        "workbox-strategies": "6.5.3"
+      }
+    },
+    "workbox-routing": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.5.3.tgz",
+      "integrity": "sha512-DFjxcuRAJjjt4T34RbMm3MCn+xnd36UT/2RfPRfa8VWJGItGJIn7tG+GwVTdHmvE54i/QmVTJepyAGWtoLPTmg==",
+      "requires": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "workbox-strategies": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.5.3.tgz",
+      "integrity": "sha512-MgmGRrDVXs7rtSCcetZgkSZyMpRGw8HqL2aguszOc3nUmzGZsT238z/NN9ZouCxSzDu3PQ3ZSKmovAacaIhu1w==",
+      "requires": {
+        "workbox-core": "6.5.3"
+      }
+    },
+    "workbox-streams": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.5.3.tgz",
+      "integrity": "sha512-vN4Qi8o+b7zj1FDVNZ+PlmAcy1sBoV7SC956uhqYvZ9Sg1fViSbOpydULOssVJ4tOyKRifH/eoi6h99d+sJ33w==",
+      "requires": {
+        "workbox-core": "6.5.3",
+        "workbox-routing": "6.5.3"
+      }
+    },
+    "workbox-sw": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.5.3.tgz",
+      "integrity": "sha512-BQBzm092w+NqdIEF2yhl32dERt9j9MDGUTa2Eaa+o3YKL4Qqw55W9yQC6f44FdAHdAJrJvp0t+HVrfh8AiGj8A=="
+    },
+    "workbox-webpack-plugin": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.3.tgz",
+      "integrity": "sha512-Es8Xr02Gi6Kc3zaUwR691ZLy61hz3vhhs5GztcklQ7kl5k2qAusPh0s6LF3wEtlpfs9ZDErnmy5SErwoll7jBA==",
+      "requires": {
+        "fast-json-stable-stringify": "^2.1.0",
+        "pretty-bytes": "^5.4.1",
+        "upath": "^1.2.0",
+        "webpack-sources": "^1.4.3",
+        "workbox-build": "6.5.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "webpack-sources": {
+          "version": "1.4.3",
+          "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
+          "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+          "requires": {
+            "source-list-map": "^2.0.0",
+            "source-map": "~0.6.1"
+          }
+        }
+      }
+    },
+    "workbox-window": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-6.5.3.tgz",
+      "integrity": "sha512-GnJbx1kcKXDtoJBVZs/P7ddP0Yt52NNy4nocjBpYPiRhMqTpJCNrSL+fGHZ/i/oP6p/vhE8II0sA6AZGKGnssw==",
+      "requires": {
+        "@types/trusted-types": "^2.0.2",
+        "workbox-core": "6.5.3"
+      }
+    },
+    "wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        }
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    },
+    "write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "requires": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
+    },
+    "xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
+    },
+    "xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
+    "y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+    },
+    "yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "requires": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    }
+  }
+}
diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json
new file mode 100644
index 00000000000..107792e445b
--- /dev/null
+++ b/static/code/stackblitz/v7/react/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "create-react-app-typescript",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@ionic/react": "6.3.10-dev.11670298302.15d4a0a5",
+    "@types/node": "^16.11.35",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.6.4",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/static/code/stackblitz/v7/react/tsconfig.json b/static/code/stackblitz/v7/react/tsconfig.json
new file mode 100644
index 00000000000..9d379a3c4af
--- /dev/null
+++ b/static/code/stackblitz/v7/react/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}
diff --git a/static/code/stackblitz/v7/react/variables.css b/static/code/stackblitz/v7/react/variables.css
new file mode 100644
index 00000000000..a44fcdd01d7
--- /dev/null
+++ b/static/code/stackblitz/v7/react/variables.css
@@ -0,0 +1,236 @@
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #3880ff;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3171e0;
+  --ion-color-primary-tint: #4c8dff;
+
+  /** secondary **/
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  /** tertiary **/
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  /** success **/
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
+
+@media (prefers-color-scheme: dark) {
+  /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+  body {
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66,140,255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255,255,255;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
+
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80,200,255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255,255,255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106,100,255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255,255,255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47,223,117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0,0,0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255,213,52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0,0,0;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
+
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255,73,97;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255,255,255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244,245,248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0,0,0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152,154,162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0,0,0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34,36,40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255,255,255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+  }
+
+  /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+  .ios body {
+    --ion-background-color: #000000;
+    --ion-background-color-rgb: 0,0,0;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-150: #262626;
+    --ion-color-step-200: #333333;
+    --ion-color-step-250: #404040;
+    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-350: #595959;
+    --ion-color-step-400: #666666;
+    --ion-color-step-450: #737373;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-600: #999999;
+    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-800: #cccccc;
+    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-950: #f2f2f2;
+
+    --ion-item-background: #000000;
+
+    --ion-card-background: #1c1c1d;
+  }
+
+  .ios ion-modal {
+    --ion-background-color: var(--ion-color-step-100);
+    --ion-toolbar-background: var(--ion-color-step-150);
+    --ion-toolbar-border-color: var(--ion-color-step-250);
+  }
+
+
+  /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+  .md body {
+    --ion-background-color: #121212;
+    --ion-background-color-rgb: 18,18,18;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-border-color: #222222;
+
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
+
+    --ion-item-background: #1e1e1e;
+
+    --ion-toolbar-background: #1f1f1f;
+
+    --ion-tab-bar-background: #1f1f1f;
+
+    --ion-card-background: #1e1e1e;
+  }
+}
diff --git a/static/code/stackblitz/v7/vue/App.vue b/static/code/stackblitz/v7/vue/App.vue
new file mode 100644
index 00000000000..a66de3b24d8
--- /dev/null
+++ b/static/code/stackblitz/v7/vue/App.vue
@@ -0,0 +1,18 @@
+<template>
+  <ion-app>
+    <Example />
+  </ion-app>
+</template>
+
+<script lang="ts">
+import { IonApp } from '@ionic/vue';
+
+import { defineComponent } from 'vue';
+
+import Example from './components/Example.vue';
+
+export default defineComponent({
+  name: 'App',
+  components: { IonApp, Example },
+});
+</script>
diff --git a/static/code/stackblitz/v7/vue/App.withContent.vue b/static/code/stackblitz/v7/vue/App.withContent.vue
new file mode 100644
index 00000000000..aa113caf3e4
--- /dev/null
+++ b/static/code/stackblitz/v7/vue/App.withContent.vue
@@ -0,0 +1,20 @@
+<template>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <Example />
+    </ion-content>
+  </ion-app>
+</template>
+
+<script lang="ts">
+import { IonApp, IonContent } from '@ionic/vue';
+
+import { defineComponent } from 'vue';
+
+import Example from './components/Example.vue';
+
+export default defineComponent({
+  name: 'App',
+  components: { IonApp, IonContent, Example },
+});
+</script>
diff --git a/static/code/stackblitz/v7/vue/env.d.ts b/static/code/stackblitz/v7/vue/env.d.ts
new file mode 100644
index 00000000000..aafef9509dd
--- /dev/null
+++ b/static/code/stackblitz/v7/vue/env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/static/code/stackblitz/v7/vue/index.html b/static/code/stackblitz/v7/vue/index.html
new file mode 100644
index 00000000000..09f61d54bab
--- /dev/null
+++ b/static/code/stackblitz/v7/vue/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ionic App</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/static/code/stackblitz/v7/vue/main.ts b/static/code/stackblitz/v7/vue/main.ts
new file mode 100644
index 00000000000..c8650146df9
--- /dev/null
+++ b/static/code/stackblitz/v7/vue/main.ts
@@ -0,0 +1,27 @@
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+createApp(App).use(IonicVue, {
+  mode: '{{ MODE }}'
+}).mount('#app');
diff --git a/static/code/stackblitz/v7/vue/package-lock.json b/static/code/stackblitz/v7/vue/package-lock.json
new file mode 100644
index 00000000000..a3c9968e5ba
--- /dev/null
+++ b/static/code/stackblitz/v7/vue/package-lock.json
@@ -0,0 +1,1403 @@
+{
+  "name": "vite-vue-starter",
+  "version": "0.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "vite-vue-starter",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ionic/vue": "^6.3.2",
+        "vue": "^3.2.25",
+        "vue-router": "4.0.13"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^2.3.3",
+        "typescript": "^4.5.4",
+        "vite": "^2.9.9",
+        "vue-tsc": "^0.34.7"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
+      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@ionic/core": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
+      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
+      "dependencies": {
+        "@stencil/core": "^2.18.0",
+        "ionicons": "^6.0.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@ionic/vue": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.2.tgz",
+      "integrity": "sha512-jvcqcVG6cgFBP+JtLW1dg8a77wYLsFpx1vcC0LK59OmFVLkEIcE6TodhXmfaJVglkXTVMbzPRvO7xIUVHydQzQ==",
+      "dependencies": {
+        "@ionic/core": "^6.3.2",
+        "ionicons": "^6.0.2"
+      }
+    },
+    "node_modules/@stencil/core": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.18.1.tgz",
+      "integrity": "sha512-/fXkh1lwZ+X9JQCw50mPjhBogzEHOBvVC5pLoDLZqodVYK0DGWILM2YLV4dcIUBNEK8/HMDpO/Rq81/rS3mNOw==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz",
+      "integrity": "sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^2.5.10",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@volar/code-gen": {
+      "version": "0.34.17",
+      "resolved": "https://registry.npmjs.org/@volar/code-gen/-/code-gen-0.34.17.tgz",
+      "integrity": "sha512-rHR7BA71BJ/4S7xUOPMPiB7uk6iU9oTWpEMZxFi5VGC9iJmDncE82WzU5iYpcbOBCVHsOjMh0+5CGMgdO6SaPA==",
+      "dev": true,
+      "dependencies": {
+        "@volar/source-map": "0.34.17"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "0.34.17",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-0.34.17.tgz",
+      "integrity": "sha512-3yn1IMXJGGWB/G817/VFlFMi8oh5pmE7VzUqvgMZMrppaZpKj6/juvJIEiXNxRsgWc0RxIO8OSp4htdPUg1Raw==",
+      "dev": true
+    },
+    "node_modules/@volar/vue-code-gen": {
+      "version": "0.34.17",
+      "resolved": "https://registry.npmjs.org/@volar/vue-code-gen/-/vue-code-gen-0.34.17.tgz",
+      "integrity": "sha512-17pzcK29fyFWUc+C82J3JYSnA+jy3QNrIldb9kPaP9Itbik05ZjEIyEue9FjhgIAuHeYSn4LDM5s6nGjxyfhsQ==",
+      "dev": true,
+      "dependencies": {
+        "@volar/code-gen": "0.34.17",
+        "@volar/source-map": "0.34.17",
+        "@vue/compiler-core": "^3.2.36",
+        "@vue/compiler-dom": "^3.2.36",
+        "@vue/shared": "^3.2.36"
+      }
+    },
+    "node_modules/@volar/vue-typescript": {
+      "version": "0.34.17",
+      "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-0.34.17.tgz",
+      "integrity": "sha512-U0YSVIBPRWVPmgJHNa4nrfq88+oS+tmyZNxmnfajIw9A/GOGZQiKXHC0k09SVvbYXlsjgJ6NIjhm9NuAhGRQjg==",
+      "dev": true,
+      "dependencies": {
+        "@volar/code-gen": "0.34.17",
+        "@volar/source-map": "0.34.17",
+        "@volar/vue-code-gen": "0.34.17",
+        "@vue/compiler-sfc": "^3.2.36",
+        "@vue/reactivity": "^3.2.36"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
+      "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.37",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
+      "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
+      "dependencies": {
+        "@vue/compiler-core": "3.2.37",
+        "@vue/shared": "3.2.37"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
+      "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.37",
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/compiler-ssr": "3.2.37",
+        "@vue/reactivity-transform": "3.2.37",
+        "@vue/shared": "3.2.37",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
+      "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/shared": "3.2.37"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
+      "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
+      "dependencies": {
+        "@vue/shared": "3.2.37"
+      }
+    },
+    "node_modules/@vue/reactivity-transform": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
+      "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.37",
+        "@vue/shared": "3.2.37",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
+      "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
+      "dependencies": {
+        "@vue/reactivity": "3.2.37",
+        "@vue/shared": "3.2.37"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
+      "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
+      "dependencies": {
+        "@vue/runtime-core": "3.2.37",
+        "@vue/shared": "3.2.37",
+        "csstype": "^2.6.8"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
+      "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.2.37",
+        "@vue/shared": "3.2.37"
+      },
+      "peerDependencies": {
+        "vue": "3.2.37"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
+      "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+    },
+    "node_modules/csstype": {
+      "version": "2.6.20",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+    },
+    "node_modules/esbuild": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.50.tgz",
+      "integrity": "sha512-SbC3k35Ih2IC6trhbMYW7hYeGdjPKf9atTKwBUHqMCYFZZ9z8zhuvfnZihsnJypl74FjiAKjBRqFkBkAd0rS/w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "esbuild-android-64": "0.14.50",
+        "esbuild-android-arm64": "0.14.50",
+        "esbuild-darwin-64": "0.14.50",
+        "esbuild-darwin-arm64": "0.14.50",
+        "esbuild-freebsd-64": "0.14.50",
+        "esbuild-freebsd-arm64": "0.14.50",
+        "esbuild-linux-32": "0.14.50",
+        "esbuild-linux-64": "0.14.50",
+        "esbuild-linux-arm": "0.14.50",
+        "esbuild-linux-arm64": "0.14.50",
+        "esbuild-linux-mips64le": "0.14.50",
+        "esbuild-linux-ppc64le": "0.14.50",
+        "esbuild-linux-riscv64": "0.14.50",
+        "esbuild-linux-s390x": "0.14.50",
+        "esbuild-netbsd-64": "0.14.50",
+        "esbuild-openbsd-64": "0.14.50",
+        "esbuild-sunos-64": "0.14.50",
+        "esbuild-windows-32": "0.14.50",
+        "esbuild-windows-64": "0.14.50",
+        "esbuild-windows-arm64": "0.14.50"
+      }
+    },
+    "node_modules/esbuild-android-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.50.tgz",
+      "integrity": "sha512-H7iUEm7gUJHzidsBlFPGF6FTExazcgXL/46xxLo6i6bMtPim6ZmXyTccS8yOMpy6HAC6dPZ/JCQqrkkin69n6Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-android-arm64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.50.tgz",
+      "integrity": "sha512-NFaoqEwa+OYfoYVpQWDMdKII7wZZkAjtJFo1WdnBeCYlYikvUhTnf2aPwPu5qEAw/ie1NYK0yn3cafwP+kP+OQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-darwin-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.50.tgz",
+      "integrity": "sha512-gDQsCvGnZiJv9cfdO48QqxkRV8oKAXgR2CGp7TdIpccwFdJMHf8hyIJhMW/05b/HJjET/26Us27Jx91BFfEVSA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-darwin-arm64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.50.tgz",
+      "integrity": "sha512-36nNs5OjKIb/Q50Sgp8+rYW/PqirRiFN0NFc9hEvgPzNJxeJedktXwzfJSln4EcRFRh5Vz4IlqFRScp+aiBBzA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-freebsd-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.50.tgz",
+      "integrity": "sha512-/1pHHCUem8e/R86/uR+4v5diI2CtBdiWKiqGuPa9b/0x3Nwdh5AOH7lj+8823C6uX1e0ufwkSLkS+aFZiBCWxA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-freebsd-arm64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.50.tgz",
+      "integrity": "sha512-iKwUVMQztnPZe5pUYHdMkRc9aSpvoV1mkuHlCoPtxZA3V+Kg/ptpzkcSY+fKd0kuom+l6Rc93k0UPVkP7xoqrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-32": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.50.tgz",
+      "integrity": "sha512-sWUwvf3uz7dFOpLzYuih+WQ7dRycrBWHCdoXJ4I4XdMxEHCECd8b7a9N9u7FzT6XR2gHPk9EzvchQUtiEMRwqw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.50.tgz",
+      "integrity": "sha512-u0PQxPhaeI629t4Y3EEcQ0wmWG+tC/LpP2K7yDFvwuPq0jSQ8SIN+ARNYfRjGW15O2we3XJvklbGV0wRuUCPig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-arm": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.50.tgz",
+      "integrity": "sha512-VALZq13bhmFJYFE/mLEb+9A0w5vo8z+YDVOWeaf9vOTrSC31RohRIwtxXBnVJ7YKLYfEMzcgFYf+OFln3Y0cWg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-arm64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.50.tgz",
+      "integrity": "sha512-ZyfoNgsTftD7Rp5S7La5auomKdNeB3Ck+kSKXC4pp96VnHyYGjHHXWIlcbH8i+efRn9brszo1/Thl1qn8RqmhQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-mips64le": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.50.tgz",
+      "integrity": "sha512-ygo31Vxn/WrmjKCHkBoutOlFG5yM9J2UhzHb0oWD9O61dGg+Hzjz9hjf5cmM7FBhAzdpOdEWHIrVOg2YAi6rTw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-ppc64le": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.50.tgz",
+      "integrity": "sha512-xWCKU5UaiTUT6Wz/O7GKP9KWdfbsb7vhfgQzRfX4ahh5NZV4ozZ4+SdzYG8WxetsLy84UzLX3Pi++xpVn1OkFQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-riscv64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.50.tgz",
+      "integrity": "sha512-0+dsneSEihZTopoO9B6Z6K4j3uI7EdxBP7YSF5rTwUgCID+wHD3vM1gGT0m+pjCW+NOacU9kH/WE9N686FHAJg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-s390x": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.50.tgz",
+      "integrity": "sha512-tVjqcu8o0P9H4StwbIhL1sQYm5mWATlodKB6dpEZFkcyTI8kfIGWiWcrGmkNGH2i1kBUOsdlBafPxR3nzp3TDA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-netbsd-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.50.tgz",
+      "integrity": "sha512-0R/glfqAQ2q6MHDf7YJw/TulibugjizBxyPvZIcorH0Mb7vSimdHy0XF5uCba5CKt+r4wjax1mvO9lZ4jiAhEg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-openbsd-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.50.tgz",
+      "integrity": "sha512-7PAtmrR5mDOFubXIkuxYQ4bdNS6XCK8AIIHUiZxq1kL8cFIH5731jPcXQ4JNy/wbj1C9sZ8rzD8BIM80Tqk29w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-sunos-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.50.tgz",
+      "integrity": "sha512-gBxNY/wyptvD7PkHIYcq7se6SQEXcSC8Y7mE0FJB+CGgssEWf6vBPfTTZ2b6BWKnmaP6P6qb7s/KRIV5T2PxsQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-windows-32": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.50.tgz",
+      "integrity": "sha512-MOOe6J9cqe/iW1qbIVYSAqzJFh0p2LBLhVUIWdMVnNUNjvg2/4QNX4oT4IzgDeldU+Bym9/Tn6+DxvUHJXL5Zw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-windows-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.50.tgz",
+      "integrity": "sha512-r/qE5Ex3w1jjGv/JlpPoWB365ldkppUlnizhMxJgojp907ZF1PgLTuW207kgzZcSCXyquL9qJkMsY+MRtaZ5yQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-windows-arm64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.50.tgz",
+      "integrity": "sha512-EMS4lQnsIe12ZyAinOINx7eq2mjpDdhGZZWDwPZE/yUTN9cnc2Ze/xUTYIAyaJqrqQda3LnDpADKpvLvol6ENQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/ionicons": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
+      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "dependencies": {
+        "@stencil/core": "~2.16.0"
+      }
+    },
+    "node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
+      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/postcss": {
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "2.77.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
+      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "dev": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "node_modules/typescript": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.14.tgz",
+      "integrity": "sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw==",
+      "dev": true,
+      "dependencies": {
+        "esbuild": "^0.14.27",
+        "postcss": "^8.4.13",
+        "resolve": "^1.22.0",
+        "rollup": "^2.59.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": ">=12.2.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      },
+      "peerDependencies": {
+        "less": "*",
+        "sass": "*",
+        "stylus": "*"
+      },
+      "peerDependenciesMeta": {
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
+      "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/compiler-sfc": "3.2.37",
+        "@vue/runtime-dom": "3.2.37",
+        "@vue/server-renderer": "3.2.37",
+        "@vue/shared": "3.2.37"
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.13.tgz",
+      "integrity": "sha512-LmXrC+BkDRLak+d5xTMgUYraT3Nj0H/vCbP+7usGvIl9Viqd1UP6AsP0i69pSbn9O0dXK/xCdp4yPw21HqV9Jw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue-tsc": {
+      "version": "0.34.17",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.34.17.tgz",
+      "integrity": "sha512-jzUXky44ZLHC4daaJag7FQr3idlPYN719/K1eObGljz5KaS2UnVGTU/XSYCd7d6ampYYg4OsyalbHyJIxV0aEQ==",
+      "dev": true,
+      "dependencies": {
+        "@volar/vue-typescript": "0.34.17"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      }
+    }
+  },
+  "dependencies": {
+    "@babel/parser": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
+      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg=="
+    },
+    "@ionic/core": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
+      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
+      "requires": {
+        "@stencil/core": "^2.18.0",
+        "ionicons": "^6.0.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@ionic/vue": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.2.tgz",
+      "integrity": "sha512-jvcqcVG6cgFBP+JtLW1dg8a77wYLsFpx1vcC0LK59OmFVLkEIcE6TodhXmfaJVglkXTVMbzPRvO7xIUVHydQzQ==",
+      "requires": {
+        "@ionic/core": "^6.3.2",
+        "ionicons": "^6.0.2"
+      }
+    },
+    "@stencil/core": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.18.1.tgz",
+      "integrity": "sha512-/fXkh1lwZ+X9JQCw50mPjhBogzEHOBvVC5pLoDLZqodVYK0DGWILM2YLV4dcIUBNEK8/HMDpO/Rq81/rS3mNOw=="
+    },
+    "@vitejs/plugin-vue": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz",
+      "integrity": "sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==",
+      "dev": true
+    },
+    "@volar/code-gen": {
+      "version": "0.34.17",
+      "resolved": "https://registry.npmjs.org/@volar/code-gen/-/code-gen-0.34.17.tgz",
+      "integrity": "sha512-rHR7BA71BJ/4S7xUOPMPiB7uk6iU9oTWpEMZxFi5VGC9iJmDncE82WzU5iYpcbOBCVHsOjMh0+5CGMgdO6SaPA==",
+      "dev": true,
+      "requires": {
+        "@volar/source-map": "0.34.17"
+      }
+    },
+    "@volar/source-map": {
+      "version": "0.34.17",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-0.34.17.tgz",
+      "integrity": "sha512-3yn1IMXJGGWB/G817/VFlFMi8oh5pmE7VzUqvgMZMrppaZpKj6/juvJIEiXNxRsgWc0RxIO8OSp4htdPUg1Raw==",
+      "dev": true
+    },
+    "@volar/vue-code-gen": {
+      "version": "0.34.17",
+      "resolved": "https://registry.npmjs.org/@volar/vue-code-gen/-/vue-code-gen-0.34.17.tgz",
+      "integrity": "sha512-17pzcK29fyFWUc+C82J3JYSnA+jy3QNrIldb9kPaP9Itbik05ZjEIyEue9FjhgIAuHeYSn4LDM5s6nGjxyfhsQ==",
+      "dev": true,
+      "requires": {
+        "@volar/code-gen": "0.34.17",
+        "@volar/source-map": "0.34.17",
+        "@vue/compiler-core": "^3.2.36",
+        "@vue/compiler-dom": "^3.2.36",
+        "@vue/shared": "^3.2.36"
+      }
+    },
+    "@volar/vue-typescript": {
+      "version": "0.34.17",
+      "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-0.34.17.tgz",
+      "integrity": "sha512-U0YSVIBPRWVPmgJHNa4nrfq88+oS+tmyZNxmnfajIw9A/GOGZQiKXHC0k09SVvbYXlsjgJ6NIjhm9NuAhGRQjg==",
+      "dev": true,
+      "requires": {
+        "@volar/code-gen": "0.34.17",
+        "@volar/source-map": "0.34.17",
+        "@volar/vue-code-gen": "0.34.17",
+        "@vue/compiler-sfc": "^3.2.36",
+        "@vue/reactivity": "^3.2.36"
+      }
+    },
+    "@vue/compiler-core": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
+      "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.37",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "@vue/compiler-dom": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
+      "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
+      "requires": {
+        "@vue/compiler-core": "3.2.37",
+        "@vue/shared": "3.2.37"
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
+      "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.37",
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/compiler-ssr": "3.2.37",
+        "@vue/reactivity-transform": "3.2.37",
+        "@vue/shared": "3.2.37",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      }
+    },
+    "@vue/compiler-ssr": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
+      "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
+      "requires": {
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/shared": "3.2.37"
+      }
+    },
+    "@vue/devtools-api": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
+    },
+    "@vue/reactivity": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
+      "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
+      "requires": {
+        "@vue/shared": "3.2.37"
+      }
+    },
+    "@vue/reactivity-transform": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
+      "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.37",
+        "@vue/shared": "3.2.37",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "@vue/runtime-core": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
+      "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
+      "requires": {
+        "@vue/reactivity": "3.2.37",
+        "@vue/shared": "3.2.37"
+      }
+    },
+    "@vue/runtime-dom": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
+      "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
+      "requires": {
+        "@vue/runtime-core": "3.2.37",
+        "@vue/shared": "3.2.37",
+        "csstype": "^2.6.8"
+      }
+    },
+    "@vue/server-renderer": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
+      "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
+      "requires": {
+        "@vue/compiler-ssr": "3.2.37",
+        "@vue/shared": "3.2.37"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
+      "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+    },
+    "csstype": {
+      "version": "2.6.20",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+    },
+    "esbuild": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.50.tgz",
+      "integrity": "sha512-SbC3k35Ih2IC6trhbMYW7hYeGdjPKf9atTKwBUHqMCYFZZ9z8zhuvfnZihsnJypl74FjiAKjBRqFkBkAd0rS/w==",
+      "dev": true,
+      "requires": {
+        "esbuild-android-64": "0.14.50",
+        "esbuild-android-arm64": "0.14.50",
+        "esbuild-darwin-64": "0.14.50",
+        "esbuild-darwin-arm64": "0.14.50",
+        "esbuild-freebsd-64": "0.14.50",
+        "esbuild-freebsd-arm64": "0.14.50",
+        "esbuild-linux-32": "0.14.50",
+        "esbuild-linux-64": "0.14.50",
+        "esbuild-linux-arm": "0.14.50",
+        "esbuild-linux-arm64": "0.14.50",
+        "esbuild-linux-mips64le": "0.14.50",
+        "esbuild-linux-ppc64le": "0.14.50",
+        "esbuild-linux-riscv64": "0.14.50",
+        "esbuild-linux-s390x": "0.14.50",
+        "esbuild-netbsd-64": "0.14.50",
+        "esbuild-openbsd-64": "0.14.50",
+        "esbuild-sunos-64": "0.14.50",
+        "esbuild-windows-32": "0.14.50",
+        "esbuild-windows-64": "0.14.50",
+        "esbuild-windows-arm64": "0.14.50"
+      }
+    },
+    "esbuild-android-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.50.tgz",
+      "integrity": "sha512-H7iUEm7gUJHzidsBlFPGF6FTExazcgXL/46xxLo6i6bMtPim6ZmXyTccS8yOMpy6HAC6dPZ/JCQqrkkin69n6Q==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-android-arm64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.50.tgz",
+      "integrity": "sha512-NFaoqEwa+OYfoYVpQWDMdKII7wZZkAjtJFo1WdnBeCYlYikvUhTnf2aPwPu5qEAw/ie1NYK0yn3cafwP+kP+OQ==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-darwin-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.50.tgz",
+      "integrity": "sha512-gDQsCvGnZiJv9cfdO48QqxkRV8oKAXgR2CGp7TdIpccwFdJMHf8hyIJhMW/05b/HJjET/26Us27Jx91BFfEVSA==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-darwin-arm64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.50.tgz",
+      "integrity": "sha512-36nNs5OjKIb/Q50Sgp8+rYW/PqirRiFN0NFc9hEvgPzNJxeJedktXwzfJSln4EcRFRh5Vz4IlqFRScp+aiBBzA==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-freebsd-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.50.tgz",
+      "integrity": "sha512-/1pHHCUem8e/R86/uR+4v5diI2CtBdiWKiqGuPa9b/0x3Nwdh5AOH7lj+8823C6uX1e0ufwkSLkS+aFZiBCWxA==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-freebsd-arm64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.50.tgz",
+      "integrity": "sha512-iKwUVMQztnPZe5pUYHdMkRc9aSpvoV1mkuHlCoPtxZA3V+Kg/ptpzkcSY+fKd0kuom+l6Rc93k0UPVkP7xoqrw==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-32": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.50.tgz",
+      "integrity": "sha512-sWUwvf3uz7dFOpLzYuih+WQ7dRycrBWHCdoXJ4I4XdMxEHCECd8b7a9N9u7FzT6XR2gHPk9EzvchQUtiEMRwqw==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.50.tgz",
+      "integrity": "sha512-u0PQxPhaeI629t4Y3EEcQ0wmWG+tC/LpP2K7yDFvwuPq0jSQ8SIN+ARNYfRjGW15O2we3XJvklbGV0wRuUCPig==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-arm": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.50.tgz",
+      "integrity": "sha512-VALZq13bhmFJYFE/mLEb+9A0w5vo8z+YDVOWeaf9vOTrSC31RohRIwtxXBnVJ7YKLYfEMzcgFYf+OFln3Y0cWg==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-arm64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.50.tgz",
+      "integrity": "sha512-ZyfoNgsTftD7Rp5S7La5auomKdNeB3Ck+kSKXC4pp96VnHyYGjHHXWIlcbH8i+efRn9brszo1/Thl1qn8RqmhQ==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-mips64le": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.50.tgz",
+      "integrity": "sha512-ygo31Vxn/WrmjKCHkBoutOlFG5yM9J2UhzHb0oWD9O61dGg+Hzjz9hjf5cmM7FBhAzdpOdEWHIrVOg2YAi6rTw==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-ppc64le": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.50.tgz",
+      "integrity": "sha512-xWCKU5UaiTUT6Wz/O7GKP9KWdfbsb7vhfgQzRfX4ahh5NZV4ozZ4+SdzYG8WxetsLy84UzLX3Pi++xpVn1OkFQ==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-riscv64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.50.tgz",
+      "integrity": "sha512-0+dsneSEihZTopoO9B6Z6K4j3uI7EdxBP7YSF5rTwUgCID+wHD3vM1gGT0m+pjCW+NOacU9kH/WE9N686FHAJg==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-s390x": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.50.tgz",
+      "integrity": "sha512-tVjqcu8o0P9H4StwbIhL1sQYm5mWATlodKB6dpEZFkcyTI8kfIGWiWcrGmkNGH2i1kBUOsdlBafPxR3nzp3TDA==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-netbsd-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.50.tgz",
+      "integrity": "sha512-0R/glfqAQ2q6MHDf7YJw/TulibugjizBxyPvZIcorH0Mb7vSimdHy0XF5uCba5CKt+r4wjax1mvO9lZ4jiAhEg==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-openbsd-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.50.tgz",
+      "integrity": "sha512-7PAtmrR5mDOFubXIkuxYQ4bdNS6XCK8AIIHUiZxq1kL8cFIH5731jPcXQ4JNy/wbj1C9sZ8rzD8BIM80Tqk29w==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-sunos-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.50.tgz",
+      "integrity": "sha512-gBxNY/wyptvD7PkHIYcq7se6SQEXcSC8Y7mE0FJB+CGgssEWf6vBPfTTZ2b6BWKnmaP6P6qb7s/KRIV5T2PxsQ==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-windows-32": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.50.tgz",
+      "integrity": "sha512-MOOe6J9cqe/iW1qbIVYSAqzJFh0p2LBLhVUIWdMVnNUNjvg2/4QNX4oT4IzgDeldU+Bym9/Tn6+DxvUHJXL5Zw==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-windows-64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.50.tgz",
+      "integrity": "sha512-r/qE5Ex3w1jjGv/JlpPoWB365ldkppUlnizhMxJgojp907ZF1PgLTuW207kgzZcSCXyquL9qJkMsY+MRtaZ5yQ==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-windows-arm64": {
+      "version": "0.14.50",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.50.tgz",
+      "integrity": "sha512-EMS4lQnsIe12ZyAinOINx7eq2mjpDdhGZZWDwPZE/yUTN9cnc2Ze/xUTYIAyaJqrqQda3LnDpADKpvLvol6ENQ==",
+      "dev": true,
+      "optional": true
+    },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "ionicons": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
+      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "requires": {
+        "@stencil/core": "~2.16.0"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "2.16.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+          "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
+        }
+      }
+    },
+    "is-core-module": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
+      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "requires": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "postcss": {
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "requires": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "rollup": {
+      "version": "2.77.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
+      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "dev": true,
+      "requires": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
+    },
+    "tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "typescript": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "dev": true
+    },
+    "vite": {
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.14.tgz",
+      "integrity": "sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw==",
+      "dev": true,
+      "requires": {
+        "esbuild": "^0.14.27",
+        "fsevents": "~2.3.2",
+        "postcss": "^8.4.13",
+        "resolve": "^1.22.0",
+        "rollup": "^2.59.0"
+      }
+    },
+    "vue": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
+      "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
+      "requires": {
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/compiler-sfc": "3.2.37",
+        "@vue/runtime-dom": "3.2.37",
+        "@vue/server-renderer": "3.2.37",
+        "@vue/shared": "3.2.37"
+      }
+    },
+    "vue-router": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.13.tgz",
+      "integrity": "sha512-LmXrC+BkDRLak+d5xTMgUYraT3Nj0H/vCbP+7usGvIl9Viqd1UP6AsP0i69pSbn9O0dXK/xCdp4yPw21HqV9Jw==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0"
+      }
+    },
+    "vue-tsc": {
+      "version": "0.34.17",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.34.17.tgz",
+      "integrity": "sha512-jzUXky44ZLHC4daaJag7FQr3idlPYN719/K1eObGljz5KaS2UnVGTU/XSYCd7d6ampYYg4OsyalbHyJIxV0aEQ==",
+      "dev": true,
+      "requires": {
+        "@volar/vue-typescript": "0.34.17"
+      }
+    }
+  }
+}
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
new file mode 100644
index 00000000000..052c760d4ec
--- /dev/null
+++ b/static/code/stackblitz/v7/vue/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "vite-vue-starter",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ionic/vue": "6.3.10-dev.11670298302.15d4a0a5",
+    "vue": "^3.2.25",
+    "vue-router": "4.0.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.3",
+    "vite": "^2.9.9",
+    "typescript": "^4.5.4",
+    "vue-tsc": "^0.34.7"
+  }
+}
diff --git a/static/code/stackblitz/v7/vue/tsconfig.json b/static/code/stackblitz/v7/vue/tsconfig.json
new file mode 100644
index 00000000000..bcc4abda4c5
--- /dev/null
+++ b/static/code/stackblitz/v7/vue/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/static/code/stackblitz/v7/vue/tsconfig.node.json b/static/code/stackblitz/v7/vue/tsconfig.node.json
new file mode 100644
index 00000000000..e993792cb12
--- /dev/null
+++ b/static/code/stackblitz/v7/vue/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/static/code/stackblitz/v7/vue/variables.css b/static/code/stackblitz/v7/vue/variables.css
new file mode 100644
index 00000000000..a44fcdd01d7
--- /dev/null
+++ b/static/code/stackblitz/v7/vue/variables.css
@@ -0,0 +1,236 @@
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #3880ff;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3171e0;
+  --ion-color-primary-tint: #4c8dff;
+
+  /** secondary **/
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  /** tertiary **/
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  /** success **/
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
+
+@media (prefers-color-scheme: dark) {
+  /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+  body {
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66,140,255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255,255,255;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
+
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80,200,255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255,255,255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106,100,255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255,255,255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47,223,117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0,0,0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255,213,52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0,0,0;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
+
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255,73,97;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255,255,255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244,245,248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0,0,0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152,154,162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0,0,0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34,36,40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255,255,255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+  }
+
+  /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+  .ios body {
+    --ion-background-color: #000000;
+    --ion-background-color-rgb: 0,0,0;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-150: #262626;
+    --ion-color-step-200: #333333;
+    --ion-color-step-250: #404040;
+    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-350: #595959;
+    --ion-color-step-400: #666666;
+    --ion-color-step-450: #737373;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-600: #999999;
+    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-800: #cccccc;
+    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-950: #f2f2f2;
+
+    --ion-item-background: #000000;
+
+    --ion-card-background: #1c1c1d;
+  }
+
+  .ios ion-modal {
+    --ion-background-color: var(--ion-color-step-100);
+    --ion-toolbar-background: var(--ion-color-step-150);
+    --ion-toolbar-border-color: var(--ion-color-step-250);
+  }
+
+
+  /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+  .md body {
+    --ion-background-color: #121212;
+    --ion-background-color-rgb: 18,18,18;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-border-color: #222222;
+
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
+
+    --ion-item-background: #1e1e1e;
+
+    --ion-toolbar-background: #1f1f1f;
+
+    --ion-tab-bar-background: #1f1f1f;
+
+    --ion-card-background: #1e1e1e;
+  }
+}
diff --git a/static/code/stackblitz/v7/vue/vite.config.ts b/static/code/stackblitz/v7/vue/vite.config.ts
new file mode 100644
index 00000000000..6405595ab23
--- /dev/null
+++ b/static/code/stackblitz/v7/vue/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+});
diff --git a/static/usage/accordion/accessibility/animations/demo.html b/static/usage/accordion/accessibility/animations/demo.html
deleted file mode 100644
index f8ad2a5b482..00000000000
--- a/static/usage/accordion/accessibility/animations/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group animated="false">
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/accordion/accessibility/animations/index.md b/static/usage/accordion/accessibility/animations/index.md
deleted file mode 100644
index e9d2e76740a..00000000000
--- a/static/usage/accordion/accessibility/animations/index.md
+++ /dev/null
@@ -1,16 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-  javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/accordion/accessibility/animations/demo.html"
-/>
diff --git a/static/usage/accordion/basic/demo.html b/static/usage/accordion/basic/demo.html
deleted file mode 100644
index a37bd024ba1..00000000000
--- a/static/usage/accordion/basic/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group>
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/accordion/basic/index.md b/static/usage/accordion/basic/index.md
deleted file mode 100644
index 5a56484a602..00000000000
--- a/static/usage/accordion/basic/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/accordion/basic/demo.html"
-  size="210px"
-/>
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/accordion/customization/advanced-expansion-styles/demo.html
deleted file mode 100644
index 90c379c6b9c..00000000000
--- a/static/usage/accordion/customization/advanced-expansion-styles/demo.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-accordion {
-        margin: 0 auto;
-      }
-
-      ion-accordion.accordion-expanding,
-      ion-accordion.accordion-expanded {
-        width: calc(100% - 32px);
-
-        margin: 16px auto;
-      }
-
-      ion-accordion.accordion-collapsing ion-item[slot="header"],
-      ion-accordion.accordion-collapsed ion-item[slot="header"] {
-        --background: var(--ion-color-light);
-        --color: var(--ion-color-light-contrast);
-      }
-
-      ion-accordion.accordion-expanding ion-item[slot="header"],
-      ion-accordion.accordion-expanded ion-item[slot="header"] {
-        --background: var(--ion-color-primary);
-        --color: var(--ion-color-primary-contrast);
-      }
-
-      .container {
-        width: 300px;
-        margin: 0 auto;
-      }
-
-      ion-accordion-group {
-        width: 100%;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group>
-            <ion-accordion value="first">
-              <ion-item slot="header">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/index.md b/static/usage/accordion/customization/advanced-expansion-styles/index.md
deleted file mode 100644
index 509bfebbf89..00000000000
--- a/static/usage/accordion/customization/advanced-expansion-styles/index.md
+++ /dev/null
@@ -1,34 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  size="250px"
-  src="usage/accordion/customization/advanced-expansion-styles/demo.html"
-/>
diff --git a/static/usage/accordion/customization/expansion-styles/demo.html b/static/usage/accordion/customization/expansion-styles/demo.html
deleted file mode 100644
index ced20b9a1db..00000000000
--- a/static/usage/accordion/customization/expansion-styles/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group expand="inset">
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/accordion/customization/expansion-styles/index.md b/static/usage/accordion/customization/expansion-styles/index.md
deleted file mode 100644
index f6e99387437..00000000000
--- a/static/usage/accordion/customization/expansion-styles/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  size="250px"
-  src="usage/accordion/customization/expansion-styles/demo.html"
-/>
diff --git a/static/usage/accordion/customization/icons/demo.html b/static/usage/accordion/customization/icons/demo.html
deleted file mode 100644
index 9f55032d4df..00000000000
--- a/static/usage/accordion/customization/icons/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group>
-            <ion-accordion value="first" toggle-icon="caret-down-circle" toggle-icon-slot="start">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second" toggle-icon="caret-down-circle" toggle-icon-slot="start">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third" toggle-icon="caret-down-circle" toggle-icon-slot="start">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/accordion/customization/icons/index.md b/static/usage/accordion/customization/icons/index.md
deleted file mode 100644
index 33a7b18daa6..00000000000
--- a/static/usage/accordion/customization/icons/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  size="250px"
-  src="usage/accordion/customization/icons/demo.html"
-/>
diff --git a/static/usage/accordion/customization/theming/demo.html b/static/usage/accordion/customization/theming/demo.html
deleted file mode 100644
index 0b82c625212..00000000000
--- a/static/usage/accordion/customization/theming/demo.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      :root {
-        --ion-color-rose: #fecdd3;
-        --ion-color-rose-rgb: 254,205,211;
-        --ion-color-rose-contrast: #000000;
-        --ion-color-rose-contrast-rgb: 0,0,0;
-        --ion-color-rose-shade: #e0b4ba;
-        --ion-color-rose-tint: #fed2d7;
-      }
-
-      .ion-color-rose {
-        --ion-color-base: var(--ion-color-rose);
-        --ion-color-base-rgb: var(--ion-color-rose-rgb);
-        --ion-color-contrast: var(--ion-color-rose-contrast);
-        --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-        --ion-color-shade: var(--ion-color-rose-shade);
-        --ion-color-tint: var(--ion-color-rose-tint);
-      }
-
-      div[slot="content"] {
-        background: rgba(var(--ion-color-rose-rgb), 0.25)
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group expand="inset">
-            <ion-accordion value="first">
-              <ion-item slot="header" color="rose">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="rose">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="rose">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/accordion/customization/theming/index.md b/static/usage/accordion/customization/theming/index.md
deleted file mode 100644
index cc22601ae22..00000000000
--- a/static/usage/accordion/customization/theming/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_global_css from './angular/global_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
-      }
-    }
-  }}
-  size="250px"
-  src="usage/accordion/customization/theming/demo.html"
-/>
diff --git a/static/usage/accordion/disable-group/demo.html b/static/usage/accordion/disable-group/demo.html
deleted file mode 100644
index 60cf477d2c1..00000000000
--- a/static/usage/accordion/disable-group/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group disabled="true">
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/accordion/disable-group/index.md b/static/usage/accordion/disable-group/index.md
deleted file mode 100644
index e3ddfe8e9de..00000000000
--- a/static/usage/accordion/disable-group/index.md
+++ /dev/null
@@ -1,16 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-  javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/accordion/disable-group/demo.html"
-/>
diff --git a/static/usage/accordion/disable/group/demo.html b/static/usage/accordion/disable/group/demo.html
deleted file mode 100644
index ee334d5c673..00000000000
--- a/static/usage/accordion/disable/group/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group disabled="true">
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/accordion/disable/group/index.md b/static/usage/accordion/disable/group/index.md
deleted file mode 100644
index f5986c72221..00000000000
--- a/static/usage/accordion/disable/group/index.md
+++ /dev/null
@@ -1,16 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-  javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/accordion/disable/group/demo.html"
-/>
diff --git a/static/usage/accordion/disable/individual/demo.html b/static/usage/accordion/disable/individual/demo.html
deleted file mode 100644
index 82a3781e39b..00000000000
--- a/static/usage/accordion/disable/individual/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group>
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second" disabled="true">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion (Disabled)</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/accordion/disable/individual/index.md b/static/usage/accordion/disable/individual/index.md
deleted file mode 100644
index 7ede87905cf..00000000000
--- a/static/usage/accordion/disable/individual/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-  javascript,
-    react,
-    vue,
-    angular,
-  }}
-  size="210px"
-  src="usage/accordion/disable/individual/demo.html"
-/>
diff --git a/static/usage/accordion/listen-changes/demo.html b/static/usage/accordion/listen-changes/demo.html
deleted file mode 100644
index 25b1b838154..00000000000
--- a/static/usage/accordion/listen-changes/demo.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      .container {
-        flex-direction: column;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group>
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-
-          <p class="listener-out">
-          </p>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const accordionGroup = document.querySelector('ion-accordion-group');
-      const listenerOut = document.querySelector('.listener-out');
-      const values = ['first', 'second', 'third'];
-
-      accordionGroup.addEventListener('ionChange', (ev) => {
-        const collapsedItems = values.filter(value => value !== ev.detail.value);
-        const selectedValue = ev.detail.value;
-
-        listenerOut.innerText = `
-          Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
-          Collapsed: ${collapsedItems.join(', ')}
-        `
-      });
-    </script>
-  </body>
-</html>
diff --git a/static/usage/accordion/listen-changes/index.md b/static/usage/accordion/listen-changes/index.md
deleted file mode 100644
index c28505750a4..00000000000
--- a/static/usage/accordion/listen-changes/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  size="320px"
-  src="usage/accordion/listen-changes/demo.html"
-/>
diff --git a/static/usage/accordion/multiple/demo.html b/static/usage/accordion/multiple/demo.html
deleted file mode 100644
index e1fe0f0b292..00000000000
--- a/static/usage/accordion/multiple/demo.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group multiple="true">
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const accordionGroup = document.querySelector('ion-accordion-group');
-      accordionGroup.value = ['first', 'third'];
-    </script>
-  </body>
-</html>
diff --git a/static/usage/accordion/multiple/index.md b/static/usage/accordion/multiple/index.md
deleted file mode 100644
index abe98087124..00000000000
--- a/static/usage/accordion/multiple/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  size="320px"
-  src="usage/accordion/multiple/demo.html"
-/>
diff --git a/static/usage/accordion/readonly/group/demo.html b/static/usage/accordion/readonly/group/demo.html
deleted file mode 100644
index acb958ac501..00000000000
--- a/static/usage/accordion/readonly/group/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group readonly="true">
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/accordion/readonly/group/index.md b/static/usage/accordion/readonly/group/index.md
deleted file mode 100644
index 4787e4ab7ec..00000000000
--- a/static/usage/accordion/readonly/group/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  size="210px"
-  src="usage/accordion/readonly/group/demo.html"
-/>
diff --git a/static/usage/accordion/readonly/individual/demo.html b/static/usage/accordion/readonly/individual/demo.html
deleted file mode 100644
index eac16823c10..00000000000
--- a/static/usage/accordion/readonly/individual/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group>
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second" readonly="true">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion (Readonly)</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/accordion/readonly/individual/index.md b/static/usage/accordion/readonly/individual/index.md
deleted file mode 100644
index 5280a31ad6d..00000000000
--- a/static/usage/accordion/readonly/individual/index.md
+++ /dev/null
@@ -1,16 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/accordion/readonly/individual/demo.html"
-/>
diff --git a/static/usage/accordion/toggle/demo.html b/static/usage/accordion/toggle/demo.html
deleted file mode 100644
index 0c8872e910d..00000000000
--- a/static/usage/accordion/toggle/demo.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      .container {
-        flex-direction: column;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group>
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                First Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Second Content
-              </div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">
-                Third Content
-              </div>
-            </ion-accordion>
-          </ion-accordion-group>
-
-          <br />
-
-          <ion-button size="block" onclick="toggleSecondAccordion()">Toggle Second Accordion</ion-button>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const accordionGroup = document.querySelector('ion-accordion-group');
-      const toggleSecondAccordion = () => {
-        if (accordionGroup.value === 'second') {
-          accordionGroup.value = undefined;
-        } else {
-          accordionGroup.value = 'second'
-        }
-      }
-    </script>
-  </body>
-</html>
diff --git a/static/usage/accordion/toggle/index.md b/static/usage/accordion/toggle/index.md
deleted file mode 100644
index 529264aa08c..00000000000
--- a/static/usage/accordion/toggle/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  size="medium"
-  src="usage/accordion/toggle/demo.html"
-/>
diff --git a/static/usage/action-sheet/basic/demo.html b/static/usage/action-sheet/basic/demo.html
deleted file mode 100644
index 612c74dfc9c..00000000000
--- a/static/usage/action-sheet/basic/demo.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Action Sheet</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-    }
-
-    code {
-      white-space: pre-wrap;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="presentActionSheet()">Open</ion-button>
-        <code id="action"></code>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const action = document.getElementById('action');
-
-    async function presentActionSheet() {
-      const actionSheet = document.createElement('ion-action-sheet');
-      actionSheet.header = 'Example header';
-      actionSheet.subHeader = 'Example subheader';
-      actionSheet.buttons = [{
-        text: 'Delete',
-        role: 'destructive',
-        data: {
-          action: 'delete'
-        }
-      },
-      {
-        text: 'Share',
-        data: {
-          action: 'share'
-        }
-      },
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        data: {
-          action: 'cancel'
-        }
-      }];
-
-      document.body.appendChild(actionSheet);
-      await actionSheet.present();
-
-      const result = await actionSheet.onDidDismiss();
-      action.innerText = JSON.stringify(result, null, 2);
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/action-sheet/basic/index.md b/static/usage/action-sheet/basic/index.md
deleted file mode 100644
index ae1e85f0446..00000000000
--- a/static/usage/action-sheet/basic/index.md
+++ /dev/null
@@ -1,34 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/action-sheet/basic/demo.html"
-  devicePreview
-/>
diff --git a/static/usage/action-sheet/theming/css-properties/demo.html b/static/usage/action-sheet/theming/css-properties/demo.html
deleted file mode 100644
index e2a8be4dd69..00000000000
--- a/static/usage/action-sheet/theming/css-properties/demo.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Action Sheet</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-action-sheet.my-custom-class {
-      --background: #F58840;
-      --backdrop-opacity: 0.6;
-      --button-background-selected: #e97223;
-      --button-color: #000000;
-      --color: #fff;
-      /* role: "destructive" button iOS styling override */
-      --ion-color-danger: #000000;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="presentActionSheet()">Open</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    async function presentActionSheet() {
-      const actionSheet = document.createElement('ion-action-sheet');
-      actionSheet.cssClass = 'my-custom-class';
-      actionSheet.header = 'Example header';
-      actionSheet.subHeader = 'Example subheader';
-      actionSheet.buttons = [{
-        text: 'Delete',
-        role: 'destructive',
-        data: {
-          action: 'delete'
-        }
-      },
-      {
-        text: 'Share',
-        data: {
-          action: 'share'
-        }
-      },
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        data: {
-          action: 'cancel'
-        }
-      }];
-
-      document.body.appendChild(actionSheet);
-      await actionSheet.present();
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/action-sheet/theming/css-properties/index.md b/static/usage/action-sheet/theming/css-properties/index.md
deleted file mode 100644
index 312cf84ec09..00000000000
--- a/static/usage/action-sheet/theming/css-properties/index.md
+++ /dev/null
@@ -1,34 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_global_css from './angular/global_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
-      },
-    },
-  }}
-  src="usage/action-sheet/theming/css-properties/demo.html"
-  devicePreview
-/>
diff --git a/static/usage/action-sheet/theming/styling/demo.html b/static/usage/action-sheet/theming/styling/demo.html
deleted file mode 100644
index 3de49c4c4f9..00000000000
--- a/static/usage/action-sheet/theming/styling/demo.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Action Sheet</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-action-sheet.my-custom-class .action-sheet-group {
-      background: #F58840;
-    }
-
-    ion-action-sheet.my-custom-class .action-sheet-title {
-      color: #fff;
-    }
-
-    ion-action-sheet.my-custom-class .action-sheet-cancel::after {
-      background: #e97223;
-    }
-
-    ion-action-sheet.my-custom-class .action-sheet-button,
-    ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
-      color: #000000;
-    }
-
-    @media (any-hover: hover) {
-      ion-action-sheet.my-custom-class .action-sheet-button:hover {
-        color: #000000;
-      }
-    }
-
-    ion-action-sheet.my-custom-class ion-backdrop {
-      opacity: 0.6;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="presentActionSheet()">Open</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    async function presentActionSheet() {
-      const actionSheet = document.createElement('ion-action-sheet');
-      actionSheet.cssClass = 'my-custom-class';
-      actionSheet.header = 'Example header';
-      actionSheet.subHeader = 'Example subheader';
-      actionSheet.buttons = [{
-        text: 'Delete',
-        role: 'destructive',
-        data: {
-          action: 'delete'
-        }
-      },
-      {
-        text: 'Share',
-        data: {
-          action: 'share'
-        }
-      },
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        data: {
-          action: 'cancel'
-        }
-      }];
-
-      document.body.appendChild(actionSheet);
-      await actionSheet.present();
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/action-sheet/theming/styling/index.md b/static/usage/action-sheet/theming/styling/index.md
deleted file mode 100644
index 9fc385205c2..00000000000
--- a/static/usage/action-sheet/theming/styling/index.md
+++ /dev/null
@@ -1,34 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_global_css from './angular/global_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
-      },
-    },
-  }}
-  src="usage/action-sheet/theming/styling/demo.html"
-  devicePreview
-/>
diff --git a/static/usage/alert/buttons/demo.html b/static/usage/alert/buttons/demo.html
deleted file mode 100644
index 4de5ceed1c2..00000000000
--- a/static/usage/alert/buttons/demo.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Alert</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-    }
-
-    .container p {
-      margin-bottom: 0;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="presentAlert()">Click Me</ion-button>
-        <p id="handlerResult"></p>
-        <p id="roleResult"></p>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const handlerOutput = document.querySelector('#handlerResult');
-    const roleOutput = document.querySelector('#roleResult');
-
-    async function presentAlert() {
-      const alert = document.createElement('ion-alert');
-      alert.header = 'Alert!';
-      alert.buttons = [
-        {
-          text: 'Cancel',
-          role: 'cancel',
-          handler: () => { handlerOutput.innerText = 'Alert canceled'; }
-        },
-        {
-          text: 'OK',
-          role: 'confirm',
-          handler: () => { handlerOutput.innerText = 'Alert confirmed'; }
-        }
-      ];
-
-      document.body.appendChild(alert);
-      await alert.present();
-
-      const { role } = await alert.onDidDismiss();
-      roleOutput.innerText = `Dismissed with role: ${role}`;
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/alert/buttons/index.md b/static/usage/alert/buttons/index.md
deleted file mode 100644
index 6d37c630f24..00000000000
--- a/static/usage/alert/buttons/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="300px"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/alert/buttons/demo.html"
-/>
diff --git a/static/usage/alert/customization/demo.html b/static/usage/alert/customization/demo.html
deleted file mode 100644
index 3aaddc848b4..00000000000
--- a/static/usage/alert/customization/demo.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Alert</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-alert.custom-alert {
-      --backdrop-opacity: 0.7;
-    }
-
-    .custom-alert .alert-button-group {
-      padding: 8px;
-    }
-
-    button.alert-button.alert-button-confirm {
-      background-color: var(--ion-color-success);
-      color: var(--ion-color-success-contrast);
-    }
-
-    .md button.alert-button.alert-button-confirm {
-      border-radius: 4px;
-    }
-
-    .ios .custom-alert button.alert-button {
-      border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
-    }
-
-    .ios button.alert-button.alert-button-cancel {
-      border-right: 0;
-      border-bottom-left-radius: 13px;
-      border-top-left-radius: 13px;
-    }
-
-    .ios button.alert-button.alert-button-confirm {
-      border-bottom-right-radius: 13px;
-      border-top-right-radius: 13px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="presentAlert()">Click Me</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    async function presentAlert() {
-      const alert = document.createElement('ion-alert');
-      alert.header = 'Are you sure?';
-      alert.cssClass = 'custom-alert';
-      alert.buttons = [
-        {
-          text: 'No',
-          cssClass: 'alert-button-cancel'
-        },
-        {
-          text: 'Yes',
-          cssClass: 'alert-button-confirm'
-        }
-      ];
-
-      document.body.appendChild(alert);
-      await alert.present();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/alert/customization/index.md b/static/usage/alert/customization/index.md
deleted file mode 100644
index 749db8a10d5..00000000000
--- a/static/usage/alert/customization/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_global_css from './angular/global_css.md';
-
-<Playground
-  size="300px"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/global.css': angular_global_css,
-      }
-    }
-  }}
-  src="usage/alert/customization/demo.html"
-/>
diff --git a/static/usage/alert/inputs/radios/demo.html b/static/usage/alert/inputs/radios/demo.html
deleted file mode 100644
index 7d6bddc05fc..00000000000
--- a/static/usage/alert/inputs/radios/demo.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Alert</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="presentAlert()">Click Me</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    async function presentAlert() {
-      const alert = document.createElement('ion-alert');
-      alert.header = 'Select your favorite color';
-      alert.buttons = ['OK'];
-      alert.inputs = [
-        {
-          label: 'Red',
-          type: 'radio',
-          value: 'red'
-        },
-        {
-          label: 'Blue',
-          type: 'radio',
-          value: 'blue'
-        },
-        {
-          label: 'Green',
-          type: 'radio',
-          value: 'green'
-        }
-      ];
-
-      document.body.appendChild(alert);
-      await alert.present();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/alert/inputs/radios/index.md b/static/usage/alert/inputs/radios/index.md
deleted file mode 100644
index 146630429b9..00000000000
--- a/static/usage/alert/inputs/radios/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="medium"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/alert/inputs/radios/demo.html"
-/>
diff --git a/static/usage/alert/inputs/text-inputs/demo.html b/static/usage/alert/inputs/text-inputs/demo.html
deleted file mode 100644
index 6611e63f7e9..00000000000
--- a/static/usage/alert/inputs/text-inputs/demo.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Alert</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="presentAlert()">Click Me</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    async function presentAlert() {
-      const alert = document.createElement('ion-alert');
-      alert.header = 'Please enter your info';
-      alert.buttons = ['OK'];
-      alert.inputs = [
-        {
-          placeholder: 'Name'
-        },
-        {
-          placeholder: 'Nickname (max 8 characters)',
-          attributes: {
-            maxlength: 8
-          }
-        },
-        {
-          type: 'number',
-          placeholder: 'Age',
-          min: 1,
-          max: 100
-        },
-        {
-          type: 'textarea',
-          placeholder: 'A little about yourself'
-        }
-      ];
-
-      document.body.appendChild(alert);
-      await alert.present();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/alert/inputs/text-inputs/index.md b/static/usage/alert/inputs/text-inputs/index.md
deleted file mode 100644
index d4fd2ea14be..00000000000
--- a/static/usage/alert/inputs/text-inputs/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="450px"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/alert/inputs/text-inputs/demo.html"
-/>
diff --git a/static/usage/alert/presenting/controller/demo.html b/static/usage/alert/presenting/controller/demo.html
deleted file mode 100644
index 2bae3f86514..00000000000
--- a/static/usage/alert/presenting/controller/demo.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Alert</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="presentAlert()">Click Me</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    async function presentAlert() {
-      const alert = document.createElement('ion-alert');
-      alert.header = 'Alert';
-      alert.subHeader = 'Important message';
-      alert.message = 'This is an alert!';
-      alert.buttons = ['OK'];
-
-      document.body.appendChild(alert);
-      await alert.present();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/alert/presenting/controller/index.md b/static/usage/alert/presenting/controller/index.md
deleted file mode 100644
index fc6f9846167..00000000000
--- a/static/usage/alert/presenting/controller/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="300px"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/alert/presenting/controller/demo.html"
-/>
diff --git a/static/usage/avatar/basic/demo.html b/static/usage/avatar/basic/demo.html
deleted file mode 100644
index 34fd2c6f460..00000000000
--- a/static/usage/avatar/basic/demo.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Avatar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-avatar>
-          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-        </ion-avatar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/avatar/basic/index.md b/static/usage/avatar/basic/index.md
deleted file mode 100644
index 5c31f3f5306..00000000000
--- a/static/usage/avatar/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/avatar/basic/demo.html" />
diff --git a/static/usage/avatar/chip/demo.html b/static/usage/avatar/chip/demo.html
deleted file mode 100644
index eaad5d8cdf6..00000000000
--- a/static/usage/avatar/chip/demo.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Avatar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-chip>
-          <ion-avatar>
-            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-          </ion-avatar>
-          <ion-label>Chip Avatar</ion-label>
-        </ion-chip>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/avatar/chip/index.md b/static/usage/avatar/chip/index.md
deleted file mode 100644
index 2acfeb4b578..00000000000
--- a/static/usage/avatar/chip/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/avatar/chip/demo.html" />
diff --git a/static/usage/avatar/item/demo.html b/static/usage/avatar/item/demo.html
deleted file mode 100644
index d3feb1707dd..00000000000
--- a/static/usage/avatar/item/demo.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Avatar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-avatar slot="start">
-            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-          </ion-avatar>
-          <ion-label>Item Avatar</ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/avatar/item/index.md b/static/usage/avatar/item/index.md
deleted file mode 100644
index 43630dba17e..00000000000
--- a/static/usage/avatar/item/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/avatar/item/demo.html" />
diff --git a/static/usage/avatar/theming/css-properties/demo.html b/static/usage/avatar/theming/css-properties/demo.html
deleted file mode 100644
index 1271fbd2666..00000000000
--- a/static/usage/avatar/theming/css-properties/demo.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Avatar</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-avatar {
-      --border-radius: 4px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-avatar slot="start">
-          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-        </ion-avatar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/avatar/theming/css-properties/index.md b/static/usage/avatar/theming/css-properties/index.md
deleted file mode 100644
index 81e53278687..00000000000
--- a/static/usage/avatar/theming/css-properties/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/avatar/theming/css-properties/demo.html"
-  size="250px"
-/>
diff --git a/static/usage/backdrop/basic/demo.html b/static/usage/backdrop/basic/demo.html
deleted file mode 100644
index e020f125604..00000000000
--- a/static/usage/backdrop/basic/demo.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Backdrop</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-backdrop visible="true"></ion-backdrop>
-    <div class="ion-page">
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Backdrop</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <ion-item>
-          <ion-checkbox slot="start"></ion-checkbox>
-          <ion-label>Checkbox</ion-label>
-        </ion-item>
-        <ion-button expand="block">Button</ion-button>
-      </ion-content>
-    </div>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/backdrop/basic/index.md b/static/usage/backdrop/basic/index.md
deleted file mode 100644
index 32ae7d2b841..00000000000
--- a/static/usage/backdrop/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/backdrop/basic/demo.html" devicePreview={true} />
diff --git a/static/usage/backdrop/styling/demo.html b/static/usage/backdrop/styling/demo.html
deleted file mode 100644
index c092db3c0a6..00000000000
--- a/static/usage/backdrop/styling/demo.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Backdrop</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    ion-backdrop {
-      opacity: 0.9;
-      background: var(--ion-color-primary);
-    }
-
-    #box {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translateY(-50%) translateX(-50%);
-      z-index: 100;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--ion-background-color, #fff);
-      width: 90%;
-      height: 100px;
-      border-radius: 10px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-backdrop visible="true"></ion-backdrop>
-    <div class="ion-page">
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Backdrop</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
-          perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
-          expedita vero!</p>
-      </ion-content>
-    </div>
-    <div id="box">
-      <ion-checkbox color="light"></ion-checkbox>
-      <ion-button class="ion-margin-start" color="light">Clickable</ion-button>
-    </div>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/backdrop/styling/index.md b/static/usage/backdrop/styling/index.md
deleted file mode 100644
index c4a355e7075..00000000000
--- a/static/usage/backdrop/styling/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/backdrop/styling/demo.html"
-  devicePreview={true}
-/>
diff --git a/static/usage/badge/basic/demo.html b/static/usage/badge/basic/demo.html
deleted file mode 100644
index dee14a40209..00000000000
--- a/static/usage/badge/basic/demo.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Badge</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 250px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-badge slot="start">11</ion-badge>
-            <ion-label>Badge in start slot</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-badge slot="end">22</ion-badge>
-            <ion-label>Badge in end slot</ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/badge/basic/index.md b/static/usage/badge/basic/index.md
deleted file mode 100644
index c549304418e..00000000000
--- a/static/usage/badge/basic/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/badge/basic/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/badge/theming/colors/demo.html b/static/usage/badge/theming/colors/demo.html
deleted file mode 100644
index 82b36f6d955..00000000000
--- a/static/usage/badge/theming/colors/demo.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Badge</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 250px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-label>Followers</ion-label>
-            <ion-badge color="primary">22k</ion-badge>
-          </ion-item>
-          <ion-item>
-            <ion-label>Likes</ion-label>
-            <ion-badge color="secondary">118k</ion-badge>
-          </ion-item>
-          <ion-item>
-            <ion-label>Stars</ion-label>
-            <ion-badge color="tertiary">34k</ion-badge>
-          </ion-item>
-          <ion-item>
-            <ion-label>Completed</ion-label>
-            <ion-badge color="success">80</ion-badge>
-          </ion-item>
-          <ion-item>
-            <ion-label>Warnings</ion-label>
-            <ion-badge color="warning">70</ion-badge>
-          </ion-item>
-          <ion-item>
-            <ion-label>Notifications</ion-label>
-            <ion-badge color="danger">1000</ion-badge>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/badge/theming/colors/index.md b/static/usage/badge/theming/colors/index.md
deleted file mode 100644
index 6db34769b24..00000000000
--- a/static/usage/badge/theming/colors/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="medium"
-  code={{ javascript, react, vue, angular }}
-  src="usage/badge/theming/colors/demo.html"
-/>
diff --git a/static/usage/badge/theming/css-properties/demo.html b/static/usage/badge/theming/css-properties/demo.html
deleted file mode 100644
index 2789948ad7e..00000000000
--- a/static/usage/badge/theming/css-properties/demo.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Select - Styling the Select</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 250px;
-    }
-
-    ion-badge {
-      --background: purple;
-      --color: white;
-      --padding-end: 20px;
-      --padding-start: 20px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-label>Badges styled</ion-label>
-            <ion-badge>1</ion-badge>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/badge/theming/css-properties/index.md b/static/usage/badge/theming/css-properties/index.md
deleted file mode 100644
index f43ed6cd81d..00000000000
--- a/static/usage/badge/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  size="300px"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/badge/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/breadcrumbs/basic/demo.html b/static/usage/breadcrumbs/basic/demo.html
deleted file mode 100644
index 5dc50e8a5df..00000000000
--- a/static/usage/breadcrumbs/basic/demo.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Breadcrumbs</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
-          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
-        </ion-breadcrumbs>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/basic/index.md b/static/usage/breadcrumbs/basic/index.md
deleted file mode 100644
index 6d57a7f4bd4..00000000000
--- a/static/usage/breadcrumbs/basic/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/breadcrumbs/basic/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/demo.html b/static/usage/breadcrumbs/collapsing-items/expand-on-click/demo.html
deleted file mode 100644
index c53a462d59a..00000000000
--- a/static/usage/breadcrumbs/collapsing-items/expand-on-click/demo.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Popover</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-breadcrumbs max-items="4">
-          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
-          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
-          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
-          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
-        </ion-breadcrumbs>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const breadcrumbs = document.querySelector('ion-breadcrumbs');
-
-    breadcrumbs.addEventListener('ionCollapsedClick', () => {
-      breadcrumbs.maxItems = undefined;
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md
deleted file mode 100644
index 8f23c2ae4c9..00000000000
--- a/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/breadcrumbs/collapsing-items/expand-on-click/demo.html"
-/>
diff --git a/static/usage/breadcrumbs/collapsing-items/items-before-after/demo.html b/static/usage/breadcrumbs/collapsing-items/items-before-after/demo.html
deleted file mode 100644
index 71580aec074..00000000000
--- a/static/usage/breadcrumbs/collapsing-items/items-before-after/demo.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Breadcrumbs</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div>Before Collapse = 2</div>
-        <ion-breadcrumbs max-items="4" items-before-collapse="2">
-          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
-          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
-          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
-          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <div class="ion-margin-top">Before Collapse = 0</div>
-        <ion-breadcrumbs max-items="4" items-before-collapse="0">
-          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
-          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
-          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
-          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <div class="ion-margin-top">After Collapse = 2</div>
-        <ion-breadcrumbs max-items="4" items-after-collapse="2">
-          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
-          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
-          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
-          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <div class="ion-margin-top">Before Collapse = 2, After Collapse = 2</div>
-        <ion-breadcrumbs max-items="4" items-before-collapse="2" items-after-collapse="2">
-          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
-          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
-          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
-          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
-        </ion-breadcrumbs>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/breadcrumbs/collapsing-items/items-before-after/index.md
deleted file mode 100644
index 28f33d0e222..00000000000
--- a/static/usage/breadcrumbs/collapsing-items/items-before-after/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="300px"
-  code={{ javascript, react, vue, angular }}
-  src="usage/breadcrumbs/collapsing-items/items-before-after/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/breadcrumbs/collapsing-items/max-items/demo.html
deleted file mode 100644
index daa415879c5..00000000000
--- a/static/usage/breadcrumbs/collapsing-items/max-items/demo.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Breadcrumbs</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-breadcrumbs max-items="4">
-          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
-          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
-          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
-          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
-        </ion-breadcrumbs>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/breadcrumbs/collapsing-items/max-items/index.md
deleted file mode 100644
index f69ed2c8bb9..00000000000
--- a/static/usage/breadcrumbs/collapsing-items/max-items/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/breadcrumbs/collapsing-items/max-items/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/demo.html b/static/usage/breadcrumbs/collapsing-items/popover-on-click/demo.html
deleted file mode 100644
index 658dd1ee73a..00000000000
--- a/static/usage/breadcrumbs/collapsing-items/popover-on-click/demo.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Popover</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-breadcrumbs max-items="4">
-          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
-          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
-          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
-          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
-        </ion-breadcrumbs>
-        <ion-popover>
-          <ion-content>
-            <ion-list></ion-list>
-          </ion-content>
-        </ion-popover>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const breadcrumbs = document.querySelector('ion-breadcrumbs');
-    const popover = document.querySelector('ion-popover');
-    const popoverList = document.querySelector('ion-popover ion-list');
-
-    breadcrumbs.addEventListener('ionCollapsedClick', e => {
-      let listHTML = ``;
-      e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => {
-        listHTML += `
-          <ion-item
-            ${i === e.detail.collapsedBreadcrumbs.length - 1 ? `lines="none"` : ""}
-            href="${breadcrumb.href}"
-          >
-            <ion-label>${breadcrumb.textContent}</ion-label>
-          </ion-item>
-        `;
-      });
-
-      popoverList.innerHTML = listHTML;
-      popover.event = e;
-      popover.isOpen = true;
-    });
-
-    popover.addEventListener('didDismiss', () => popover.isOpen = false);
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md
deleted file mode 100644
index fccf6e9b8f5..00000000000
--- a/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="500px"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/breadcrumbs/collapsing-items/popover-on-click/demo.html"
-/>
diff --git a/static/usage/breadcrumbs/icons/custom-separators/demo.html b/static/usage/breadcrumbs/icons/custom-separators/demo.html
deleted file mode 100644
index 7939fad06df..00000000000
--- a/static/usage/breadcrumbs/icons/custom-separators/demo.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Breadcrumbs</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#home">
-            Home
-            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">
-            Electronics
-            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">
-            Cameras
-            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#film">
-            Film
-            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
-          </ion-breadcrumb>
-        </ion-breadcrumbs>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/icons/custom-separators/index.md b/static/usage/breadcrumbs/icons/custom-separators/index.md
deleted file mode 100644
index 6c74b4ef558..00000000000
--- a/static/usage/breadcrumbs/icons/custom-separators/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/breadcrumbs/icons/custom-separators/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/breadcrumbs/icons/icons-on-items/demo.html
deleted file mode 100644
index 5aaaa673f11..00000000000
--- a/static/usage/breadcrumbs/icons/icons-on-items/demo.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Breadcrumbs</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-label>Icons at Start</ion-label>
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#home">
-            <ion-icon slot="start" name="home"></ion-icon>
-            Home
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">
-            <ion-icon slot="start" name="flash"></ion-icon>
-            Electronics
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">
-            <ion-icon slot="start" name="camera"></ion-icon>
-            Cameras
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#film">
-            <ion-icon slot="start" name="film"></ion-icon>
-            Film
-          </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <ion-label class="ion-margin-top">Icons at End</ion-label>
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#home">
-            Home
-            <ion-icon slot="end" name="home"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">
-            Electronics
-            <ion-icon slot="end" name="flash"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">
-            Cameras
-            <ion-icon slot="end" name="camera"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#film">
-            Film
-            <ion-icon slot="end" name="film"></ion-icon>
-          </ion-breadcrumb>
-        </ion-breadcrumbs>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/icons/icons-on-items/index.md b/static/usage/breadcrumbs/icons/icons-on-items/index.md
deleted file mode 100644
index a44000546f2..00000000000
--- a/static/usage/breadcrumbs/icons/icons-on-items/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="300px"
-  code={{ javascript, react, vue, angular }}
-  src="usage/breadcrumbs/icons/icons-on-items/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/theming/colors/demo.html b/static/usage/breadcrumbs/theming/colors/demo.html
deleted file mode 100644
index bb31890e59c..00000000000
--- a/static/usage/breadcrumbs/theming/colors/demo.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Breadcrumbs</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-breadcrumbs color="primary">
-          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
-          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
-        </ion-breadcrumbs>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/theming/colors/index.md b/static/usage/breadcrumbs/theming/colors/index.md
deleted file mode 100644
index efad30bbf65..00000000000
--- a/static/usage/breadcrumbs/theming/colors/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/breadcrumbs/theming/colors/demo.html"
-/>
diff --git a/static/usage/breadcrumbs/theming/css-properties/demo.html b/static/usage/breadcrumbs/theming/css-properties/demo.html
deleted file mode 100644
index 202dce06ada..00000000000
--- a/static/usage/breadcrumbs/theming/css-properties/demo.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Breadcrumbs</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-breadcrumb {
-      --color: rgb(81, 155, 198);
-      --color-active: rgb(150, 112, 220);
-      --color-hover: rgb(103, 61, 180);
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
-          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
-        </ion-breadcrumbs>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/breadcrumbs/theming/css-properties/index.md b/static/usage/breadcrumbs/theming/css-properties/index.md
deleted file mode 100644
index 973c6026f8d..00000000000
--- a/static/usage/breadcrumbs/theming/css-properties/index.md
+++ /dev/null
@@ -1,30 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/breadcrumbs/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/button/basic/demo.html b/static/usage/button/basic/demo.html
deleted file mode 100644
index 1faedab0fa7..00000000000
--- a/static/usage/button/basic/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Button</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button>Default</ion-button>
-        <ion-button disabled>Disabled</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/button/basic/index.md b/static/usage/button/basic/index.md
deleted file mode 100644
index 50170cfd37b..00000000000
--- a/static/usage/button/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/button/basic/demo.html" />
diff --git a/static/usage/button/expand/demo.html b/static/usage/button/expand/demo.html
deleted file mode 100644
index cfda23abb15..00000000000
--- a/static/usage/button/expand/demo.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Button</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      align-items: stretch;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <div class="container">
-        <ion-button expand="block">Block</ion-button>
-        <ion-button expand="full">Full</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/button/expand/index.md b/static/usage/button/expand/index.md
deleted file mode 100644
index e41ccccfa24..00000000000
--- a/static/usage/button/expand/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/button/expand/demo.html" />
diff --git a/static/usage/button/fill/demo.html b/static/usage/button/fill/demo.html
deleted file mode 100644
index 031eece07a5..00000000000
--- a/static/usage/button/fill/demo.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Button</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button>Default</ion-button>
-        <ion-button fill="clear">Clear</ion-button>
-        <ion-button fill="outline">Outline</ion-button>
-        <ion-button fill="solid">Solid</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/button/fill/index.md b/static/usage/button/fill/index.md
deleted file mode 100644
index b7870f10852..00000000000
--- a/static/usage/button/fill/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/button/fill/demo.html" />
diff --git a/static/usage/button/icons/demo.html b/static/usage/button/icons/demo.html
deleted file mode 100644
index 7d7bb499cf5..00000000000
--- a/static/usage/button/icons/demo.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Button</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button>
-          <ion-icon slot="start" name="star"></ion-icon>
-          Left Icon
-        </ion-button>
-
-        <ion-button>
-          Right Icon
-          <ion-icon slot="end" name="star"></ion-icon>
-        </ion-button>
-
-        <ion-button>
-          <ion-icon slot="icon-only" name="star"></ion-icon>
-        </ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/button/icons/index.md b/static/usage/button/icons/index.md
deleted file mode 100644
index 718e4683b42..00000000000
--- a/static/usage/button/icons/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/button/icons/demo.html" />
diff --git a/static/usage/button/shape/demo.html b/static/usage/button/shape/demo.html
deleted file mode 100644
index 07bf8815bc6..00000000000
--- a/static/usage/button/shape/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Button</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button>Default</ion-button>
-        <ion-button shape="round">Round</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/button/shape/index.md b/static/usage/button/shape/index.md
deleted file mode 100644
index eab7aba8868..00000000000
--- a/static/usage/button/shape/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/button/shape/demo.html" />
diff --git a/static/usage/button/size/demo.html b/static/usage/button/size/demo.html
deleted file mode 100644
index 155cf9536b1..00000000000
--- a/static/usage/button/size/demo.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Button</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button size="small">Small</ion-button>
-        <ion-button size="default">Default</ion-button>
-        <ion-button size="large">Large</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/button/size/index.md b/static/usage/button/size/index.md
deleted file mode 100644
index 9878f063f4b..00000000000
--- a/static/usage/button/size/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/button/size/demo.html" />
diff --git a/static/usage/button/theming/colors/demo.html b/static/usage/button/theming/colors/demo.html
deleted file mode 100644
index afc878f37cc..00000000000
--- a/static/usage/button/theming/colors/demo.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Button</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-wrap: wrap;
-      width: 350px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button>Default</ion-button>
-        <ion-button color="primary">Primary</ion-button>
-        <ion-button color="secondary">Secondary</ion-button>
-        <ion-button color="tertiary">Tertiary</ion-button>
-        <ion-button color="success">Success</ion-button>
-        <ion-button color="warning">Warning</ion-button>
-        <ion-button color="danger">Danger</ion-button>
-        <ion-button color="light">Light</ion-button>
-        <ion-button color="medium">Medium</ion-button>
-        <ion-button color="dark">Dark</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/button/theming/colors/index.md b/static/usage/button/theming/colors/index.md
deleted file mode 100644
index 48a76f4fcf1..00000000000
--- a/static/usage/button/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/button/theming/colors/demo.html" />
diff --git a/static/usage/button/theming/css-properties/demo.html b/static/usage/button/theming/css-properties/demo.html
deleted file mode 100644
index ee2bec46668..00000000000
--- a/static/usage/button/theming/css-properties/demo.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Button</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-button {
-      --background: #93e9be;
-      --background-hover: #9ce0be;
-      --background-activated: #88f4be;
-      --background-focused: #88f4be;
-
-      --color: blue;
-
-      --border-radius: 0;
-      --border-color: #000;
-      --border-style: solid;
-      --border-width: 1px;
-
-      --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
-
-      --ripple-color: deeppink;
-
-      --padding-top: 10px;
-      --padding-bottom: 10px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button>Custom Button</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/button/theming/css-properties/index.md b/static/usage/button/theming/css-properties/index.md
deleted file mode 100644
index 076acf31267..00000000000
--- a/static/usage/button/theming/css-properties/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/button/theming/css-properties/demo.html"
-  size="250px"
-/>
diff --git a/static/usage/buttons/basic/demo.html b/static/usage/buttons/basic/demo.html
deleted file mode 100644
index 86fad6dd80d..00000000000
--- a/static/usage/buttons/basic/demo.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Buttons</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button>Button</ion-button>
-          </ion-buttons>
-          <ion-title>Default Buttons</ion-title>
-        </ion-toolbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/buttons/basic/index.md b/static/usage/buttons/basic/index.md
deleted file mode 100644
index 2fc2df3b683..00000000000
--- a/static/usage/buttons/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/buttons/basic/demo.html" />
diff --git a/static/usage/buttons/placement/demo.html b/static/usage/buttons/placement/demo.html
deleted file mode 100644
index fc35244a169..00000000000
--- a/static/usage/buttons/placement/demo.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Buttons</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button>Start</ion-button>
-          </ion-buttons>
-          <ion-title>Buttons</ion-title>
-          <ion-buttons slot="end">
-            <ion-button>End</ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button>Secondary</ion-button>
-          </ion-buttons>
-          <ion-title>Buttons</ion-title>
-          <ion-buttons slot="primary">
-            <ion-button>Primary</ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/buttons/placement/index.md b/static/usage/buttons/placement/index.md
deleted file mode 100644
index 5bdf6bac8fc..00000000000
--- a/static/usage/buttons/placement/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/buttons/placement/demo.html" />
diff --git a/static/usage/buttons/types/demo.html b/static/usage/buttons/types/demo.html
deleted file mode 100644
index e7aedcc42d9..00000000000
--- a/static/usage/buttons/types/demo.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Buttons</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button size="large">
-              Favorite
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Default Buttons</ion-title>
-          <ion-buttons slot="primary">
-            <ion-button>
-              Delete
-            </ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button>
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button>
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Icon Buttons</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button fill="solid">
-              <ion-icon slot="start" name="person-circle"></ion-icon>
-              Contact
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button fill="solid">
-              Help
-              <ion-icon slot="end" name="help-circle"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Solid Buttons</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button fill="outline">
-              <ion-icon slot="start" name="star"></ion-icon>
-              Star
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button fill="outline">
-              Edit
-              <ion-icon slot="end" name="create"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Outline Buttons</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button default-href="#"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Back Button</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-menu-button auto-hide="false"></ion-menu-button>
-          </ion-buttons>
-          <ion-title>Menu Button</ion-title>
-        </ion-toolbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/buttons/types/index.md b/static/usage/buttons/types/index.md
deleted file mode 100644
index 7b4c03ce5e5..00000000000
--- a/static/usage/buttons/types/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/buttons/types/demo.html" size="medium" />
diff --git a/static/usage/card/basic/demo.html b/static/usage/card/basic/demo.html
deleted file mode 100644
index b7913580d9e..00000000000
--- a/static/usage/card/basic/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Card</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
-
-    /* iOS places the subtitle above the title */
-    ion-card-header.ios {
-      display: flex;
-      flex-flow: column-reverse;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Here's a small text description for the card content. Nothing more, nothing less.
-          </ion-card-content>
-        </ion-card>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/card/basic/index.md b/static/usage/card/basic/index.md
deleted file mode 100644
index 0b2b3e3382d..00000000000
--- a/static/usage/card/basic/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    }
-  }}
-  src="usage/card/basic/demo.html"
-/>
diff --git a/static/usage/card/buttons/demo.html b/static/usage/card/buttons/demo.html
deleted file mode 100644
index d36d080c427..00000000000
--- a/static/usage/card/buttons/demo.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Card</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
-
-    /* iOS places the subtitle above the title */
-    ion-card-header.ios {
-      display: flex;
-      flex-flow: column-reverse;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Here's a small text description for the card content. Nothing more, nothing less.
-          </ion-card-content>
-
-          <ion-button fill="clear">Action 1</ion-button>
-          <ion-button fill="clear">Action 2</ion-button>
-        </ion-card>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/card/buttons/index.md b/static/usage/card/buttons/index.md
deleted file mode 100644
index 6ee42ae4382..00000000000
--- a/static/usage/card/buttons/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    }
-  }}
-  src="usage/card/buttons/demo.html"
-  size="300px"
-/>
diff --git a/static/usage/card/list/demo.html b/static/usage/card/list/demo.html
deleted file mode 100644
index e2ff8431be8..00000000000
--- a/static/usage/card/list/demo.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Card</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
-
-    ion-card {
-      width: 100%;
-    }
-
-    ion-item {
-      --padding-start: 0;
-    }
-
-    /* iOS places the subtitle above the title */
-    ion-card-header.ios {
-      display: flex;
-      flex-flow: column-reverse;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-          <ion-card-content>
-            <ion-list>
-              <ion-item>
-                <ion-thumbnail slot="start">
-                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-                </ion-thumbnail>
-                <ion-label>Item</ion-label>
-              </ion-item>
-
-              <ion-item>
-                <ion-thumbnail slot="start">
-                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-                </ion-thumbnail>
-                <ion-label>Item</ion-label>
-              </ion-item>
-
-              <ion-item>
-                <ion-thumbnail slot="start">
-                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-                </ion-thumbnail>
-                <ion-label>Item</ion-label>
-              </ion-item>
-
-              <ion-item lines="none">
-                <ion-thumbnail slot="start">
-                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-                </ion-thumbnail>
-                <ion-label>Item</ion-label>
-              </ion-item>
-            </ion-list>
-          </ion-card-content>
-        </ion-card>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/card/list/index.md b/static/usage/card/list/index.md
deleted file mode 100644
index 775f65a5b40..00000000000
--- a/static/usage/card/list/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    }
-  }}
-  src="usage/card/list/demo.html"
-  size="400px"
-/>
diff --git a/static/usage/card/media/demo.html b/static/usage/card/media/demo.html
deleted file mode 100644
index b2a6c6b74b2..00000000000
--- a/static/usage/card/media/demo.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Card</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
-
-    /* iOS places the subtitle above the title */
-    ion-card-header.ios {
-      display: flex;
-      flex-flow: column-reverse;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-card>
-          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Here's a small text description for the card content. Nothing more, nothing less.
-          </ion-card-content>
-        </ion-card>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/card/media/index.md b/static/usage/card/media/index.md
deleted file mode 100644
index 82c8eb892e9..00000000000
--- a/static/usage/card/media/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    }
-  }}
-  src="usage/card/media/demo.html"
-  size="350px"
-/>
diff --git a/static/usage/card/theming/colors/demo.html b/static/usage/card/theming/colors/demo.html
deleted file mode 100644
index 96aa2f2440c..00000000000
--- a/static/usage/card/theming/colors/demo.html
+++ /dev/null
@@ -1,137 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Card</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-wrap: wrap;
-    }
-
-    ion-card {
-      flex: 1 1 28%;
-    }
-
-    /* iOS places the subtitle above the title */
-    ion-card-header.ios {
-      display: flex;
-      flex-flow: column-reverse;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-card color="primary">
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Card Content
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card color="secondary">
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Card Content
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card color="tertiary">
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Card Content
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card color="success">
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Card Content
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card color="warning">
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Card Content
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card color="danger">
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Card Content
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card color="light">
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Card Content
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card color="medium">
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Card Content
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card color="dark">
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Card Content
-          </ion-card-content>
-        </ion-card>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/card/theming/colors/index.md b/static/usage/card/theming/colors/index.md
deleted file mode 100644
index 951273ef2a6..00000000000
--- a/static/usage/card/theming/colors/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    }
-  }}
-  src="usage/card/theming/colors/demo.html"
-  size="large"
-/>
diff --git a/static/usage/card/theming/css-properties/demo.html b/static/usage/card/theming/css-properties/demo.html
deleted file mode 100644
index 4a479f01653..00000000000
--- a/static/usage/card/theming/css-properties/demo.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Card</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
-
-    ion-card {
-      --background: #000;
-      --color: #9efff0;
-    }
-
-    ion-card-title {
-      --color: #52ffe4;
-    }
-
-    ion-card-subtitle {
-      --color: #d1fff8;
-    }
-
-    /* iOS places the subtitle above the title */
-    ion-card-header.ios {
-      display: flex;
-      flex-flow: column-reverse;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Here's a small text description for the card content. Nothing more, nothing less.
-          </ion-card-content>
-        </ion-card>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/card/theming/css-properties/index.md b/static/usage/card/theming/css-properties/index.md
deleted file mode 100644
index 22ceaf39f95..00000000000
--- a/static/usage/card/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    }
-  }}
-  src="usage/card/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/checkbox/basic/demo.html b/static/usage/checkbox/basic/demo.html
deleted file mode 100644
index d95a66ee2fd..00000000000
--- a/static/usage/checkbox/basic/demo.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Checkbox</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-item>
-            <ion-checkbox slot="start"></ion-checkbox>
-            <ion-label>I agree to the terms and conditions</ion-label>
-          </ion-item>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/checkbox/basic/index.md b/static/usage/checkbox/basic/index.md
deleted file mode 100644
index 8e6d70bb205..00000000000
--- a/static/usage/checkbox/basic/index.md
+++ /dev/null
@@ -1,16 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular
-  }}
-  src="usage/checkbox/basic/demo.html"
-/>
diff --git a/static/usage/checkbox/indeterminate/demo.html b/static/usage/checkbox/indeterminate/demo.html
deleted file mode 100644
index 014f67d5210..00000000000
--- a/static/usage/checkbox/indeterminate/demo.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Checkbox</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-item>
-            <ion-checkbox slot="start" indeterminate="true"></ion-checkbox>
-            <ion-label>Indeterminate checkbox</ion-label>
-          </ion-item>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/checkbox/indeterminate/index.md b/static/usage/checkbox/indeterminate/index.md
deleted file mode 100644
index 01eb5a9da8a..00000000000
--- a/static/usage/checkbox/indeterminate/index.md
+++ /dev/null
@@ -1,16 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular
-  }}
-  src="usage/checkbox/indeterminate/demo.html"
-/>
diff --git a/static/usage/checkbox/theming/css-properties/demo.html b/static/usage/checkbox/theming/css-properties/demo.html
deleted file mode 100644
index 4666cbf6298..00000000000
--- a/static/usage/checkbox/theming/css-properties/demo.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Checkbox</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-checkbox {
-        --size: 32px;
-        --background-checked: #6815ec;
-      }
-
-      ion-checkbox::part(container) {
-        border-radius: 6px;
-        border: 2px solid #6815ec;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-item>
-            <ion-checkbox slot="start"></ion-checkbox>
-            <ion-label>Themed checkbox</ion-label>
-          </ion-item>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/checkbox/theming/css-properties/index.md b/static/usage/checkbox/theming/css-properties/index.md
deleted file mode 100644
index ac8f8a90076..00000000000
--- a/static/usage/checkbox/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    }
-  }}
-  src="usage/checkbox/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/chip/basic/demo.html b/static/usage/chip/basic/demo.html
deleted file mode 100644
index 85bf9b12ade..00000000000
--- a/static/usage/chip/basic/demo.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Chip</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-chip>Default</ion-chip>
-        <ion-chip disabled="true">Disabled</ion-chip>
-        <ion-chip outline="true">Outline</ion-chip>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/chip/basic/index.md b/static/usage/chip/basic/index.md
deleted file mode 100644
index 02e79a4f64b..00000000000
--- a/static/usage/chip/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/chip/basic/demo.html" />
diff --git a/static/usage/chip/slots/demo.html b/static/usage/chip/slots/demo.html
deleted file mode 100644
index d42aecde9e3..00000000000
--- a/static/usage/chip/slots/demo.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Chip</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-chip>
-          <ion-avatar>
-            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-          </ion-avatar>
-          <ion-label>Avatar Chip</ion-label>
-          <ion-icon name="close-circle"></ion-icon>
-        </ion-chip>
-
-        <ion-chip>
-          <ion-icon name="pin" color="primary"></ion-icon>
-          <ion-label>Icon Chip</ion-label>
-          <ion-icon name="close"></ion-icon>
-        </ion-chip>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/chip/slots/index.md b/static/usage/chip/slots/index.md
deleted file mode 100644
index 590dd242f92..00000000000
--- a/static/usage/chip/slots/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/chip/slots/demo.html" />
diff --git a/static/usage/chip/theming/colors/demo.html b/static/usage/chip/theming/colors/demo.html
deleted file mode 100644
index 135036f28d2..00000000000
--- a/static/usage/chip/theming/colors/demo.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Chip</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .flex-items {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      max-width: 440px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div class="flex-items">
-          <ion-chip>Default</ion-chip>
-          <ion-chip color="primary">Primary</ion-chip>
-          <ion-chip color="secondary">Secondary</ion-chip>
-          <ion-chip color="tertiary">Tertiary</ion-chip>
-          <ion-chip color="success">Success</ion-chip>
-          <ion-chip color="warning">Warning</ion-chip>
-          <ion-chip color="danger">Danger</ion-chip>
-          <ion-chip color="light">Light</ion-chip>
-          <ion-chip color="medium">Medium</ion-chip>
-          <ion-chip color="dark">Dark</ion-chip>
-        </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/chip/theming/colors/index.md b/static/usage/chip/theming/colors/index.md
deleted file mode 100644
index 6795c343ed3..00000000000
--- a/static/usage/chip/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/chip/theming/colors/demo.html" />
diff --git a/static/usage/chip/theming/css-properties/demo.html b/static/usage/chip/theming/css-properties/demo.html
deleted file mode 100644
index 2092faeb245..00000000000
--- a/static/usage/chip/theming/css-properties/demo.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Chip</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-chip {
-      --background: #00213F;
-      --color: #ADEFD1;
-    }
-  </style>
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-chip>Default</ion-chip>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/chip/theming/css-properties/index.md b/static/usage/chip/theming/css-properties/index.md
deleted file mode 100644
index d44a374a371..00000000000
--- a/static/usage/chip/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/chip/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/content/basic/demo.html b/static/usage/content/basic/demo.html
deleted file mode 100644
index ea44b3903b0..00000000000
--- a/static/usage/content/basic/demo.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Content</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <h1>Heading 1</h1>
-      <h2>Heading 2</h2>
-      <h3>Heading 3</h3>
-      <h4>Heading 4</h4>
-      <h5>Heading 5</h5>
-      <h6>Heading 6</h6>
-
-      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/content/basic/index.md b/static/usage/content/basic/index.md
deleted file mode 100644
index ab1c88ac36d..00000000000
--- a/static/usage/content/basic/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/content/basic/demo.html"
-  includeIonContent={false}
-  devicePreview={true}
-/>
diff --git a/static/usage/content/fixed/demo.html b/static/usage/content/fixed/demo.html
deleted file mode 100644
index 7b791156020..00000000000
--- a/static/usage/content/fixed/demo.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Content</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-button[slot="fixed"] {
-      top: 50%;
-      right: 20px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
-
-      <ion-button>Normal Button</ion-button>
-      <ion-button slot="fixed">Fixed Button</ion-button>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
-      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
-      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
-      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
-      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/content/fixed/index.md b/static/usage/content/fixed/index.md
deleted file mode 100644
index 9c3d34deb6e..00000000000
--- a/static/usage/content/fixed/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/content/fixed/demo.html"
-  includeIonContent={false}
-  devicePreview={true}
-/>
diff --git a/static/usage/content/fullscreen/demo.html b/static/usage/content/fullscreen/demo.html
deleted file mode 100644
index 5fd6f696dc7..00000000000
--- a/static/usage/content/fullscreen/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Content</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-toolbar {
-      --opacity: .5
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>
-          Header
-        </ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content fullscreen="true" class="ion-padding">
-      <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
-      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
-      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
-      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
-      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
-    </ion-content>
-    <ion-footer>
-      <ion-toolbar>
-        <ion-title>
-          Footer
-        </ion-title>
-      </ion-toolbar>
-    </ion-footer>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/content/fullscreen/index.md b/static/usage/content/fullscreen/index.md
deleted file mode 100644
index 015ddad0a04..00000000000
--- a/static/usage/content/fullscreen/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/content/fullscreen/demo.html"
-  includeIonContent={false}
-  devicePreview={true}
-/>
diff --git a/static/usage/content/header-footer/demo.html b/static/usage/content/header-footer/demo.html
deleted file mode 100644
index 5dfee53b98c..00000000000
--- a/static/usage/content/header-footer/demo.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Content</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>
-          Header
-        </ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <h1>Heading 1</h1>
-      <h2>Heading 2</h2>
-      <h3>Heading 3</h3>
-      <h4>Heading 4</h4>
-      <h5>Heading 5</h5>
-      <h6>Heading 6</h6>
-
-      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-    </ion-content>
-    <ion-footer>
-      <ion-toolbar>
-        <ion-title>
-          Footer
-        </ion-title>
-      </ion-toolbar>
-    </ion-footer>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/content/header-footer/index.md b/static/usage/content/header-footer/index.md
deleted file mode 100644
index baca0fad424..00000000000
--- a/static/usage/content/header-footer/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/content/header-footer/demo.html"
-  includeIonContent={false}
-  devicePreview={true}
-/>
diff --git a/static/usage/content/scroll-events/demo.html b/static/usage/content/scroll-events/demo.html
deleted file mode 100644
index 7527ed684f4..00000000000
--- a/static/usage/content/scroll-events/demo.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Content</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <h1>Scroll to fire the scroll events and view them in the console.</h1>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
-      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
-      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
-      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
-      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const content = document.querySelector('ion-content');
-    // Scroll events are disabled by default for content for
-    // performance reasons, enable them to listen to them
-    content.scrollEvents = true;
-
-    content.addEventListener('ionScrollStart', () => console.log('scroll start'));
-    content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
-    content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/content/scroll-events/index.md b/static/usage/content/scroll-events/index.md
deleted file mode 100644
index abc114673be..00000000000
--- a/static/usage/content/scroll-events/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-import react from './react.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/content/scroll-events/demo.html"
-  includeIonContent={false}
-  devicePreview={true}
-/>
diff --git a/static/usage/content/scroll-methods/demo.html b/static/usage/content/scroll-methods/demo.html
deleted file mode 100644
index 44a052fbbdb..00000000000
--- a/static/usage/content/scroll-methods/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Content</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <h1>Click on the buttons to scroll the content.</h1>
-
-      <ion-button expand="block" onClick="scrollToBottom()">Scroll to Bottom</ion-button>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
-      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
-      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
-      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
-      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
-
-      <ion-button expand="block" onClick="scrollToTop()">Scroll to Top</ion-button>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const content = document.querySelector('ion-content');
-
-    function scrollToBottom() {
-      // Passing a duration to the method makes it so the scroll slowly
-      // goes to the bottom instead of instantly
-      content.scrollToBottom(500);
-    }
-
-    function scrollToTop() {
-      // Passing a duration to the method makes it so the scroll slowly
-      // goes to the top instead of instantly
-      content.scrollToTop(500);
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/content/scroll-methods/index.md b/static/usage/content/scroll-methods/index.md
deleted file mode 100644
index e2768ef20cf..00000000000
--- a/static/usage/content/scroll-methods/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-import react from './react.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/content/scroll-methods/demo.html"
-  includeIonContent={false}
-  devicePreview={true}
-/>
diff --git a/static/usage/content/theming/colors/demo.html b/static/usage/content/theming/colors/demo.html
deleted file mode 100644
index 588dcd40212..00000000000
--- a/static/usage/content/theming/colors/demo.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Content</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-wrap: wrap;
-      align-content: center;
-    }
-
-    ion-content {
-      flex: 1 1 33%;
-      height: 250px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <div class="container">
-      <ion-content color="primary" class="ion-padding">
-        <h1>Primary content</h1>
-        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-      </ion-content>
-      <ion-content color="secondary" class="ion-padding">
-        <h1>Secondary content</h1>
-        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-      </ion-content>
-      <ion-content color="tertiary" class="ion-padding">
-        <h1>Tertiary content</h1>
-        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-      </ion-content>
-      <ion-content color="success" class="ion-padding">
-        <h1>Success content</h1>
-        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-      </ion-content>
-      <ion-content color="warning" class="ion-padding">
-        <h1>Warning content</h1>
-        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-      </ion-content>
-      <ion-content color="danger" class="ion-padding">
-        <h1>Danger content</h1>
-        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-      </ion-content>
-      <ion-content color="light" class="ion-padding">
-        <h1>Light content</h1>
-        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-      </ion-content>
-      <ion-content color="medium" class="ion-padding">
-        <h1>Medium content</h1>
-        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-      </ion-content>
-      <ion-content color="dark" class="ion-padding">
-        <h1>Dark content</h1>
-        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-      </ion-content>
-    </div>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/content/theming/colors/index.md b/static/usage/content/theming/colors/index.md
deleted file mode 100644
index 9418e4ac97e..00000000000
--- a/static/usage/content/theming/colors/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/content/theming/colors/demo.html"
-  includeIonContent={false}
-  size="xlarge"
-/>
diff --git a/static/usage/content/theming/css-properties/demo.html b/static/usage/content/theming/css-properties/demo.html
deleted file mode 100644
index 4232d52adea..00000000000
--- a/static/usage/content/theming/css-properties/demo.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Content</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-content {
-      --background: #d31373;
-      --color: #fff;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <h1>Heading 1</h1>
-      <h2>Heading 2</h2>
-      <h3>Heading 3</h3>
-      <h4>Heading 4</h4>
-      <h5>Heading 5</h5>
-      <h6>Heading 6</h6>
-
-      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/content/theming/css-properties/index.md b/static/usage/content/theming/css-properties/index.md
deleted file mode 100644
index 1eb8c9d5a82..00000000000
--- a/static/usage/content/theming/css-properties/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/content/theming/css-properties/demo.html"
-  includeIonContent={false}
-  devicePreview={true}
-/>
diff --git a/static/usage/content/theming/css-shadow-parts/demo.html b/static/usage/content/theming/css-shadow-parts/demo.html
deleted file mode 100644
index b1f06e8a099..00000000000
--- a/static/usage/content/theming/css-shadow-parts/demo.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Content</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-content::part(background) {
-      background: #d31373;
-    }
-
-    ion-content::part(scroll) {
-      color: #fff;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <h1>Heading 1</h1>
-      <h2>Heading 2</h2>
-      <h3>Heading 3</h3>
-      <h4>Heading 4</h4>
-      <h5>Heading 5</h5>
-      <h6>Heading 6</h6>
-
-      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/content/theming/css-shadow-parts/index.md b/static/usage/content/theming/css-shadow-parts/index.md
deleted file mode 100644
index d64984aa9e8..00000000000
--- a/static/usage/content/theming/css-shadow-parts/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/content/theming/css-shadow-parts/demo.html"
-  includeIonContent={false}
-  devicePreview={true}
-/>
diff --git a/static/usage/datetime-button/basic/demo.html b/static/usage/datetime-button/basic/demo.html
deleted file mode 100644
index 8271b6ee9cf..00000000000
--- a/static/usage/datetime-button/basic/demo.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.2.0/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.2.0/css/ionic.bundle.css" />
-    <style>
-      ion-modal {
-        --border-radius: 8px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime-button datetime="datetime"></ion-datetime-button>
-
-          <ion-modal>
-            <ion-datetime id="datetime"></ion-datetime>
-          </ion-modal>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime-button/basic/index.md b/static/usage/datetime-button/basic/index.md
deleted file mode 100644
index 55e9b3155a1..00000000000
--- a/static/usage/datetime-button/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime-button/basic/demo.html" />
diff --git a/static/usage/datetime/basic/demo.html b/static/usage/datetime/basic/demo.html
deleted file mode 100644
index 24d4da3b850..00000000000
--- a/static/usage/datetime/basic/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/basic/index.md b/static/usage/datetime/basic/index.md
deleted file mode 100644
index 243b7d2c734..00000000000
--- a/static/usage/datetime/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/basic/demo.html" />
diff --git a/static/usage/datetime/buttons/customizing-button-texts/demo.html b/static/usage/datetime/buttons/customizing-button-texts/demo.html
deleted file mode 100644
index 93ecf2659c3..00000000000
--- a/static/usage/datetime/buttons/customizing-button-texts/demo.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-        min-height: 400px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime
-            show-default-buttons="true"
-            done-text="All set"
-            cancel-text="Never mind"
-          ></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/buttons/customizing-button-texts/index.md b/static/usage/datetime/buttons/customizing-button-texts/index.md
deleted file mode 100644
index ce9a0b070a6..00000000000
--- a/static/usage/datetime/buttons/customizing-button-texts/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="500px" code={{ javascript, react, vue, angular }} src="usage/datetime/buttons/customizing-button-texts/demo.html" />
diff --git a/static/usage/datetime/buttons/customizing-buttons/demo.html b/static/usage/datetime/buttons/customizing-buttons/demo.html
deleted file mode 100644
index 4a8c8336daf..00000000000
--- a/static/usage/datetime/buttons/customizing-buttons/demo.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-        min-height: 400px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime>
-            <ion-buttons slot="buttons">
-              <ion-button color="danger" onclick="datetime.reset()">Reset</ion-button>
-              <ion-button color="primary" onclick="datetime.cancel()">Never mind</ion-button>
-              <ion-button color="primary" onclick="datetime.confirm()">All Set</ion-button>
-            </ion-buttons>
-          </ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const datetime = document.querySelector('ion-datetime');
-    </script>
-  </body>
-</html>
diff --git a/static/usage/datetime/buttons/customizing-buttons/index.md b/static/usage/datetime/buttons/customizing-buttons/index.md
deleted file mode 100644
index 717a132d9bf..00000000000
--- a/static/usage/datetime/buttons/customizing-buttons/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="500px" code={{ javascript, react, vue, angular }} src="usage/datetime/buttons/customizing-buttons/demo.html" />
diff --git a/static/usage/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/datetime/buttons/showing-confirmation-buttons/demo.html
deleted file mode 100644
index 20064262ab2..00000000000
--- a/static/usage/datetime/buttons/showing-confirmation-buttons/demo.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-        min-height: 400px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime show-default-buttons="true"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/datetime/buttons/showing-confirmation-buttons/index.md
deleted file mode 100644
index dd86cbf2ba9..00000000000
--- a/static/usage/datetime/buttons/showing-confirmation-buttons/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="500px" code={{ javascript, react, vue, angular }} src="usage/datetime/buttons/showing-confirmation-buttons/demo.html" />
diff --git a/static/usage/datetime/date-constraints/advanced/demo.html b/static/usage/datetime/date-constraints/advanced/demo.html
deleted file mode 100644
index 8182094c18f..00000000000
--- a/static/usage/datetime/date-constraints/advanced/demo.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const datetime = document.querySelector('ion-datetime');
-      datetime.isDateEnabled = (dateString) => {
-        const date = new Date(dateString);
-        const utcDay = date.getUTCDay();
-
-        /**
-         * Date will be enabled if it is not
-         * Sunday or Saturday
-         */
-        return utcDay !== 0 && utcDay !== 6;
-      }
-    </script>
-  </body>
-</html>
diff --git a/static/usage/datetime/date-constraints/advanced/index.md b/static/usage/datetime/date-constraints/advanced/index.md
deleted file mode 100644
index 4602dc8d77e..00000000000
--- a/static/usage/datetime/date-constraints/advanced/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="medium"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/datetime/date-constraints/advanced/demo.html"
-/>
diff --git a/static/usage/datetime/date-constraints/max-min/demo.html b/static/usage/datetime/date-constraints/max-min/demo.html
deleted file mode 100644
index cd05f162a8b..00000000000
--- a/static/usage/datetime/date-constraints/max-min/demo.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime
-            value="2022-04-21T00:00:00"
-            min="2022-03-01T00:00:00"
-            max="2022-05-31T23:59:59"
-          ></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/date-constraints/max-min/index.md b/static/usage/datetime/date-constraints/max-min/index.md
deleted file mode 100644
index a0a7e74db91..00000000000
--- a/static/usage/datetime/date-constraints/max-min/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/date-constraints/max-min/demo.html" />
diff --git a/static/usage/datetime/date-constraints/values/demo.html b/static/usage/datetime/date-constraints/values/demo.html
deleted file mode 100644
index 22e69d45598..00000000000
--- a/static/usage/datetime/date-constraints/values/demo.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime
-            minute-values="0,15,30,45"
-            day-values="5,10,15,20,25,30"
-          ></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/date-constraints/values/index.md b/static/usage/datetime/date-constraints/values/index.md
deleted file mode 100644
index 3e118e36784..00000000000
--- a/static/usage/datetime/date-constraints/values/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/date-constraints/values/demo.html" />
diff --git a/static/usage/datetime/localization/custom-locale/demo.html b/static/usage/datetime/localization/custom-locale/demo.html
deleted file mode 100644
index a8005d4084f..00000000000
--- a/static/usage/datetime/localization/custom-locale/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime locale="es-ES"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/localization/custom-locale/index.md b/static/usage/datetime/localization/custom-locale/index.md
deleted file mode 100644
index dd59dfca598..00000000000
--- a/static/usage/datetime/localization/custom-locale/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/localization/custom-locale/demo.html" />
diff --git a/static/usage/datetime/localization/first-day-of-week/demo.html b/static/usage/datetime/localization/first-day-of-week/demo.html
deleted file mode 100644
index c3e8bce680f..00000000000
--- a/static/usage/datetime/localization/first-day-of-week/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime first-day-of-week="1"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/localization/first-day-of-week/index.md b/static/usage/datetime/localization/first-day-of-week/index.md
deleted file mode 100644
index 1ae799b9464..00000000000
--- a/static/usage/datetime/localization/first-day-of-week/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/localization/first-day-of-week/demo.html" />
diff --git a/static/usage/datetime/localization/hour-cycle/demo.html b/static/usage/datetime/localization/hour-cycle/demo.html
deleted file mode 100644
index ac4bcd2b75b..00000000000
--- a/static/usage/datetime/localization/hour-cycle/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime locale="en-GB" hour-cycle="h12"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/localization/hour-cycle/index.md b/static/usage/datetime/localization/hour-cycle/index.md
deleted file mode 100644
index 35271fd3ffc..00000000000
--- a/static/usage/datetime/localization/hour-cycle/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/localization/hour-cycle/demo.html" />
diff --git a/static/usage/datetime/localization/locale-extension-tags/demo.html b/static/usage/datetime/localization/locale-extension-tags/demo.html
deleted file mode 100644
index d910d7bbbd6..00000000000
--- a/static/usage/datetime/localization/locale-extension-tags/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/localization/locale-extension-tags/index.md b/static/usage/datetime/localization/locale-extension-tags/index.md
deleted file mode 100644
index cc980310b5f..00000000000
--- a/static/usage/datetime/localization/locale-extension-tags/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/localization/locale-extension-tags/demo.html" />
diff --git a/static/usage/datetime/localization/time-label/demo.html b/static/usage/datetime/localization/time-label/demo.html
deleted file mode 100644
index c250f1c7a1a..00000000000
--- a/static/usage/datetime/localization/time-label/demo.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime locale="es-ES">
-            <span slot="time-label">Tiempo</span>
-          </ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/localization/time-label/index.md b/static/usage/datetime/localization/time-label/index.md
deleted file mode 100644
index 9cd4f17c0d8..00000000000
--- a/static/usage/datetime/localization/time-label/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/localization/time-label/demo.html" />
diff --git a/static/usage/datetime/multiple/demo.html b/static/usage/datetime/multiple/demo.html
deleted file mode 100644
index 863be7608b7..00000000000
--- a/static/usage/datetime/multiple/demo.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime presentation="date" multiple="true"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const datetime = document.querySelector('ion-datetime');
-      datetime.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
-    </script>
-  </body>
-</html>
diff --git a/static/usage/datetime/multiple/index.md b/static/usage/datetime/multiple/index.md
deleted file mode 100644
index d2cc9d79940..00000000000
--- a/static/usage/datetime/multiple/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/multiple/demo.html" />
diff --git a/static/usage/datetime/presentation/date/demo.html b/static/usage/datetime/presentation/date/demo.html
deleted file mode 100644
index 24c905ac4f3..00000000000
--- a/static/usage/datetime/presentation/date/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime presentation="date"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/presentation/date/index.md b/static/usage/datetime/presentation/date/index.md
deleted file mode 100644
index 51a7829b6aa..00000000000
--- a/static/usage/datetime/presentation/date/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/presentation/date/demo.html" />
diff --git a/static/usage/datetime/presentation/month-and-year/demo.html b/static/usage/datetime/presentation/month-and-year/demo.html
deleted file mode 100644
index cbb476d90a1..00000000000
--- a/static/usage/datetime/presentation/month-and-year/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime presentation="month-year"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/presentation/month-and-year/index.md b/static/usage/datetime/presentation/month-and-year/index.md
deleted file mode 100644
index d282bbf991e..00000000000
--- a/static/usage/datetime/presentation/month-and-year/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="240px" code={{ javascript, react, vue, angular }} src="usage/datetime/presentation/month-and-year/demo.html" />
diff --git a/static/usage/datetime/presentation/time/demo.html b/static/usage/datetime/presentation/time/demo.html
deleted file mode 100644
index 0d1ce4b1220..00000000000
--- a/static/usage/datetime/presentation/time/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime presentation="time"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/presentation/time/index.md b/static/usage/datetime/presentation/time/index.md
deleted file mode 100644
index 58e3af92946..00000000000
--- a/static/usage/datetime/presentation/time/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/datetime/presentation/time/demo.html" />
diff --git a/static/usage/datetime/presentation/wheel/demo.html b/static/usage/datetime/presentation/wheel/demo.html
deleted file mode 100644
index fa342c43da5..00000000000
--- a/static/usage/datetime/presentation/wheel/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime presentation="date-time" prefer-wheel="true"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/presentation/wheel/index.md b/static/usage/datetime/presentation/wheel/index.md
deleted file mode 100644
index c9a7e97de0b..00000000000
--- a/static/usage/datetime/presentation/wheel/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/presentation/wheel/demo.html" />
diff --git a/static/usage/datetime/theming/demo.html b/static/usage/datetime/theming/demo.html
deleted file mode 100644
index 0e724390955..00000000000
--- a/static/usage/datetime/theming/demo.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      :root,
-      .ios body.dark,
-      .md body.dark {
-        --ion-color-rose: #831843;
-        --ion-color-rose-rgb: 131,24,67;
-        --ion-color-rose-contrast: #ffffff;
-        --ion-color-rose-contrast-rgb: 255,255,255;
-        --ion-color-rose-shade: #73153b;
-        --ion-color-rose-tint: #8f2f56;
-
-        --ion-text-color: #881337;
-        --ion-text-color-rgb: 136,19,55;
-
-        --ion-color-step-50: #f9e6e9;
-        --ion-color-step-100: #f3dbdf;
-        --ion-color-step-150: #edd0d6;
-        --ion-color-step-200: #e7c5cd;
-        --ion-color-step-250: #e1bac3;
-        --ion-color-step-300: #dbaeba;
-        --ion-color-step-350: #d5a3b1;
-        --ion-color-step-400: #cf98a7;
-        --ion-color-step-450: #c98d9e;
-        --ion-color-step-500: #c48295;
-        --ion-color-step-550: #be778b;
-        --ion-color-step-600: #b86c82;
-        --ion-color-step-650: #b26178;
-        --ion-color-step-700: #ac566f;
-        --ion-color-step-750: #a64b66;
-        --ion-color-step-800: #a03f5c;
-        --ion-color-step-850: #9a3453;
-        --ion-color-step-900: #94294a;
-        --ion-color-step-950: #8e1e40;
-      }
-
-      .ion-color-rose {
-        --ion-color-base: var(--ion-color-rose);
-        --ion-color-base-rgb: var(--ion-color-rose-rgb);
-        --ion-color-contrast: var(--ion-color-rose-contrast);
-        --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-        --ion-color-shade: var(--ion-color-rose-shade);
-        --ion-color-tint: var(--ion-color-rose-tint);
-      }
-
-      ion-datetime {
-        --background: #fff1f2;
-        --background-rgb: 255,241,242;
-
-        width: 350px;
-
-        border-radius: 16px;
-        box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime color="rose"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/theming/index.md b/static/usage/datetime/theming/index.md
deleted file mode 100644
index df7b8bee7b6..00000000000
--- a/static/usage/datetime/theming/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_global_css from './angular/global_css.md';
-
-<Playground
-  size="450px"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
-      }
-    }
-  }}
-  src="usage/datetime/theming/demo.html"
-/>
diff --git a/static/usage/datetime/title/customizing-title/demo.html b/static/usage/datetime/title/customizing-title/demo.html
deleted file mode 100644
index c50cc5f3e47..00000000000
--- a/static/usage/datetime/title/customizing-title/demo.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime>
-            <span slot="title">Select a Reservation Date</span>
-          </ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/title/customizing-title/index.md b/static/usage/datetime/title/customizing-title/index.md
deleted file mode 100644
index 8e0b92db3be..00000000000
--- a/static/usage/datetime/title/customizing-title/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="large" code={{ javascript, react, vue, angular }} src="usage/datetime/title/customizing-title/demo.html" />
diff --git a/static/usage/datetime/title/showing-default-title/demo.html b/static/usage/datetime/title/showing-default-title/demo.html
deleted file mode 100644
index ccce24e351c..00000000000
--- a/static/usage/datetime/title/showing-default-title/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime show-default-title="true"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/datetime/title/showing-default-title/index.md b/static/usage/datetime/title/showing-default-title/index.md
deleted file mode 100644
index 7217eb55480..00000000000
--- a/static/usage/datetime/title/showing-default-title/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground size="large" code={{ javascript, react, vue, angular }} src="usage/datetime/title/showing-default-title/demo.html" />
diff --git a/static/usage/fab/basic/demo.html b/static/usage/fab/basic/demo.html
deleted file mode 100644
index ca6c7cb7f6a..00000000000
--- a/static/usage/fab/basic/demo.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Fab</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-fab>
-          <ion-fab-button>
-            <ion-icon name="add"></ion-icon>
-          </ion-fab-button>
-        </ion-fab>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/fab/basic/index.md b/static/usage/fab/basic/index.md
deleted file mode 100644
index 00f2df2dcfa..00000000000
--- a/static/usage/fab/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/fab/basic/demo.html" />
diff --git a/static/usage/fab/button-sizing/demo.html b/static/usage/fab/button-sizing/demo.html
deleted file mode 100644
index 624dce0207d..00000000000
--- a/static/usage/fab/button-sizing/demo.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Fab</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-fab>
-          <ion-fab-button size="small">
-            <ion-icon name="add"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-list side="end">
-            <ion-fab-button>
-              <ion-icon name="document"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="color-palette"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="globe"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/fab/button-sizing/index.md b/static/usage/fab/button-sizing/index.md
deleted file mode 100644
index 3f00b9e9e55..00000000000
--- a/static/usage/fab/button-sizing/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/fab/button-sizing/demo.html" />
diff --git a/static/usage/fab/list-side/demo.html b/static/usage/fab/list-side/demo.html
deleted file mode 100644
index 0d9413bfd4d..00000000000
--- a/static/usage/fab/list-side/demo.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Fab</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-fab slot="fixed" horizontal="center" vertical="center">
-          <ion-fab-button>
-            <ion-icon name="add"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-list side="top">
-            <ion-fab-button>
-              <ion-icon name="chevron-up"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-          <ion-fab-list side="end">
-            <ion-fab-button>
-              <ion-icon name="chevron-forward"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="chevron-forward"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-          <ion-fab-list side="bottom">
-            <ion-fab-button>
-              <ion-icon name="chevron-down"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-          <ion-fab-list side="start">
-            <ion-fab-button>
-              <ion-icon name="chevron-back"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="chevron-back"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/fab/list-side/index.md b/static/usage/fab/list-side/index.md
deleted file mode 100644
index 39a63819b92..00000000000
--- a/static/usage/fab/list-side/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/fab/list-side/demo.html" />
diff --git a/static/usage/fab/positioning/demo.html b/static/usage/fab/positioning/demo.html
deleted file mode 100644
index df8f32568f7..00000000000
--- a/static/usage/fab/positioning/demo.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Fab</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Fab Buttons</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-fab slot="fixed" vertical="top" horizontal="start">
-        <ion-fab-button>
-          <ion-icon name="chevron-forward-circle"></ion-icon>
-        </ion-fab-button>
-        <ion-fab-list side="end">
-          <ion-fab-button>
-            <ion-icon name="document"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="color-palette"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="globe"></ion-icon>
-          </ion-fab-button>
-        </ion-fab-list>
-      </ion-fab>
-
-      <ion-fab slot="fixed" vertical="top" horizontal="end" edge="true">
-        <ion-fab-button>
-          <ion-icon name="chevron-down-circle"></ion-icon>
-        </ion-fab-button>
-        <ion-fab-list side="bottom">
-          <ion-fab-button>
-            <ion-icon name="document"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="color-palette"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="globe"></ion-icon>
-          </ion-fab-button>
-        </ion-fab-list>
-      </ion-fab>
-      
-      <ion-fab slot="fixed" vertical="bottom" horizontal="end">
-        <ion-fab-button>
-          <ion-icon name="chevron-up-circle"></ion-icon>
-        </ion-fab-button>
-        <ion-fab-list side="top">
-          <ion-fab-button>
-            <ion-icon name="document"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="color-palette"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="globe"></ion-icon>
-          </ion-fab-button>
-        </ion-fab-list>
-      </ion-fab>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/fab/positioning/index.md b/static/usage/fab/positioning/index.md
deleted file mode 100644
index 67888a3d99c..00000000000
--- a/static/usage/fab/positioning/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/fab/positioning/demo.html" 
-  includeIonContent={false}
-  devicePreview={true}
-/>
diff --git a/static/usage/fab/theming/colors/demo.html b/static/usage/fab/theming/colors/demo.html
deleted file mode 100644
index a78606bcead..00000000000
--- a/static/usage/fab/theming/colors/demo.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Fab</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-fab slot="fixed" horizontal="center" vertical="center">
-          <ion-fab-button color="secondary">
-            <ion-icon name="add"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-list side="top">
-            <ion-fab-button color="primary">
-              <ion-icon name="chevron-up"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-          <ion-fab-list side="end">
-            <ion-fab-button color="tertiary">
-              <ion-icon name="chevron-forward"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button color="success">
-              <ion-icon name="chevron-forward"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-          <ion-fab-list side="bottom">
-            <ion-fab-button color="warning">
-              <ion-icon name="chevron-down"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-          <ion-fab-list side="start">
-            <ion-fab-button color="danger">
-              <ion-icon name="chevron-back"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button color="dark">
-              <ion-icon name="chevron-back"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/fab/theming/colors/index.md b/static/usage/fab/theming/colors/index.md
deleted file mode 100644
index 2c488459fee..00000000000
--- a/static/usage/fab/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/fab/theming/colors/demo.html" />
diff --git a/static/usage/fab/theming/css-custom-properties/demo.html b/static/usage/fab/theming/css-custom-properties/demo.html
deleted file mode 100644
index d2ffdb2d98e..00000000000
--- a/static/usage/fab/theming/css-custom-properties/demo.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Fab</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-fab-button {
-      --background: #b7f399;
-      --background-activated: #87d361;
-      --background-hover: #a3e681;
-      --border-radius: 15px;
-      --box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
-      --color: black;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-fab>
-          <ion-fab-button>
-            <ion-icon name="add"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-list side="end">
-            <ion-fab-button>
-              <ion-icon name="document"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="color-palette"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="globe"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/fab/theming/css-custom-properties/index.md b/static/usage/fab/theming/css-custom-properties/index.md
deleted file mode 100644
index 74dfb01faf9..00000000000
--- a/static/usage/fab/theming/css-custom-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{ 
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/fab/theming/css-custom-properties/demo.html"
-/>
diff --git a/static/usage/fab/theming/css-shadow-parts/demo.html b/static/usage/fab/theming/css-shadow-parts/demo.html
deleted file mode 100644
index 53997435f32..00000000000
--- a/static/usage/fab/theming/css-shadow-parts/demo.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Fab</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-fab-button::part(native) {
-      background-color: #b7f399;
-      border-radius: 15px;
-      box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
-      color: black;
-    }
-    
-    ion-fab-button::part(native):hover::after {
-      background-color: #a3e681;
-    }
-
-    ion-fab-button::part(native):active::after {
-      background-color: #87d361;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-fab>
-          <ion-fab-button>
-            <ion-icon name="add"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-list side="end">
-            <ion-fab-button>
-              <ion-icon name="document"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="color-palette"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="globe"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/fab/theming/css-shadow-parts/index.md b/static/usage/fab/theming/css-shadow-parts/index.md
deleted file mode 100644
index 7b7ab14b85d..00000000000
--- a/static/usage/fab/theming/css-shadow-parts/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{ 
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/fab/theming/css-shadow-parts/demo.html"
-/>
diff --git a/static/usage/footer/basic/demo.html b/static/usage/footer/basic/demo.html
deleted file mode 100644
index 607e8c19348..00000000000
--- a/static/usage/footer/basic/demo.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Footer</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <h1>Content</h1>
-    </ion-content>
-    <ion-footer>
-      <ion-toolbar>
-        <ion-title>Footer</ion-title>
-      </ion-toolbar>
-    </ion-footer>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/footer/basic/index.md b/static/usage/footer/basic/index.md
deleted file mode 100644
index 911217ed217..00000000000
--- a/static/usage/footer/basic/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/footer/basic/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/footer/custom-scroll-target/demo.html b/static/usage/footer/custom-scroll-target/demo.html
deleted file mode 100644
index cebbbd8d25c..00000000000
--- a/static/usage/footer/custom-scroll-target/demo.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Footer</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .ion-content-scroll-host {
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      height: 100%;
-      width: 100%;
-      overflow-y: auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content scroll-y="false">
-      <div class="ion-content-scroll-host ion-padding">
-        <h1>Animal Facts</h1>
-
-        <h2>Rhinoceros</h2>
-        <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
-
-        <h2>Sea Turtle</h2>
-        <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
-        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
-
-        <h2>Giraffe</h2>
-        <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
-        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
-
-        <h2>Elephant</h2>
-        <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
-        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
-
-        <h2>Dolphin</h2>
-        <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
-      </div>
-    </ion-content>
-    <ion-footer collapse="fade">
-      <ion-toolbar>
-        <ion-title>Footer</ion-title>
-      </ion-toolbar>
-    </ion-footer>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/footer/custom-scroll-target/index.md b/static/usage/footer/custom-scroll-target/index.md
deleted file mode 100644
index 5bb19036514..00000000000
--- a/static/usage/footer/custom-scroll-target/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/footer/custom-scroll-target/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/footer/fade/demo.html b/static/usage/footer/fade/demo.html
deleted file mode 100644
index a131c51b4f4..00000000000
--- a/static/usage/footer/fade/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Footer</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <h1>Animal Facts</h1>
-
-      <h2>Rhinoceros</h2>
-      <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
-
-      <h2>Sea Turtle</h2>
-      <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
-      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
-
-      <h2>Giraffe</h2>
-      <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
-      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
-
-      <h2>Elephant</h2>
-      <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
-      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
-
-      <h2>Dolphin</h2>
-      <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
-    </ion-content>
-    <ion-footer collapse="fade">
-      <ion-toolbar>
-        <ion-title>Footer</ion-title>
-      </ion-toolbar>
-    </ion-footer>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/footer/fade/index.md b/static/usage/footer/fade/index.md
deleted file mode 100644
index 82d28edd2d0..00000000000
--- a/static/usage/footer/fade/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/footer/fade/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/footer/no-border/demo.html b/static/usage/footer/no-border/demo.html
deleted file mode 100644
index 7768a3d2c4f..00000000000
--- a/static/usage/footer/no-border/demo.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Footer</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <h1>Content</h1>
-    </ion-content>
-    <ion-footer class="ion-no-border">
-      <ion-toolbar>
-        <ion-title>Footer</ion-title>
-      </ion-toolbar>
-    </ion-footer>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/footer/no-border/index.md b/static/usage/footer/no-border/index.md
deleted file mode 100644
index f4957db5df3..00000000000
--- a/static/usage/footer/no-border/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/footer/no-border/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/footer/translucent/demo.html b/static/usage/footer/translucent/demo.html
deleted file mode 100644
index 46f24df4035..00000000000
--- a/static/usage/footer/translucent/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Footer</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content fullscreen="true" class="ion-padding">
-      <h1>Animal Facts</h1>
-
-      <h2>Rhinoceros</h2>
-      <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
-
-      <h2>Sea Turtle</h2>
-      <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
-      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
-
-      <h2>Giraffe</h2>
-      <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
-      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
-
-      <h2>Elephant</h2>
-      <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
-      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
-
-      <h2>Dolphin</h2>
-      <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
-    </ion-content>
-    <ion-footer translucent="true">
-      <ion-toolbar>
-        <ion-title>Footer</ion-title>
-      </ion-toolbar>
-    </ion-footer>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/footer/translucent/index.md b/static/usage/footer/translucent/index.md
deleted file mode 100644
index 320250ab0b6..00000000000
--- a/static/usage/footer/translucent/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/footer/translucent/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/grid/basic/demo.html b/static/usage/grid/basic/demo.html
deleted file mode 100644
index 7775696c8a6..00000000000
--- a/static/usage/grid/basic/demo.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col>2</ion-col>
-            <ion-col>3</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col>2</ion-col>
-            <ion-col>3</ion-col>
-            <ion-col>4</ion-col>
-            <ion-col>5</ion-col>
-            <ion-col>6</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col>2</ion-col>
-            <ion-col>3</ion-col>
-            <ion-col>4</ion-col>
-            <ion-col>5</ion-col>
-            <ion-col>6</ion-col>
-            <ion-col>7</ion-col>
-            <ion-col>8</ion-col>
-            <ion-col>9</ion-col>
-            <ion-col>10</ion-col>
-            <ion-col>11</ion-col>
-            <ion-col>12</ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/basic/index.md b/static/usage/grid/basic/index.md
deleted file mode 100644
index 62ae5e280dd..00000000000
--- a/static/usage/grid/basic/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/basic/demo.html"
-  size="200px"
-/>
diff --git a/static/usage/grid/customizing/column-number/demo.html b/static/usage/grid/customizing/column-number/demo.html
deleted file mode 100644
index 6fcad9a9138..00000000000
--- a/static/usage/grid/customizing/column-number/demo.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-
-      --ion-grid-columns: 6;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <b>Total number of columns is set to <code>6</code>, column <code>size</code> is set to <code>1</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="1">1</ion-col>
-            <ion-col size="1">2</ion-col>
-            <ion-col size="1">3</ion-col>
-            <ion-col size="1">4</ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/customizing/column-number/index.md b/static/usage/grid/customizing/column-number/index.md
deleted file mode 100644
index 6ca863e8ef0..00000000000
--- a/static/usage/grid/customizing/column-number/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/customizing/column-number/demo.html"
-  size="100px"
-/>
diff --git a/static/usage/grid/customizing/padding/demo.html b/static/usage/grid/customizing/padding/demo.html
deleted file mode 100644
index 3c8b2144e8f..00000000000
--- a/static/usage/grid/customizing/padding/demo.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-
-      --ion-grid-padding: 20px;
-
-      --ion-grid-padding-xs: 20px;
-      --ion-grid-padding-sm: 20px;
-      --ion-grid-padding-md: 20px;
-      --ion-grid-padding-lg: 20px;
-      --ion-grid-padding-xl: 20px;
-
-      --ion-grid-column-padding: 30px;
-
-      --ion-grid-column-padding-xs: 30px;
-      --ion-grid-column-padding-sm: 30px;
-      --ion-grid-column-padding-md: 30px;
-      --ion-grid-column-padding-lg: 30px;
-      --ion-grid-column-padding-xl: 30px;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col>2</ion-col>
-            <ion-col>3</ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/customizing/padding/index.md b/static/usage/grid/customizing/padding/index.md
deleted file mode 100644
index 3e5d034e24d..00000000000
--- a/static/usage/grid/customizing/padding/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/customizing/padding/demo.html"
-  size="150px"
-/>
diff --git a/static/usage/grid/customizing/width/demo.html b/static/usage/grid/customizing/width/demo.html
deleted file mode 100644
index eed95fa7ed4..00000000000
--- a/static/usage/grid/customizing/width/demo.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      flex-grow: 0;
-
-      --ion-grid-width: 50%;
-
-      --ion-grid-width-xs: 50%;
-      --ion-grid-width-sm: 288px;
-      --ion-grid-width-md: 384px;
-      --ion-grid-width-lg: 480px;
-      --ion-grid-width-xl: 570px;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-grid fixed="true">
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col>2</ion-col>
-            <ion-col>3</ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/customizing/width/index.md b/static/usage/grid/customizing/width/index.md
deleted file mode 100644
index ce4d73d2795..00000000000
--- a/static/usage/grid/customizing/width/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/customizing/width/demo.html"
-  size="100px"
-/>
diff --git a/static/usage/grid/fixed/demo.html b/static/usage/grid/fixed/demo.html
deleted file mode 100644
index 657128ee8b8..00000000000
--- a/static/usage/grid/fixed/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      flex-grow: 0;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-grid fixed="true">
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col>2</ion-col>
-            <ion-col>3</ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/fixed/index.md b/static/usage/grid/fixed/index.md
deleted file mode 100644
index 736e08b3a6a..00000000000
--- a/static/usage/grid/fixed/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/fixed/demo.html"
-  size="100px"
-/>
diff --git a/static/usage/grid/horizontal-alignment/demo.html b/static/usage/grid/horizontal-alignment/demo.html
deleted file mode 100644
index 5205761b718..00000000000
--- a/static/usage/grid/horizontal-alignment/demo.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <b>Columns aligned at the start</b>
-        <ion-grid>
-          <ion-row class="ion-justify-content-start">
-            <ion-col size="3">
-              1
-            </ion-col>
-            <ion-col size="3">
-              2
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Columns aligned at the center</b>
-        <ion-grid>
-          <ion-row class="ion-justify-content-center">
-            <ion-col size="3">
-              1
-            </ion-col>
-            <ion-col size="3">
-              2
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Columns aligned at the end</b>
-        <ion-grid>
-          <ion-row class="ion-justify-content-end">
-            <ion-col size="3">
-              1
-            </ion-col>
-            <ion-col size="3">
-              2
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Columns aligned with space around</b>
-        <ion-grid>
-          <ion-row class="ion-justify-content-around">
-            <ion-col size="3">
-              1
-            </ion-col>
-            <ion-col size="3">
-              2
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Columns aligned with space between</b>
-        <ion-grid>
-          <ion-row class="ion-justify-content-between">
-            <ion-col size="3">
-              1
-            </ion-col>
-            <ion-col size="3">
-              2
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/horizontal-alignment/index.md b/static/usage/grid/horizontal-alignment/index.md
deleted file mode 100644
index 81f91713388..00000000000
--- a/static/usage/grid/horizontal-alignment/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/horizontal-alignment/demo.html"
-  size="400px"
-/>
diff --git a/static/usage/grid/offset-responsive/demo.html b/static/usage/grid/offset-responsive/demo.html
deleted file mode 100644
index 8f0a0a5bd49..00000000000
--- a/static/usage/grid/offset-responsive/demo.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <b>No offset for xs breakpoint, offset 1st column for sm and up</b>
-        <ion-grid>
-          <ion-row>
-            <ion-col offset-sm="2">1</ion-col>
-            <ion-col>2</ion-col>
-            <ion-col>3</ion-col>
-            <ion-col>4</ion-col>
-            <ion-col>5</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>No offset for xs breakpoint, offset last 3 columns for md and up</b>
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col offset-md="2">2</ion-col>
-            <ion-col offset-md="2">3</ion-col>
-            <ion-col offset-md="2">4</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up</b>
-        <ion-grid>
-          <ion-row>
-            <ion-col offset="6" offset-md="4" offset-lg="2">1</ion-col>
-            <ion-col offset="6" offset-md="4" offset-lg="2">2</ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/offset-responsive/index.md b/static/usage/grid/offset-responsive/index.md
deleted file mode 100644
index 6db22599d2c..00000000000
--- a/static/usage/grid/offset-responsive/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/offset-responsive/demo.html"
-  size="250px"
-/>
diff --git a/static/usage/grid/offset/demo.html b/static/usage/grid/offset/demo.html
deleted file mode 100644
index 58221a7c439..00000000000
--- a/static/usage/grid/offset/demo.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <b>Column 2 has <code>offset</code> set to <code>"3"</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col offset="3">2</ion-col>
-            <ion-col>3</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Column 5 has <code>offset</code> set to <code>"2"</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col>2</ion-col>
-            <ion-col>3</ion-col>
-            <ion-col>4</ion-col>
-            <ion-col offset="2">5</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Column 1 has <code>offset</code> set to <code>"4"</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="2" offset="4">1</ion-col>
-            <ion-col size="2">2</ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/offset/index.md b/static/usage/grid/offset/index.md
deleted file mode 100644
index c22ac6c7af2..00000000000
--- a/static/usage/grid/offset/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/offset/demo.html"
-  size="200px"
-/>
diff --git a/static/usage/grid/push-pull-responsive/demo.html b/static/usage/grid/push-pull-responsive/demo.html
deleted file mode 100644
index eef68845370..00000000000
--- a/static/usage/grid/push-pull-responsive/demo.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <b>No change for xs breakpoint, push 1st column & pull 2nd column for sm and up</b>
-        <ion-grid>
-          <ion-row>
-            <ion-col push-sm="6">1</ion-col>
-            <ion-col pull-sm="6">2</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>No change for xs breakpoint, push middle columns & pull last column for md and up</b>
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col push-md="3">2</ion-col>
-            <ion-col push-md="3">3</ion-col>
-            <ion-col pull-md="6">4</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up</b>
-        <ion-grid>
-          <ion-row>
-            <ion-col push="6" push-lg="10">1</ion-col>
-            <ion-col push="6" push-lg="6">2</ion-col>
-            <ion-col push="6" push-lg="2">3</ion-col>
-            <ion-col pull="6" pull-lg="2">4</ion-col>
-            <ion-col pull="6" pull-lg="6">5</ion-col>
-            <ion-col pull="6" pull-lg="10">6</ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/push-pull-responsive/index.md b/static/usage/grid/push-pull-responsive/index.md
deleted file mode 100644
index e8d34050cc9..00000000000
--- a/static/usage/grid/push-pull-responsive/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/push-pull-responsive/demo.html"
-  size="200px"
-/>
diff --git a/static/usage/grid/push-pull/demo.html b/static/usage/grid/push-pull/demo.html
deleted file mode 100644
index 348826166b1..00000000000
--- a/static/usage/grid/push-pull/demo.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <b>Column 1 has <code>push</code> set to <code>"4"</code> and column 2 has <code>pull</code> set to <code>"4"</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col push="4">1</ion-col>
-            <ion-col pull="4">2</ion-col>
-            <ion-col>3</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Column 2 has <code>push</code> set to <code>"4"</code> and column 3 & 4 have <code>pull</code> set to <code>"2"</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col push="4">2</ion-col>
-            <ion-col pull="2">3</ion-col>
-            <ion-col pull="2">4</ion-col>
-            <ion-col>5</ion-col>
-            <ion-col>6</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Column 1 has <code>push</code> set to <code>"3"</code> and column 2 has <code>pull</code> set to <code>"9"</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="9" push="3">1</ion-col>
-            <ion-col size="3" pull="9">2</ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/push-pull/index.md b/static/usage/grid/push-pull/index.md
deleted file mode 100644
index 2bc21effee0..00000000000
--- a/static/usage/grid/push-pull/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/push-pull/demo.html"
-  size="200px"
-/>
diff --git a/static/usage/grid/size-auto/demo.html b/static/usage/grid/size-auto/demo.html
deleted file mode 100644
index 1ace03d7c20..00000000000
--- a/static/usage/grid/size-auto/demo.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
-
-    ion-col {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <b>Column 1 has <code>size</code> set to <code>"auto"</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="auto">1</ion-col>
-            <ion-col>2</ion-col>
-            <ion-col>3</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Column 3 contains an input and has <code>size</code> set to <code>"auto"</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col>2</ion-col>
-            <ion-col size="auto">
-              <ion-input placeholder="3"></ion-input>
-            </ion-col>
-            <ion-col>4</ion-col>
-            <ion-col>5</ion-col>
-            <ion-col>6</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Column 2 has <code>size</code> set to <code>"auto"</code> and a defined width</b>
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col size="auto">
-              <div style="width: 150px">2</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/size-auto/index.md b/static/usage/grid/size-auto/index.md
deleted file mode 100644
index 28ff5a74d0f..00000000000
--- a/static/usage/grid/size-auto/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/size-auto/demo.html"
-  size="250px"
-/>
diff --git a/static/usage/grid/size-responsive/demo.html b/static/usage/grid/size-responsive/demo.html
deleted file mode 100644
index 87787f4b90c..00000000000
--- a/static/usage/grid/size-responsive/demo.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <b>Stacked for xs breakpoint, equal width for sm and up</b>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="12" size-sm="3">1</ion-col>
-            <ion-col size="12" size-sm="3">2</ion-col>
-            <ion-col size="12" size-sm="3">3</ion-col>
-            <ion-col size="12" size-sm="3">4</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Equal width until md breakpoint, last column takes full width for md and up</b>
-        <ion-grid>
-          <ion-row>
-            <ion-col size-md="6">1</ion-col>
-            <ion-col size-md="6">2</ion-col>
-            <ion-col size-md="12">3</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>2 per row until md breakpoint, 3 per row for md, equal width for lg and up</b>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="6" size-md="4" size-lg="2">1</ion-col>
-            <ion-col size="6" size-md="4" size-lg="2">2</ion-col>
-            <ion-col size="6" size-md="4" size-lg="2">3</ion-col>
-            <ion-col size="6" size-md="4" size-lg="2">4</ion-col>
-            <ion-col size="6" size-md="4" size-lg="2">5</ion-col>
-            <ion-col size="6" size-md="4" size-lg="2">6</ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/size-responsive/index.md b/static/usage/grid/size-responsive/index.md
deleted file mode 100644
index 4ae6a22c632..00000000000
--- a/static/usage/grid/size-responsive/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/size-responsive/demo.html"
-  size="250px"
-/>
diff --git a/static/usage/grid/size/demo.html b/static/usage/grid/size/demo.html
deleted file mode 100644
index 09e937fc0b5..00000000000
--- a/static/usage/grid/size/demo.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <b>Column 2 has <code>size</code> set to <code>"8"</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col size="8">2</ion-col>
-            <ion-col>3</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Columns 3 & 4 have <code>size</code> set to <code>"3"</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col>1</ion-col>
-            <ion-col>2</ion-col>
-            <ion-col size="3">3</ion-col>
-            <ion-col size="3">4</ion-col>
-            <ion-col>5</ion-col>
-            <ion-col>6</ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Columns 1 & 2 have <code>size</code> set to <code>"4"</code></b>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="4">1</ion-col>
-            <ion-col size="4">2</ion-col>
-          </ion-row>
-        </ion-grid>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/size/index.md b/static/usage/grid/size/index.md
deleted file mode 100644
index d05cce878d9..00000000000
--- a/static/usage/grid/size/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/size/demo.html"
-  size="200px"
-/>
diff --git a/static/usage/grid/vertical-alignment/demo.html b/static/usage/grid/vertical-alignment/demo.html
deleted file mode 100644
index 2cbe7d030af..00000000000
--- a/static/usage/grid/vertical-alignment/demo.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Grid</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
-
-    ion-col {
-      background-color: #135d54;
-      border: solid 1px #fff;
-      color: #fff;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <b>Columns aligned at the top</b>
-        <ion-grid>
-          <ion-row class="ion-align-items-start">
-            <ion-col>
-              1
-            </ion-col>
-            <ion-col>
-              2
-            </ion-col>
-            <ion-col>
-              3
-            </ion-col>
-            <ion-col>
-              4 <br />
-              # <br />
-              # <br />
-              # <br />
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Columns aligned at the center</b>
-        <ion-grid>
-          <ion-row class="ion-align-items-center">
-            <ion-col>
-              1
-            </ion-col>
-            <ion-col>
-              2
-            </ion-col>
-            <ion-col>
-              3
-            </ion-col>
-            <ion-col>
-              4 <br />
-              # <br />
-              # <br />
-              # <br />
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <b>Columns aligned at the bottom</b>
-        <ion-grid>
-          <ion-row class="ion-align-items-end">
-            <ion-col>
-              1
-            </ion-col>
-            <ion-col>
-              2
-            </ion-col>
-            <ion-col>
-              3
-            </ion-col>
-            <ion-col>
-              4 <br />
-              # <br />
-              # <br />
-              # <br />
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/grid/vertical-alignment/index.md b/static/usage/grid/vertical-alignment/index.md
deleted file mode 100644
index bda8baaf99e..00000000000
--- a/static/usage/grid/vertical-alignment/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/grid/vertical-alignment/demo.html"
-  size="400px"
-/>
diff --git a/static/usage/header/basic/demo.html b/static/usage/header/basic/demo.html
deleted file mode 100644
index bb0b02bcb02..00000000000
--- a/static/usage/header/basic/demo.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Header</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Header</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <h1>Content</h1>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/header/basic/index.md b/static/usage/header/basic/index.md
deleted file mode 100644
index c8cfd97baac..00000000000
--- a/static/usage/header/basic/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/header/basic/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/header/condense/demo.html b/static/usage/header/condense/demo.html
deleted file mode 100644
index bdb2348ae60..00000000000
--- a/static/usage/header/condense/demo.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Header</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header translucent="true">
-      <ion-toolbar>
-        <ion-title>Header</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Header</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <div class="ion-padding">
-        <h1>Animal Facts</h1>
-
-        <h2>Rhinoceros</h2>
-        <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
-
-        <h2>Sea Turtle</h2>
-        <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
-        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
-
-        <h2>Giraffe</h2>
-        <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
-        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
-
-        <h2>Elephant</h2>
-        <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
-        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
-
-        <h2>Dolphin</h2>
-        <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/header/condense/index.md b/static/usage/header/condense/index.md
deleted file mode 100644
index b69e31dbefd..00000000000
--- a/static/usage/header/condense/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/header/condense/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/header/custom-scroll-target/demo.html b/static/usage/header/custom-scroll-target/demo.html
deleted file mode 100644
index 9422c928694..00000000000
--- a/static/usage/header/custom-scroll-target/demo.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Header</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .ion-content-scroll-host {
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      height: 100%;
-      width: 100%;
-      overflow-y: auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header collapse="fade">
-      <ion-toolbar>
-        <ion-title>Header</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content scroll-y="false">
-      <div class="ion-content-scroll-host ion-padding">
-        <h1>Animal Facts</h1>
-
-        <h2>Rhinoceros</h2>
-        <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
-
-        <h2>Sea Turtle</h2>
-        <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
-        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
-
-        <h2>Giraffe</h2>
-        <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
-        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
-
-        <h2>Elephant</h2>
-        <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
-        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
-
-        <h2>Dolphin</h2>
-        <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/header/custom-scroll-target/index.md b/static/usage/header/custom-scroll-target/index.md
deleted file mode 100644
index a81bcadf5d6..00000000000
--- a/static/usage/header/custom-scroll-target/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/header/custom-scroll-target/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/header/fade/demo.html b/static/usage/header/fade/demo.html
deleted file mode 100644
index 402be861b51..00000000000
--- a/static/usage/header/fade/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Header</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header collapse="fade">
-      <ion-toolbar>
-        <ion-title>Header</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <h1>Animal Facts</h1>
-
-      <h2>Rhinoceros</h2>
-      <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
-
-      <h2>Sea Turtle</h2>
-      <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
-      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
-
-      <h2>Giraffe</h2>
-      <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
-      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
-
-      <h2>Elephant</h2>
-      <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
-      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
-
-      <h2>Dolphin</h2>
-      <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/header/fade/index.md b/static/usage/header/fade/index.md
deleted file mode 100644
index 3f116bb6e05..00000000000
--- a/static/usage/header/fade/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/header/fade/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/header/no-border/demo.html b/static/usage/header/no-border/demo.html
deleted file mode 100644
index e7502db9b80..00000000000
--- a/static/usage/header/no-border/demo.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Header</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header class="ion-no-border">
-      <ion-toolbar>
-        <ion-title>Header</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <h1>Content</h1>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/header/no-border/index.md b/static/usage/header/no-border/index.md
deleted file mode 100644
index 71bdc4a6296..00000000000
--- a/static/usage/header/no-border/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/header/no-border/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/header/translucent/demo.html b/static/usage/header/translucent/demo.html
deleted file mode 100644
index 7fae6338972..00000000000
--- a/static/usage/header/translucent/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Header</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header translucent="true">
-      <ion-toolbar>
-        <ion-title>Header</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content fullscreen="true" class="ion-padding">
-      <h1>Animal Facts</h1>
-
-      <h2>Rhinoceros</h2>
-      <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
-
-      <h2>Sea Turtle</h2>
-      <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
-      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
-
-      <h2>Giraffe</h2>
-      <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
-      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
-
-      <h2>Elephant</h2>
-      <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
-      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
-
-      <h2>Dolphin</h2>
-      <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
-      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/header/translucent/index.md b/static/usage/header/translucent/index.md
deleted file mode 100644
index dcdc0cb3684..00000000000
--- a/static/usage/header/translucent/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/header/translucent/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/img/basic/demo.html b/static/usage/img/basic/demo.html
deleted file mode 100644
index b34c53899cb..00000000000
--- a/static/usage/img/basic/demo.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Image</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-img {
-      width: 300px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-img src="https://docs-demo.ionic.io/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/img/basic/index.md b/static/usage/img/basic/index.md
deleted file mode 100644
index 91b78134171..00000000000
--- a/static/usage/img/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/img/basic/demo.html" />
diff --git a/static/usage/infinite-scroll/basic/demo.html b/static/usage/infinite-scroll/basic/demo.html
deleted file mode 100644
index 4d27874696c..00000000000
--- a/static/usage/infinite-scroll/basic/demo.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Infinite Scroll</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <ion-list></ion-list>
-      <ion-infinite-scroll>
-        <ion-infinite-scroll-content></ion-infinite-scroll-content>
-      </ion-infinite-scroll>
-    </ion-content>
-  </ion-app>
-  <script>
-    const infiniteScroll = document.querySelector('ion-infinite-scroll');
-    infiniteScroll.addEventListener('ionInfinite', (event) => {
-      setTimeout(() => {
-        generateItems();
-        event.target.complete();
-      }, 500);
-    });
-
-    const list = document.querySelector('ion-list');
-
-    function generateItems() {
-      const count = list.childElementCount + 1;
-      const total = count + 50;
-      for (let i = count; i < total; i++) {
-        const el = document.createElement('ion-item');
-
-        const avatar = document.createElement('ion-avatar');
-        avatar.slot = 'start';
-        const img = document.createElement('img');
-        img.src = `https://picsum.photos/80/80?random=${i}`;
-        img.alt = 'Avatar';
-
-        avatar.appendChild(img);
-        el.appendChild(avatar);
-
-        const text = document.createElement('ion-label');
-        text.textContent = `Item ${i}`;
-
-        el.appendChild(text);
-
-        list.appendChild(el);
-      }
-    }
-
-    generateItems();
-
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/infinite-scroll/basic/index.md b/static/usage/infinite-scroll/basic/index.md
deleted file mode 100644
index 95ac3b6be82..00000000000
--- a/static/usage/infinite-scroll/basic/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/infinite-scroll/basic/demo.html"
-/>
diff --git a/static/usage/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/infinite-scroll/custom-infinite-scroll-content/demo.html
deleted file mode 100644
index 03a1ac49951..00000000000
--- a/static/usage/infinite-scroll/custom-infinite-scroll-content/demo.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Infinite Scroll</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    svg {
-      width: 20px;
-      height: 20px;
-      display: inline-block;
-    }
-
-    .infinite-scroll-content {
-      text-align: center;
-      padding: 20px 0;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <ion-list></ion-list>
-      <ion-infinite-scroll>
-        <div class="infinite-scroll-content">
-          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-            y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
-            <circle fill="none" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
-            <line fill="none" stroke-linecap="round" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" x1="50"
-              y1="50" x2="85" y2="50.5">
-              <animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 50" to="360 50 50"
-                repeatCount="indefinite" />
-            </line>
-            <line fill="none" stroke-linecap="round" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" x1="50"
-              y1="50" x2="49.5" y2="74">
-              <animateTransform attributeName="transform" dur="15s" type="rotate" from="0 50 50" to="360 50 50"
-                repeatCount="indefinite" />
-            </line>
-          </svg>
-        </div>
-      </ion-infinite-scroll>
-    </ion-content>
-  </ion-app>
-  <script>
-    const list = document.querySelector('ion-list');
-
-    function generateItems() {
-      const count = list.childElementCount + 1;
-      const total = count + 50;
-      for (let i = count; i < total; i++) {
-        const el = document.createElement('ion-item');
-
-        const avatar = document.createElement('ion-avatar');
-        avatar.slot = 'start';
-        const img = document.createElement('img');
-        img.src = `https://picsum.photos/80/80?random=${i}`;
-        img.alt = 'Avatar';
-
-        avatar.appendChild(img);
-        el.appendChild(avatar);
-
-        const text = document.createElement('ion-label');
-        text.textContent = `Item ${i}`;
-
-        el.appendChild(text);
-
-        list.appendChild(el);
-      }
-    }
-
-    generateItems();
-
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/infinite-scroll/custom-infinite-scroll-content/index.md
deleted file mode 100644
index 0ab9675d976..00000000000
--- a/static/usage/infinite-scroll/custom-infinite-scroll-content/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/infinite-scroll/custom-infinite-scroll-content/demo.html"
-/>
diff --git a/static/usage/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/infinite-scroll/infinite-scroll-content/demo.html
deleted file mode 100644
index fd833a90d1c..00000000000
--- a/static/usage/infinite-scroll/infinite-scroll-content/demo.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Infinite Scroll</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <ion-list></ion-list>
-      <ion-infinite-scroll>
-        <ion-infinite-scroll-content loading-text="Please wait..." loading-spinner="bubbles">
-        </ion-infinite-scroll-content>
-      </ion-infinite-scroll>
-    </ion-content>
-  </ion-app>
-  <script>
-    const list = document.querySelector('ion-list');
-
-    function generateItems() {
-      const count = list.childElementCount + 1;
-      const total = count + 50;
-      for (let i = count; i < total; i++) {
-        const el = document.createElement('ion-item');
-
-        const avatar = document.createElement('ion-avatar');
-        avatar.slot = 'start';
-        const img = document.createElement('img');
-        img.src = `https://picsum.photos/80/80?random=${i}`;
-        img.alt = 'Avatar';
-
-        avatar.appendChild(img);
-        el.appendChild(avatar);
-
-        const text = document.createElement('ion-label');
-        text.textContent = `Item ${i}`;
-
-        el.appendChild(text);
-
-        list.appendChild(el);
-      }
-    }
-
-    generateItems();
-
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/infinite-scroll/infinite-scroll-content/index.md b/static/usage/infinite-scroll/infinite-scroll-content/index.md
deleted file mode 100644
index e6786d3cd21..00000000000
--- a/static/usage/infinite-scroll/infinite-scroll-content/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/infinite-scroll/infinite-scroll-content/demo.html"
-/>
diff --git a/static/usage/input/basic/demo.html b/static/usage/input/basic/demo.html
deleted file mode 100644
index 348671b3bc6..00000000000
--- a/static/usage/input/basic/demo.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Input</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-label>Default input</ion-label>
-            <ion-input></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Input with placeholder</ion-label>
-            <ion-input placeholder="Enter company name"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Input with value</ion-label>
-            <ion-input value="121 S Pinckney St #300"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Readonly input</ion-label>
-            <ion-input value="Madison" readonly="true"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Disabled input</ion-label>
-            <ion-input value="53703" disabled="true"></ion-input>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/input/basic/index.md b/static/usage/input/basic/index.md
deleted file mode 100644
index 0e811417781..00000000000
--- a/static/usage/input/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/input/basic/demo.html" size="300px" />
diff --git a/static/usage/input/clear/demo.html b/static/usage/input/clear/demo.html
deleted file mode 100644
index 455da68cc85..00000000000
--- a/static/usage/input/clear/demo.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Input</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-label position="stacked">Input with clear button</ion-label>
-            <ion-input clear-input="true" placeholder="Enter text to see clear button" value="Default value"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label position="stacked">Input with clear on edit</ion-label>
-            <ion-input clear-on-edit="true" placeholder="Enter text, leave the input, come back and type to clear"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label position="stacked">Password input</ion-label>
-            <ion-input type="password" placeholder="Enter text, leave the input, come back and type to clear"></ion-input>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/input/clear/index.md b/static/usage/input/clear/index.md
deleted file mode 100644
index f4d564a268f..00000000000
--- a/static/usage/input/clear/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/input/clear/demo.html" size="250px" />
diff --git a/static/usage/input/fill/demo.html b/static/usage/input/fill/demo.html
deleted file mode 100644
index e95ac42d6ab..00000000000
--- a/static/usage/input/fill/demo.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Input</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-label position="floating">Default input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item fill="solid">
-          <ion-label position="floating">Solid input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item fill="outline">
-          <ion-label position="floating">Outline input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/input/fill/index.md b/static/usage/input/fill/index.md
deleted file mode 100644
index ef05620d86c..00000000000
--- a/static/usage/input/fill/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/input/fill/demo.html" size="250px" />
diff --git a/static/usage/input/labels/demo.html b/static/usage/input/labels/demo.html
deleted file mode 100644
index 7122947268b..00000000000
--- a/static/usage/input/labels/demo.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Input</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-label>Default label</ion-label>
-            <ion-input placeholder="Enter text"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label position="fixed">Fixed label</ion-label>
-            <ion-input placeholder="Enter text"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label position="stacked">Stacked label</ion-label>
-            <ion-input placeholder="Enter text"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label position="floating">Floating label</ion-label>
-            <ion-input placeholder="Enter text"></ion-input>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/input/labels/index.md b/static/usage/input/labels/index.md
deleted file mode 100644
index 32749379f5d..00000000000
--- a/static/usage/input/labels/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/input/labels/demo.html" size="300px" />
diff --git a/static/usage/input/theming/colors/demo.html b/static/usage/input/theming/colors/demo.html
deleted file mode 100644
index 8051cb2dce9..00000000000
--- a/static/usage/input/theming/colors/demo.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Input</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-      flex-wrap: wrap;
-    }
-
-    .container ion-input {
-      flex: 1 1 33%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-input color="primary" placeholder="Primary input"></ion-input>
-        <ion-input color="secondary" placeholder="Secondary input"></ion-input>
-        <ion-input color="tertiary" placeholder="Tertiary input"></ion-input>
-        <ion-input color="success" placeholder="Success input"></ion-input>
-        <ion-input color="warning" placeholder="Warning input"></ion-input>
-        <ion-input color="danger" placeholder="Danger input"></ion-input>
-        <ion-input color="light" placeholder="Light input"></ion-input>
-        <ion-input color="medium" placeholder="Medium input"></ion-input>
-        <ion-input color="dark" placeholder="Dark input"></ion-input>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/input/theming/colors/index.md b/static/usage/input/theming/colors/index.md
deleted file mode 100644
index 48243f46a22..00000000000
--- a/static/usage/input/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/input/theming/colors/demo.html" size="200px" />
diff --git a/static/usage/input/theming/css-properties/demo.html b/static/usage/input/theming/css-properties/demo.html
deleted file mode 100644
index 20caec0af8a..00000000000
--- a/static/usage/input/theming/css-properties/demo.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Input</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      max-width: 200px;
-      margin: 0 auto;
-    }
-
-    ion-input.custom {
-      --background: #373737;
-      --color: #fff;
-      --placeholder-color: #ddd;
-      --placeholder-opacity: .8;
-
-      --padding-bottom: 10px;
-      --padding-end: 10px;
-      --padding-start: 10px;
-      --padding-top: 10px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-input placeholder="Custom input" class="custom"></ion-input>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/input/theming/css-properties/index.md b/static/usage/input/theming/css-properties/index.md
deleted file mode 100644
index dac37e22b41..00000000000
--- a/static/usage/input/theming/css-properties/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/input/theming/css-properties/demo.html"
-  size="100px"
-/>
diff --git a/static/usage/input/types/demo.html b/static/usage/input/types/demo.html
deleted file mode 100644
index 6c96667977e..00000000000
--- a/static/usage/input/types/demo.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Input</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-label>Text input</ion-label>
-            <ion-input placeholder="Enter text"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Number input</ion-label>
-            <ion-input type="number" placeholder="000"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Password input</ion-label>
-            <ion-input type="password" value="password"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Email input</ion-label>
-            <ion-input type="email" placeholder="email@domain.com"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Telephone input</ion-label>
-            <ion-input type="tel" placeholder="888-888-8888"></ion-input>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/input/types/index.md b/static/usage/input/types/index.md
deleted file mode 100644
index f7959c9ca7f..00000000000
--- a/static/usage/input/types/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/input/types/demo.html" size="300px" />
diff --git a/static/usage/item-divider/basic/demo.html b/static/usage/item-divider/basic/demo.html
deleted file mode 100644
index 4adb5477a42..00000000000
--- a/static/usage/item-divider/basic/demo.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item Divider</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item-group>
-            <ion-item-divider>
-              <ion-label>
-                Section A
-              </ion-label>
-            </ion-item-divider>
-
-            <ion-item>
-              <ion-label>A1</ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-label>A2</ion-label>
-            </ion-item>
-            <ion-item lines="none">
-              <ion-label>A3</ion-label>
-            </ion-item>
-          </ion-item-group>
-
-          <ion-item-group>
-            <ion-item-divider>
-              <ion-label>
-                Section B
-              </ion-label>
-            </ion-item-divider>
-
-            <ion-item>
-              <ion-label>B1</ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-label>B2</ion-label>
-            </ion-item>
-            <ion-item lines="none">
-              <ion-label>B3</ion-label>
-            </ion-item>
-          </ion-item-group>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item-divider/basic/index.md b/static/usage/item-divider/basic/index.md
deleted file mode 100644
index f1ab47945ef..00000000000
--- a/static/usage/item-divider/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item-divider/basic/demo.html" size="medium" />
diff --git a/static/usage/item-divider/theming/colors/demo.html b/static/usage/item-divider/theming/colors/demo.html
deleted file mode 100644
index 0c421fae628..00000000000
--- a/static/usage/item-divider/theming/colors/demo.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item Divider</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item-divider>
-          <ion-label>Default</ion-label>
-        </ion-item-divider>
-        <ion-item-divider color="primary">
-          <ion-label>Primary</ion-label>
-        </ion-item-divider>
-        <ion-item-divider color="secondary">
-          <ion-label>Secondary</ion-label>
-        </ion-item-divider>
-        <ion-item-divider color="tertiary">
-          <ion-label>Tertiary</ion-label>
-        </ion-item-divider>
-        <ion-item-divider color="success">
-          <ion-label>Success</ion-label>
-        </ion-item-divider>
-        <ion-item-divider color="warning">
-          <ion-label>Warning</ion-label>
-        </ion-item-divider>
-        <ion-item-divider color="danger">
-          <ion-label>Danger</ion-label>
-        </ion-item-divider>
-        <ion-item-divider color="light">
-          <ion-label>Light</ion-label>
-        </ion-item-divider>
-        <ion-item-divider color="medium">
-          <ion-label>Medium</ion-label>
-        </ion-item-divider>
-        <ion-item-divider color="dark">
-          <ion-label>Dark</ion-label>
-        </ion-item-divider>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item-divider/theming/colors/index.md b/static/usage/item-divider/theming/colors/index.md
deleted file mode 100644
index ba859a248c2..00000000000
--- a/static/usage/item-divider/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item-divider/theming/colors/demo.html" size="medium" />
diff --git a/static/usage/item-divider/theming/css-properties/demo.html b/static/usage/item-divider/theming/css-properties/demo.html
deleted file mode 100644
index 8e0008af611..00000000000
--- a/static/usage/item-divider/theming/css-properties/demo.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item Divider</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-item-divider {
-      --background: #19422d;
-      --color: #fff;
-
-      --padding-top: 10px;
-      --padding-bottom: 10px;
-      --padding-start: 20px;
-      --padding-end: 20px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item-divider>
-          <ion-label>
-            Item Divider
-          </ion-label>
-        </ion-item-divider>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item-divider/theming/css-properties/index.md b/static/usage/item-divider/theming/css-properties/index.md
deleted file mode 100644
index 18c10aba2b5..00000000000
--- a/static/usage/item-divider/theming/css-properties/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/item-divider/theming/css-properties/demo.html"
-  size="100px"
-/>
diff --git a/static/usage/item-group/basic/demo.html b/static/usage/item-group/basic/demo.html
deleted file mode 100644
index 4de760eaea0..00000000000
--- a/static/usage/item-group/basic/demo.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item Group</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item-group>
-          <ion-item-divider>
-            <ion-label>A</ion-label>
-          </ion-item-divider>
-
-          <ion-item>
-            <ion-label>Angola</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Argentina</ion-label>
-          </ion-item>
-          <ion-item lines="none">
-            <ion-label>Armenia</ion-label>
-          </ion-item>
-        </ion-item-group>
-
-        <ion-item-group>
-          <ion-item-divider>
-            <ion-label>B</ion-label>
-          </ion-item-divider>
-
-          <ion-item>
-            <ion-label>Bangladesh</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Belarus</ion-label>
-          </ion-item>
-          <ion-item lines="none">
-            <ion-label>Belgium</ion-label>
-          </ion-item>
-        </ion-item-group>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item-group/basic/index.md b/static/usage/item-group/basic/index.md
deleted file mode 100644
index 43379acfc26..00000000000
--- a/static/usage/item-group/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item-group/basic/demo.html" size="medium" />
diff --git a/static/usage/item-group/sliding-items/demo.html b/static/usage/item-group/sliding-items/demo.html
deleted file mode 100644
index 012b0003da9..00000000000
--- a/static/usage/item-group/sliding-items/demo.html
+++ /dev/null
@@ -1,122 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item Group</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item-group>
-          <ion-item-divider>
-            <ion-label>
-              Fruits
-            </ion-label>
-          </ion-item-divider>
-
-          <ion-item-sliding>
-            <ion-item>
-              <ion-label>
-                Grapes
-              </ion-label>
-            </ion-item>
-            <ion-item-options>
-              <ion-item-option>
-                Favorite
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-
-          <ion-item-sliding>
-            <ion-item>
-              <ion-label>
-                Apples
-              </ion-label>
-            </ion-item>
-            <ion-item-options>
-              <ion-item-option>
-                Favorite
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-
-          <ion-item-sliding>
-            <ion-item lines="none">
-              <ion-label>
-                Bananas
-              </ion-label>
-            </ion-item>
-            <ion-item-options>
-              <ion-item-option>
-                Favorite
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-        </ion-item-group>
-
-        <ion-item-group>
-          <ion-item-divider>
-            <ion-label>
-              Vegetables
-            </ion-label>
-          </ion-item-divider>
-
-          <ion-item-sliding>
-            <ion-item>
-              <ion-label>
-                Carrots
-              </ion-label>
-            </ion-item>
-            <ion-item-options>
-              <ion-item-option>
-                Favorite
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-
-          <ion-item-sliding>
-            <ion-item>
-              <ion-label>
-                Broccoli
-              </ion-label>
-            </ion-item>
-            <ion-item-options>
-              <ion-item-option>
-                Favorite
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-
-          <ion-item-sliding>
-            <ion-item lines="none">
-              <ion-label>
-                Celery
-              </ion-label>
-            </ion-item>
-            <ion-item-options>
-              <ion-item-option>
-                Favorite
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-        </ion-item-group>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item-group/sliding-items/index.md b/static/usage/item-group/sliding-items/index.md
deleted file mode 100644
index 5c22dfd40fa..00000000000
--- a/static/usage/item-group/sliding-items/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item-group/sliding-items/demo.html" size="medium" />
diff --git a/static/usage/item-sliding/basic/demo.html b/static/usage/item-sliding/basic/demo.html
deleted file mode 100644
index ac328469939..00000000000
--- a/static/usage/item-sliding/basic/demo.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item Sliding</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item-sliding>
-            <ion-item>
-              <ion-label>Sliding Item with End Options</ion-label>
-            </ion-item>
-
-            <ion-item-options>
-              <ion-item-option>Favorite</ion-item-option>
-              <ion-item-option color="danger">Delete</ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-
-          <ion-item-sliding>
-            <ion-item-options side="start">
-              <ion-item-option color="success">Archive</ion-item-option>
-            </ion-item-options>
-
-            <ion-item>
-              <ion-label>Sliding Item with Start Options</ion-label>
-            </ion-item>
-          </ion-item-sliding>
-
-          <ion-item-sliding>
-            <ion-item-options side="start">
-              <ion-item-option color="success">Archive</ion-item-option>
-            </ion-item-options>
-
-            <ion-item>
-              <ion-label>Sliding Item with Options on Both Sides</ion-label>
-            </ion-item>
-
-            <ion-item-options side="end">
-              <ion-item-option>Favorite</ion-item-option>
-              <ion-item-option color="danger">Delete</ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item-sliding/basic/index.md b/static/usage/item-sliding/basic/index.md
deleted file mode 100644
index 95b18974eb2..00000000000
--- a/static/usage/item-sliding/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item-sliding/basic/demo.html" />
diff --git a/static/usage/item-sliding/expandable/demo.html b/static/usage/item-sliding/expandable/demo.html
deleted file mode 100644
index 5bff1d8c05f..00000000000
--- a/static/usage/item-sliding/expandable/demo.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item Sliding</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item-sliding>
-            <ion-item-options side="start">
-              <ion-item-option color="success" expandable>Archive</ion-item-option>
-            </ion-item-options>
-
-            <ion-item>
-              <ion-label>Sliding Item with Expandable Options</ion-label>
-            </ion-item>
-
-            <ion-item-options side="end">
-              <ion-item-option>Favorite</ion-item-option>
-              <ion-item-option color="danger" expandable>Delete</ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item-sliding/expandable/index.md b/static/usage/item-sliding/expandable/index.md
deleted file mode 100644
index 1c166a46289..00000000000
--- a/static/usage/item-sliding/expandable/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item-sliding/expandable/demo.html" size="100px" />
diff --git a/static/usage/item-sliding/icons/demo.html b/static/usage/item-sliding/icons/demo.html
deleted file mode 100644
index 93b53b18897..00000000000
--- a/static/usage/item-sliding/icons/demo.html
+++ /dev/null
@@ -1,156 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item Sliding</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      align-items: stretch;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item-sliding>
-            <ion-item-options side="start">
-              <ion-item-option color="success">
-                <ion-icon slot="icon-only" name="archive"></ion-icon>
-              </ion-item-option>
-            </ion-item-options>
-
-            <ion-item>
-              <ion-label>Sliding Item with Icons Only</ion-label>
-            </ion-item>
-
-            <ion-item-options side="end">
-              <ion-item-option>
-                <ion-icon slot="icon-only" name="heart"></ion-icon>
-              </ion-item-option>
-              <ion-item-option color="danger">
-                <ion-icon slot="icon-only" name="trash"></ion-icon>
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-
-          <ion-item-sliding>
-            <ion-item-options side="start">
-              <ion-item-option color="success">
-                <ion-icon slot="start" name="archive"></ion-icon>
-                Archive
-              </ion-item-option>
-            </ion-item-options>
-
-            <ion-item>
-              <ion-label>
-                Sliding Item with Start Icons
-              </ion-label>
-            </ion-item>
-
-            <ion-item-options side="end">
-              <ion-item-option>
-                <ion-icon slot="start" name="heart"></ion-icon>
-                Favorite
-              </ion-item-option>
-              <ion-item-option color="danger">
-                <ion-icon slot="start" name="trash"></ion-icon>
-                Delete
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-
-          <ion-item-sliding>
-            <ion-item-options side="start">
-              <ion-item-option color="success">
-                <ion-icon slot="end" name="archive"></ion-icon>
-                Archive
-              </ion-item-option>
-            </ion-item-options>
-
-            <ion-item>
-              <ion-label>
-                Sliding Item with End Icons
-              </ion-label>
-            </ion-item>
-
-            <ion-item-options>
-              <ion-item-option>
-                <ion-icon slot="end" name="heart"></ion-icon>
-                Favorite
-              </ion-item-option>
-              <ion-item-option color="danger">
-                <ion-icon slot="end" name="trash"></ion-icon>
-                Delete
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-
-          <ion-item-sliding>
-            <ion-item-options side="start">
-              <ion-item-option color="success">
-                <ion-icon slot="top" name="archive"></ion-icon>
-                Archive
-              </ion-item-option>
-            </ion-item-options>
-
-            <ion-item>
-              <ion-label>
-                Sliding Item with Top Icons
-              </ion-label>
-            </ion-item>
-
-            <ion-item-options>
-              <ion-item-option>
-                <ion-icon slot="top" name="heart"></ion-icon>
-                Favorite
-              </ion-item-option>
-              <ion-item-option color="danger">
-                <ion-icon slot="top" name="trash"></ion-icon>
-                Delete
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-
-          <ion-item-sliding>
-            <ion-item-options side="start">
-              <ion-item-option color="success">
-                <ion-icon slot="bottom" name="archive"></ion-icon>
-                Archive
-              </ion-item-option>
-            </ion-item-options>
-
-            <ion-item>
-              <ion-label>
-                Sliding Item with Bottom Icons
-              </ion-label>
-            </ion-item>
-
-            <ion-item-options>
-              <ion-item-option>
-                <ion-icon slot="bottom" name="heart"></ion-icon>
-                Favorite
-              </ion-item-option>
-              <ion-item-option color="danger">
-                <ion-icon slot="bottom" name="trash"></ion-icon>
-                Delete
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item-sliding/icons/index.md b/static/usage/item-sliding/icons/index.md
deleted file mode 100644
index 4ed1beb0d41..00000000000
--- a/static/usage/item-sliding/icons/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item-sliding/icons/demo.html" size="300px" />
diff --git a/static/usage/item/basic/demo.html b/static/usage/item/basic/demo.html
deleted file mode 100644
index 1de29aff75a..00000000000
--- a/static/usage/item/basic/demo.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-label>Basic Item</ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>
-            Multi-line text that should ellipsis when it is too long
-            to fit on one line. Lorem ipsum dolor sit amet,
-            consectetur adipiscing elit.
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label class="ion-text-wrap">
-            Multi-line text that should wrap when it is too long
-            to fit on one line. Lorem ipsum dolor sit amet,
-            consectetur adipiscing elit.
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>
-            <h1>H1 Heading</h1>
-            <p>Paragraph</p>
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>
-            <h2>H2 Heading</h2>
-            <p>Paragraph</p>
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>
-            <h3>H3 Heading</h3>
-            <p>Paragraph</p>
-          </ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/basic/index.md b/static/usage/item/basic/index.md
deleted file mode 100644
index 8669af952c4..00000000000
--- a/static/usage/item/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item/basic/demo.html" size="medium" />
diff --git a/static/usage/item/buttons/demo.html b/static/usage/item/buttons/demo.html
deleted file mode 100644
index eb6b01d9a20..00000000000
--- a/static/usage/item/buttons/demo.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      align-items: stretch;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-button slot="start">
-            Start
-          </ion-button>
-          <ion-label>Default Buttons</ion-label>
-          <ion-button slot="end">
-            End
-          </ion-button>
-        </ion-item>
-
-        <ion-item>
-          <ion-button slot="start">
-            Start
-            <ion-icon name="home" slot="end"></ion-icon>
-          </ion-button>
-          <ion-label>Buttons with Icons</ion-label>
-          <ion-button slot="end">
-            <ion-icon name="star" slot="end"></ion-icon>
-            End
-          </ion-button>
-        </ion-item>
-
-        <ion-item>
-          <ion-button slot="start">
-            <ion-icon slot="icon-only" name="navigate"></ion-icon>
-          </ion-button>
-          <ion-label>Icon only Buttons</ion-label>
-          <ion-button slot="end">
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Button Sizes</ion-label>
-          <ion-button slot="end" size="small">
-            Small
-          </ion-button>
-          <ion-button slot="end" size="default">
-            Default
-          </ion-button>
-          <ion-button slot="end" size="large">
-            Large
-          </ion-button>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/buttons/index.md b/static/usage/item/buttons/index.md
deleted file mode 100644
index b6c3daa54f7..00000000000
--- a/static/usage/item/buttons/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item/buttons/demo.html" size="250px"/>
diff --git a/static/usage/item/clickable/demo.html b/static/usage/item/clickable/demo.html
deleted file mode 100644
index de3058eab56..00000000000
--- a/static/usage/item/clickable/demo.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item href="#">
-          <ion-label>Anchor Item</ion-label>
-        </ion-item>
-
-        <ion-item href="#" disabled="true">
-          <ion-label>Disabled Anchor Item</ion-label>
-        </ion-item>
-
-        <ion-item button>
-          <ion-label>Button Item</ion-label>
-        </ion-item>
-
-        <ion-item button disabled="true">
-          <ion-label>Disabled Button Item</ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/clickable/index.md b/static/usage/item/clickable/index.md
deleted file mode 100644
index 6cdc5c1cb51..00000000000
--- a/static/usage/item/clickable/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item/clickable/demo.html" />
diff --git a/static/usage/item/counter/demo.html b/static/usage/item/counter/demo.html
deleted file mode 100644
index 0c588b0d3a7..00000000000
--- a/static/usage/item/counter/demo.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-    }
-
-    ion-item {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item counter="true">
-          <ion-label position="floating">Default Counter</ion-label>
-          <ion-input maxlength="20"></ion-input>
-        </ion-item>
-
-        <ion-item id="custom-item" counter="true">
-          <ion-label position="floating">Custom Counter Format</ion-label>
-          <ion-input maxlength="20"></ion-input>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-<script>
-  const customItem = document.querySelector('#custom-item');
-  customItem.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
-</script>
-
-</html>
diff --git a/static/usage/item/counter/index.md b/static/usage/item/counter/index.md
deleted file mode 100644
index 8f916341093..00000000000
--- a/static/usage/item/counter/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-import react from './react.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/item/counter/demo.html"
-/>
diff --git a/static/usage/item/detail-arrows/demo.html b/static/usage/item/detail-arrows/demo.html
deleted file mode 100644
index 34ee140e05d..00000000000
--- a/static/usage/item/detail-arrows/demo.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item detail="true">
-          <ion-label>
-            <h3>Text Item</h3>
-            <p>Detail set to true - detail arrow displays on both modes</p>
-          </ion-label>
-        </ion-item>
-
-        <ion-item button>
-          <ion-label>
-            <h3>Button Item</h3>
-            <p>Default detail - detail arrow displays on iOS only</p>
-          </ion-label>
-        </ion-item>
-
-        <ion-item button detail="true">
-          <ion-label>
-            <h3>Button Item</h3>
-            <p>Detail set to true - detail arrow displays on both modes</p>
-          </ion-label>
-        </ion-item>
-
-        <ion-item button detail="false">
-          <ion-label>
-            <h3>Button Item</h3>
-            <p>Detail set to false - detail arrow hidden on both modes</p>
-          </ion-label>
-        </ion-item>
-
-        <ion-item button detail="true" detail-icon="caret-forward-outline">
-          <ion-label>
-            <h3>Button Item</h3>
-            <p>Detail set to true - detail arrow displays on both modes</p>
-            <p>Detail icon set to caret-forward-outline</p>
-          </ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/detail-arrows/index.md b/static/usage/item/detail-arrows/index.md
deleted file mode 100644
index 7cdc02d1c5a..00000000000
--- a/static/usage/item/detail-arrows/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item/detail-arrows/demo.html" size="350px" />
diff --git a/static/usage/item/helper-error/demo.html b/static/usage/item/helper-error/demo.html
deleted file mode 100644
index db7d12713a2..00000000000
--- a/static/usage/item/helper-error/demo.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item fill="solid">
-          <ion-label position="floating">Email</ion-label>
-          <ion-input></ion-input>
-          <ion-note slot="helper">Enter a valid email</ion-note>
-          <ion-note slot="error">Invalid email</ion-note>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const item = document.querySelector('ion-item');
-    const input = item.querySelector('ion-input');
-
-    input.addEventListener('ionInput', (ev) => validate(ev));
-    input.addEventListener('ionBlur', () => markTouched());
-
-    const validateEmail = (email) => {
-      return email.match(/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/);
-    };
-
-    const validate = (ev) => {
-      const value = ev.target.value;
-
-      item.classList.remove('ion-valid');
-      item.classList.remove('ion-invalid');
-
-      if (value === "") return;
-
-      validateEmail(value) ? item.classList.add('ion-valid') : item.classList.add('ion-invalid');
-    }
-
-    const markTouched = () => {
-      item.classList.add('ion-touched');
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/item/helper-error/index.md b/static/usage/item/helper-error/index.md
deleted file mode 100644
index af338c468d3..00000000000
--- a/static/usage/item/helper-error/index.md
+++ /dev/null
@@ -1,19 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-
-<Playground
-  code={{
-  javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/item/helper-error/demo.html"
-  size="150px"
-/>
-
diff --git a/static/usage/item/icons/demo.html b/static/usage/item/icons/demo.html
deleted file mode 100644
index db1a24826f4..00000000000
--- a/static/usage/item/icons/demo.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-label>
-            Default Icon
-          </ion-label>
-          <ion-icon name="information-circle" slot="end"></ion-icon>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>
-            Large Icon
-          </ion-label>
-          <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>
-            Small Icon
-          </ion-label>
-          <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
-        </ion-item>
-
-        <ion-item>
-          <ion-icon name="star" slot="start"></ion-icon>
-          <ion-label>
-            Default Icon
-          </ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/icons/index.md b/static/usage/item/icons/index.md
deleted file mode 100644
index 2359440cc60..00000000000
--- a/static/usage/item/icons/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item/icons/demo.html" size="250px"/>
diff --git a/static/usage/item/inputs/demo.html b/static/usage/item/inputs/demo.html
deleted file mode 100644
index e8bde0189d1..00000000000
--- a/static/usage/item/inputs/demo.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-label>Default Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item>
-          <ion-label position="fixed">Fixed Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item>
-          <ion-label position="stacked">Stacked Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item>
-          <ion-label position="floating">Floating Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item fill="outline">
-          <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item fill="solid">
-          <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Select</ion-label>
-          <ion-select placeholder="Make a Selection">
-            <ion-select-option value="">No Game Console</ion-select-option>
-            <ion-select-option value="nes">NES</ion-select-option>
-            <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
-            <ion-select-option value="ps">PlayStation</ion-select-option>
-            <ion-select-option value="genesis">Sega Genesis</ion-select-option>
-            <ion-select-option value="saturn">Sega Saturn</ion-select-option>
-            <ion-select-option value="snes">SNES</ion-select-option>
-          </ion-select>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Toggle</ion-label>
-          <ion-toggle slot="end"></ion-toggle>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Checkbox</ion-label>
-          <ion-checkbox slot="end"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label position="stacked">Range</ion-label>
-          <ion-range></ion-range>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/inputs/index.md b/static/usage/item/inputs/index.md
deleted file mode 100644
index 68c58eb3b30..00000000000
--- a/static/usage/item/inputs/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item/inputs/demo.html" size="large" />
diff --git a/static/usage/item/lines/demo.html b/static/usage/item/lines/demo.html
deleted file mode 100644
index e42c9bcaeae..00000000000
--- a/static/usage/item/lines/demo.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-label>
-            Default Item Lines
-          </ion-label>
-        </ion-item>
-
-        <ion-item lines="inset">
-          <ion-label>Item Lines Inset</ion-label>
-        </ion-item>
-
-        <ion-item lines="full">
-          <ion-label>Item Lines Full</ion-label>
-        </ion-item>
-
-        <ion-item lines="none">
-          <ion-label>Item Lines None</ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-icon name="star" slot="start"></ion-icon>
-          <ion-label>Default Item Lines</ion-label>
-          <ion-icon name="information-circle" slot="end"></ion-icon>
-        </ion-item>
-
-        <ion-item lines="inset">
-          <ion-icon name="star" slot="start"></ion-icon>
-          <ion-label>Item Lines Inset</ion-label>
-          <ion-icon name="information-circle" slot="end"></ion-icon>
-        </ion-item>
-
-        <ion-item lines="full">
-          <ion-icon name="star" slot="start"></ion-icon>
-          <ion-label>Item Lines Full</ion-label>
-          <ion-icon name="information-circle" slot="end"></ion-icon>
-        </ion-item>
-
-        <ion-item lines="none">
-          <ion-icon name="star" slot="start"></ion-icon>
-          <ion-label>Item Lines None</ion-label>
-          <ion-icon name="information-circle" slot="end"></ion-icon>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/lines/index.md b/static/usage/item/lines/index.md
deleted file mode 100644
index 42de7b4cbe7..00000000000
--- a/static/usage/item/lines/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item/lines/demo.html" size="medium" />
diff --git a/static/usage/item/media/demo.html b/static/usage/item/media/demo.html
deleted file mode 100644
index 141c8fe582c..00000000000
--- a/static/usage/item/media/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-avatar slot="start">
-            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-          </ion-avatar>
-          <ion-label>
-            Avatar Item
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-thumbnail slot="start">
-            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-          </ion-thumbnail>
-          <ion-label>
-            Thumbnail Item
-          </ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/media/index.md b/static/usage/item/media/index.md
deleted file mode 100644
index c95b9ffbe8f..00000000000
--- a/static/usage/item/media/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item/media/demo.html" />
diff --git a/static/usage/item/theming/colors/demo.html b/static/usage/item/theming/colors/demo.html
deleted file mode 100644
index 43e8da2b87a..00000000000
--- a/static/usage/item/theming/colors/demo.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-label>Default Item</ion-label>
-        </ion-item>
-        <ion-item color="primary">
-          <ion-label>Primary Item</ion-label>
-        </ion-item>
-        <ion-item color="secondary">
-          <ion-label>Secondary Item</ion-label>
-        </ion-item>
-        <ion-item color="tertiary">
-          <ion-label>Tertiary Item</ion-label>
-        </ion-item>
-        <ion-item color="success">
-          <ion-label>Success Item</ion-label>
-        </ion-item>
-        <ion-item color="warning">
-          <ion-label>Warning Item</ion-label>
-        </ion-item>
-        <ion-item color="danger">
-          <ion-label>Danger Item</ion-label>
-        </ion-item>
-        <ion-item color="light">
-          <ion-label>Light Item</ion-label>
-        </ion-item>
-        <ion-item color="medium">
-          <ion-label>Medium Item</ion-label>
-        </ion-item>
-        <ion-item color="dark">
-          <ion-label>Dark Item</ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/theming/colors/index.md b/static/usage/item/theming/colors/index.md
deleted file mode 100644
index 7dfba65c7dc..00000000000
--- a/static/usage/item/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/item/theming/colors/demo.html" size="500px" />
diff --git a/static/usage/item/theming/css-properties/demo.html b/static/usage/item/theming/css-properties/demo.html
deleted file mode 100644
index 0c2abb8618e..00000000000
--- a/static/usage/item/theming/css-properties/demo.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-
-    ion-item {
-      --background: #19422d;
-      --color: #fff;
-
-      --border-color: #fff;
-      --border-style: dashed;
-      --border-width: 2px;
-
-      --border-radius: 20px;
-
-      --ripple-color: purple;
-
-      --detail-icon-color: white;
-      --detail-icon-opacity: 1;
-      --detail-icon-font-size: 20px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item button lines="full">
-          <ion-label>Custom Item</ion-label>
-        </ion-item>
-
-        <ion-item button lines="full">
-          <ion-label>Custom Item</ion-label>
-        </ion-item>
-
-        <ion-item button lines="full">
-          <ion-label>Custom Item</ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/theming/css-properties/index.md b/static/usage/item/theming/css-properties/index.md
deleted file mode 100644
index f90c324e49f..00000000000
--- a/static/usage/item/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/item/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/item/theming/css-shadow-parts/demo.html b/static/usage/item/theming/css-shadow-parts/demo.html
deleted file mode 100644
index 634f823b2ad..00000000000
--- a/static/usage/item/theming/css-shadow-parts/demo.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-
-    ion-item::part(native) {
-      background: #19422d;
-      color: #fff;
-
-      border-color: #fff;
-      border-style: dashed;
-      border-width: 2px;
-
-      border-radius: 20px;
-    }
-
-    ion-item::part(detail-icon) {
-      color: white;
-      opacity: 1;
-      font-size: 20px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item button lines="full">
-          <ion-label>Custom Item</ion-label>
-        </ion-item>
-
-        <ion-item button lines="full">
-          <ion-label>Custom Item</ion-label>
-        </ion-item>
-
-        <ion-item button lines="full">
-          <ion-label>Custom Item</ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/theming/css-shadow-parts/index.md b/static/usage/item/theming/css-shadow-parts/index.md
deleted file mode 100644
index ba0c81000cd..00000000000
--- a/static/usage/item/theming/css-shadow-parts/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/item/theming/css-shadow-parts/demo.html"
-/>
diff --git a/static/usage/item/theming/input-highlight/demo.html b/static/usage/item/theming/input-highlight/demo.html
deleted file mode 100644
index 8ef4e2ccaf6..00000000000
--- a/static/usage/item/theming/input-highlight/demo.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-
-    ion-item {
-      --highlight-height: 2px;
-      --highlight-color-focused: #43e7f3;
-      --highlight-color-valid: #6f58d8;
-      --highlight-color-invalid: #ff46be;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item lines="full" class="item-has-focus ion-touched">
-          <ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
-          <ion-input></ion-input>
-        </ion-item>
-
-        <ion-item lines="full" class="item-has-focus ion-touched ion-valid">
-          <ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
-          <ion-input></ion-input>
-        </ion-item>
-
-        <ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
-          <ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
-          <ion-input></ion-input>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/item/theming/input-highlight/index.md b/static/usage/item/theming/input-highlight/index.md
deleted file mode 100644
index 08ec4847c8c..00000000000
--- a/static/usage/item/theming/input-highlight/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/item/theming/input-highlight/demo.html"
-  size="250px"
-/>
diff --git a/static/usage/label/basic/demo.html b/static/usage/label/basic/demo.html
deleted file mode 100644
index 2854a183851..00000000000
--- a/static/usage/label/basic/demo.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Label</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-label>Label</ion-label>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/label/basic/index.md b/static/usage/label/basic/index.md
deleted file mode 100644
index f2609779a49..00000000000
--- a/static/usage/label/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/label/basic/demo.html" />
diff --git a/static/usage/label/input/demo.html b/static/usage/label/input/demo.html
deleted file mode 100644
index 6aa8cc6288c..00000000000
--- a/static/usage/label/input/demo.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Label</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-label>Default Label</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item>
-          <ion-label position="fixed">Fixed Label</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item>
-          <ion-label position="floating">Floating Label</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item>
-          <ion-label position="stacked">Stacked Label</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Toggle</ion-label>
-          <ion-toggle slot="end" checked></ion-toggle>
-        </ion-item>
-
-        <ion-item>
-          <ion-checkbox slot="start" checked></ion-checkbox>
-          <ion-label>Checkbox</ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/label/input/index.md b/static/usage/label/input/index.md
deleted file mode 100644
index ff69eb55211..00000000000
--- a/static/usage/label/input/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/label/input/demo.html" size="medium" />
diff --git a/static/usage/label/item/demo.html b/static/usage/label/item/demo.html
deleted file mode 100644
index 1fe2c7978cc..00000000000
--- a/static/usage/label/item/demo.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Label</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-label>Default Label</ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>
-            Multi-line text that should ellipsis when it is too long
-            to fit on one line. Lorem ipsum dolor sit amet,
-            consectetur adipiscing elit.
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label class="ion-text-wrap">
-            Multi-line text that should wrap when it is too long
-            to fit on one line. Lorem ipsum dolor sit amet,
-            consectetur adipiscing elit.
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>
-            <h1>Heading</h1>
-            <p>Paragraph</p>
-          </ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/label/item/index.md b/static/usage/label/item/index.md
deleted file mode 100644
index 99035942d7b..00000000000
--- a/static/usage/label/item/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/label/item/demo.html" size="medium" />
diff --git a/static/usage/label/theming/colors/demo.html b/static/usage/label/theming/colors/demo.html
deleted file mode 100644
index f59d500d888..00000000000
--- a/static/usage/label/theming/colors/demo.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Label</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-label {
-      margin: 0 2px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-label>Default</ion-label>
-        <ion-label color="primary">Primary</ion-label>
-        <ion-label color="secondary">Secondary</ion-label>
-        <ion-label color="tertiary">Tertiary</ion-label>
-        <ion-label color="success">Success</ion-label>
-        <ion-label color="warning">Warning</ion-label>
-        <ion-label color="danger">Danger</ion-label>
-        <ion-label color="light">Light</ion-label>
-        <ion-label color="medium">Medium</ion-label>
-        <ion-label color="dark">Dark</ion-label>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/label/theming/colors/index.md b/static/usage/label/theming/colors/index.md
deleted file mode 100644
index 16ab86412d7..00000000000
--- a/static/usage/label/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/label/theming/colors/demo.html" />
diff --git a/static/usage/list-header/basic/demo.html b/static/usage/list-header/basic/demo.html
deleted file mode 100644
index a0cd41282f7..00000000000
--- a/static/usage/list-header/basic/demo.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>List Header</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-list-header>
-            <ion-label>Video Games</ion-label>
-          </ion-list-header>
-          <ion-item>
-            <ion-label>Pokémon Yellow</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Mega Man X</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>The Legend of Zelda</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Pac-Man</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Super Mario World</ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/list-header/basic/index.md b/static/usage/list-header/basic/index.md
deleted file mode 100644
index 8fc768f26ca..00000000000
--- a/static/usage/list-header/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/list-header/basic/demo.html" size="325px" />
diff --git a/static/usage/list-header/buttons/demo.html b/static/usage/list-header/buttons/demo.html
deleted file mode 100644
index ebc5d0916f9..00000000000
--- a/static/usage/list-header/buttons/demo.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>List Header</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-list-header>
-            <ion-label>Video Games</ion-label>
-            <ion-button>See All</ion-button>
-          </ion-list-header>
-          <ion-item>
-            <ion-label>Pokémon Yellow</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Mega Man X</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>The Legend of Zelda</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Pac-Man</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Super Mario World</ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/list-header/buttons/index.md b/static/usage/list-header/buttons/index.md
deleted file mode 100644
index c19a57712fe..00000000000
--- a/static/usage/list-header/buttons/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/list-header/buttons/demo.html" size="325px" />
diff --git a/static/usage/list-header/lines/demo.html b/static/usage/list-header/lines/demo.html
deleted file mode 100644
index 08922976061..00000000000
--- a/static/usage/list-header/lines/demo.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>List Header</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-list-header>
-            <ion-label>Default</ion-label>
-          </ion-list-header>
-          <ion-item>
-            <ion-label>Item</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Item</ion-label>
-          </ion-item>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header lines="inset">
-            <ion-label>Inset</ion-label>
-          </ion-list-header>
-          <ion-item>
-            <ion-label>Item</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Item</ion-label>
-          </ion-item>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header lines="full">
-            <ion-label>Full</ion-label>
-          </ion-list-header>
-          <ion-item>
-            <ion-label>Item</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Item</ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/list-header/lines/index.md b/static/usage/list-header/lines/index.md
deleted file mode 100644
index 076b6bed04a..00000000000
--- a/static/usage/list-header/lines/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/list-header/lines/demo.html" size="500px" />
diff --git a/static/usage/list-header/theming/colors/demo.html b/static/usage/list-header/theming/colors/demo.html
deleted file mode 100644
index 59e06eb1545..00000000000
--- a/static/usage/list-header/theming/colors/demo.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>List Header</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list-header>
-          <ion-label>Default</ion-label>
-        </ion-list-header>
-        <ion-list-header color="primary">
-          <ion-label>Primary</ion-label>
-        </ion-list-header>
-        <ion-list-header color="secondary">
-          <ion-label>Secondary</ion-label>
-        </ion-list-header>
-        <ion-list-header color="tertiary">
-          <ion-label>Tertiary</ion-label>
-        </ion-list-header>
-        <ion-list-header color="success">
-          <ion-label>Success</ion-label>
-        </ion-list-header>
-        <ion-list-header color="warning">
-          <ion-label>Warning</ion-label>
-        </ion-list-header>
-        <ion-list-header color="danger">
-          <ion-label>Danger</ion-label>
-        </ion-list-header>
-        <ion-list-header color="light">
-          <ion-label>Light</ion-label>
-        </ion-list-header>
-        <ion-list-header color="medium">
-          <ion-label>Medium</ion-label>
-        </ion-list-header>
-        <ion-list-header color="dark">
-          <ion-label>Dark</ion-label>
-        </ion-list-header>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/list-header/theming/colors/index.md b/static/usage/list-header/theming/colors/index.md
deleted file mode 100644
index 2874dbe5ecf..00000000000
--- a/static/usage/list-header/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/list-header/theming/colors/demo.html" size="650px" />
diff --git a/static/usage/list-header/theming/css-properties/demo.html b/static/usage/list-header/theming/css-properties/demo.html
deleted file mode 100644
index 1f0d1df199f..00000000000
--- a/static/usage/list-header/theming/css-properties/demo.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>List Header</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list-header {
-      --background: #19422d;
-      --color: #fff;
-
-      --border-width: 0 0 4px 0;
-      --border-color: #f24aec;
-      --border-style: double;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list-header>
-          <ion-label>Custom List Header</ion-label>
-        </ion-list-header>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/list-header/theming/css-properties/index.md b/static/usage/list-header/theming/css-properties/index.md
deleted file mode 100644
index 0e474c6fd25..00000000000
--- a/static/usage/list-header/theming/css-properties/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/list-header/theming/css-properties/demo.html"
-  size="100px"
-/>
diff --git a/static/usage/list/basic/demo.html b/static/usage/list/basic/demo.html
deleted file mode 100644
index cb78c57fc8f..00000000000
--- a/static/usage/list/basic/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>List</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-label>Pokémon Yellow</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Mega Man X</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>The Legend of Zelda</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Pac-Man</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Super Mario World</ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/list/basic/index.md b/static/usage/list/basic/index.md
deleted file mode 100644
index e7435fbf0b2..00000000000
--- a/static/usage/list/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/list/basic/demo.html" size="300px" />
diff --git a/static/usage/list/inset/demo.html b/static/usage/list/inset/demo.html
deleted file mode 100644
index a958392cb47..00000000000
--- a/static/usage/list/inset/demo.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>List</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-content {
-      --background: #f9f9f9;
-    }
-
-    .container {
-      flex-flow: column;
-      align-items: stretch;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list inset>
-          <ion-item>
-            <ion-label>Pokémon Yellow</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Mega Man X</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>The Legend of Zelda</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Pac-Man</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Super Mario World</ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/list/inset/index.md b/static/usage/list/inset/index.md
deleted file mode 100644
index 812c4a1111e..00000000000
--- a/static/usage/list/inset/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/list/inset/demo.html" size="350px" />
diff --git a/static/usage/list/lines/demo.html b/static/usage/list/lines/demo.html
deleted file mode 100644
index ae69603b5d4..00000000000
--- a/static/usage/list/lines/demo.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>List</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      align-items: stretch;
-      justify-content: space-evenly;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list lines="full">
-          <ion-item>
-            <ion-label>Full Lines</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Full Lines</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Full Lines</ion-label>
-          </ion-item>
-        </ion-list>
-
-        <ion-list lines="inset">
-          <ion-item>
-            <ion-label>Inset Lines</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Inset Lines</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Inset Lines</ion-label>
-          </ion-item>
-        </ion-list>
-
-        <ion-list lines="none">
-          <ion-item>
-            <ion-label>No Lines</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>No Lines</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>No Lines</ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/list/lines/index.md b/static/usage/list/lines/index.md
deleted file mode 100644
index b86eb624e06..00000000000
--- a/static/usage/list/lines/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/list/lines/demo.html" size="500px" />
diff --git a/static/usage/loading/controller/demo.html b/static/usage/loading/controller/demo.html
deleted file mode 100644
index 2635cccfef1..00000000000
--- a/static/usage/loading/controller/demo.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <script type="module">
-      import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-      window.loadingController = loadingController;
-    </script>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-button onclick="showLoading()">Show Loading</ion-button>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const loading = document.querySelector('ion-loading');
-      const showLoading = async () => {
-        const loading = await loadingController.create({
-          message: 'Dismissing after 3 seconds...',
-          duration: 3000
-        });
-        loading.present();
-      }
-    </script>
-  </body>
-</html>
diff --git a/static/usage/loading/controller/index.md b/static/usage/loading/controller/index.md
deleted file mode 100644
index 2705cc8b0b9..00000000000
--- a/static/usage/loading/controller/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/loading/controller/demo.html"
-/>
diff --git a/static/usage/loading/spinners/demo.html b/static/usage/loading/spinners/demo.html
deleted file mode 100644
index 0e95cae9692..00000000000
--- a/static/usage/loading/spinners/demo.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <script type="module">
-      import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-      window.loadingController = loadingController;
-    </script>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-button onclick="showLoading()">Show Loading</ion-button>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const loading = document.querySelector('ion-loading');
-      const showLoading = async () => {
-        const loading = await loadingController.create({
-          message: 'Loading...',
-          duration: 3000,
-          spinner: 'circles'
-        });
-        loading.present();
-      }
-    </script>
-  </body>
-</html>
diff --git a/static/usage/loading/spinners/index.md b/static/usage/loading/spinners/index.md
deleted file mode 100644
index 9932e8ab9c1..00000000000
--- a/static/usage/loading/spinners/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/loading/spinners/demo.html"
-/>
diff --git a/static/usage/loading/theming/demo.html b/static/usage/loading/theming/demo.html
deleted file mode 100644
index 7fdec68f2de..00000000000
--- a/static/usage/loading/theming/demo.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <script type="module">
-      import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-      window.loadingController = loadingController;
-    </script>
-    <style>
-      ion-loading.custom-loading {
-        --background: #e3edff;
-        --spinner-color: #1c6dff;
-
-        color: #1c6dff;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-button onclick="showLoading()">Show Loading</ion-button>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const loading = document.querySelector('ion-loading');
-      const showLoading = async () => {
-        const loading = await loadingController.create({
-          message: 'Loading...',
-          duration: 3000,
-          cssClass: 'custom-loading'
-        });
-        loading.present();
-      }
-    </script>
-  </body>
-</html>
diff --git a/static/usage/loading/theming/index.md b/static/usage/loading/theming/index.md
deleted file mode 100644
index 8123a7d00e7..00000000000
--- a/static/usage/loading/theming/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_global_css from './angular/global_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/global.css': angular_global_css,
-      },
-    },
-  }}
-  src="usage/loading/theming/demo.html"
-/>
diff --git a/static/usage/menu/basic/demo.html b/static/usage/menu/basic/demo.html
deleted file mode 100644
index 4591a7e06ce..00000000000
--- a/static/usage/menu/basic/demo.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Menu</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-menu content-id="main-content">
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Menu Content</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">This is the menu content.</ion-content>
-      </ion-menu>
-      <div class="ion-page" id="main-content">
-        <ion-header>
-          <ion-toolbar>
-            <ion-buttons slot="start">
-              <ion-menu-button></ion-menu-button>
-            </ion-buttons>
-            <ion-title>Menu</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          Tap the button in the toolbar to open the menu.
-        </ion-content>
-      </div>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/menu/basic/index.md b/static/usage/menu/basic/index.md
deleted file mode 100644
index a70d583135c..00000000000
--- a/static/usage/menu/basic/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/menu/basic/demo.html"
-  devicePreview
-/>
diff --git a/static/usage/menu/theming/demo.html b/static/usage/menu/theming/demo.html
deleted file mode 100644
index a453b20883f..00000000000
--- a/static/usage/menu/theming/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Menu</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-    <style>
-      ion-menu::part(backdrop) {
-        background-color: rgba(255, 0, 255, 0.5);
-      }
-
-      ion-menu::part(container) {
-        border-radius: 0 20px 20px 0;
-
-        box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-menu content-id="main-content">
-        <ion-header>
-          <ion-toolbar color="tertiary">
-            <ion-title>Menu Content</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">This is the menu content.</ion-content>
-      </ion-menu>
-      <div class="ion-page" id="main-content">
-        <ion-header>
-          <ion-toolbar>
-            <ion-buttons slot="start">
-              <ion-menu-button></ion-menu-button>
-            </ion-buttons>
-            <ion-title>Menu</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          Tap the button in the toolbar to open the menu.
-        </ion-content>
-      </div>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/menu/theming/index.md b/static/usage/menu/theming/index.md
deleted file mode 100644
index e0b9ca5cf18..00000000000
--- a/static/usage/menu/theming/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/menu/theming/demo.html"
-  devicePreview
-/>
diff --git a/static/usage/menu/toggle/demo.html b/static/usage/menu/toggle/demo.html
deleted file mode 100644
index 6b78fd9440b..00000000000
--- a/static/usage/menu/toggle/demo.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Menu - Toggle</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-menu id="custom-menu" content-id="main-content">
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Menu Content</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          <ion-menu-toggle>
-            <ion-button>Click to close the menu</ion-button>
-          </ion-menu-toggle>
-        </ion-content>
-      </ion-menu>
-      <div class="ion-page" id="main-content">
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Menu</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          <ion-menu-toggle>
-            <ion-button>Click to open the menu</ion-button>
-          </ion-menu-toggle>
-        </ion-content>
-      </div>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/menu/toggle/index.md b/static/usage/menu/toggle/index.md
deleted file mode 100644
index 4d568cfe440..00000000000
--- a/static/usage/menu/toggle/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/menu/toggle/demo.html"
-  devicePreview
-/>
diff --git a/static/usage/menu/type/demo.html b/static/usage/menu/type/demo.html
deleted file mode 100644
index c5d3950ccb3..00000000000
--- a/static/usage/menu/type/demo.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Menu - Type</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  </head>
-  <body>
-    <ion-app>
-      <ion-menu type="overlay" content-id="main-content">
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Menu Content</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          <ion-menu-toggle>
-            <ion-button>Click to close the menu</ion-button>
-          </ion-menu-toggle>
-        </ion-content>
-      </ion-menu>
-
-      <div class="ion-page" id="main-content">
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Menu</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          <h2>Select an overlay type:</h2>
-          <ion-radio-group value="overlay">
-            <ion-item>
-              <ion-label>
-                <code>overlay</code>
-              </ion-label>
-              <ion-radio value="overlay"></ion-radio>
-            </ion-item>
-            <ion-item>
-              <ion-label>
-                <code>reveal</code>
-              </ion-label>
-              <ion-radio value="reveal"></ion-radio>
-            </ion-item>
-            <ion-item>
-              <ion-label>
-                <code>push</code>
-              </ion-label>
-              <ion-radio value="push"></ion-radio>
-            </ion-item>
-          </ion-radio-group> <br />
-          <ion-menu-toggle>
-            <ion-button>Click to open the menu</ion-button>
-          </ion-menu-toggle>
-        </ion-content>
-      </div>
-    </ion-app>
-
-    <script>
-      const menu = document.querySelector('ion-menu');
-      const radioGroup = document.querySelector('ion-radio-group');
-
-      radioGroup.addEventListener('ionChange', (ev) => {
-        menu.type = ev.detail.value;
-      });
-    </script>
-  </body>
-</html>
diff --git a/static/usage/menu/type/index.md b/static/usage/menu/type/index.md
deleted file mode 100644
index 34e8d416611..00000000000
--- a/static/usage/menu/type/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/menu/type/demo.html"
-  devicePreview
-/>
diff --git a/static/usage/modal/can-dismiss/boolean/demo.html b/static/usage/modal/can-dismiss/boolean/demo.html
deleted file mode 100644
index b99b52bf6b5..00000000000
--- a/static/usage/modal/can-dismiss/boolean/demo.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Can Dismiss</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <div class="ion-page">
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>App</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <ion-button id="open-modal" expand="block">Open</ion-button>
-
-        <ion-modal trigger="open-modal">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Modal</ion-title>
-              <ion-buttons slot="end">
-                <ion-button onclick="dismiss()">Close</ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content>
-            <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
-            <ion-item>
-              <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
-              <ion-checkbox id="terms"></ion-checkbox>
-            </ion-item>
-          </ion-content>
-        </ion-modal>
-      </ion-content>
-    </div>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    modal.canDismiss = false;
-    modal.presentingElement = document.querySelector('.ion-page');
-
-    function dismiss() {
-      modal.dismiss();
-    }
-
-    modal.addEventListener('didPresent', () => {
-      const terms = document.getElementById('terms');
-      terms.addEventListener('ionChange', ev => {
-        modal.canDismiss = ev.detail.checked;
-      });
-    });
-
-
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/can-dismiss/boolean/index.md b/static/usage/modal/can-dismiss/boolean/index.md
deleted file mode 100644
index 4d45ab53668..00000000000
--- a/static/usage/modal/can-dismiss/boolean/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react from './react.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/modal/can-dismiss/boolean/demo.html"
-  devicePreview
-/>
diff --git a/static/usage/modal/can-dismiss/function/demo.html b/static/usage/modal/can-dismiss/function/demo.html
deleted file mode 100644
index 06bb5d3ae6c..00000000000
--- a/static/usage/modal/can-dismiss/function/demo.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Can Dismiss</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <div class="ion-page">
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>App</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <ion-button id="open-modal" expand="block">Open</ion-button>
-
-        <ion-modal trigger="open-modal">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Modal</ion-title>
-              <ion-buttons slot="end">
-                <ion-button onclick="dismiss()">Close</ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content class="ion-padding">
-            <p>You will be prompted when closing this modal.</p>
-          </ion-content>
-        </ion-modal>
-      </ion-content>
-    </div>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    modal.canDismiss = promptClose;
-    modal.presentingElement = document.querySelector('.ion-page');
-
-    function dismiss() {
-      modal.dismiss();
-    }
-
-    async function promptClose() {
-      const actionSheet = document.createElement('ion-action-sheet');
-
-      actionSheet.header = 'Are you sure?';
-      actionSheet.buttons = [{
-        text: 'Yes',
-        role: 'confirm'
-      }, {
-        text: 'No',
-        role: 'cancel'
-      }];
-      document.body.appendChild(actionSheet);
-      await actionSheet.present();
-
-      const { role } = await actionSheet.onWillDismiss();
-
-      return role === 'confirm';
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/can-dismiss/function/index.md b/static/usage/modal/can-dismiss/function/index.md
deleted file mode 100644
index 544f2229702..00000000000
--- a/static/usage/modal/can-dismiss/function/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react from './react.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/modal/can-dismiss/function/demo.html"
-  devicePreview
-/>
diff --git a/static/usage/modal/card/basic/demo.html b/static/usage/modal/card/basic/demo.html
deleted file mode 100644
index 2e144a3a8e0..00000000000
--- a/static/usage/modal/card/basic/demo.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Card</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <div class="ion-page">
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>App</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <ion-button id="open-modal" expand="block">Open Card Modal</ion-button>
-
-        <ion-modal trigger="open-modal">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Modal</ion-title>
-              <ion-buttons slot="end">
-                <ion-button onclick="modal.dismiss()">Close</ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content>
-            <ion-list>
-              <ion-item>
-                <ion-avatar slot="start">
-                  <ion-img src="https://i.pravatar.cc/300?u=b" />
-                </ion-avatar>
-                <ion-label>
-                  <h2>Connor Smith</h2>
-                  <p>Sales Rep</p>
-                </ion-label>
-              </ion-item>
-              <ion-item>
-                <ion-avatar slot="start">
-                  <ion-img src="https://i.pravatar.cc/300?u=a" />
-                </ion-avatar>
-                <ion-label>
-                  <h2>Daniel Smith</h2>
-                  <p>Product Designer</p>
-                </ion-label>
-              </ion-item>
-              <ion-item>
-                <ion-avatar slot="start">
-                  <ion-img src="https://i.pravatar.cc/300?u=d" />
-                </ion-avatar>
-                <ion-label>
-                  <h2>Greg Smith</h2>
-                  <p>Director of Operations</p>
-                </ion-label>
-              </ion-item>
-              <ion-item>
-                <ion-avatar slot="start">
-                  <ion-img src="https://i.pravatar.cc/300?u=e" />
-                </ion-avatar>
-                <ion-label>
-                  <h2>Zoey Smith</h2>
-                  <p>CEO</p>
-                </ion-label>
-              </ion-item>
-            </ion-list>
-          </ion-content>
-        </ion-modal>
-      </ion-content>
-    </div>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    modal.presentingElement = document.querySelector('.ion-page');
-
-    function dismiss() {
-      modal.dismiss();
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/card/basic/index.md b/static/usage/modal/card/basic/index.md
deleted file mode 100644
index 01b8b4144c3..00000000000
--- a/static/usage/modal/card/basic/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-import react from './react.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/modal/card/basic/demo.html"
-  devicePreview
-/>
diff --git a/static/usage/modal/controller/demo.html b/static/usage/modal/controller/demo.html
deleted file mode 100644
index bd73d99407f..00000000000
--- a/static/usage/modal/controller/demo.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Controller</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <script type="module">
-    import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-    window.modalController = modalController;
-  </script>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Controller Modal</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button expand="block" onclick="openModal()">Open</ion-button>
-      <p id="message">This modal example uses the modalController to present and dismiss modals.</p>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const openModal = async () => {
-      const div = document.createElement('div');
-      div.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button color="medium" onclick="cancel()">Cancel</ion-button>
-          </ion-buttons>
-          <ion-title>Welcome</ion-title>
-          <ion-buttons slot="end">
-            <ion-button onclick="confirm()">Confirm</ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <ion-item>
-          <ion-label position="stacked">Enter your name</ion-label>
-          <ion-input type="text" placeholder="Your name"></ion-input>
-        </ion-item>
-      </ion-content>
-      `;
-
-      const modal = await modalController.create({
-        component: div,
-      });
-
-      modal.present();
-
-      const { data, role } = await modal.onWillDismiss();
-
-      if (role === 'confirm') {
-        document.querySelector('#message').innerHTML = `Hello, ${data}!`;
-      }
-    }
-
-    function cancel() {
-      modalController.dismiss(null, 'cancel');
-    }
-
-    function confirm() {
-      const input = document.querySelector('ion-input');
-      modalController.dismiss(input.value, 'confirm');
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/controller/index.md b/static/usage/modal/controller/index.md
deleted file mode 100644
index ccfb5509509..00000000000
--- a/static/usage/modal/controller/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-
-import vue_example from './vue/example_vue.md';
-import vue_modal from './vue/modal_vue.md';
-
-import angular_app_module_ts from './angular/app_module_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_modal_example_component_ts from './angular/modal-example_component_ts.md';
-import angular_modal_example_component_html from './angular/modal-example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue: {
-      files: {
-        'src/components/Example.vue': vue_example,
-        'src/components/Modal.vue': vue_modal,
-      },
-    },
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/modal-example.component.html': angular_modal_example_component_html,
-        'src/app/modal-example.component.ts': angular_modal_example_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
-      },
-    },
-  }}
-  src="usage/modal/controller/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/modal/custom-dialogs/demo.html b/static/usage/modal/custom-dialogs/demo.html
deleted file mode 100644
index e681cb12143..00000000000
--- a/static/usage/modal/custom-dialogs/demo.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Modal | Custom Dialog</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.1.15-dev.11657743655.1e3dcc3c/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.1.15-dev.11657743655.1e3dcc3c/css/ionic.bundle.css" />
-    <style>
-      ion-modal {
-        --width: fit-content;
-        --min-width: 250px;
-        --height: fit-content;
-        --border-radius: 6px;
-        --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
-      }
-
-      ion-modal h1 {
-        margin: 20px 20px 10px 20px;
-      }
-
-      ion-modal ion-icon {
-        margin-right: 6px;
-
-        width: 48px;
-        height: 48px;
-
-        padding: 4px 0;
-
-        color: #aaaaaa;
-      }
-
-      ion-modal .wrapper {
-        margin-bottom: 10px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>App</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <ion-button id="custom-modal" expand="block">Open Custom Dialog</ion-button>
-
-        <ion-modal trigger="custom-modal">
-          <div class="wrapper">
-            <h1>Dialog header</h1>
-
-            <ion-list lines="none">
-              <ion-item button="true" detail="false" onclick="dismiss()">
-                <ion-icon name="person-circle"></ion-icon>
-                <ion-label>Item 1</ion-label>
-              </ion-item>
-              <ion-item button="true" detail="false" onclick="dismiss()">
-                <ion-icon name="person-circle"></ion-icon>
-                <ion-label>Item 2</ion-label>
-              </ion-item>
-              <ion-item button="true" detail="false" onclick="dismiss()">
-                <ion-icon name="person-circle"></ion-icon>
-                <ion-label>Item 3</ion-label>
-              </ion-item>
-            </ion-list>
-          </div>
-        </ion-modal>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const modal = document.querySelector('ion-modal');
-      const dismiss = () => modal.dismiss();
-    </script>
-  </body>
-
-</html>
diff --git a/static/usage/modal/custom-dialogs/index.md b/static/usage/modal/custom-dialogs/index.md
deleted file mode 100644
index 94105b957a8..00000000000
--- a/static/usage/modal/custom-dialogs/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import angular_global_css from './angular/global_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    vue,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
-      },
-    },
-  }}
-  src="usage/modal/custom-dialogs/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/modal/inline/basic/demo.html b/static/usage/modal/inline/basic/demo.html
deleted file mode 100644
index 4c8f6cb00ff..00000000000
--- a/static/usage/modal/inline/basic/demo.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Inline</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Inline Modal</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button id="open-modal" expand="block">Open</ion-button>
-      <p id="message">This modal example uses triggers to automatically open a modal when the button is clicked.</p>
-      <ion-modal trigger="open-modal">
-        <ion-header>
-          <ion-toolbar>
-            <ion-buttons slot="start">
-              <ion-button onclick="cancel()">Cancel</ion-button>
-            </ion-buttons>
-            <ion-title>Welcome</ion-title>
-            <ion-buttons slot="end">
-              <ion-button onclick="confirm()" strong="true">Confirm
-            </ion-buttons>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          <ion-item>
-            <ion-label position="stacked">Enter your name</ion-label>
-            <ion-input type="text" placeholder="Your name"></ion-input>
-          </ion-item>
-        </ion-content>
-      </ion-modal>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    function cancel() {
-      modal.dismiss(null, 'cancel');
-    }
-
-    function confirm() {
-      const input = document.querySelector('ion-input');
-      modal.dismiss(input.value, 'confirm');
-    }
-
-    modal.addEventListener('willDismiss', ev => {
-      if (ev.detail.role === 'confirm') {
-        const message = document.querySelector('#message');
-        message.textContent = `Hello ${ev.detail.data}!`;
-      }
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/inline/basic/index.md b/static/usage/modal/inline/basic/index.md
deleted file mode 100644
index 7cd5382ecfb..00000000000
--- a/static/usage/modal/inline/basic/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/modal/inline/basic/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/modal/inline/is-open/demo.html b/static/usage/modal/inline/is-open/demo.html
deleted file mode 100644
index f8d065dadff..00000000000
--- a/static/usage/modal/inline/is-open/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Inline</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Inline Modal</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button expand="block" onclick="modal.isOpen = true">Open</ion-button>
-      <ion-modal>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Modal</ion-title>
-            <ion-buttons slot="end">
-              <ion-button onclick="modal.isOpen = false">Close</ion-button>
-            </ion-buttons>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
-            reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
-            dicta.</p>
-        </ion-content>
-      </ion-modal>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/inline/is-open/index.md b/static/usage/modal/inline/is-open/index.md
deleted file mode 100644
index a756f1209b8..00000000000
--- a/static/usage/modal/inline/is-open/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/modal/inline/is-open/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/modal/performance/mount/demo.html b/static/usage/modal/performance/mount/demo.html
deleted file mode 100644
index e9de39b4193..00000000000
--- a/static/usage/modal/performance/mount/demo.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Performance</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <script type="module">
-    import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-    window.modalController = modalController;
-  </script>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Example</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button id="open-modal" expand="block">Open Modal</ion-button>
-      <ion-modal trigger="open-modal">
-        <ion-header>
-          <ion-toolbar>
-            <ion-buttons slot="start">
-              <ion-button id="close">Close</ion-button>
-            </ion-buttons>
-            <ion-title>Modal</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          This content was mounted as soon as the modal was created.
-        </ion-content>
-      </ion-modal>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    const closeBtn = document.querySelector('#close');
-    closeBtn.addEventListener('click', () => close());
-
-    const close = () => {
-      modal.dismiss();
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/performance/mount/index.md b/static/usage/modal/performance/mount/index.md
deleted file mode 100644
index 02cea360ec9..00000000000
--- a/static/usage/modal/performance/mount/index.md
+++ /dev/null
@@ -1,18 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/modal/performance/mount/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/modal/sheet/background-content/demo.html b/static/usage/modal/sheet/background-content/demo.html
deleted file mode 100644
index 008372dd2c1..00000000000
--- a/static/usage/modal/sheet/background-content/demo.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Sheet</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    .counter__section {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>App</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-
-      <p>You can interact with the +/- buttons until the sheet is fully expanded.</p>
-
-      <div class="counter__section">
-        <ion-button id="decrement" onclick="decrement()">-</ion-button>
-        <p id="counter">0</p>
-        <ion-button id="increment" onclick="increment()">+</ion-button>
-      </div>
-
-      <ion-modal is-open="true" initial-breakpoint="0.25" backdrop-dismiss="false" backdrop-breakpoint="0.5">
-        <ion-content>
-          <ion-searchbar placeholder="Search"></ion-searchbar>
-          <ion-list>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=b" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Connor Smith</h2>
-                <p>Sales Rep</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=a" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Daniel Smith</h2>
-                <p>Product Designer</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=d" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Greg Smith</h2>
-                <p>Director of Operations</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=e" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Zoey Smith</h2>
-                <p>CEO</p>
-              </ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-      </ion-modal>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-    const searchBar = document.querySelector('ion-searchbar');
-
-    modal.breakpoints = [0, 0.25, 0.5, 0.75];
-
-    searchBar.addEventListener('click', () => {
-      modal.setCurrentBreakpoint(0.75);
-    });
-
-    function increment() {
-      const counter = document.querySelector('#counter');
-      counter.innerHTML = parseInt(counter.innerText) + 1;
-    }
-
-    function decrement() {
-      const counter = document.querySelector('#counter');
-      counter.innerHTML = parseInt(counter.innerText) - 1;
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/sheet/background-content/index.md b/static/usage/modal/sheet/background-content/index.md
deleted file mode 100644
index e1ed5e241e0..00000000000
--- a/static/usage/modal/sheet/background-content/index.md
+++ /dev/null
@@ -1,27 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-import react from './react.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/modal/sheet/background-content/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/modal/sheet/basic/demo.html b/static/usage/modal/sheet/basic/demo.html
deleted file mode 100644
index 6b05e8ed688..00000000000
--- a/static/usage/modal/sheet/basic/demo.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Sheet</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>App</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
-
-      <ion-modal trigger="open-modal" initial-breakpoint="0.25">
-        <ion-content>
-          <ion-searchbar placeholder="Search"></ion-searchbar>
-          <ion-list>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=b" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Connor Smith</h2>
-                <p>Sales Rep</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=a" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Daniel Smith</h2>
-                <p>Product Designer</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=d" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Greg Smith</h2>
-                <p>Director of Operations</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=e" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Zoey Smith</h2>
-                <p>CEO</p>
-              </ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-      </ion-modal>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-    const searchBar = document.querySelector('ion-searchbar');
-
-    modal.breakpoints = [0, 0.25, 0.5, 0.75];
-
-    searchBar.addEventListener('click', () => {
-      modal.setCurrentBreakpoint(0.75);
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/sheet/basic/index.md b/static/usage/modal/sheet/basic/index.md
deleted file mode 100644
index dee06ed717b..00000000000
--- a/static/usage/modal/sheet/basic/index.md
+++ /dev/null
@@ -1,18 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-import react from './react.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/modal/sheet/basic/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/modal/sheet/handle-behavior/demo.html b/static/usage/modal/sheet/handle-behavior/demo.html
deleted file mode 100644
index 78c23c96b15..00000000000
--- a/static/usage/modal/sheet/handle-behavior/demo.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Sheet</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>App</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
-
-      <ion-modal trigger="open-modal" initial-breakpoint="0.25" handle-behavior="cycle">
-        <ion-content class="ion-padding">
-          <div class="ion-margin-top">
-            <ion-label>Click the handle above to advance to the next breakpoint.</ion-label>
-          </div>
-        </ion-content>
-      </ion-modal>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    modal.breakpoints = [0, 0.25, 0.5, 0.75];
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/sheet/handle-behavior/index.md b/static/usage/modal/sheet/handle-behavior/index.md
deleted file mode 100644
index 4965f22c52e..00000000000
--- a/static/usage/modal/sheet/handle-behavior/index.md
+++ /dev/null
@@ -1,18 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-import react from './react.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/modal/sheet/handle-behavior/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/modal/styling/animations/demo.html b/static/usage/modal/styling/animations/demo.html
deleted file mode 100644
index 7739165d5e1..00000000000
--- a/static/usage/modal/styling/animations/demo.html
+++ /dev/null
@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Animations</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <script type="module">
-    import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-    window.createAnimation = createAnimation;
-  </script>
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>App</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button id="open-modal" expand="block">Open Modal</ion-button>
-
-      <ion-modal trigger="open-modal">
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Modal</ion-title>
-            <ion-buttons slot="end">
-              <ion-button onclick="modal.dismiss()">Close</ion-button>
-            </ion-buttons>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          <ion-list>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=b" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Connor Smith</h2>
-                <p>Sales Rep</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=a" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Daniel Smith</h2>
-                <p>Product Designer</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=d" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Greg Smith</h2>
-                <p>Director of Operations</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=e" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Zoey Smith</h2>
-                <p>CEO</p>
-              </ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-      </ion-modal>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    const enterAnimation = (baseEl) => {
-      const root = baseEl.shadowRoot;
-
-      const backdropAnimation = createAnimation()
-        .addElement(root.querySelector('ion-backdrop'))
-        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
-      const wrapperAnimation = createAnimation()
-        .addElement(root.querySelector('.modal-wrapper'))
-        .keyframes([
-          { offset: 0, opacity: '0', transform: 'scale(0)' },
-          { offset: 1, opacity: '0.99', transform: 'scale(1)' }
-        ]);
-
-      return createAnimation()
-        .addElement(baseEl)
-        .easing('ease-out')
-        .duration(500)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-    }
-
-    const leaveAnimation = (baseEl) => enterAnimation(baseEl).direction('reverse');
-
-    modal.enterAnimation = enterAnimation;
-    modal.leaveAnimation = leaveAnimation;
-
-    function dismiss() {
-      modal.dismiss();
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/styling/animations/index.md b/static/usage/modal/styling/animations/index.md
deleted file mode 100644
index 6d9320ebe41..00000000000
--- a/static/usage/modal/styling/animations/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import vue from './vue.md';
-import react from './react.md';
-
-import javascript_index_html from './javascript/index_html.md';
-import javascript_index_ts from './javascript/index_ts.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript: {
-      files: {
-        'index.html': javascript_index_html,
-        'index.ts': javascript_index_ts,
-      },
-    },
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/modal/styling/animations/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/modal/styling/theming/demo.html b/static/usage/modal/styling/theming/demo.html
deleted file mode 100644
index 785bf4a1478..00000000000
--- a/static/usage/modal/styling/theming/demo.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Theming</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    ion-modal {
-      --height: 50%;
-      --border-radius: 16px;
-      --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    }
-
-    ion-modal::part(backdrop) {
-      background: rgba(209, 213, 219);
-      opacity: 1;
-    }
-
-    ion-modal ion-toolbar {
-      --background: rgb(14 116 144);
-      --color: white;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>App</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button id="open-modal" expand="block">Open Modal</ion-button>
-
-      <ion-modal trigger="open-modal">
-        <ion-content>
-          <ion-toolbar>
-            <ion-title>Modal</ion-title>
-            <ion-buttons slot="end">
-              <ion-button color="light" onclick="modal.dismiss()">Close
-            </ion-buttons>
-          </ion-toolbar>
-          <ion-list>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=b" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Connor Smith</h2>
-                <p>Sales Rep</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=a" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Daniel Smith</h2>
-                <p>Product Designer</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=d" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Greg Smith</h2>
-                <p>Director of Operations</p>
-              </ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-avatar slot="start">
-                <ion-img src="https://i.pravatar.cc/300?u=e" />
-              </ion-avatar>
-              <ion-label>
-                <h2>Zoey Smith</h2>
-                <p>CEO</p>
-              </ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-      </ion-modal>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    function dismiss() {
-      modal.dismiss();
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/modal/styling/theming/index.md b/static/usage/modal/styling/theming/index.md
deleted file mode 100644
index c28df0b94b0..00000000000
--- a/static/usage/modal/styling/theming/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import angular_global_css from './angular/global_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    vue,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
-      },
-    },
-  }}
-  src="usage/modal/styling/theming/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/nav/modal-navigation/demo.html b/static/usage/nav/modal-navigation/demo.html
deleted file mode 100644
index 9ef92b54a39..00000000000
--- a/static/usage/nav/modal-navigation/demo.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Nav | Modal Navigation</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Modal Navigation</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button id="openModal">Open Modal</ion-button>
-      <ion-modal trigger="openModal">
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Modal</ion-title>
-            <ion-buttons slot="end">
-              <ion-button onclick="dismiss()">
-                Close
-              </ion-button>
-            </ion-buttons>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          <ion-nav></ion-nav>
-        </ion-content>
-      </ion-modal>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-    const nav = document.querySelector('ion-nav');
-
-    modal.addEventListener('willPresent', () => {
-      nav.setRoot('page-one');
-    });
-
-    const dismiss = () => modal.dismiss();
-
-    const navigate = (component) => {
-      nav.push(component);
-    }
-
-    const navigateBack = () => {
-      nav.pop();
-    }
-
-    const navigateToRoot = () => {
-      nav.popToRoot();
-    }
-
-    class PageOne extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
-        <ion-content class="ion-padding">
-          <h1>Page One</h1>
-          <ion-button onclick="navigate('page-two')">Go to Page Two</ion-button>
-        </ion-content>
-      `;
-      }
-    }
-
-    class PageTwo extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
-        <ion-content class="ion-padding">
-          <h1>Page Two</h1>
-          <ion-button onclick="navigate('page-three')">Go to Page Three</ion-button>
-        </ion-content>
-      `;
-      }
-    }
-
-    class PageThree extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
-        <ion-content class="ion-padding">
-          <h1>Page Three</h1>
-          <ion-button onclick="navigateBack()">Go Back</ion-button>
-          <ion-button onclick="navigateToRoot()">Go to Root</ion-button>
-        </ion-content>
-      `;
-      }
-    }
-
-    customElements.define('page-one', PageOne);
-    customElements.define('page-two', PageTwo);
-    customElements.define('page-three', PageThree);
-
-  </script>
-
-</body>
-
-</html>
diff --git a/static/usage/nav/modal-navigation/index.md b/static/usage/nav/modal-navigation/index.md
deleted file mode 100644
index 55cfafaeeda..00000000000
--- a/static/usage/nav/modal-navigation/index.md
+++ /dev/null
@@ -1,55 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import angular_app_module_ts from './angular/app_module_ts.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_page_one_component_ts from './angular/page_one_component_ts.md';
-import angular_page_two_component_ts from './angular/page_two_component_ts.md';
-import angular_page_three_component_ts from './angular/page_three_component_ts.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_page_one_tsx from './react/page_one_tsx.md';
-import react_page_two_tsx from './react/page_two_tsx.md';
-import react_page_three_tsx from './react/page_three_tsx.md';
-
-import vue_example from './vue/example_vue.md';
-import vue_page_one from './vue/page_one_vue.md';
-import vue_page_two from './vue/page_two_vue.md';
-import vue_page_three from './vue/page_three_vue.md';
-
-<Playground
-  code={{
-    javascript,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/page-one.component.ts': angular_page_one_component_ts,
-        'src/app/page-two.component.ts': angular_page_two_component_ts,
-        'src/app/page-three.component.ts': angular_page_three_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
-      },
-    },
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/page-one.tsx': react_page_one_tsx,
-        'src/page-two.tsx': react_page_two_tsx,
-        'src/page-three.tsx': react_page_three_tsx,
-      },
-    },
-    vue: {
-      files: {
-        'src/components/Example.vue': vue_example,
-        'src/components/PageOne.vue': vue_page_one,
-        'src/components/PageTwo.vue': vue_page_two,
-        'src/components/PageThree.vue': vue_page_three,
-      },
-    },
-  }}
-  src="usage/nav/modal-navigation/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/nav/nav-link/demo.html b/static/usage/nav/nav-link/demo.html
deleted file mode 100644
index d813dfe8a87..00000000000
--- a/static/usage/nav/nav-link/demo.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Nav | NavLink</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-nav root="page-one"></ion-nav>
-  </ion-app>
-
-  <script>
-    class PageOne extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Page One</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          <h1>Page One</h1>
-          <ion-nav-link router-direction="forward" component="page-two">
-            <ion-button>Go to Page Two</ion-button>
-          </ion-nav-link>
-        </ion-content>
-      `;
-      }
-    }
-    class PageTwo extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
-        <ion-header>
-          <ion-toolbar>
-            <ion-buttons slot="start">
-              <ion-back-button></ion-back-button>
-            </ion-buttons>
-            <ion-title>Page Two</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          <h1>Page Two</h1>
-          <div>
-            <ion-nav-link router-direction="forward" component="page-three">
-              <ion-button>Go to Page Three</ion-button>
-            </ion-nav-link>
-          </div>
-        </ion-content>
-      `;
-      }
-    }
-    class PageThree extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
-        <ion-header>
-          <ion-toolbar>
-            <ion-buttons slot="start">
-              <ion-back-button></ion-back-button>
-            </ion-buttons>
-            <ion-title>Page Three</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          <h1>Page Three</h1>
-        </ion-content>
-      `;
-      }
-    }
-    customElements.define('page-one', PageOne);
-    customElements.define('page-two', PageTwo);
-    customElements.define('page-three', PageThree);
-  </script>
-
-</body>
-
-</html>
diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
deleted file mode 100644
index 535155750f0..00000000000
--- a/static/usage/nav/nav-link/index.md
+++ /dev/null
@@ -1,54 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import angular_app_module_ts from './angular/app_module_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_page_one_component_ts from './angular/page_one_component_ts.md';
-import angular_page_two_component_ts from './angular/page_two_component_ts.md';
-import angular_page_three_component_ts from './angular/page_three_component_ts.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_page_one_tsx from './react/page_one_tsx.md';
-import react_page_two_tsx from './react/page_two_tsx.md';
-import react_page_three_tsx from './react/page_three_tsx.md';
-
-import vue_example from './vue/example_vue.md';
-import vue_page_one from './vue/page_one_vue.md';
-import vue_page_two from './vue/page_two_vue.md';
-import vue_page_three from './vue/page_three_vue.md';
-
-<Playground
-  code={{
-    javascript,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/page-one.component.ts': angular_page_one_component_ts,
-        'src/app/page-two.component.ts': angular_page_two_component_ts,
-        'src/app/page-three.component.ts': angular_page_three_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
-      },
-    },
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/page-one.tsx': react_page_one_tsx,
-        'src/page-two.tsx': react_page_two_tsx,
-        'src/page-three.tsx': react_page_three_tsx,
-      },
-    },
-    vue: {
-      files: {
-        'src/components/Example.vue': vue_example,
-        'src/components/PageOne.vue': vue_page_one,
-        'src/components/PageTwo.vue': vue_page_two,
-        'src/components/PageThree.vue': vue_page_three,
-      },
-    },
-  }}
-  src="usage/nav/nav-link/demo.html"
-  devicePreview
-/>
diff --git a/static/usage/note/basic/demo.html b/static/usage/note/basic/demo.html
deleted file mode 100644
index ab305da8799..00000000000
--- a/static/usage/note/basic/demo.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Note</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-note>Default Note</ion-note>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/note/basic/index.md b/static/usage/note/basic/index.md
deleted file mode 100644
index 0bda4adefaf..00000000000
--- a/static/usage/note/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/note/basic/demo.html" />
diff --git a/static/usage/note/item/demo.html b/static/usage/note/item/demo.html
deleted file mode 100644
index 18c46c3f605..00000000000
--- a/static/usage/note/item/demo.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Note</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-label>Label</ion-label>
-          <ion-note slot="end">Note (End)</ion-note>
-        </ion-item>
-
-        <ion-item>
-          <ion-note slot="start">Note (Start)</ion-note>
-          <ion-label>Label</ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/note/item/index.md b/static/usage/note/item/index.md
deleted file mode 100644
index f6ce753068b..00000000000
--- a/static/usage/note/item/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/note/item/demo.html" />
diff --git a/static/usage/note/theming/colors/demo.html b/static/usage/note/theming/colors/demo.html
deleted file mode 100644
index 48d74a3757f..00000000000
--- a/static/usage/note/theming/colors/demo.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Note</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .flex-items {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      max-width: 440px;
-    }
-
-    ion-note {
-      margin: 0 2px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div class="flex-items">
-          <ion-note>Default Note</ion-note>
-          <ion-note color="primary">Primary Note</ion-note>
-          <ion-note color="secondary">Secondary Note</ion-note>
-          <ion-note color="tertiary">Tertiary Note</ion-note>
-          <ion-note color="success">Success Note</ion-note>
-          <ion-note color="warning">Warning Note</ion-note>
-          <ion-note color="danger">Danger Note</ion-note>
-          <ion-note color="light">Light Note</ion-note>
-          <ion-note color="medium">Medium Note</ion-note>
-          <ion-note color="dark">Dark Note</ion-note>
-        </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/note/theming/colors/index.md b/static/usage/note/theming/colors/index.md
deleted file mode 100644
index 72f81406a9e..00000000000
--- a/static/usage/note/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/note/theming/colors/demo.html" />
diff --git a/static/usage/note/theming/css-properties/demo.html b/static/usage/note/theming/css-properties/demo.html
deleted file mode 100644
index 31feba5ab0d..00000000000
--- a/static/usage/note/theming/css-properties/demo.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Note</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-note {
-      --color: #54dc98;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-note>Default Note</ion-note>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/note/theming/css-properties/index.md b/static/usage/note/theming/css-properties/index.md
deleted file mode 100644
index ffd7a95c81f..00000000000
--- a/static/usage/note/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/note/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/picker/multiple-column/demo.html b/static/usage/picker/multiple-column/demo.html
deleted file mode 100644
index 03ca39c78ba..00000000000
--- a/static/usage/picker/multiple-column/demo.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Picker | Multiple Columns</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <script type="module">
-    import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-    window.pickerController = pickerController;
-  </script>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="openPicker()">Open</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    async function openPicker() {
-      const picker = await pickerController.create({
-        columns: [{
-          name: 'meat',
-          options: [
-            {
-              text: 'Pepperoni',
-              value: 'pepperoni'
-            }, {
-              text: 'Smoked Ham',
-              value: 'smoked-ham'
-            }, {
-              text: 'Crispy Bacon',
-              value: 'bacon'
-            }
-          ]
-        }, {
-          name: 'veggies',
-          options: [
-            {
-              text: 'Red onion',
-              value: 'red-onion'
-            }, {
-              text: 'Peppers',
-              value: 'peppers'
-            }, {
-              text: 'Black olives',
-              value: 'black-olives'
-            }
-          ]
-        }, {
-          name: 'crust',
-          options: [
-            {
-              text: 'Pan style',
-              value: 'pan'
-            }, {
-              text: 'Hand tossed',
-              value: 'hand-tossed'
-            }, {
-              text: 'Stuffed crust',
-              value: 'stuffed-crust'
-            }
-          ]
-        }],
-        buttons: [
-          {
-            text: 'Cancel',
-            role: 'cancel'
-          },
-          {
-            text: 'Confirm',
-            handler: (value) => {
-              window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
-            }
-          }
-        ]
-      });
-      await picker.present();
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/picker/multiple-column/index.md b/static/usage/picker/multiple-column/index.md
deleted file mode 100644
index 2a4a9ea2786..00000000000
--- a/static/usage/picker/multiple-column/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/picker/multiple-column/demo.html"
-  size="medium"
-/>
diff --git a/static/usage/picker/single-column/demo.html b/static/usage/picker/single-column/demo.html
deleted file mode 100644
index 6c8ff2588f8..00000000000
--- a/static/usage/picker/single-column/demo.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Picker | Single Column</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <script type="module">
-    import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-    window.pickerController = pickerController;
-  </script>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="openPicker()">Open</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    async function openPicker() {
-      const picker = await pickerController.create({
-        columns: [{
-          name: 'languages',
-          options: [
-            {
-              text: 'JavaScript',
-              value: 'javascript'
-            }, {
-              text: 'TypeScript',
-              value: 'typescript'
-            }, {
-              text: 'Rust',
-              value: 'rust'
-            }, {
-              text: 'C#',
-              value: 'c#'
-            }
-          ]
-        }],
-        buttons: [
-          {
-            text: 'Cancel',
-            role: 'cancel'
-          },
-          {
-            text: 'Confirm',
-            handler: (value) => {
-              window.alert(`You selected: ${value.languages.value}`);
-            }
-          }
-        ]
-      });
-      await picker.present();
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/picker/single-column/index.md b/static/usage/picker/single-column/index.md
deleted file mode 100644
index f102c5b4209..00000000000
--- a/static/usage/picker/single-column/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/picker/single-column/demo.html"
-  size="medium"
-/>
diff --git a/static/usage/popover/customization/positioning/demo.html b/static/usage/popover/customization/positioning/demo.html
deleted file mode 100644
index 7232b5416cf..00000000000
--- a/static/usage/popover/customization/positioning/demo.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Popover</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-    }
-
-    ion-popover {
-      --width: 80px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
-        <ion-popover trigger="top-center" side="top" alignment="center">
-          <ion-content class="ion-padding">Hello World!</ion-content>
-        </ion-popover>
-
-        <ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
-        <ion-popover trigger="bottom-start" side="bottom" alignment="start">
-          <ion-content class="ion-padding">Hello World!</ion-content>
-        </ion-popover>
-
-        <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
-        <ion-popover trigger="left-start" side="left" alignment="start">
-          <ion-content class="ion-padding">Hello World!</ion-content>
-        </ion-popover>
-
-        <ion-button id="right-end">Side=Right, Alignment=End</ion-button>
-        <ion-popover trigger="right-end" side="right" alignment="end">
-          <ion-content class="ion-padding">Hello World!</ion-content>
-        </ion-popover>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/popover/customization/positioning/index.md b/static/usage/popover/customization/positioning/index.md
deleted file mode 100644
index 2b0f2dbcaba..00000000000
--- a/static/usage/popover/customization/positioning/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="400px"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/popover/customization/positioning/demo.html"
-/>
diff --git a/static/usage/popover/customization/sizing/demo.html b/static/usage/popover/customization/sizing/demo.html
deleted file mode 100644
index c5ef949d339..00000000000
--- a/static/usage/popover/customization/sizing/demo.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Popover</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="auto-trigger">Size=Auto</ion-button>
-        <ion-popover trigger="auto-trigger" size="auto">
-          <ion-content class="ion-padding">Hello!</ion-content>
-        </ion-popover>
-
-        <ion-button id="cover-trigger">Size=Cover</ion-button>
-        <ion-popover trigger="cover-trigger" size="cover">
-          <ion-content class="ion-padding">Hello!</ion-content>
-        </ion-popover>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/popover/customization/sizing/index.md b/static/usage/popover/customization/sizing/index.md
deleted file mode 100644
index c394cac1934..00000000000
--- a/static/usage/popover/customization/sizing/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="300px"
-  code={{ javascript, react, vue, angular }}
-  src="usage/popover/customization/sizing/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/popover/customization/styling/demo.html b/static/usage/popover/customization/styling/demo.html
deleted file mode 100644
index 86098edcd7e..00000000000
--- a/static/usage/popover/customization/styling/demo.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Popover</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-popover {
-      --background: rgba(40, 173, 218, 0.6);
-      --backdrop-opacity: 0.6;
-      --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
-      --color: white;
-      --width: 300px;
-    }
-
-    ion-popover ion-content {
-      --background: rgba(40, 173, 218, 0.6);
-    }
-
-    ion-popover::part(backdrop) {
-      background-color: rgb(6, 14, 106);
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="trigger-button">Click Me</ion-button>
-        <ion-popover trigger="trigger-button">
-          <ion-content class="ion-padding">Hello Styled World!</ion-content>
-        </ion-popover>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/popover/customization/styling/index.md b/static/usage/popover/customization/styling/index.md
deleted file mode 100644
index b8c83384102..00000000000
--- a/static/usage/popover/customization/styling/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_global_css from './angular/global_css.md';
-
-<Playground
-  size="300px"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
-      }
-    }
-  }}
-  src="usage/popover/customization/styling/demo.html"
-/>
diff --git a/static/usage/popover/nested/demo.html b/static/usage/popover/nested/demo.html
deleted file mode 100644
index a9c5c34a63e..00000000000
--- a/static/usage/popover/nested/demo.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Popover</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="popover-button">Open Menu</ion-button>
-        <ion-popover trigger="popover-button" dismiss-on-select="true">
-          <ion-content>
-            <ion-list>
-              <ion-item button="true" detail="false">Option 1</ion-item>
-              <ion-item button="true" detail="false">Option 2</ion-item>
-              <ion-item button="true" id="nested-trigger">More options...</ion-item>
-
-              <ion-popover trigger="nested-trigger" dismiss-on-select="true" side="end">
-                <ion-content>
-                  <ion-list>
-                    <ion-item button="true" detail="false">Nested option</ion-item>
-                  </ion-list>
-                </ion-content>
-              </ion-popover>
-            </ion-list>
-          </ion-content>
-        </ion-popover>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/popover/nested/index.md b/static/usage/popover/nested/index.md
deleted file mode 100644
index dace26f7126..00000000000
--- a/static/usage/popover/nested/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="medium"
-  code={{ javascript, react, vue, angular }}
-  src="usage/popover/nested/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/popover/performance/mount/demo.html b/static/usage/popover/performance/mount/demo.html
deleted file mode 100644
index 566a80269c2..00000000000
--- a/static/usage/popover/performance/mount/demo.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Popover</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="open-popover">Open Popover</ion-button>
-        <ion-popover keep-contents-mounted="true" trigger="open-popover">
-          <ion-content class="ion-padding">This content was mounted as soon as the popover was created.</ion-content>
-        </ion-popover>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/popover/performance/mount/index.md b/static/usage/popover/performance/mount/index.md
deleted file mode 100644
index 45bcd7a4df3..00000000000
--- a/static/usage/popover/performance/mount/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular
-  }}
-  size="medium"
-  src="usage/popover/performance/mount/demo.html"
-/>
diff --git a/static/usage/popover/presenting/controller/demo.html b/static/usage/popover/presenting/controller/demo.html
deleted file mode 100644
index d57e0a5c8d4..00000000000
--- a/static/usage/popover/presenting/controller/demo.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Popover</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button>Click Me</ion-button>
-        <p></p>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const output = document.querySelector('p');
-
-    class PopoverPage extends HTMLElement {
-      constructor() {
-        super();
-      }
-
-      connectedCallback() {
-        this.innerHTML = `<ion-content class="ion-padding">Hello World!</ion-content>`;
-      }
-    }
-
-    customElements.define('popover-page', PopoverPage);
-
-    async function presentPopover(e) {
-      const popover = Object.assign(document.createElement('ion-popover'), {
-        component: 'popover-page',
-        event: e
-      });
-
-      document.body.appendChild(popover);
-      await popover.present();
-
-      const { role } = await popover.onDidDismiss();
-      output.innerText = `Popover dismissed with role: ${role}`;
-    }
-
-    const button = document.querySelector('ion-button');
-    button.addEventListener('click', presentPopover);
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/popover/presenting/controller/index.md b/static/usage/popover/presenting/controller/index.md
deleted file mode 100644
index 6fd29e65815..00000000000
--- a/static/usage/popover/presenting/controller/index.md
+++ /dev/null
@@ -1,37 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-
-import vue_example from './vue/example_vue.md';
-import vue_popover from './vue/popover_vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_popover_component_html from './angular/popover_component_html.md';
-import angular_popover_component_ts from './angular/popover_component_ts.md';
-import angular_app_module from './angular/app_module_ts.md';
-
-<Playground
-  size="300px"
-  code={{
-    javascript,
-    react,
-    vue: {
-      files: {
-        'src/components/Example.vue': vue_example,
-        'src/components/Popover.vue': vue_popover,
-      },
-    },
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/popover.component.html': angular_popover_component_html,
-        'src/app/popover.component.ts': angular_popover_component_ts,
-        'src/app/app.module.ts': angular_app_module,
-      },
-    },
-  }}
-  src="usage/popover/presenting/controller/demo.html"
-/>
diff --git a/static/usage/popover/presenting/inline-isopen/demo.html b/static/usage/popover/presenting/inline-isopen/demo.html
deleted file mode 100644
index 146fe995a65..00000000000
--- a/static/usage/popover/presenting/inline-isopen/demo.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Popover</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button>Click Me</ion-button>
-        <ion-popover>
-          <ion-content class="ion-padding">Hello World!</ion-content>
-        </ion-popover>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const button = document.querySelector('ion-button');
-    const popover = document.querySelector('ion-popover');
-
-    button.addEventListener('click', e => {
-      popover.event = e;
-      popover.isOpen = true;
-    });
-
-    popover.addEventListener('didDismiss', () => popover.isOpen = false);
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/popover/presenting/inline-isopen/index.md b/static/usage/popover/presenting/inline-isopen/index.md
deleted file mode 100644
index 264639ccf7f..00000000000
--- a/static/usage/popover/presenting/inline-isopen/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="300px"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/popover/presenting/inline-isopen/demo.html"
-/>
diff --git a/static/usage/popover/presenting/inline-trigger/demo.html b/static/usage/popover/presenting/inline-trigger/demo.html
deleted file mode 100644
index d8d034d13e2..00000000000
--- a/static/usage/popover/presenting/inline-trigger/demo.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Popover</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="click-trigger">Left-Click Me</ion-button>
-        <ion-popover trigger="click-trigger" trigger-action="click">
-          <ion-content class="ion-padding">Hello World!</ion-content>
-        </ion-popover>
-
-        <ion-button id="context-menu-trigger">Right-Click Me</ion-button>
-        <ion-popover trigger="context-menu-trigger" trigger-action="context-menu">
-          <ion-content class="ion-padding">Hello World!</ion-content>
-        </ion-popover>
-
-        <ion-button id="hover-trigger">Hover Over Me</ion-button>
-        <ion-popover trigger="hover-trigger" trigger-action="hover">
-          <ion-content class="ion-padding">Hello World!</ion-content>
-        </ion-popover>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/popover/presenting/inline-trigger/index.md b/static/usage/popover/presenting/inline-trigger/index.md
deleted file mode 100644
index 3a36756d66d..00000000000
--- a/static/usage/popover/presenting/inline-trigger/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="300px"
-  code={{ javascript, react, vue, angular }}
-  src="usage/popover/presenting/inline-trigger/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/progress-bar/buffer/demo.html b/static/usage/progress-bar/buffer/demo.html
deleted file mode 100644
index d078747a91a..00000000000
--- a/static/usage/progress-bar/buffer/demo.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Progress Bar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-progress-bar></ion-progress-bar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-<script>
-  let buffer = 0.06;
-  let progress = 0;
-
-  let progressBar = document.querySelector('ion-progress-bar');
-  progressBar.buffer = buffer;
-
-  setInterval(() => {
-    progressBar.buffer = buffer += 0.06;
-    progressBar.value = progress += 0.06;
-
-    // Reset the progress bar when it reaches 100%
-    // to continuously show the demo
-    if (progress > 1) {
-      setTimeout(() => {
-        progressBar.buffer = buffer = 0.06;
-        progressBar.value = progress = 0;
-      }, 1000);
-    }
-  }, 1000);
-</script>
-
-</html>
diff --git a/static/usage/progress-bar/buffer/index.md b/static/usage/progress-bar/buffer/index.md
deleted file mode 100644
index 778db60a25f..00000000000
--- a/static/usage/progress-bar/buffer/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react from './react.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/progress-bar/buffer/demo.html"
-/>
diff --git a/static/usage/progress-bar/determinate/demo.html b/static/usage/progress-bar/determinate/demo.html
deleted file mode 100644
index a72d9a4741b..00000000000
--- a/static/usage/progress-bar/determinate/demo.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Progress Bar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-progress-bar></ion-progress-bar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-<script>
-  let progress = 0;
-  let progressBar = document.querySelector('ion-progress-bar');
-
-  setInterval(() => {
-    progressBar.value = progress += 0.01;
-
-    // Reset the progress bar when it reaches 100%
-    // to continuously show the demo
-    if (progress > 1) {
-      setTimeout(() => {
-        progressBar.value = progress = 0;
-      }, 1000);
-    }
-  }, 50);
-</script>
-
-</html>
diff --git a/static/usage/progress-bar/determinate/index.md b/static/usage/progress-bar/determinate/index.md
deleted file mode 100644
index 7b6decd68fa..00000000000
--- a/static/usage/progress-bar/determinate/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react from './react.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/progress-bar/determinate/demo.html"
-/>
diff --git a/static/usage/progress-bar/indeterminate/demo.html b/static/usage/progress-bar/indeterminate/demo.html
deleted file mode 100644
index 26c81726242..00000000000
--- a/static/usage/progress-bar/indeterminate/demo.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Progress Bar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-progress-bar type="indeterminate"></ion-progress-bar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/progress-bar/indeterminate/index.md b/static/usage/progress-bar/indeterminate/index.md
deleted file mode 100644
index 99df146e6b4..00000000000
--- a/static/usage/progress-bar/indeterminate/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/progress-bar/indeterminate/demo.html" />
diff --git a/static/usage/progress-bar/theming/colors/demo.html b/static/usage/progress-bar/theming/colors/demo.html
deleted file mode 100644
index 2486b259aa7..00000000000
--- a/static/usage/progress-bar/theming/colors/demo.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Progress Bar</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-progress-bar type="indeterminate" color="primary"></ion-progress-bar>
-        <ion-progress-bar type="indeterminate" color="secondary"></ion-progress-bar>
-        <ion-progress-bar type="indeterminate" color="tertiary"></ion-progress-bar>
-        <ion-progress-bar type="indeterminate" color="success"></ion-progress-bar>
-        <ion-progress-bar type="indeterminate" color="warning"></ion-progress-bar>
-        <ion-progress-bar type="indeterminate" color="danger"></ion-progress-bar>
-        <ion-progress-bar type="indeterminate" color="light"></ion-progress-bar>
-        <ion-progress-bar type="indeterminate" color="medium"></ion-progress-bar>
-        <ion-progress-bar type="indeterminate" color="dark"></ion-progress-bar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/progress-bar/theming/colors/index.md b/static/usage/progress-bar/theming/colors/index.md
deleted file mode 100644
index 3dde9fac0a9..00000000000
--- a/static/usage/progress-bar/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/progress-bar/theming/colors/demo.html" />
diff --git a/static/usage/progress-bar/theming/css-properties/demo.html b/static/usage/progress-bar/theming/css-properties/demo.html
deleted file mode 100644
index 50761e26eba..00000000000
--- a/static/usage/progress-bar/theming/css-properties/demo.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Progress Bar</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
-
-    ion-progress-bar {
-      --background: #f3e895;
-      --progress-background: #09c567;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
-        <ion-progress-bar type="indeterminate"></ion-progress-bar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/progress-bar/theming/css-properties/index.md b/static/usage/progress-bar/theming/css-properties/index.md
deleted file mode 100644
index eb1ca7882d9..00000000000
--- a/static/usage/progress-bar/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/progress-bar/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/progress-bar/theming/css-shadow-parts/demo.html b/static/usage/progress-bar/theming/css-shadow-parts/demo.html
deleted file mode 100644
index e90d4144016..00000000000
--- a/static/usage/progress-bar/theming/css-shadow-parts/demo.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Progress Bar</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
-
-    ion-progress-bar::part(track) {
-      background: #f3e895;
-    }
-
-    ion-progress-bar::part(progress) {
-      background: #09c567;
-    }
-
-    ion-progress-bar::part(stream) {
-      background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
-        <ion-progress-bar type="indeterminate"></ion-progress-bar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/progress-bar/theming/css-shadow-parts/index.md b/static/usage/progress-bar/theming/css-shadow-parts/index.md
deleted file mode 100644
index 08ba68d73ca..00000000000
--- a/static/usage/progress-bar/theming/css-shadow-parts/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/progress-bar/theming/css-shadow-parts/demo.html"
-/>
diff --git a/static/usage/radio/basic/demo.html b/static/usage/radio/basic/demo.html
deleted file mode 100644
index 5ee38184b14..00000000000
--- a/static/usage/radio/basic/demo.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Radio</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-radio-group value="strawberries">
-            <ion-item>
-              <ion-label>Grapes</ion-label>
-              <ion-radio slot="end" value="grapes"></ion-radio>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>Strawberries</ion-label>
-              <ion-radio slot="end" value="strawberries"></ion-radio>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>Pineapple</ion-label>
-              <ion-radio slot="end" value="pineapple"></ion-radio>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>Cherries (Disabled)</ion-label>
-              <ion-radio slot="end" value="cherries" disabled="true"></ion-radio>
-            </ion-item>
-          </ion-radio-group>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/radio/basic/index.md b/static/usage/radio/basic/index.md
deleted file mode 100644
index ef2267cb13c..00000000000
--- a/static/usage/radio/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/radio/basic/demo.html" size="250px" />
diff --git a/static/usage/radio/empty-selection/demo.html b/static/usage/radio/empty-selection/demo.html
deleted file mode 100644
index 4d45aa43194..00000000000
--- a/static/usage/radio/empty-selection/demo.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Radio</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-radio-group allow-empty-selection="true" value="turtles">
-            <ion-item>
-              <ion-label>Dogs</ion-label>
-              <ion-radio slot="end" value="dogs"></ion-radio>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>Cats</ion-label>
-              <ion-radio slot="end" value="cats"></ion-radio>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>Turtles</ion-label>
-              <ion-radio slot="end" value="turtles"></ion-radio>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>Fish</ion-label>
-              <ion-radio slot="end" value="fish"></ion-radio>
-            </ion-item>
-          </ion-radio-group>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/radio/empty-selection/index.md b/static/usage/radio/empty-selection/index.md
deleted file mode 100644
index 701953fe82d..00000000000
--- a/static/usage/radio/empty-selection/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/radio/empty-selection/demo.html" size="250px" />
diff --git a/static/usage/radio/theming/colors/demo.html b/static/usage/radio/theming/colors/demo.html
deleted file mode 100644
index f8b20cd2467..00000000000
--- a/static/usage/radio/theming/colors/demo.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Radio</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-radio-group value="primary">
-          <ion-radio color="primary" value="primary"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="secondary">
-          <ion-radio color="secondary" value="secondary"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="tertiary">
-          <ion-radio color="tertiary" value="tertiary"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="success">
-          <ion-radio color="success" value="success"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="warning">
-          <ion-radio color="warning" value="warning"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="danger">
-          <ion-radio color="danger" value="danger"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="light">
-          <ion-radio color="light" value="light"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="medium">
-          <ion-radio color="medium" value="medium"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="dark">
-          <ion-radio color="dark" value="dark"></ion-radio>
-        </ion-radio-group>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/radio/theming/colors/index.md b/static/usage/radio/theming/colors/index.md
deleted file mode 100644
index 4874a9d5aff..00000000000
--- a/static/usage/radio/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/radio/theming/colors/demo.html" size="100px" />
diff --git a/static/usage/radio/theming/css-properties/demo.html b/static/usage/radio/theming/css-properties/demo.html
deleted file mode 100644
index 20a4e530024..00000000000
--- a/static/usage/radio/theming/css-properties/demo.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Radio</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-radio {
-      --border-radius: 4px;
-      --inner-border-radius: 4px;
-
-      --color: #ddd;
-      --color-checked: #6815ec;
-    }
-
-    ion-radio.ios {
-      width: 20px;
-      height: 20px;
-
-      border: 2px solid #ddd;
-      border-radius: 4px;
-    }
-
-    .radio-checked.ios {
-      border-color: #6815ec;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-radio-group value="custom-checked">
-          <ion-radio value="custom"></ion-radio>
-          <ion-radio value="custom-checked"></ion-radio>
-        </ion-radio-group>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/radio/theming/css-properties/index.md b/static/usage/radio/theming/css-properties/index.md
deleted file mode 100644
index ae6ae40bfba..00000000000
--- a/static/usage/radio/theming/css-properties/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/radio/theming/css-properties/demo.html"
-  size="100px"
-/>
diff --git a/static/usage/radio/theming/css-shadow-parts/demo.html b/static/usage/radio/theming/css-shadow-parts/demo.html
deleted file mode 100644
index 452dfd6ef10..00000000000
--- a/static/usage/radio/theming/css-shadow-parts/demo.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Radio</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-radio {
-      width: 30px;
-      height: 30px;
-    }
-
-    ion-radio::part(container) {
-      border-radius: 8px;
-      border: 2px solid #ddd;
-    }
-
-    ion-radio::part(mark) {
-      background: none;
-      transition: none;
-      transform: none;
-      border-radius: 0;
-    }
-
-    ion-radio.radio-checked::part(container) {
-      background: #6815ec;
-      border-color: transparent;
-    }
-
-    ion-radio.radio-checked::part(mark) {
-      width: 6px;
-      height: 10px;
-
-      border-width: 0px 2px 2px 0px;
-      border-style: solid;
-      border-color: #fff;
-
-      transform: rotate(45deg);
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-radio-group value="custom-checked">
-          <ion-radio value="custom"></ion-radio>
-          <ion-radio value="custom-checked"></ion-radio>
-        </ion-radio-group>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/radio/theming/css-shadow-parts/index.md b/static/usage/radio/theming/css-shadow-parts/index.md
deleted file mode 100644
index bc64d0189d7..00000000000
--- a/static/usage/radio/theming/css-shadow-parts/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/radio/theming/css-shadow-parts/demo.html"
-  size="100px"
-/>
diff --git a/static/usage/range/basic/demo.html b/static/usage/range/basic/demo.html
deleted file mode 100644
index d995150d62a..00000000000
--- a/static/usage/range/basic/demo.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Range</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range></ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/range/basic/index.md b/static/usage/range/basic/index.md
deleted file mode 100644
index cd5b7ad347d..00000000000
--- a/static/usage/range/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/range/basic/demo.html" />
diff --git a/static/usage/range/dual-knobs/demo.html b/static/usage/range/dual-knobs/demo.html
deleted file mode 100644
index 925a7f32df6..00000000000
--- a/static/usage/range/dual-knobs/demo.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Range</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range dual-knobs="true"></ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const range = document.querySelector('ion-range');
-    range.value = {
-      lower: 20,
-      upper: 80
-    };
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/range/dual-knobs/index.md b/static/usage/range/dual-knobs/index.md
deleted file mode 100644
index 0beb17d9373..00000000000
--- a/static/usage/range/dual-knobs/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/range/dual-knobs/demo.html" />
diff --git a/static/usage/range/ion-change-event/demo.html b/static/usage/range/ion-change-event/demo.html
deleted file mode 100644
index 338f3cd7d1a..00000000000
--- a/static/usage/range/ion-change-event/demo.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Range</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    .demo {
-      max-width: 320px;
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div class="demo">
-          <ion-range></ion-range>
-          <ion-label>ionChange emitted value: <span id="lastValue"></span></ion-label>
-        </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const range = document.querySelector('ion-range');
-    const lastValue = document.querySelector('#lastValue');
-
-    range.addEventListener('ionChange', ({ detail }) => {
-      lastValue.innerHTML = detail.value;
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/range/ion-change-event/index.md b/static/usage/range/ion-change-event/index.md
deleted file mode 100644
index be81dd95ea5..00000000000
--- a/static/usage/range/ion-change-event/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/range/ion-change-event/demo.html"
-/>
diff --git a/static/usage/range/ion-knob-move-event/demo.html b/static/usage/range/ion-knob-move-event/demo.html
deleted file mode 100644
index a0f012a3eff..00000000000
--- a/static/usage/range/ion-knob-move-event/demo.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Range</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    .demo {
-      max-width: 320px;
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div class="demo">
-          <ion-range></ion-range>
-          <div>
-            <ion-label>ionKnobMoveStart: <span id="moveStart"></span></ion-label>
-          </div>
-          <div>
-            <ion-label>ionKnobMoveEnd: <span id="moveEnd"></span></ion-label>
-          </div>
-        </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const range = document.querySelector('ion-range');
-    const moveStart = document.querySelector('#moveStart');
-    const moveEnd = document.querySelector('#moveEnd');
-
-    range.addEventListener('ionKnobMoveStart', ({ detail }) => {
-      moveStart.innerHTML = detail.value;
-    });
-
-    range.addEventListener('ionKnobMoveEnd', ({ detail }) => {
-      moveEnd.innerHTML = detail.value;
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/range/ion-knob-move-event/index.md b/static/usage/range/ion-knob-move-event/index.md
deleted file mode 100644
index bbe8ddc29ee..00000000000
--- a/static/usage/range/ion-knob-move-event/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/range/ion-knob-move-event/demo.html"
-/>
diff --git a/static/usage/range/pins/demo.html b/static/usage/range/pins/demo.html
deleted file mode 100644
index 56e024a5fd7..00000000000
--- a/static/usage/range/pins/demo.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Range</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range pin="true"></ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const range = document.querySelector('ion-range');
-    range.pinFormatter = (value) => {
-      return `${value}%`;
-    };
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/range/pins/index.md b/static/usage/range/pins/index.md
deleted file mode 100644
index 71f945fcc58..00000000000
--- a/static/usage/range/pins/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/range/pins/demo.html"
-/>
diff --git a/static/usage/range/slots/demo.html b/static/usage/range/slots/demo.html
deleted file mode 100644
index d530cd8dbd4..00000000000
--- a/static/usage/range/slots/demo.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Range</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range>
-          <ion-icon slot="start" name="snow-outline"></ion-icon>
-          <ion-icon slot="end" name="sunny-outline"></ion-icon>
-        </ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/range/slots/index.md b/static/usage/range/slots/index.md
deleted file mode 100644
index 74905189d69..00000000000
--- a/static/usage/range/slots/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/range/slots/demo.html" />
diff --git a/static/usage/range/snapping-ticks/demo.html b/static/usage/range/snapping-ticks/demo.html
deleted file mode 100644
index 5075db5d291..00000000000
--- a/static/usage/range/snapping-ticks/demo.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Range</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range ticks="true" snaps="true" min="0" max="10"></ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/range/snapping-ticks/index.md b/static/usage/range/snapping-ticks/index.md
deleted file mode 100644
index 5e5ffda523d..00000000000
--- a/static/usage/range/snapping-ticks/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/range/snapping-ticks/demo.html" />
diff --git a/static/usage/range/theming/css-properties/demo.html b/static/usage/range/theming/css-properties/demo.html
deleted file mode 100644
index 09d7bcbcb7b..00000000000
--- a/static/usage/range/theming/css-properties/demo.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Range</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      --bar-background: #a2d2ff;
-      --bar-background-active: #bde0fe;
-      --bar-height: 8px;
-      --bar-border-radius: 8px;
-      --knob-background: #ffc8dd;
-      --knob-size: 40px;
-      --pin-background: #ffafcc;
-      --pin-color: #fff;
-
-      max-width: 320px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range value="50" pin="true"></ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/range/theming/css-properties/index.md b/static/usage/range/theming/css-properties/index.md
deleted file mode 100644
index 18bbf19bc90..00000000000
--- a/static/usage/range/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/range/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/range/theming/css-shadow-parts/demo.html b/static/usage/range/theming/css-shadow-parts/demo.html
deleted file mode 100644
index fb27194b4a5..00000000000
--- a/static/usage/range/theming/css-shadow-parts/demo.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Range</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
-
-    ion-range::part(tick) {
-      background: #a2d2ff;
-    }
-
-    ion-range::part(tick-active) {
-      background: #bde0fe;
-    }
-
-    ion-range::part(pin) {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-
-      background: #ffafcc;
-      color: #fff;
-
-      border-radius: 50%;
-      transform: scale(1.01);
-
-      top: -20px;
-
-      min-width: 28px;
-      height: 28px;
-      transition: transform 120ms ease, background 120ms ease;
-    }
-
-    ion-range::part(pin)::before {
-      content: none;
-    }
-
-    ion-range::part(knob) {
-      background: #ffc8dd;
-    }
-
-    ion-range::part(bar) {
-      background: #a2d2ff;
-    }
-
-    ion-range::part(bar-active) {
-      background: #bde0fe;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range min="0" max="10" value="5" pin="true" ticks="true" snaps="true"></ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/range/theming/css-shadow-parts/index.md b/static/usage/range/theming/css-shadow-parts/index.md
deleted file mode 100644
index cd1fa1c5a25..00000000000
--- a/static/usage/range/theming/css-shadow-parts/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/range/theming/css-shadow-parts/demo.html"
-/>
diff --git a/static/usage/refresher/advanced/demo.html b/static/usage/refresher/advanced/demo.html
deleted file mode 100644
index 53096b16c45..00000000000
--- a/static/usage/refresher/advanced/demo.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Refresher</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-item {
-      --padding-start: 8px;
-    }
-
-    ion-icon {
-      font-size: 12px;
-      align-self: start;
-      margin: 15px 8px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Pull to Refresh</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content>
-      <ion-refresher id="refresher" slot="fixed">
-        <ion-refresher-content></ion-refresher-content>
-      </ion-refresher>
-
-      <ion-list id="list"></ion-list>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const refresher = document.getElementById('refresher');
-    const names = [
-      'Burt Bear',
-      'Charlie Cheetah',
-      'Donald Duck',
-      'Eva Eagle',
-      'Ellie Elephant',
-      'Gino Giraffe',
-      'Isabella Iguana',
-      'Karl Kitten',
-      'Lionel Lion',
-      'Molly Mouse',
-      'Paul Puppy',
-      'Rachel Rabbit',
-      'Ted Turtle',
-    ];
-
-    refresher.addEventListener('ionRefresh', () => {
-      setTimeout(() => {
-        addItems(3, true);
-        refresher.complete();
-      }, 2000);
-    });
-
-    const list = document.querySelector('ion-list');
-    addItems(5, false);
-
-    function chooseRandomName() {
-      return names[Math.floor(Math.random() * names.length)];
-    }
-
-    function addItems(count, unread) {
-      for (let i = 0; i < count; i++) {
-        list.insertBefore(createItems(unread), list.firstChild);
-      }
-    }
-
-    function createItems(unread = false) {
-      const name = chooseRandomName();
-      let item = document.createElement('ion-item');
-      item.button = true;
-
-      item.innerHTML += `
-        <ion-icon color="primary" name="${unread ? 'ellipse' : ''}" slot="start"></ion-icon>
-        <ion-label>
-          <h2>${name}</h2>
-          <p>New message from ${name}</p>
-        </ion-label>
-      `;
-
-      return item;
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/refresher/advanced/index.md b/static/usage/refresher/advanced/index.md
deleted file mode 100644
index be1722152b4..00000000000
--- a/static/usage/refresher/advanced/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="usage/refresher/advanced/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/refresher/basic/demo.html b/static/usage/refresher/basic/demo.html
deleted file mode 100644
index 0d587f8ce40..00000000000
--- a/static/usage/refresher/basic/demo.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Refresher</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Pull to Refresh</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content class="ion-padding">
-      <ion-refresher id="refresher" slot="fixed">
-        <ion-refresher-content></ion-refresher-content>
-      </ion-refresher>
-
-      <p>Pull this content down to trigger the refresh.</p>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const refresher = document.getElementById('refresher');
-
-    refresher.addEventListener('ionRefresh', () => {
-      setTimeout(() => {
-        // Any calls to load data go here
-        refresher.complete();
-      }, 2000);
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/refresher/basic/index.md b/static/usage/refresher/basic/index.md
deleted file mode 100644
index 8cee98ed995..00000000000
--- a/static/usage/refresher/basic/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/refresher/basic/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/refresher/custom-content/demo.html b/static/usage/refresher/custom-content/demo.html
deleted file mode 100644
index eb514fdedab..00000000000
--- a/static/usage/refresher/custom-content/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Refresher</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Pull to Refresh</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content class="ion-padding">
-      <ion-refresher id="refresher" slot="fixed">
-        <ion-refresher-content
-          pulling-icon="chevron-down-circle-outline"
-          pulling-text="Pull to refresh"
-          refreshing-spinner="circles"
-          refreshing-text="Refreshing...">
-        </ion-refresher-content>
-      </ion-refresher>
-
-      <p>Pull this content down to trigger the refresh.</p>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const refresher = document.getElementById('refresher');
-
-    refresher.addEventListener('ionRefresh', () => {
-      setTimeout(() => {
-        // Any calls to load data go here
-        refresher.complete();
-      }, 2000);
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/refresher/custom-content/index.md b/static/usage/refresher/custom-content/index.md
deleted file mode 100644
index 371e87c559a..00000000000
--- a/static/usage/refresher/custom-content/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/refresher/custom-content/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/refresher/custom-scroll-target/demo.html b/static/usage/refresher/custom-scroll-target/demo.html
deleted file mode 100644
index c5939679d8e..00000000000
--- a/static/usage/refresher/custom-scroll-target/demo.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Refresher</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .ion-content-scroll-host {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: 100%;
-      overflow-y: auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Pull to Refresh</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content scroll-y="false">
-      <ion-refresher id="refresher" slot="fixed">
-        <ion-refresher-content></ion-refresher-content>
-      </ion-refresher>
-
-      <div class="ion-content-scroll-host ion-padding">
-        <p>Pull this content down to trigger the refresh.</p>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const refresher = document.getElementById('refresher');
-
-    refresher.addEventListener('ionRefresh', () => {
-      setTimeout(() => {
-        // Any calls to load data go here
-        refresher.complete();
-      }, 2000);
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/refresher/custom-scroll-target/index.md b/static/usage/refresher/custom-scroll-target/index.md
deleted file mode 100644
index 1f543e8de68..00000000000
--- a/static/usage/refresher/custom-scroll-target/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/refresher/custom-scroll-target/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/refresher/pull-properties/demo.html b/static/usage/refresher/pull-properties/demo.html
deleted file mode 100644
index 9d2e79da284..00000000000
--- a/static/usage/refresher/pull-properties/demo.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Refresher</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Pull to Refresh</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content class="ion-padding">
-      <ion-refresher id="refresher" slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
-        <ion-refresher-content></ion-refresher-content>
-      </ion-refresher>
-
-      <p>Pull this content down to trigger the refresh.</p>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const refresher = document.getElementById('refresher');
-
-    refresher.addEventListener('ionRefresh', () => {
-      setTimeout(() => {
-        // Any calls to load data go here
-        refresher.complete();
-      }, 2000);
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/refresher/pull-properties/index.md b/static/usage/refresher/pull-properties/index.md
deleted file mode 100644
index f1e015c3e9e..00000000000
--- a/static/usage/refresher/pull-properties/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/refresher/pull-properties/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
diff --git a/static/usage/reorder/basic/demo.html b/static/usage/reorder/basic/demo.html
deleted file mode 100644
index 96900a58f78..00000000000
--- a/static/usage/reorder/basic/demo.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Reorder</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-          <ion-reorder-group disabled="false">
-            <ion-item>
-              <ion-label>
-                Item 1
-              </ion-label>
-              <ion-reorder slot="end"></ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 2
-              </ion-label>
-              <ion-reorder slot="end"></ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 3
-              </ion-label>
-              <ion-reorder slot="end"></ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 4
-              </ion-label>
-              <ion-reorder slot="end"></ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 5
-              </ion-label>
-              <ion-reorder slot="end"></ion-reorder>
-            </ion-item>
-          </ion-reorder-group>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const reorderGroup = document.querySelector('ion-reorder-group');
-
-    reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
-      // The `from` and `to` properties contain the index of the item
-      // when the drag started and ended, respectively
-      console.log('Dragged from index', detail.from, 'to', detail.to);
-
-      // Finish the reorder and position the item in the DOM based on
-      // where the gesture ended. This method can also be called directly
-      // by the reorder group
-      detail.complete();
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/reorder/basic/index.md b/static/usage/reorder/basic/index.md
deleted file mode 100644
index 2ff54946315..00000000000
--- a/static/usage/reorder/basic/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/reorder/basic/demo.html"
-  size="300px"
-/>
diff --git a/static/usage/reorder/custom-icon/demo.html b/static/usage/reorder/custom-icon/demo.html
deleted file mode 100644
index 4caa7e2facb..00000000000
--- a/static/usage/reorder/custom-icon/demo.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Reorder</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-          <ion-reorder-group disabled="false">
-            <ion-item>
-              <ion-label>
-                Item 1
-              </ion-label>
-              <ion-reorder slot="end">
-                <ion-icon name="pizza"></ion-icon>
-              </ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 2
-              </ion-label>
-              <ion-reorder slot="end">
-                <ion-icon name="pizza"></ion-icon>
-              </ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 3
-              </ion-label>
-              <ion-reorder slot="end">
-                <ion-icon name="pizza"></ion-icon>
-              </ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 4
-              </ion-label>
-              <ion-reorder slot="end">
-                <ion-icon name="pizza"></ion-icon>
-              </ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 5
-              </ion-label>
-              <ion-reorder slot="end">
-                <ion-icon name="pizza"></ion-icon>
-              </ion-reorder>
-            </ion-item>
-          </ion-reorder-group>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const reorderGroup = document.querySelector('ion-reorder-group');
-
-    reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
-      // The `from` and `to` properties contain the index of the item
-      // when the drag started and ended, respectively
-      console.log('Dragged from index', detail.from, 'to', detail.to);
-
-      // Finish the reorder and position the item in the DOM based on
-      // where the gesture ended. This method can also be called directly
-      // by the reorder group
-      detail.complete();
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/reorder/custom-icon/index.md b/static/usage/reorder/custom-icon/index.md
deleted file mode 100644
index d49c2a1da46..00000000000
--- a/static/usage/reorder/custom-icon/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/reorder/custom-icon/demo.html"
-  size="300px"
-/>
diff --git a/static/usage/reorder/custom-scroll-target/demo.html b/static/usage/reorder/custom-scroll-target/demo.html
deleted file mode 100644
index 893f2d125c1..00000000000
--- a/static/usage/reorder/custom-scroll-target/demo.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Reorder</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-
-    .ion-content-scroll-host {
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      height: 100%;
-      width: 100%;
-      overflow-y: auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content scroll-y="false">
-      <div class="container">
-        <div class="ion-content-scroll-host">
-          <ion-list>
-            <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-            <ion-reorder-group disabled="false">
-              <ion-item>
-                <ion-label>
-                  Item 1
-                </ion-label>
-                <ion-reorder slot="end"></ion-reorder>
-              </ion-item>
-
-              <ion-item>
-                <ion-label>
-                  Item 2
-                </ion-label>
-                <ion-reorder slot="end"></ion-reorder>
-              </ion-item>
-
-              <ion-item>
-                <ion-label>
-                  Item 3
-                </ion-label>
-                <ion-reorder slot="end"></ion-reorder>
-              </ion-item>
-
-              <ion-item>
-                <ion-label>
-                  Item 4
-                </ion-label>
-                <ion-reorder slot="end"></ion-reorder>
-              </ion-item>
-
-              <ion-item>
-                <ion-label>
-                  Item 5
-                </ion-label>
-                <ion-reorder slot="end"></ion-reorder>
-              </ion-item>
-            </ion-reorder-group>
-          </ion-list>
-        </div>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const reorderGroup = document.querySelector('ion-reorder-group');
-
-    reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
-      // The `from` and `to` properties contain the index of the item
-      // when the drag started and ended, respectively
-      console.log('Dragged from index', detail.from, 'to', detail.to);
-
-      // Finish the reorder and position the item in the DOM based on
-      // where the gesture ended. This method can also be called directly
-      // by the reorder group
-      detail.complete();
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/reorder/custom-scroll-target/index.md b/static/usage/reorder/custom-scroll-target/index.md
deleted file mode 100644
index 0534ec14b89..00000000000
--- a/static/usage/reorder/custom-scroll-target/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/reorder/custom-scroll-target/demo.html"
-  size="300px"
-  includeIonContent={false}
-/>
diff --git a/static/usage/reorder/toggling-disabled/demo.html b/static/usage/reorder/toggling-disabled/demo.html
deleted file mode 100644
index 8dc14d52769..00000000000
--- a/static/usage/reorder/toggling-disabled/demo.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Reorder</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
-
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-reorder-group>
-            <ion-item>
-              <ion-label>
-                Item 1
-              </ion-label>
-              <ion-reorder slot="end"></ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 2
-              </ion-label>
-              <ion-reorder slot="end"></ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 3
-              </ion-label>
-              <ion-reorder slot="end"></ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 4
-              </ion-label>
-              <ion-reorder slot="end"></ion-reorder>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>
-                Item 5
-              </ion-label>
-              <ion-reorder slot="end"></ion-reorder>
-            </ion-item>
-          </ion-reorder-group>
-        </ion-list>
-
-        <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-        <ion-button onClick="toggleReorder()">
-          Toggle Reorder
-        </ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const reorderGroup = document.querySelector('ion-reorder-group');
-
-    reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
-      // The `from` and `to` properties contain the index of the item
-      // when the drag started and ended, respectively
-      console.log('Dragged from index', detail.from, 'to', detail.to);
-
-      // Finish the reorder and position the item in the DOM based on
-      // where the gesture ended. This method can also be called directly
-      // by the reorder group
-      detail.complete();
-    });
-
-    function toggleReorder() {
-      reorderGroup.disabled = !reorderGroup.disabled;
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/reorder/toggling-disabled/index.md b/static/usage/reorder/toggling-disabled/index.md
deleted file mode 100644
index 9f3f3b30ef6..00000000000
--- a/static/usage/reorder/toggling-disabled/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/reorder/toggling-disabled/demo.html"
-  size="350px"
-/>
diff --git a/static/usage/reorder/updating-data/demo.html b/static/usage/reorder/updating-data/demo.html
deleted file mode 100644
index 7987a519736..00000000000
--- a/static/usage/reorder/updating-data/demo.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Reorder</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-          <ion-reorder-group disabled="false"></ion-reorder-group>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const reorderGroup = document.querySelector('ion-reorder-group');
-
-    let items = [1, 2, 3, 4, 5];
-    reorderItems(items);
-
-    reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
-      // Before complete is called with the items they will remain in the
-      // order before the drag
-      console.log('Before complete', items);
-
-      // Finish the reorder and position the item in the DOM based on
-      // where the gesture ended. Update the items variable to the
-      // new order of items
-      items = detail.complete(items);
-
-      // Reorder the items in the DOM
-      reorderItems(items);
-
-      // After complete is called the items will be in the new order
-      console.log('After complete', items);
-    });
-
-    function reorderItems(items) {
-      reorderGroup.replaceChildren();
-
-      let reordered = '';
-
-      for (let i = 0; i < items.length; i++) {
-        reordered += `
-          <ion-item>
-            <ion-label>
-              Item ${items[i]}
-            </ion-label>
-            <ion-reorder slot="end"></ion-reorder>
-          </ion-item>
-        `;
-      }
-
-      reorderGroup.innerHTML = reordered;
-    }
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/reorder/updating-data/index.md b/static/usage/reorder/updating-data/index.md
deleted file mode 100644
index 8ed718679c0..00000000000
--- a/static/usage/reorder/updating-data/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/reorder/updating-data/demo.html"
-  size="300px"
-/>
diff --git a/static/usage/reorder/wrapper/demo.html b/static/usage/reorder/wrapper/demo.html
deleted file mode 100644
index 2b8f0116fc3..00000000000
--- a/static/usage/reorder/wrapper/demo.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Reorder</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-          <ion-reorder-group disabled="false">
-            <ion-reorder>
-              <ion-item>
-                <ion-label>
-                  Item 1
-                </ion-label>
-              </ion-item>
-            </ion-reorder>
-
-            <ion-reorder>
-              <ion-item>
-                <ion-label>
-                  Item 2
-                </ion-label>
-              </ion-item>
-            </ion-reorder>
-
-            <ion-reorder>
-              <ion-item>
-                <ion-label>
-                  Item 3
-                </ion-label>
-              </ion-item>
-            </ion-reorder>
-
-            <ion-reorder>
-              <ion-item>
-                <ion-label>
-                  Item 4
-                </ion-label>
-              </ion-item>
-            </ion-reorder>
-
-            <ion-reorder>
-              <ion-item>
-                <ion-label>
-                  Item 5
-                </ion-label>
-              </ion-item>
-            </ion-reorder>
-          </ion-reorder-group>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const reorderGroup = document.querySelector('ion-reorder-group');
-
-    reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
-      // The `from` and `to` properties contain the index of the item
-      // when the drag started and ended, respectively
-      console.log('Dragged from index', detail.from, 'to', detail.to);
-
-      // Finish the reorder and position the item in the DOM based on
-      // where the gesture ended. This method can also be called directly
-      // by the reorder group
-      detail.complete();
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/reorder/wrapper/index.md b/static/usage/reorder/wrapper/index.md
deleted file mode 100644
index ab8b535ce99..00000000000
--- a/static/usage/reorder/wrapper/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/reorder/wrapper/demo.html"
-  size="300px"
-/>
diff --git a/static/usage/ripple-effect/basic/demo.html b/static/usage/ripple-effect/basic/demo.html
deleted file mode 100644
index 834f5269328..00000000000
--- a/static/usage/ripple-effect/basic/demo.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Ripple Effect</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .wrapper {
-      display: flex;
-      flex-wrap: wrap;
-
-      align-items: center;
-      justify-content: space-between;
-      text-align: center;
-
-      height: 300px;
-      width: 300px;
-
-      margin: 0 auto;
-    }
-
-    b {
-      width: 100%;
-    }
-
-    .ripple-parent {
-      position: relative;
-      overflow: hidden;
-
-      border: 1px solid #ddd;
-    }
-
-    .rectangle {
-      width: 300px;
-      height: 150px;
-    }
-
-    .rounded-rectangle {
-      width: 185px;
-      height: 65px;
-      border-radius: 8px;
-    }
-
-    .circle {
-      width: 90px;
-      height: 90px;
-      border-radius: 50%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div class="wrapper">
-          <b>Click on a shape to see the ripple</b>
-
-          <div class="ion-activatable ripple-parent rectangle">
-            <ion-ripple-effect></ion-ripple-effect>
-          </div>
-
-          <div class="ion-activatable ripple-parent rounded-rectangle">
-            <ion-ripple-effect></ion-ripple-effect>
-          </div>
-
-          <div class="ion-activatable ripple-parent circle">
-            <ion-ripple-effect></ion-ripple-effect>
-          </div>
-        </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/ripple-effect/basic/index.md b/static/usage/ripple-effect/basic/index.md
deleted file mode 100644
index 1e8e8eabb01..00000000000
--- a/static/usage/ripple-effect/basic/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/ripple-effect/basic/demo.html"
-  size="300px"
-/>
diff --git a/static/usage/ripple-effect/customizing/demo.html b/static/usage/ripple-effect/customizing/demo.html
deleted file mode 100644
index 5c7037309a6..00000000000
--- a/static/usage/ripple-effect/customizing/demo.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Ripple Effect</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .wrapper {
-      display: flex;
-      flex-wrap: wrap;
-
-      align-items: center;
-      justify-content: space-between;
-      text-align: center;
-
-      height: 170px;
-      width: 400px;
-
-      margin: 0 auto;
-    }
-
-    b {
-      width: 100%;
-    }
-
-    .ripple-parent {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      position: relative;
-      overflow: hidden;
-
-      border: 1px solid #ddd;
-
-      user-select: none;
-
-      width: 100%;
-      height: 50px;
-      border-radius: 8px;
-    }
-
-    .custom-parent {
-      color: #de1e7e;
-    }
-
-    .custom-ripple {
-      color: #501ace;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div class="wrapper">
-          <b>Click on a shape to see the ripple</b>
-
-          <div class="ion-activatable ripple-parent custom-parent">
-            Custom Parent Color
-            <ion-ripple-effect></ion-ripple-effect>
-          </div>
-
-          <div class="ion-activatable ripple-parent">
-            Custom Ripple Color
-            <ion-ripple-effect class="custom-ripple"></ion-ripple-effect>
-          </div>
-        </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/ripple-effect/customizing/index.md b/static/usage/ripple-effect/customizing/index.md
deleted file mode 100644
index eee4728fce1..00000000000
--- a/static/usage/ripple-effect/customizing/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/ripple-effect/customizing/demo.html"
-  size="175px"
-/>
diff --git a/static/usage/ripple-effect/type/demo.html b/static/usage/ripple-effect/type/demo.html
deleted file mode 100644
index e6ae1be1633..00000000000
--- a/static/usage/ripple-effect/type/demo.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Ripple Effect</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .wrapper {
-      display: flex;
-      flex-wrap: wrap;
-
-      align-items: center;
-      justify-content: space-between;
-      text-align: center;
-
-      height: 170px;
-      width: 400px;
-
-      margin: 0 auto;
-    }
-
-    b {
-      width: 100%;
-    }
-
-    .ripple-parent {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      position: relative;
-      overflow: hidden;
-
-      border: 1px solid #ddd;
-
-      user-select: none;
-    }
-
-    .rounded-rectangle {
-      width: 250px;
-      height: 75px;
-      border-radius: 8px;
-    }
-
-    .circle {
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div class="wrapper">
-          <b>Click on a shape to see the ripple</b>
-
-          <div class="ion-activatable ripple-parent rounded-rectangle">
-            Bounded
-            <ion-ripple-effect></ion-ripple-effect>
-          </div>
-
-          <div class="ion-activatable ripple-parent circle">
-            Unbounded
-            <ion-ripple-effect type="unbounded"></ion-ripple-effect>
-          </div>
-        </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/ripple-effect/type/index.md b/static/usage/ripple-effect/type/index.md
deleted file mode 100644
index a16b691acf6..00000000000
--- a/static/usage/ripple-effect/type/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/ripple-effect/type/demo.html"
-  size="175px"
-/>
diff --git a/static/usage/searchbar/basic/demo.html b/static/usage/searchbar/basic/demo.html
deleted file mode 100644
index e0ba868eea8..00000000000
--- a/static/usage/searchbar/basic/demo.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Searchbar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-searchbar></ion-searchbar>
-        <ion-searchbar placeholder="Custom Placeholder"></ion-searchbar>
-        <ion-searchbar disabled="true" placeholder="Disabled"></ion-searchbar>
-        <ion-searchbar value="Value"></ion-searchbar>
-        <ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/searchbar/basic/index.md b/static/usage/searchbar/basic/index.md
deleted file mode 100644
index ea9d2ff092a..00000000000
--- a/static/usage/searchbar/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/searchbar/basic/demo.html" size="300px" />
diff --git a/static/usage/searchbar/cancel-button/demo.html b/static/usage/searchbar/cancel-button/demo.html
deleted file mode 100644
index 84e63843389..00000000000
--- a/static/usage/searchbar/cancel-button/demo.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Searchbar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-searchbar show-cancel-button="focus" placeholder="Show on Focus"></ion-searchbar>
-        <ion-searchbar show-cancel-button="always" placeholder="Always Show"></ion-searchbar>
-        <ion-searchbar show-cancel-button="never" placeholder="Never Show"></ion-searchbar>
-        <ion-searchbar show-cancel-button="always" cancel-button-text="Custom Cancel" cancel-button-icon="trash" placeholder="Custom Cancel Button"></ion-searchbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/searchbar/cancel-button/index.md b/static/usage/searchbar/cancel-button/index.md
deleted file mode 100644
index b435b591540..00000000000
--- a/static/usage/searchbar/cancel-button/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/searchbar/cancel-button/demo.html" size="250px" />
diff --git a/static/usage/searchbar/clear-button/demo.html b/static/usage/searchbar/clear-button/demo.html
deleted file mode 100644
index 656a41c70b5..00000000000
--- a/static/usage/searchbar/clear-button/demo.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Searchbar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-searchbar show-clear-button="focus" value="Show on Focus"></ion-searchbar>
-        <ion-searchbar show-clear-button="always" value="Always Show"></ion-searchbar>
-        <ion-searchbar show-clear-button="never" value="Never Show"></ion-searchbar>
-        <ion-searchbar show-clear-button="always" clear-icon="trash-bin" value="Custom Clear Icon"></ion-searchbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/searchbar/clear-button/index.md b/static/usage/searchbar/clear-button/index.md
deleted file mode 100644
index 71167e9f30b..00000000000
--- a/static/usage/searchbar/clear-button/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/searchbar/clear-button/demo.html" size="250px" />
diff --git a/static/usage/searchbar/debounce/demo.html b/static/usage/searchbar/debounce/demo.html
deleted file mode 100644
index 25497f0b7da..00000000000
--- a/static/usage/searchbar/debounce/demo.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Searchbar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-searchbar debounce="1000"></ion-searchbar>
-        <ion-list></ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-<script>
-  const searchbar = document.querySelector('ion-searchbar');
-  const list = document.querySelector('ion-list');
-
-  const data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
-  let results = [...data];
-  filterItems(results);
-
-  searchbar.addEventListener('ionChange', handleChange);
-
-  function handleChange(event) {
-    const query = event.target.value.toLowerCase();
-    results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
-    filterItems(results);
-  }
-
-  function filterItems(results) {
-    list.replaceChildren();
-
-    let items = '';
-
-    for (let i = 0; i < results.length; i++) {
-      items += `
-        <ion-item>
-          <ion-label>${results[i]}</ion-label>
-        </ion-item>
-      `;
-    }
-
-    list.innerHTML = items;
-  }
-</script>
-
-</html>
diff --git a/static/usage/searchbar/debounce/index.md b/static/usage/searchbar/debounce/index.md
deleted file mode 100644
index f5262bff71b..00000000000
--- a/static/usage/searchbar/debounce/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react from './react.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/searchbar/debounce/demo.html"
-  size="large"
-/>
diff --git a/static/usage/searchbar/search-icon/demo.html b/static/usage/searchbar/search-icon/demo.html
deleted file mode 100644
index d02014baca2..00000000000
--- a/static/usage/searchbar/search-icon/demo.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Searchbar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-searchbar></ion-searchbar>
-        <ion-searchbar search-icon="search-circle" placeholder="Custom Search Icon"></ion-searchbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/searchbar/search-icon/index.md b/static/usage/searchbar/search-icon/index.md
deleted file mode 100644
index 70692c721cf..00000000000
--- a/static/usage/searchbar/search-icon/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/searchbar/search-icon/demo.html" />
diff --git a/static/usage/searchbar/theming/colors/demo.html b/static/usage/searchbar/theming/colors/demo.html
deleted file mode 100644
index b840bc0112a..00000000000
--- a/static/usage/searchbar/theming/colors/demo.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Searchbar</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-searchbar placeholder="Default"></ion-searchbar>
-        <ion-searchbar color="primary" placeholder="Primary"></ion-searchbar>
-        <ion-searchbar color="secondary" placeholder="Secondary"></ion-searchbar>
-        <ion-searchbar color="tertiary" placeholder="Tertiary"></ion-searchbar>
-        <ion-searchbar color="success" placeholder="Success"></ion-searchbar>
-        <ion-searchbar color="warning" placeholder="Warning"></ion-searchbar>
-        <ion-searchbar color="danger" placeholder="Danger"></ion-searchbar>
-        <ion-searchbar color="light" placeholder="Light"></ion-searchbar>
-        <ion-searchbar color="medium" placeholder="Medium"></ion-searchbar>
-        <ion-searchbar color="dark" placeholder="Dark"></ion-searchbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/searchbar/theming/colors/index.md b/static/usage/searchbar/theming/colors/index.md
deleted file mode 100644
index bfc180873ad..00000000000
--- a/static/usage/searchbar/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/searchbar/theming/colors/demo.html" size="large" />
diff --git a/static/usage/searchbar/theming/css-properties/demo.html b/static/usage/searchbar/theming/css-properties/demo.html
deleted file mode 100644
index 71033407779..00000000000
--- a/static/usage/searchbar/theming/css-properties/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Searchbar</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-    }
-
-    ion-searchbar.custom {
-      --background: #19422d;
-      --color: #fff;
-      --placeholder-color: #fff;
-      --icon-color: #fff;
-      --clear-button-color: #fff;
-
-      --border-radius: 4px;
-    }
-
-    ion-searchbar.ios.custom {
-      --cancel-button-color: #19422d;
-    }
-
-    ion-searchbar.md.custom {
-      --cancel-button-color: #fff;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-searchbar show-cancel-button="focus" class="custom"></ion-searchbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/searchbar/theming/css-properties/index.md b/static/usage/searchbar/theming/css-properties/index.md
deleted file mode 100644
index abdda5b3bd6..00000000000
--- a/static/usage/searchbar/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/searchbar/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/segment-button/basic/demo.html b/static/usage/segment-button/basic/demo.html
deleted file mode 100644
index 16be7b65670..00000000000
--- a/static/usage/segment-button/basic/demo.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Segment Button</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-
-      max-width: 400px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-segment value="buttons">
-          <ion-segment-button value="default">
-            <ion-label>Default</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="buttons">
-            <ion-label>Button</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <ion-segment value="buttons">
-          <ion-segment-button value="disabled" disabled="true">
-            <ion-label>Disabled</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="buttons">
-            <ion-label>Button</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/segment-button/basic/index.md b/static/usage/segment-button/basic/index.md
deleted file mode 100644
index a8cf57524db..00000000000
--- a/static/usage/segment-button/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/segment-button/basic/demo.html" />
diff --git a/static/usage/segment-button/layout/demo.html b/static/usage/segment-button/layout/demo.html
deleted file mode 100644
index 50302d92672..00000000000
--- a/static/usage/segment-button/layout/demo.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <Viewport="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Segment Button</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-
-      max-width: 400px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-segment value="heart">
-          <ion-segment-button value="call">
-            <ion-icon name="call"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="heart">
-            <ion-icon name="heart"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="pin">
-            <ion-icon name="pin"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-
-        <ion-segment value="heart">
-          <ion-segment-button value="call">
-            <ion-label>Call</ion-label>
-            <ion-icon name="call"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="heart">
-            <ion-label>Heart</ion-label>
-            <ion-icon name="heart"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="pin">
-            <ion-label>Pin</ion-label>
-            <ion-icon name="pin"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-
-        <ion-segment value="heart">
-          <ion-segment-button value="call" layout="icon-bottom">
-            <ion-label>Call</ion-label>
-            <ion-icon name="call"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="heart" layout="icon-bottom">
-            <ion-label>Heart</ion-label>
-            <ion-icon name="heart"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="pin" layout="icon-bottom">
-            <ion-label>Pin</ion-label>
-            <ion-icon name="pin"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-
-        <ion-segment value="heart">
-          <ion-segment-button value="call" layout="icon-start">
-            <ion-label>Call</ion-label>
-            <ion-icon name="call"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="heart" layout="icon-start">
-            <ion-label>Heart</ion-label>
-            <ion-icon name="heart"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="pin" layout="icon-start">
-            <ion-label>Pin</ion-label>
-            <ion-icon name="pin"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-
-        <ion-segment value="heart">
-          <ion-segment-button value="call" layout="icon-end">
-            <ion-label>Call</ion-label>
-            <ion-icon name="call"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="heart" layout="icon-end">
-            <ion-label>Heart</ion-label>
-            <ion-icon name="heart"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="pin" layout="icon-end">
-            <ion-label>Pin</ion-label>
-            <ion-icon name="pin"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/segment-button/layout/index.md b/static/usage/segment-button/layout/index.md
deleted file mode 100644
index 384497b5425..00000000000
--- a/static/usage/segment-button/layout/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/segment-button/layout/demo.html" size="medium" />
diff --git a/static/usage/segment-button/theming/css-properties/demo.html b/static/usage/segment-button/theming/css-properties/demo.html
deleted file mode 100644
index 7c1a4edb5ef..00000000000
--- a/static/usage/segment-button/theming/css-properties/demo.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Segment Button</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
-
-    ion-segment-button {
-      --indicator-color: #08a391;
-    }
-
-    /* Material Design styles */
-    ion-segment-button.md {
-      --color: #000;
-      --color-checked: #08a391;
-      --indicator-height: 4px;
-    }
-
-    /* iOS styles */
-    ion-segment-button.ios {
-      --color: #08a391;
-      --color-checked: #fff;
-      --border-radius: 20px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-segment value="custom">
-          <ion-segment-button value="custom">
-            <ion-label>Custom</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="buttons">
-            <ion-label>Buttons</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/segment-button/theming/css-properties/index.md b/static/usage/segment-button/theming/css-properties/index.md
deleted file mode 100644
index 0e8780c4ffb..00000000000
--- a/static/usage/segment-button/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/segment-button/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/segment-button/theming/css-shadow-parts/demo.html b/static/usage/segment-button/theming/css-shadow-parts/demo.html
deleted file mode 100644
index 0c219a52502..00000000000
--- a/static/usage/segment-button/theming/css-shadow-parts/demo.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Segment Button</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
-
-    ion-segment-button::part(indicator-background) {
-      background: #08a391;
-    }
-
-    /* Material Design styles */
-    ion-segment-button.md::part(native) {
-      color: #000;
-    }
-
-    .segment-button-checked.md::part(native) {
-      color: #08a391;
-    }
-
-    ion-segment-button.md::part(indicator-background) {
-      height: 4px;
-    }
-
-    /* iOS styles */
-    ion-segment-button.ios::part(native) {
-      color: #08a391;
-    }
-
-    .segment-button-checked.ios::part(native) {
-      color: #fff;
-    }
-
-    ion-segment-button.ios::part(indicator-background) {
-      border-radius: 20px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-segment value="custom">
-          <ion-segment-button value="custom">
-            <ion-label>Custom</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="buttons">
-            <ion-label>Buttons</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/segment-button/theming/css-shadow-parts/index.md b/static/usage/segment-button/theming/css-shadow-parts/index.md
deleted file mode 100644
index 252d9eb47e6..00000000000
--- a/static/usage/segment-button/theming/css-shadow-parts/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/segment-button/theming/css-shadow-parts/demo.html"
-/>
diff --git a/static/usage/segment/basic/demo.html b/static/usage/segment/basic/demo.html
deleted file mode 100644
index 4e9a2fbe117..00000000000
--- a/static/usage/segment/basic/demo.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Segment</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-
-      max-width: 400px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-segment value="default">
-          <ion-segment-button value="default">
-            <ion-label>Default</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <ion-segment disabled value="disabled">
-          <ion-segment-button value="disabled">
-            <ion-label>Disabled</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/segment/basic/index.md b/static/usage/segment/basic/index.md
deleted file mode 100644
index f572817a04c..00000000000
--- a/static/usage/segment/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/segment/basic/demo.html" />
diff --git a/static/usage/segment/scrollable/demo.html b/static/usage/segment/scrollable/demo.html
deleted file mode 100644
index 30d536a7ba4..00000000000
--- a/static/usage/segment/scrollable/demo.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Segment</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: grid;
-    }
-
-    ion-segment {
-      width: 400px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-segment scrollable value="heart">
-          <ion-segment-button value="home">
-            <ion-icon name="home"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="heart">
-            <ion-icon name="heart"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="pin">
-            <ion-icon name="pin"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="star">
-            <ion-icon name="star"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="call">
-            <ion-icon name="call"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="globe">
-            <ion-icon name="globe"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="basket">
-            <ion-icon name="basket"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="barbell">
-            <ion-icon name="barbell"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="trash">
-            <ion-icon name="trash"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="person">
-            <ion-icon name="person"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/segment/scrollable/index.md b/static/usage/segment/scrollable/index.md
deleted file mode 100644
index 0969d6e4a43..00000000000
--- a/static/usage/segment/scrollable/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/segment/scrollable/demo.html" size="100px" />
diff --git a/static/usage/segment/theming/colors/demo.html b/static/usage/segment/theming/colors/demo.html
deleted file mode 100644
index 04559ca5bf2..00000000000
--- a/static/usage/segment/theming/colors/demo.html
+++ /dev/null
@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Segment</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-
-      max-width: 400px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-segment value="default">
-          <ion-segment-button value="default">
-            <ion-label>Default</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-        <ion-segment color="primary" value="primary">
-          <ion-segment-button value="primary">
-            <ion-label>Primary</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-        <ion-segment color="secondary" value="secondary">
-          <ion-segment-button value="secondary">
-            <ion-label>Secondary</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-        <ion-segment color="tertiary" value="tertiary">
-          <ion-segment-button value="tertiary">
-            <ion-label>Tertiary</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-        <ion-segment color="success" value="success">
-          <ion-segment-button value="success">
-            <ion-label>Success</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-        <ion-segment color="warning" value="warning">
-          <ion-segment-button value="warning">
-            <ion-label>Warning</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-        <ion-segment color="danger" value="danger">
-          <ion-segment-button value="danger">
-            <ion-label>Danger</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-        <ion-segment color="light" value="light">
-          <ion-segment-button value="light">
-            <ion-label>Light</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-        <ion-segment color="medium" value="medium">
-          <ion-segment-button value="medium">
-            <ion-label>Medium</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-        <ion-segment color="dark" value="dark">
-          <ion-segment-button value="dark">
-            <ion-label>Dark</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/segment/theming/colors/index.md b/static/usage/segment/theming/colors/index.md
deleted file mode 100644
index 1d2e99a886e..00000000000
--- a/static/usage/segment/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/segment/theming/colors/demo.html" size="large" />
diff --git a/static/usage/segment/theming/css-properties/demo.html b/static/usage/segment/theming/css-properties/demo.html
deleted file mode 100644
index f97c044c9e3..00000000000
--- a/static/usage/segment/theming/css-properties/demo.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Note</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
-
-    ion-segment {
-      --background: #54dc98;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-segment value="custom">
-          <ion-segment-button value="custom">
-            <ion-label>Custom</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="segment">
-            <ion-label>Segment</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/segment/theming/css-properties/index.md b/static/usage/segment/theming/css-properties/index.md
deleted file mode 100644
index 0303937ccb6..00000000000
--- a/static/usage/segment/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/segment/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/select/basic/multiple-selection/demo.html b/static/usage/select/basic/multiple-selection/demo.html
deleted file mode 100644
index dfa9a231f02..00000000000
--- a/static/usage/select/basic/multiple-selection/demo.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Select - Multiple Selection</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select placeholder="Select all fruits that apply" multiple="true">
-              <ion-select-option value="apples">Apples</ion-select-option>
-              <ion-select-option value="oranges">Oranges</ion-select-option>
-              <ion-select-option value="bananas">Bananas</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/select/basic/multiple-selection/index.md b/static/usage/select/basic/multiple-selection/index.md
deleted file mode 100644
index 402f2bdbd75..00000000000
--- a/static/usage/select/basic/multiple-selection/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="300px"
-  code={{ javascript, react, vue, angular }}
-  src="usage/select/basic/multiple-selection/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/select/basic/responding-to-interaction/demo.html b/static/usage/select/basic/responding-to-interaction/demo.html
deleted file mode 100644
index 174eb03f546..00000000000
--- a/static/usage/select/basic/responding-to-interaction/demo.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Select - Responding to Interaction</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    #log {
-      height: 250px;
-      width: 300px;
-      
-      overflow: auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div>
-          <ion-list>
-            <ion-item>
-              <ion-select placeholder="Select fruit">
-                <ion-select-option value="apples">Apples</ion-select-option>
-                <ion-select-option value="oranges">Oranges</ion-select-option>
-                <ion-select-option value="bananas">Bananas</ion-select-option>
-              </ion-select>
-            </ion-item>
-          </ion-list>
-
-          <div id="log" class="ion-padding"></div>
-        </div>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const select = document.querySelector('ion-select');
-    const log = document.querySelector('#log');
-
-    select.addEventListener('ionChange', e => {
-      log.insertAdjacentHTML('afterbegin', `<p>ionChange fired with value: ${e.detail.value}</p>`);
-    });
-
-    select.addEventListener('ionCancel', () => {
-      log.insertAdjacentHTML('afterbegin', '<p>ionCancel fired</p>');
-    });
-
-    select.addEventListener('ionDismiss', () => {
-      log.insertAdjacentHTML('afterbegin', '<p>ionDismiss fired</p>');
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/select/basic/responding-to-interaction/index.md b/static/usage/select/basic/responding-to-interaction/index.md
deleted file mode 100644
index f4a16fa16a0..00000000000
--- a/static/usage/select/basic/responding-to-interaction/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="300px"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/select/basic/responding-to-interaction/demo.html"
-/>
diff --git a/static/usage/select/basic/single-selection/demo.html b/static/usage/select/basic/single-selection/demo.html
deleted file mode 100644
index 37c9bb3a460..00000000000
--- a/static/usage/select/basic/single-selection/demo.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Select - Single Selection</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select placeholder="Select fruit">
-              <ion-select-option value="apples">Apples</ion-select-option>
-              <ion-select-option value="oranges">Oranges</ion-select-option>
-              <ion-select-option value="bananas">Bananas</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/select/basic/single-selection/index.md b/static/usage/select/basic/single-selection/index.md
deleted file mode 100644
index fdeb50d0e16..00000000000
--- a/static/usage/select/basic/single-selection/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="300px"
-  code={{ javascript, react, vue, angular }}
-  src="usage/select/basic/single-selection/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/select/customization/button-text/demo.html b/static/usage/select/customization/button-text/demo.html
deleted file mode 100644
index 0de7145fc9f..00000000000
--- a/static/usage/select/customization/button-text/demo.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Select - Button Text</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-label>Alert Interface</ion-label>
-            <ion-select placeholder="Select fruit" ok-text="Choose Fruit" cancel-text="Cancel Choice">
-              <ion-select-option value="apples">Apples</ion-select-option>
-              <ion-select-option value="oranges">Oranges</ion-select-option>
-              <ion-select-option value="bananas">Bananas</ion-select-option>
-            </ion-select>
-          </ion-item>
-          <ion-item>
-            <ion-label>Action Sheet Interface</ion-label>
-            <ion-select interface="action-sheet" placeholder="Select fruit" cancel-text="Cancel Choice">
-              <ion-select-option value="apples">Apples</ion-select-option>
-              <ion-select-option value="oranges">Oranges</ion-select-option>
-              <ion-select-option value="bananas">Bananas</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/select/customization/button-text/index.md b/static/usage/select/customization/button-text/index.md
deleted file mode 100644
index f44ea9d2d3c..00000000000
--- a/static/usage/select/customization/button-text/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="350px"
-  code={{ javascript, react, vue, angular }}
-  src="usage/select/customization/button-text/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/select/customization/interface-options/demo.html b/static/usage/select/customization/interface-options/demo.html
deleted file mode 100644
index bf624027d91..00000000000
--- a/static/usage/select/customization/interface-options/demo.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Select - Interface Options</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container > ion-list {
-      min-width: 400px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>        
-          <ion-item>
-            <ion-label>Alert</ion-label>
-            <ion-select id="customAlertSelect" interface="alert" placeholder="Select One">
-              <ion-select-option value="bacon">Bacon</ion-select-option>
-              <ion-select-option value="onions">Onions</ion-select-option>
-              <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
-            </ion-select>
-          </ion-item>
-        
-          <ion-item>
-            <ion-label>Popover</ion-label>
-            <ion-select id="customPopoverSelect" interface="popover" placeholder="Select One">
-              <ion-select-option value="brown">Brown</ion-select-option>
-              <ion-select-option value="blonde">Blonde</ion-select-option>
-              <ion-select-option value="red">Red</ion-select-option>
-            </ion-select>
-          </ion-item>
-        
-          <ion-item>
-            <ion-label>Action Sheet</ion-label>
-            <ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
-              <ion-select-option value="red">Red</ion-select-option>
-              <ion-select-option value="green">Green</ion-select-option>
-              <ion-select-option value="blue">Blue</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const customAlertSelect = document.getElementById('customAlertSelect');
-    const customAlertOptions = {
-      header: 'Pizza Toppings',
-      subHeader: 'Select your favorite topping',
-      message: 'Choose only one',
-      translucent: true
-    };
-    customAlertSelect.interfaceOptions = customAlertOptions;
-
-    const customPopoverSelect = document.getElementById('customPopoverSelect');
-    const customPopoverOptions = {
-      header: 'Hair Color',
-      subHeader: 'Select your hair color',
-      message: 'Only select your dominant hair color'
-    };
-    customPopoverSelect.interfaceOptions = customPopoverOptions;
-
-    const customActionSheetSelect = document.getElementById('customActionSheetSelect');
-    const customActionSheetOptions = {
-      header: 'Colors',
-      subHeader: 'Select your favorite color'
-    };
-    customActionSheetSelect.interfaceOptions = customActionSheetOptions;
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/select/customization/interface-options/index.md b/static/usage/select/customization/interface-options/index.md
deleted file mode 100644
index ff49e6e0b83..00000000000
--- a/static/usage/select/customization/interface-options/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="large"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/select/customization/interface-options/demo.html"
-/>
diff --git a/static/usage/select/customization/styling-select/demo.html b/static/usage/select/customization/styling-select/demo.html
deleted file mode 100644
index a4dde98566e..00000000000
--- a/static/usage/select/customization/styling-select/demo.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Select - Styling the Select</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-select {
-      --placeholder-color: #971e49;
-      --placeholder-opacity: 1;
-      width: 100%;
-      justify-content: center;
-    }
-
-    ion-select::part(placeholder),
-    ion-select::part(text) {
-      flex: 0 0 auto;
-    }
-
-    ion-select::part(placeholder)::first-letter {
-      font-size: 24px;
-      font-weight: 500;
-    }
-
-    ion-select::part(text) {
-      color: #545ca7;
-    }
-
-    ion-select::part(icon) {
-      color: #971e49;
-      opacity: 1;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select placeholder="Select fruit">
-              <ion-select-option value="apples">Apples</ion-select-option>
-              <ion-select-option value="oranges">Oranges</ion-select-option>
-              <ion-select-option value="bananas">Bananas</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/select/customization/styling-select/index.md b/static/usage/select/customization/styling-select/index.md
deleted file mode 100644
index 801dea7f7d6..00000000000
--- a/static/usage/select/customization/styling-select/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="300px"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/select/customization/styling-select/demo.html"
-/>
diff --git a/static/usage/select/interfaces/action-sheet/demo.html b/static/usage/select/interfaces/action-sheet/demo.html
deleted file mode 100644
index 2278ff0734d..00000000000
--- a/static/usage/select/interfaces/action-sheet/demo.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Select - Action Sheet</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select interface="action-sheet" placeholder="Select fruit">
-              <ion-select-option value="apples">Apples</ion-select-option>
-              <ion-select-option value="oranges">Oranges</ion-select-option>
-              <ion-select-option value="bananas">Bananas</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/select/interfaces/action-sheet/index.md b/static/usage/select/interfaces/action-sheet/index.md
deleted file mode 100644
index ff20f708ff0..00000000000
--- a/static/usage/select/interfaces/action-sheet/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="medium"
-  code={{ javascript, react, vue, angular }}
-  src="usage/select/interfaces/action-sheet/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/select/interfaces/popover/demo.html b/static/usage/select/interfaces/popover/demo.html
deleted file mode 100644
index dd4bfd9c0c7..00000000000
--- a/static/usage/select/interfaces/popover/demo.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Select - Popover</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select interface="popover" placeholder="Select fruit">
-              <ion-select-option value="apples">Apples</ion-select-option>
-              <ion-select-option value="oranges">Oranges</ion-select-option>
-              <ion-select-option value="bananas">Bananas</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/select/interfaces/popover/index.md b/static/usage/select/interfaces/popover/index.md
deleted file mode 100644
index 664543e2a25..00000000000
--- a/static/usage/select/interfaces/popover/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="400px"
-  code={{ javascript, react, vue, angular }}
-  src="usage/select/interfaces/popover/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/select/objects-as-values/multiple-selection/demo.html b/static/usage/select/objects-as-values/multiple-selection/demo.html
deleted file mode 100644
index 7543630b1e3..00000000000
--- a/static/usage/select/objects-as-values/multiple-selection/demo.html
+++ /dev/null
@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Select - Object Values and Multiple Selection</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container > ion-list {
-      width: 70%;
-    }
-
-    ion-text {
-      white-space: normal;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select placeholder="Select food" multiple="true"></ion-select>
-          </ion-item>
-          <ion-item lines="none">
-            <ion-label>
-              Current value:
-              <ion-text></ion-text>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const foods = [
-      {
-        id: 1,
-        name: "Apples",
-        type: "fruit"
-      },
-      {
-        id: 2,
-        name: "Carrots",
-        type: "vegetable"
-      },
-      {
-        id: 3,
-        name: "Cupcakes",
-        type: "dessert"
-      }
-    ];
-
-    const compareWithFn = (o1, o2) => {
-      if(!o1 || !o2) {
-        return o1 === o2;
-      }
-
-      if(Array.isArray(o2)) {
-        return o2.some((o) => o.id === o1.id);
-      }
-
-      return o1.id === o2.id;
-    };
-
-    const selectEl = document.querySelector('ion-select');
-    selectEl.compareWith = compareWithFn;
-
-    foods.forEach((option, i) => {
-      const selectOption = document.createElement('ion-select-option');
-      selectOption.value = option;
-      selectOption.textContent = option.name;
-      selectEl.appendChild(selectOption);
-    });
-
-    const valueLabel = document.querySelector('ion-text');
-    selectEl.addEventListener('ionChange', () => {
-      valueLabel.innerHTML = JSON.stringify(selectEl.value);
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/select/objects-as-values/multiple-selection/index.md b/static/usage/select/objects-as-values/multiple-selection/index.md
deleted file mode 100644
index 3b736db244f..00000000000
--- a/static/usage/select/objects-as-values/multiple-selection/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="300px"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/select/objects-as-values/multiple-selection/demo.html"
-/>
diff --git a/static/usage/select/objects-as-values/using-comparewith/demo.html b/static/usage/select/objects-as-values/using-comparewith/demo.html
deleted file mode 100644
index d7fe94ed61d..00000000000
--- a/static/usage/select/objects-as-values/using-comparewith/demo.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Select - Using compareWith</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container > ion-list {
-      width: 70%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select placeholder="Select food"></ion-select>
-          </ion-item>
-          <ion-item lines="none">
-            <ion-label>
-              Current value:
-              <ion-text></ion-text>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const foods = [
-      {
-        id: 1,
-        name: "Apples",
-        type: "fruit"
-      },
-      {
-        id: 2,
-        name: "Carrots",
-        type: "vegetable"
-      },
-      {
-        id: 3,
-        name: "Cupcakes",
-        type: "dessert"
-      }
-    ];
-
-    const compareWithFn = (o1, o2) => {
-      return o1 && o2 ? o1.id === o2.id : o1 === o2;
-    };
-
-    const selectEl = document.querySelector('ion-select');
-    selectEl.compareWith = compareWithFn;
-
-    foods.forEach((option, i) => {
-      const selectOption = document.createElement('ion-select-option');
-      selectOption.value = option;
-      selectOption.textContent = option.name;
-      selectEl.appendChild(selectOption);
-    });
-
-    const valueLabel = document.querySelector('ion-text');
-    selectEl.addEventListener('ionChange', () => {
-      valueLabel.innerHTML = JSON.stringify(selectEl.value);
-    });
-  </script>
-</body>
-
-</html>
diff --git a/static/usage/select/objects-as-values/using-comparewith/index.md b/static/usage/select/objects-as-values/using-comparewith/index.md
deleted file mode 100644
index d66502a4254..00000000000
--- a/static/usage/select/objects-as-values/using-comparewith/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  size="300px"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/select/objects-as-values/using-comparewith/demo.html"
-/>
diff --git a/static/usage/skeleton-text/basic/demo.html b/static/usage/skeleton-text/basic/demo.html
deleted file mode 100644
index 1571c89d85f..00000000000
--- a/static/usage/skeleton-text/basic/demo.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-    <style>
-      ion-list {
-        width: 300px;
-      }
-
-      .container {
-        flex-direction: column;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-list></ion-list><br />
-          <ion-button onclick="toggle()">Toggle</ion-button>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const list = document.querySelector('ion-list');
-      let loaded = false;
-      const toggle = () => {
-        if (loaded) {
-          setSkeletonText();
-        } else {
-          setContent();
-        }
-
-        loaded = !loaded;
-      }
-
-      const setSkeletonText = () => {
-        list.innerHTML = `
-          <ion-list-header>
-            <ion-skeleton-text animated="true" style="width: 80px"></ion-skeleton-text>
-          </ion-list-header>
-          <ion-item>
-            <ion-thumbnail slot="start">
-              <ion-skeleton-text animated="true"></ion-skeleton-text>
-            </ion-thumbnail>
-            <ion-label>
-              <h3>
-                <ion-skeleton-text animated="true" style="width: 80%;"></ion-skeleton-text>
-              </h3>
-              <p>
-                <ion-skeleton-text animated="true" style="width: 60%;"></ion-skeleton-text>
-              </p>
-              <p>
-                <ion-skeleton-text animated="true" style="width: 30%;"></ion-skeleton-text>
-              </p>
-            </ion-label>
-          </ion-item>
-        `;
-      }
-
-      const setContent = () => {
-        list.innerHTML = `
-          <ion-list-header>Albums</ion-list-header>
-          <ion-item>
-            <ion-thumbnail slot="start">
-              <ion-icon style="width: 100%; height: 100%" name="musical-notes"></ion-icon>
-            </ion-thumbnail>
-            <ion-label>
-              <h3>Abbey Road</h3>
-              <p>The Beatles</p>
-              <p>1969</p>
-            </ion-label>
-          </ion-item>
-        `;
-      }
-
-      setSkeletonText();
-
-    </script>
-  </body>
-</html>
diff --git a/static/usage/skeleton-text/basic/index.md b/static/usage/skeleton-text/basic/index.md
deleted file mode 100644
index fb223e9ae7e..00000000000
--- a/static/usage/skeleton-text/basic/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts
-      }
-    },
-  }}
-  src="usage/skeleton-text/basic/demo.html"
-  size="250px"
-/>
diff --git a/static/usage/skeleton-text/theming/css-properties/demo.html b/static/usage/skeleton-text/theming/css-properties/demo.html
deleted file mode 100644
index 8b94ae1d3cc..00000000000
--- a/static/usage/skeleton-text/theming/css-properties/demo.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-    <style>
-      ion-list {
-        width: 300px;
-      }
-
-      .container {
-        flex-direction: column;
-      }
-
-      ion-skeleton-text {
-        --border-radius: 9999px;
-        --background: rgba(188, 0, 255, 0.065);
-        --background-rgb: 188, 0, 255;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-list>
-            <ion-list-header>
-              <ion-skeleton-text animated="true" style="width: 80px"></ion-skeleton-text>
-            </ion-list-header>
-            <ion-item>
-              <ion-thumbnail slot="start">
-                <ion-skeleton-text animated="true"></ion-skeleton-text>
-              </ion-thumbnail>
-              <ion-label>
-                <h3>
-                  <ion-skeleton-text animated="true" style="width: 80%;"></ion-skeleton-text>
-                </h3>
-                <p>
-                  <ion-skeleton-text animated="true" style="width: 60%;"></ion-skeleton-text>
-                </p>
-                <p>
-                  <ion-skeleton-text animated="true" style="width: 30%;"></ion-skeleton-text>
-                </p>
-              </ion-label>
-              </ion-item>
-          </ion-list>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/skeleton-text/theming/css-properties/index.md b/static/usage/skeleton-text/theming/css-properties/index.md
deleted file mode 100644
index 07e373b1f09..00000000000
--- a/static/usage/skeleton-text/theming/css-properties/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/skeleton-text/theming/css-properties/demo.html"
-  size="250px"
-/>
diff --git a/static/usage/spinner/basic/demo.html b/static/usage/spinner/basic/demo.html
deleted file mode 100644
index e58299228f3..00000000000
--- a/static/usage/spinner/basic/demo.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Spinner</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      display: block;
-      flex-flow: column;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-label>Default</ion-label>
-          <ion-spinner></ion-spinner>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Dots</ion-label>
-          <ion-spinner name="dots"></ion-spinner>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Lines</ion-label>
-          <ion-spinner name="lines"></ion-spinner>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Lines Small</ion-label>
-          <ion-spinner name="lines-small"></ion-spinner>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Lines Sharp</ion-label>
-          <ion-spinner name="lines-sharp"></ion-spinner>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Lines Sharp Small</ion-label>
-          <ion-spinner name="lines-sharp-small"></ion-spinner>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Bubbles</ion-label>
-          <ion-spinner name="bubbles"></ion-spinner>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Circles</ion-label>
-          <ion-spinner name="circles"></ion-spinner>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Circular</ion-label>
-          <ion-spinner name="circular"></ion-spinner>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Crescent</ion-label>
-          <ion-spinner name="crescent"></ion-spinner>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/spinner/basic/index.md b/static/usage/spinner/basic/index.md
deleted file mode 100644
index 8eafdcf7c9c..00000000000
--- a/static/usage/spinner/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/spinner/basic/demo.html" size="500px" />
diff --git a/static/usage/spinner/theming/colors/demo.html b/static/usage/spinner/theming/colors/demo.html
deleted file mode 100644
index 6581587fc7c..00000000000
--- a/static/usage/spinner/theming/colors/demo.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Spinner</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-spinner></ion-spinner>
-        <ion-spinner color="primary"></ion-spinner>
-        <ion-spinner color="secondary"></ion-spinner>
-        <ion-spinner color="tertiary"></ion-spinner>
-        <ion-spinner color="success"></ion-spinner>
-        <ion-spinner color="warning"></ion-spinner>
-        <ion-spinner color="danger"></ion-spinner>
-        <ion-spinner color="light"></ion-spinner>
-        <ion-spinner color="medium"></ion-spinner>
-        <ion-spinner color="dark"></ion-spinner>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/spinner/theming/colors/index.md b/static/usage/spinner/theming/colors/index.md
deleted file mode 100644
index 4770db48687..00000000000
--- a/static/usage/spinner/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/spinner/theming/colors/demo.html" size="100px" />
diff --git a/static/usage/spinner/theming/css-properties/demo.html b/static/usage/spinner/theming/css-properties/demo.html
deleted file mode 100644
index fe0409966ce..00000000000
--- a/static/usage/spinner/theming/css-properties/demo.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Spinner</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-spinner {
-      --color: #54dc98;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-spinner></ion-spinner>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/spinner/theming/css-properties/index.md b/static/usage/spinner/theming/css-properties/index.md
deleted file mode 100644
index d202b611d86..00000000000
--- a/static/usage/spinner/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/spinner/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/split-pane/basic/demo.html b/static/usage/split-pane/basic/demo.html
deleted file mode 100644
index 2ebc18e6dbb..00000000000
--- a/static/usage/split-pane/basic/demo.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Spinner</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-  <body>
-    <ion-app>
-      <ion-split-pane when="xs" content-id="main">
-        <ion-menu content-id="main">
-          <ion-header>
-            <ion-toolbar color="tertiary">
-              <ion-title>Menu</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content class="ion-padding">
-            Menu Content
-          </ion-content>
-        </ion-menu>
-
-        <div class="ion-page" id="main">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Main View</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content class="ion-padding">
-            Main View Content
-          </ion-content>
-        </div>
-      </ion-split-pane>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/split-pane/basic/index.md b/static/usage/split-pane/basic/index.md
deleted file mode 100644
index 7e6b45c709b..00000000000
--- a/static/usage/split-pane/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/split-pane/basic/demo.html" size="500px" />
diff --git a/static/usage/split-pane/theming/css-properties/demo.html b/static/usage/split-pane/theming/css-properties/demo.html
deleted file mode 100644
index e4e45f9765a..00000000000
--- a/static/usage/split-pane/theming/css-properties/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Spinner</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    ion-split-pane {
-      --side-width: 350px;
-      --side-max-width: 350px;
-
-      --border: 1px dashed #b3baff;
-    }
-  </style>
-</head>
-  <body>
-    <ion-app>
-      <ion-split-pane when="xs" content-id="main">
-        <ion-menu content-id="main">
-          <ion-header>
-            <ion-toolbar color="tertiary">
-              <ion-title>Menu</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content class="ion-padding">
-            Menu Content is 350px wide and has a blue dashed border
-          </ion-content>
-        </ion-menu>
-
-        <div class="ion-page" id="main">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Main View</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content class="ion-padding">
-            Main View Content
-          </ion-content>
-        </div>
-      </ion-split-pane>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/split-pane/theming/css-properties/index.md b/static/usage/split-pane/theming/css-properties/index.md
deleted file mode 100644
index c2951a8ebaa..00000000000
--- a/static/usage/split-pane/theming/css-properties/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/split-pane/theming/css-properties/demo.html"
-  size="500px"
-/>
diff --git a/static/usage/text/basic/demo.html b/static/usage/text/basic/demo.html
deleted file mode 100644
index 7205a8ba459..00000000000
--- a/static/usage/text/basic/demo.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Text</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-wrap: wrap;
-    }
-
-    h1, h2, h3 {
-      margin: 0;
-    }
-
-    p {
-      width: 80%;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-text color="primary">
-          <h1>H1: The quick brown fox jumps over the lazy dog</h1>
-        </ion-text>
-
-        <ion-text color="secondary">
-          <h2>H2: The quick brown fox jumps over the lazy dog</h2>
-        </ion-text>
-
-        <ion-text color="tertiary">
-          <h3>H3: The quick brown fox jumps over the lazy dog</h3>
-        </ion-text>
-
-        <p>
-          <ion-text color="warning"><ion-icon name="warning"></ion-icon></ion-text>
-          I saw a werewolf with a Chinese menu in his hand.
-          Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
-          He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
-          Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
-        </p>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/text/basic/index.md b/static/usage/text/basic/index.md
deleted file mode 100644
index 6c9ef54be7c..00000000000
--- a/static/usage/text/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/text/basic/demo.html" />
diff --git a/static/usage/textarea/autogrow/demo.html b/static/usage/textarea/autogrow/demo.html
deleted file mode 100644
index e0b567b50cf..00000000000
--- a/static/usage/textarea/autogrow/demo.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Textarea - Autogrow</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      padding: 0 40px;
-    }
-
-    ion-item {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-textarea placeholder="Type something here" auto-grow="true"
-            value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus sem, auctor accumsan egestas sed, venenatis at ex. Nam consequat ex odio, suscipit rhoncus orci dictum eget. Aenean sit amet ligula varius felis facilisis lacinia nec volutpat nulla. Duis ullamcorper sit amet turpis sed blandit. Integer pretium massa eu faucibus interdum.">
-          </ion-textarea>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/textarea/autogrow/index.md b/static/usage/textarea/autogrow/index.md
deleted file mode 100644
index 534b8c46605..00000000000
--- a/static/usage/textarea/autogrow/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="small"
-  code={{ javascript, react, vue, angular }}
-  src="usage/textarea/autogrow/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/textarea/basic/demo.html b/static/usage/textarea/basic/demo.html
deleted file mode 100644
index e6e9d69d0af..00000000000
--- a/static/usage/textarea/basic/demo.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Textarea - Basic Usage</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: calc(100% - 20px);
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-label>Regular textarea</ion-label>
-            <ion-textarea placeholder="Type something here"></ion-textarea>
-          </ion-item>
-          <ion-item>
-            <ion-label>Readonly textarea</ion-label>
-            <ion-textarea readonly="true" placeholder="Can't edit this"></ion-textarea>
-          </ion-item>
-          <ion-item>
-            <ion-label>Disabled textarea</ion-label>
-            <ion-textarea disabled="true" placeholder="Can't type here"></ion-textarea>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/textarea/basic/index.md b/static/usage/textarea/basic/index.md
deleted file mode 100644
index 445d0639fe4..00000000000
--- a/static/usage/textarea/basic/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="250px"
-  code={{ javascript, react, vue, angular }}
-  src="usage/textarea/basic/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/textarea/clear-on-edit/demo.html b/static/usage/textarea/clear-on-edit/demo.html
deleted file mode 100644
index 03c822fddfa..00000000000
--- a/static/usage/textarea/clear-on-edit/demo.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Textarea - Clear on Edit</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      padding: 0 40px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-textarea
-          placeholder="Enter text, leave the textarea, come back, and type to clear"
-          clear-on-edit="true"
-        ></ion-textarea>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/textarea/clear-on-edit/index.md b/static/usage/textarea/clear-on-edit/index.md
deleted file mode 100644
index 87850fcc291..00000000000
--- a/static/usage/textarea/clear-on-edit/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  size="xsmall"
-  code={{ javascript, react, vue, angular }}
-  src="usage/textarea/clear-on-edit/demo.html"
-/>
\ No newline at end of file
diff --git a/static/usage/textarea/theming/demo.html b/static/usage/textarea/theming/demo.html
deleted file mode 100644
index ccdec7dc9de..00000000000
--- a/static/usage/textarea/theming/demo.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Textarea - Theming</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    .container {
-      padding: 0 40px;
-    }
-
-    ion-textarea.custom-textarea {
-      --background: #373737;
-      --color: #fff;
-      --padding-end: 10px;
-      --padding-start: 10px;
-      --placeholder-color: #ddd;
-      --placeholder-opacity: 0.8;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-textarea class="custom-textarea" placeholder="Type something here"></ion-textarea>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/textarea/theming/index.md b/static/usage/textarea/theming/index.md
deleted file mode 100644
index a05024e9c70..00000000000
--- a/static/usage/textarea/theming/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  size="xsmall"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/textarea/theming/demo.html"
-/>
diff --git a/static/usage/thumbnail/basic/demo.html b/static/usage/thumbnail/basic/demo.html
deleted file mode 100644
index 132df192824..00000000000
--- a/static/usage/thumbnail/basic/demo.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Thumbnail</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-thumbnail>
-          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-        </ion-thumbnail>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/thumbnail/basic/index.md b/static/usage/thumbnail/basic/index.md
deleted file mode 100644
index 221786ddeee..00000000000
--- a/static/usage/thumbnail/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/thumbnail/basic/demo.html" />
diff --git a/static/usage/thumbnail/item/demo.html b/static/usage/thumbnail/item/demo.html
deleted file mode 100644
index 5d9bec113e7..00000000000
--- a/static/usage/thumbnail/item/demo.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Thumbnail</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-thumbnail slot="start">
-            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-          </ion-thumbnail>
-          <ion-label>Item Thumbnail</ion-label>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/thumbnail/item/index.md b/static/usage/thumbnail/item/index.md
deleted file mode 100644
index 13b7272fa89..00000000000
--- a/static/usage/thumbnail/item/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/thumbnail/item/demo.html" />
diff --git a/static/usage/thumbnail/theming/css-properties/demo.html b/static/usage/thumbnail/theming/css-properties/demo.html
deleted file mode 100644
index 8391c84480d..00000000000
--- a/static/usage/thumbnail/theming/css-properties/demo.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Thumbnail</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-thumbnail {
-      --size: 140px;
-      --border-radius: 14px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-thumbnail>
-          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-        </ion-thumbnail>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/thumbnail/theming/css-properties/index.md b/static/usage/thumbnail/theming/css-properties/index.md
deleted file mode 100644
index 3a0b41f3482..00000000000
--- a/static/usage/thumbnail/theming/css-properties/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/thumbnail/theming/css-properties/demo.html"
-  size="250px"
-/>
diff --git a/static/usage/title/basic/demo.html b/static/usage/title/basic/demo.html
deleted file mode 100644
index ecb3ef9f701..00000000000
--- a/static/usage/title/basic/demo.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Title</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Title</ion-title>
-      </ion-toolbar>
-    </ion-header>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/title/basic/index.md b/static/usage/title/basic/index.md
deleted file mode 100644
index 3f461bc6d54..00000000000
--- a/static/usage/title/basic/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/title/basic/demo.html"
-  devicePreview={true}
-  includeIonContent={false}
-/>
diff --git a/static/usage/title/collapsible-large-title/basic/demo.html b/static/usage/title/collapsible-large-title/basic/demo.html
deleted file mode 100644
index 4b3927b3178..00000000000
--- a/static/usage/title/collapsible-large-title/basic/demo.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Title</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header translucent="true">
-      <ion-toolbar>
-        <ion-title>Title</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Title</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <div class="ion-padding">
-        Scroll the list to see the title collapse.
-      </div>
-
-      <ion-list>
-        <ion-item>Item 1</ion-item>
-        <ion-item>Item 2</ion-item>
-        <ion-item>Item 3</ion-item>
-        <ion-item>Item 4</ion-item>
-        <ion-item>Item 5</ion-item>
-        <ion-item>Item 6</ion-item>
-        <ion-item>Item 7</ion-item>
-        <ion-item>Item 8</ion-item>
-        <ion-item>Item 9</ion-item>
-        <ion-item>Item 10</ion-item>
-        <ion-item>Item 11</ion-item>
-        <ion-item>Item 12</ion-item>
-        <ion-item>Item 13</ion-item>
-        <ion-item>Item 14</ion-item>
-        <ion-item>Item 15</ion-item>
-        <ion-item>Item 16</ion-item>
-        <ion-item>Item 17</ion-item>
-        <ion-item>Item 18</ion-item>
-        <ion-item>Item 19</ion-item>
-        <ion-item>Item 20</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/title/collapsible-large-title/basic/index.md b/static/usage/title/collapsible-large-title/basic/index.md
deleted file mode 100644
index f66458ae83d..00000000000
--- a/static/usage/title/collapsible-large-title/basic/index.md
+++ /dev/null
@@ -1,14 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  mode="ios"
-  code={{ javascript, react, vue, angular }}
-  src="usage/title/collapsible-large-title/basic/demo.html"
-  devicePreview={true}
-  includeIonContent={false}
-/>
diff --git a/static/usage/title/collapsible-large-title/buttons/demo.html b/static/usage/title/collapsible-large-title/buttons/demo.html
deleted file mode 100644
index 3e91ce55a5c..00000000000
--- a/static/usage/title/collapsible-large-title/buttons/demo.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Title</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header translucent="true">
-      <ion-toolbar>
-        <ion-title>Title</ion-title>
-        <ion-buttons collapse="true" slot="end">
-          <ion-button>Button</ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Title</ion-title>
-          <ion-buttons collapse="true" slot="end">
-            <ion-button>Button</ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-      </ion-header>
-
-      <div class="ion-padding">
-        Scroll the list to see the title & buttons collapse.
-      </div>
-
-      <ion-list>
-        <ion-item>Item 1</ion-item>
-        <ion-item>Item 2</ion-item>
-        <ion-item>Item 3</ion-item>
-        <ion-item>Item 4</ion-item>
-        <ion-item>Item 5</ion-item>
-        <ion-item>Item 6</ion-item>
-        <ion-item>Item 7</ion-item>
-        <ion-item>Item 8</ion-item>
-        <ion-item>Item 9</ion-item>
-        <ion-item>Item 10</ion-item>
-        <ion-item>Item 11</ion-item>
-        <ion-item>Item 12</ion-item>
-        <ion-item>Item 13</ion-item>
-        <ion-item>Item 14</ion-item>
-        <ion-item>Item 15</ion-item>
-        <ion-item>Item 16</ion-item>
-        <ion-item>Item 17</ion-item>
-        <ion-item>Item 18</ion-item>
-        <ion-item>Item 19</ion-item>
-        <ion-item>Item 20</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/title/collapsible-large-title/buttons/index.md b/static/usage/title/collapsible-large-title/buttons/index.md
deleted file mode 100644
index 829086a7cde..00000000000
--- a/static/usage/title/collapsible-large-title/buttons/index.md
+++ /dev/null
@@ -1,14 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  mode="ios"
-  code={{ javascript, react, vue, angular }}
-  src="usage/title/collapsible-large-title/buttons/demo.html"
-  devicePreview={true}
-  includeIonContent={false}
-/>
diff --git a/static/usage/title/theming/css-properties/demo.html b/static/usage/title/theming/css-properties/demo.html
deleted file mode 100644
index 71e248bef63..00000000000
--- a/static/usage/title/theming/css-properties/demo.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Title</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-title.title-large {
-      color: #C897D8;
-      font-size: 30px;
-    }
-
-    ion-title {
-      --color: #000;
-    }
-
-    ion-toolbar {
-      --background: #C897D8;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header translucent="true">
-      <ion-toolbar>
-        <ion-title>Title</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Title</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-list>
-        <ion-item>Item 1</ion-item>
-        <ion-item>Item 2</ion-item>
-        <ion-item>Item 3</ion-item>
-        <ion-item>Item 4</ion-item>
-        <ion-item>Item 5</ion-item>
-        <ion-item>Item 6</ion-item>
-        <ion-item>Item 7</ion-item>
-        <ion-item>Item 8</ion-item>
-        <ion-item>Item 9</ion-item>
-        <ion-item>Item 10</ion-item>
-        <ion-item>Item 11</ion-item>
-        <ion-item>Item 12</ion-item>
-        <ion-item>Item 13</ion-item>
-        <ion-item>Item 14</ion-item>
-        <ion-item>Item 15</ion-item>
-        <ion-item>Item 16</ion-item>
-        <ion-item>Item 17</ion-item>
-        <ion-item>Item 18</ion-item>
-        <ion-item>Item 19</ion-item>
-        <ion-item>Item 20</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/title/theming/css-properties/index.md b/static/usage/title/theming/css-properties/index.md
deleted file mode 100644
index 407126d856f..00000000000
--- a/static/usage/title/theming/css-properties/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_global_css from './angular/global_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/global.css': angular_global_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/title/theming/css-properties/demo.html"
-  devicePreview={true}
-  includeIonContent={false}
-/>
diff --git a/static/usage/toast/buttons/demo.html b/static/usage/toast/buttons/demo.html
deleted file mode 100644
index 7f2807781e4..00000000000
--- a/static/usage/toast/buttons/demo.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toast</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-    }
-
-    .container p {
-      margin-bottom: 0;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Toast</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="presentToast()">Click Me</ion-button>
-        <p id="handlerResult"></p>
-        <p id="roleResult"></p>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script type="module">
-    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-    window.toastController = toastController;
-  </script>
-
-  <script>
-    const handlerOutput = document.querySelector('#handlerResult');
-    const roleOutput = document.querySelector('#roleResult');
-
-    async function presentToast() {
-      const toast = await toastController.create({
-        message: 'Hello World!',
-        duration: 3000,
-        buttons: [
-          {
-            text: 'More Info',
-            role: 'info',
-            handler: () => { handlerOutput.innerText = 'More Info clicked'; }
-          },
-          {
-            text: 'Dismiss',
-            role: 'cancel',
-            handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
-          }
-        ]
-      });
-
-      await toast.present();
-
-      const { role } = await toast.onDidDismiss();
-      roleOutput.innerText = `Dismissed with role: ${role}`;
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/toast/buttons/index.md b/static/usage/toast/buttons/index.md
deleted file mode 100644
index a8de787990a..00000000000
--- a/static/usage/toast/buttons/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  devicePreview
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/toast/buttons/demo.html"
-/>
diff --git a/static/usage/toast/icon/demo.html b/static/usage/toast/icon/demo.html
deleted file mode 100644
index d457f5e2d8e..00000000000
--- a/static/usage/toast/icon/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toast</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Toast</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="presentToast()">Click Me</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script type="module">
-    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-    window.toastController = toastController;
-  </script>
-
-  <script>
-    async function presentToast() {
-      const toast = await this.toastController.create({
-        message: 'Hello World!',
-        duration: 1500,
-        icon: 'globe'
-      });
-      
-      await toast.present();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/toast/icon/index.md b/static/usage/toast/icon/index.md
deleted file mode 100644
index ba75e790c1e..00000000000
--- a/static/usage/toast/icon/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  devicePreview
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/toast/icon/demo.html"
-/>
diff --git a/static/usage/toast/presenting/controller/demo.html b/static/usage/toast/presenting/controller/demo.html
deleted file mode 100644
index bcf30161ab6..00000000000
--- a/static/usage/toast/presenting/controller/demo.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toast</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Toast</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <div class="container">
-        <ion-button expand="block" onclick="presentToast('top')">Present Toast At the Top</ion-button>
-        <ion-button expand="block" onclick="presentToast('middle')">Present Toast At the Middle</ion-button>
-        <ion-button expand="block" onclick="presentToast('bottom')">Present Toast At the Bottom</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script type="module">
-    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-    window.toastController = toastController;
-  </script>
-
-  <script>
-    async function presentToast(position) {
-      const toast = await this.toastController.create({
-        message: 'Hello World!',
-        duration: 1500,
-        position: position
-      });
-
-      await toast.present();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/toast/presenting/controller/index.md b/static/usage/toast/presenting/controller/index.md
deleted file mode 100644
index b35b715cd14..00000000000
--- a/static/usage/toast/presenting/controller/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-
-<Playground
-  devicePreview
-  code={{
-    javascript,
-    react,
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
-  }}
-  src="usage/toast/presenting/controller/demo.html"
-/>
diff --git a/static/usage/toast/theming/demo.html b/static/usage/toast/theming/demo.html
deleted file mode 100644
index 756f6ed32c1..00000000000
--- a/static/usage/toast/theming/demo.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toast</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-toast.custom-toast {
-      --background: #F4F4FA;
-      --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
-      --color: #4b4a50;
-    }
-    
-    ion-toast.custom-toast::part(message) {
-      font-style: italic;
-    }
-
-    ion-toast.custom-toast::part(button) {
-      border-left: 1px solid #d2d2d2;
-      color: #030207;
-      font-size: 15px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Toast</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="presentToast()">Click Me</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script type="module">
-    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
-    window.toastController = toastController;
-  </script>
-
-  <script>
-    async function presentToast() {
-      const toast = await this.toastController.create({
-        message: 'Hello Styled World!',
-        duration: 3000,
-        cssClass: 'custom-toast',
-        buttons: [
-          {
-            text: 'Dismiss',
-            role: 'cancel'
-          }
-        ],
-      });
-
-      await toast.present();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/toast/theming/index.md b/static/usage/toast/theming/index.md
deleted file mode 100644
index 2db18037197..00000000000
--- a/static/usage/toast/theming/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import vue from './vue.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_global_css from './angular/global_css.md';
-
-<Playground
-  devicePreview
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-        'src/global.css': angular_global_css,
-      }
-    }
-  }}
-  src="usage/toast/theming/demo.html"
-/>
diff --git a/static/usage/toggle/basic/demo.html b/static/usage/toggle/basic/demo.html
deleted file mode 100644
index b870027f821..00000000000
--- a/static/usage/toggle/basic/demo.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toggle</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-label>Default Toggle</ion-label>
-            <ion-toggle slot="end"></ion-toggle>
-          </ion-item>
-          <ion-item>
-            <ion-label>Checked Toggle</ion-label>
-            <ion-toggle slot="end" checked="true"></ion-toggle>
-          </ion-item>
-          <ion-item>
-            <ion-label>Disabled Toggle</ion-label>
-            <ion-toggle slot="end" disabled="true"></ion-toggle>
-          </ion-item>
-          <ion-item>
-            <ion-label>Disabled Checked Toggle</ion-label>
-            <ion-toggle slot="end" checked="true" disabled="true"></ion-toggle>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toggle/basic/index.md b/static/usage/toggle/basic/index.md
deleted file mode 100644
index b3fc4d01dd5..00000000000
--- a/static/usage/toggle/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/toggle/basic/demo.html" size="250px" />
diff --git a/static/usage/toggle/on-off/demo.html b/static/usage/toggle/on-off/demo.html
deleted file mode 100644
index 0005205956f..00000000000
--- a/static/usage/toggle/on-off/demo.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toggle</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toggle enable-on-off-labels="true"></ion-toggle>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toggle/on-off/index.md b/static/usage/toggle/on-off/index.md
deleted file mode 100644
index 4386ccbb623..00000000000
--- a/static/usage/toggle/on-off/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/toggle/on-off/demo.html" />
diff --git a/static/usage/toggle/theming/colors/demo.html b/static/usage/toggle/theming/colors/demo.html
deleted file mode 100644
index dfc8c72d189..00000000000
--- a/static/usage/toggle/theming/colors/demo.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toggle</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toggle color="primary" checked="true"></ion-toggle>
-        <ion-toggle color="secondary" checked="true"></ion-toggle>
-        <ion-toggle color="tertiary" checked="true"></ion-toggle>
-        <ion-toggle color="success" checked="true"></ion-toggle>
-        <ion-toggle color="warning" checked="true"></ion-toggle>
-        <ion-toggle color="danger" checked="true"></ion-toggle>
-        <ion-toggle color="light" checked="true"></ion-toggle>
-        <ion-toggle color="medium" checked="true"></ion-toggle>
-        <ion-toggle color="dark" checked="true"></ion-toggle>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toggle/theming/colors/index.md b/static/usage/toggle/theming/colors/index.md
deleted file mode 100644
index fb91cc37969..00000000000
--- a/static/usage/toggle/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/toggle/theming/colors/demo.html" />
diff --git a/static/usage/toggle/theming/css-properties/demo.html b/static/usage/toggle/theming/css-properties/demo.html
deleted file mode 100644
index 9f90a6e632c..00000000000
--- a/static/usage/toggle/theming/css-properties/demo.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-toggle {
-      height: 10px;
-      width: 65px;
-
-      padding: 12px;
-
-      --background: #ddd;
-      --background-checked: #ddd;
-
-      --handle-background: #eb7769;
-      --handle-background-checked: #95c34e;
-
-      --handle-width: 25px;
-      --handle-height: 27px;
-      --handle-max-height: auto;
-      --handle-spacing: 6px;
-
-      --handle-border-radius: 4px;
-      --handle-box-shadow: none;
-
-      /* Required for iOS handle to overflow the height of the track */
-      overflow: visible;
-      contain: none;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toggle></ion-toggle>
-        <ion-toggle checked="true"></ion-toggle>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toggle/theming/css-properties/index.md b/static/usage/toggle/theming/css-properties/index.md
deleted file mode 100644
index 14b57ba11e6..00000000000
--- a/static/usage/toggle/theming/css-properties/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/toggle/theming/css-properties/demo.html"
-/>
diff --git a/static/usage/toggle/theming/css-shadow-parts/demo.html b/static/usage/toggle/theming/css-shadow-parts/demo.html
deleted file mode 100644
index ec0f64a6712..00000000000
--- a/static/usage/toggle/theming/css-shadow-parts/demo.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    ion-toggle {
-      height: 10px;
-      width: 65px;
-
-      padding: 12px;
-
-      --handle-width: 25px;
-      --handle-height: 27px;
-      --handle-max-height: auto;
-      --handle-spacing: 6px;
-
-      /* Required for iOS handle to overflow the height of the track */
-      overflow: visible;
-      contain: none;
-    }
-
-    ion-toggle::part(track),
-    ion-toggle.toggle-checked::part(track) {
-      background: #ddd;
-    }
-
-    ion-toggle::part(handle) {
-      background: #eb7769;
-
-      border-radius: 4px;
-      box-shadow: none;
-    }
-
-    ion-toggle.toggle-checked::part(handle) {
-      background: #95c34e;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toggle></ion-toggle>
-        <ion-toggle checked="true"></ion-toggle>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toggle/theming/css-shadow-parts/index.md b/static/usage/toggle/theming/css-shadow-parts/index.md
deleted file mode 100644
index e11e07766bb..00000000000
--- a/static/usage/toggle/theming/css-shadow-parts/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/toggle/theming/css-shadow-parts/demo.html"
-/>
diff --git a/static/usage/toolbar/basic/demo.html b/static/usage/toolbar/basic/demo.html
deleted file mode 100644
index 7dabc509883..00000000000
--- a/static/usage/toolbar/basic/demo.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toolbar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Header Toolbar</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-footer>
-      <ion-toolbar>
-        <ion-title>Footer Toolbar</ion-title>
-      </ion-toolbar>
-    </ion-footer>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toolbar/basic/index.md b/static/usage/toolbar/basic/index.md
deleted file mode 100644
index ae0950a79c0..00000000000
--- a/static/usage/toolbar/basic/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/toolbar/basic/demo.html" devicePreview includeIonContent={false} />
diff --git a/static/usage/toolbar/buttons/demo.html b/static/usage/toolbar/buttons/demo.html
deleted file mode 100644
index ea78af64bcb..00000000000
--- a/static/usage/toolbar/buttons/demo.html
+++ /dev/null
@@ -1,120 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toolbar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button>
-              Start
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Start / End Buttons</ion-title>
-          <ion-buttons slot="end">
-            <ion-button>
-              End
-            </ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button>
-              Secondary
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button>
-              Primary
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Primary / Secondary Buttons</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button>
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button>
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Icon Buttons</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button fill="solid">
-              <ion-icon slot="start" name="person-circle"></ion-icon>
-              Contact
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button fill="solid">
-              Help
-              <ion-icon slot="end" name="help-circle"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Solid Buttons</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button fill="outline">
-              <ion-icon slot="start" name="star"></ion-icon>
-              Star
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button fill="outline">
-              Edit
-              <ion-icon slot="end" name="create"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Outline Buttons</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button default-href="#"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Back Button</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-menu-button auto-hide="false"></ion-menu-button>
-          </ion-buttons>
-          <ion-title>Menu Button</ion-title>
-        </ion-toolbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toolbar/buttons/index.md b/static/usage/toolbar/buttons/index.md
deleted file mode 100644
index be039284a4d..00000000000
--- a/static/usage/toolbar/buttons/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/toolbar/buttons/demo.html" size="500px" />
diff --git a/static/usage/toolbar/progress-bars/demo.html b/static/usage/toolbar/progress-bars/demo.html
deleted file mode 100644
index ab1ec728355..00000000000
--- a/static/usage/toolbar/progress-bars/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toolbar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Toolbar</ion-title>
-        <ion-progress-bar type="indeterminate"></ion-progress-bar>
-      </ion-toolbar>
-    </ion-header>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toolbar/progress-bars/index.md b/static/usage/toolbar/progress-bars/index.md
deleted file mode 100644
index e3124b5fa0d..00000000000
--- a/static/usage/toolbar/progress-bars/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/toolbar/progress-bars/demo.html" devicePreview includeIonContent={false} />
diff --git a/static/usage/toolbar/searchbars/demo.html b/static/usage/toolbar/searchbars/demo.html
deleted file mode 100644
index 0f2a035051a..00000000000
--- a/static/usage/toolbar/searchbars/demo.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toolbar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Toolbar</ion-title>
-      </ion-toolbar>
-      <ion-toolbar>
-        <ion-searchbar></ion-searchbar>
-      </ion-toolbar>
-    </ion-header>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toolbar/searchbars/index.md b/static/usage/toolbar/searchbars/index.md
deleted file mode 100644
index 8ebad9c57f0..00000000000
--- a/static/usage/toolbar/searchbars/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/toolbar/searchbars/demo.html" devicePreview includeIonContent={false} />
diff --git a/static/usage/toolbar/segments/demo.html b/static/usage/toolbar/segments/demo.html
deleted file mode 100644
index a33bf29801f..00000000000
--- a/static/usage/toolbar/segments/demo.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toolbar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-segment value="all">
-          <ion-segment-button value="all">
-            All
-          </ion-segment-button>
-          <ion-segment-button value="favorites">
-            Favorites
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-    </ion-header>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toolbar/segments/index.md b/static/usage/toolbar/segments/index.md
deleted file mode 100644
index 587435a03a1..00000000000
--- a/static/usage/toolbar/segments/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/toolbar/segments/demo.html" devicePreview includeIonContent={false} />
diff --git a/static/usage/toolbar/theming/colors/demo.html b/static/usage/toolbar/theming/colors/demo.html
deleted file mode 100644
index a59beb0b2a3..00000000000
--- a/static/usage/toolbar/theming/colors/demo.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toolbar</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toolbar>
-          <ion-title>Default Toolbar</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="primary">
-          <ion-title>Primary Toolbar</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="secondary">
-          <ion-title>Secondary Toolbar</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="tertiary">
-          <ion-title>Tertiary Toolbar</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="success">
-          <ion-title>Success Toolbar</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="warning">
-          <ion-title>Warning Toolbar</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="danger">
-          <ion-title>Danger Toolbar</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="light">
-          <ion-title>Light Toolbar</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="medium">
-          <ion-title>Medium Toolbar</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="dark">
-          <ion-title>Dark Toolbar</ion-title>
-        </ion-toolbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toolbar/theming/colors/index.md b/static/usage/toolbar/theming/colors/index.md
deleted file mode 100644
index 0ee0cc3f4a7..00000000000
--- a/static/usage/toolbar/theming/colors/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground code={{ javascript, react, vue, angular }} src="usage/toolbar/theming/colors/demo.html" size="large" />
diff --git a/static/usage/toolbar/theming/css-properties/demo.html b/static/usage/toolbar/theming/css-properties/demo.html
deleted file mode 100644
index befe3376120..00000000000
--- a/static/usage/toolbar/theming/css-properties/demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toolbar</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
-
-    ion-toolbar {
-      --background: #19422d;
-      --color: white;
-
-      --border-color: #f24aec;
-      --border-width: 4px 0;
-      --border-style: double;
-
-      --min-height: 80px;
-      --padding-top: 20px;
-      --padding-bottom: 20px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toolbar>
-          <ion-title>Custom Toolbar</ion-title>
-        </ion-toolbar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
diff --git a/static/usage/toolbar/theming/css-properties/index.md b/static/usage/toolbar/theming/css-properties/index.md
deleted file mode 100644
index 5d320f47306..00000000000
--- a/static/usage/toolbar/theming/css-properties/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css
-      }
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css
-      }
-    },
-  }}
-  src="usage/toolbar/theming/css-properties/demo.html"
-  size="250px"
-/>
diff --git a/static/usage/accordion/accessibility/animations/angular.md b/static/usage/v6/accordion/accessibility/animations/angular.md
similarity index 100%
rename from static/usage/accordion/accessibility/animations/angular.md
rename to static/usage/v6/accordion/accessibility/animations/angular.md
diff --git a/static/usage/v6/accordion/accessibility/animations/demo.html b/static/usage/v6/accordion/accessibility/animations/demo.html
new file mode 100644
index 00000000000..6ce674bb64b
--- /dev/null
+++ b/static/usage/v6/accordion/accessibility/animations/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group animated="false">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/accessibility/animations/index.md b/static/usage/v6/accordion/accessibility/animations/index.md
new file mode 100644
index 00000000000..ea858fcddee
--- /dev/null
+++ b/static/usage/v6/accordion/accessibility/animations/index.md
@@ -0,0 +1,16 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/accordion/accessibility/animations/demo.html"
+/>
diff --git a/static/usage/accordion/accessibility/animations/javascript.md b/static/usage/v6/accordion/accessibility/animations/javascript.md
similarity index 100%
rename from static/usage/accordion/accessibility/animations/javascript.md
rename to static/usage/v6/accordion/accessibility/animations/javascript.md
diff --git a/static/usage/accordion/accessibility/animations/react.md b/static/usage/v6/accordion/accessibility/animations/react.md
similarity index 100%
rename from static/usage/accordion/accessibility/animations/react.md
rename to static/usage/v6/accordion/accessibility/animations/react.md
diff --git a/static/usage/accordion/accessibility/animations/vue.md b/static/usage/v6/accordion/accessibility/animations/vue.md
similarity index 100%
rename from static/usage/accordion/accessibility/animations/vue.md
rename to static/usage/v6/accordion/accessibility/animations/vue.md
diff --git a/static/usage/accordion/basic/angular.md b/static/usage/v6/accordion/basic/angular.md
similarity index 100%
rename from static/usage/accordion/basic/angular.md
rename to static/usage/v6/accordion/basic/angular.md
diff --git a/static/usage/v6/accordion/basic/demo.html b/static/usage/v6/accordion/basic/demo.html
new file mode 100644
index 00000000000..ae833b5f61d
--- /dev/null
+++ b/static/usage/v6/accordion/basic/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/basic/index.md b/static/usage/v6/accordion/basic/index.md
new file mode 100644
index 00000000000..1ade912b468
--- /dev/null
+++ b/static/usage/v6/accordion/basic/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/accordion/basic/demo.html"
+  size="210px"
+/>
diff --git a/static/usage/accordion/basic/javascript.md b/static/usage/v6/accordion/basic/javascript.md
similarity index 100%
rename from static/usage/accordion/basic/javascript.md
rename to static/usage/v6/accordion/basic/javascript.md
diff --git a/static/usage/accordion/basic/react.md b/static/usage/v6/accordion/basic/react.md
similarity index 100%
rename from static/usage/accordion/basic/react.md
rename to static/usage/v6/accordion/basic/react.md
diff --git a/static/usage/accordion/basic/vue.md b/static/usage/v6/accordion/basic/vue.md
similarity index 100%
rename from static/usage/accordion/basic/vue.md
rename to static/usage/v6/accordion/basic/vue.md
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_css.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
rename to static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_html.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
rename to static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
rename to static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html
new file mode 100644
index 00000000000..2e78783b984
--- /dev/null
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-accordion {
+      margin: 0 auto;
+    }
+
+    ion-accordion.accordion-expanding,
+    ion-accordion.accordion-expanded {
+      width: calc(100% - 32px);
+
+      margin: 16px auto;
+    }
+
+    ion-accordion.accordion-collapsing ion-item[slot="header"],
+    ion-accordion.accordion-collapsed ion-item[slot="header"] {
+      --background: var(--ion-color-light);
+      --color: var(--ion-color-light-contrast);
+    }
+
+    ion-accordion.accordion-expanding ion-item[slot="header"],
+    ion-accordion.accordion-expanded ion-item[slot="header"] {
+      --background: var(--ion-color-primary);
+      --color: var(--ion-color-primary-contrast);
+    }
+
+    .container {
+      width: 300px;
+      margin: 0 auto;
+    }
+
+    ion-accordion-group {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md
new file mode 100644
index 00000000000..f1f583205bf
--- /dev/null
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  size="250px"
+  src="usage/v6/accordion/customization/advanced-expansion-styles/demo.html"
+/>
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/javascript.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/javascript.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/javascript.md
rename to static/usage/v6/accordion/customization/advanced-expansion-styles/javascript.md
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/react/main_css.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/react/main_css.md
rename to static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/react/main_tsx.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_tsx.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/react/main_tsx.md
rename to static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_tsx.md
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/vue.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/vue.md
rename to static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md
diff --git a/static/usage/accordion/customization/expansion-styles/angular.md b/static/usage/v6/accordion/customization/expansion-styles/angular.md
similarity index 100%
rename from static/usage/accordion/customization/expansion-styles/angular.md
rename to static/usage/v6/accordion/customization/expansion-styles/angular.md
diff --git a/static/usage/v6/accordion/customization/expansion-styles/demo.html b/static/usage/v6/accordion/customization/expansion-styles/demo.html
new file mode 100644
index 00000000000..f445c54ac11
--- /dev/null
+++ b/static/usage/v6/accordion/customization/expansion-styles/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group expand="inset">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/customization/expansion-styles/index.md b/static/usage/v6/accordion/customization/expansion-styles/index.md
new file mode 100644
index 00000000000..c80478a0d42
--- /dev/null
+++ b/static/usage/v6/accordion/customization/expansion-styles/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="250px"
+  src="usage/v6/accordion/customization/expansion-styles/demo.html"
+/>
diff --git a/static/usage/accordion/customization/expansion-styles/javascript.md b/static/usage/v6/accordion/customization/expansion-styles/javascript.md
similarity index 100%
rename from static/usage/accordion/customization/expansion-styles/javascript.md
rename to static/usage/v6/accordion/customization/expansion-styles/javascript.md
diff --git a/static/usage/accordion/customization/expansion-styles/react.md b/static/usage/v6/accordion/customization/expansion-styles/react.md
similarity index 100%
rename from static/usage/accordion/customization/expansion-styles/react.md
rename to static/usage/v6/accordion/customization/expansion-styles/react.md
diff --git a/static/usage/accordion/customization/expansion-styles/vue.md b/static/usage/v6/accordion/customization/expansion-styles/vue.md
similarity index 100%
rename from static/usage/accordion/customization/expansion-styles/vue.md
rename to static/usage/v6/accordion/customization/expansion-styles/vue.md
diff --git a/static/usage/accordion/customization/icons/angular.md b/static/usage/v6/accordion/customization/icons/angular.md
similarity index 100%
rename from static/usage/accordion/customization/icons/angular.md
rename to static/usage/v6/accordion/customization/icons/angular.md
diff --git a/static/usage/v6/accordion/customization/icons/demo.html b/static/usage/v6/accordion/customization/icons/demo.html
new file mode 100644
index 00000000000..b4f7385876a
--- /dev/null
+++ b/static/usage/v6/accordion/customization/icons/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first" toggle-icon="caret-down-circle" toggle-icon-slot="start">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second" toggle-icon="caret-down-circle" toggle-icon-slot="start">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third" toggle-icon="caret-down-circle" toggle-icon-slot="start">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/customization/icons/index.md b/static/usage/v6/accordion/customization/icons/index.md
new file mode 100644
index 00000000000..bad8bdf71b9
--- /dev/null
+++ b/static/usage/v6/accordion/customization/icons/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="250px"
+  src="usage/v6/accordion/customization/icons/demo.html"
+/>
diff --git a/static/usage/accordion/customization/icons/javascript.md b/static/usage/v6/accordion/customization/icons/javascript.md
similarity index 100%
rename from static/usage/accordion/customization/icons/javascript.md
rename to static/usage/v6/accordion/customization/icons/javascript.md
diff --git a/static/usage/accordion/customization/icons/react.md b/static/usage/v6/accordion/customization/icons/react.md
similarity index 100%
rename from static/usage/accordion/customization/icons/react.md
rename to static/usage/v6/accordion/customization/icons/react.md
diff --git a/static/usage/accordion/customization/icons/vue.md b/static/usage/v6/accordion/customization/icons/vue.md
similarity index 100%
rename from static/usage/accordion/customization/icons/vue.md
rename to static/usage/v6/accordion/customization/icons/vue.md
diff --git a/static/usage/accordion/customization/theming/angular/example_component_html.md b/static/usage/v6/accordion/customization/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/accordion/customization/theming/angular/example_component_html.md
rename to static/usage/v6/accordion/customization/theming/angular/example_component_html.md
diff --git a/static/usage/accordion/customization/theming/angular/global_css.md b/static/usage/v6/accordion/customization/theming/angular/global_css.md
similarity index 100%
rename from static/usage/accordion/customization/theming/angular/global_css.md
rename to static/usage/v6/accordion/customization/theming/angular/global_css.md
diff --git a/static/usage/v6/accordion/customization/theming/demo.html b/static/usage/v6/accordion/customization/theming/demo.html
new file mode 100644
index 00000000000..9b771545a49
--- /dev/null
+++ b/static/usage/v6/accordion/customization/theming/demo.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    :root {
+      --ion-color-rose: #fecdd3;
+      --ion-color-rose-rgb: 254, 205, 211;
+      --ion-color-rose-contrast: #000000;
+      --ion-color-rose-contrast-rgb: 0, 0, 0;
+      --ion-color-rose-shade: #e0b4ba;
+      --ion-color-rose-tint: #fed2d7;
+    }
+
+    .ion-color-rose {
+      --ion-color-base: var(--ion-color-rose);
+      --ion-color-base-rgb: var(--ion-color-rose-rgb);
+      --ion-color-contrast: var(--ion-color-rose-contrast);
+      --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+      --ion-color-shade: var(--ion-color-rose-shade);
+      --ion-color-tint: var(--ion-color-rose-tint);
+    }
+
+    div[slot="content"] {
+      background: rgba(var(--ion-color-rose-rgb), 0.25)
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group expand="inset">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="rose">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="rose">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="rose">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/customization/theming/index.md b/static/usage/v6/accordion/customization/theming/index.md
new file mode 100644
index 00000000000..c87341a846a
--- /dev/null
+++ b/static/usage/v6/accordion/customization/theming/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  size="250px"
+  src="usage/v6/accordion/customization/theming/demo.html"
+/>
diff --git a/static/usage/accordion/customization/theming/javascript.md b/static/usage/v6/accordion/customization/theming/javascript.md
similarity index 100%
rename from static/usage/accordion/customization/theming/javascript.md
rename to static/usage/v6/accordion/customization/theming/javascript.md
diff --git a/static/usage/accordion/customization/theming/react/main_css.md b/static/usage/v6/accordion/customization/theming/react/main_css.md
similarity index 100%
rename from static/usage/accordion/customization/theming/react/main_css.md
rename to static/usage/v6/accordion/customization/theming/react/main_css.md
diff --git a/static/usage/accordion/customization/theming/react/main_tsx.md b/static/usage/v6/accordion/customization/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/accordion/customization/theming/react/main_tsx.md
rename to static/usage/v6/accordion/customization/theming/react/main_tsx.md
diff --git a/static/usage/accordion/customization/theming/vue.md b/static/usage/v6/accordion/customization/theming/vue.md
similarity index 100%
rename from static/usage/accordion/customization/theming/vue.md
rename to static/usage/v6/accordion/customization/theming/vue.md
diff --git a/static/usage/accordion/disable-group/angular.md b/static/usage/v6/accordion/disable-group/angular.md
similarity index 100%
rename from static/usage/accordion/disable-group/angular.md
rename to static/usage/v6/accordion/disable-group/angular.md
diff --git a/static/usage/v6/accordion/disable-group/demo.html b/static/usage/v6/accordion/disable-group/demo.html
new file mode 100644
index 00000000000..bbe38628365
--- /dev/null
+++ b/static/usage/v6/accordion/disable-group/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group disabled="true">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/disable-group/index.md b/static/usage/v6/accordion/disable-group/index.md
new file mode 100644
index 00000000000..79366ce5f7a
--- /dev/null
+++ b/static/usage/v6/accordion/disable-group/index.md
@@ -0,0 +1,16 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/accordion/disable-group/demo.html"
+/>
diff --git a/static/usage/accordion/disable-group/javascript.md b/static/usage/v6/accordion/disable-group/javascript.md
similarity index 100%
rename from static/usage/accordion/disable-group/javascript.md
rename to static/usage/v6/accordion/disable-group/javascript.md
diff --git a/static/usage/accordion/disable-group/react.md b/static/usage/v6/accordion/disable-group/react.md
similarity index 100%
rename from static/usage/accordion/disable-group/react.md
rename to static/usage/v6/accordion/disable-group/react.md
diff --git a/static/usage/accordion/disable-group/vue.md b/static/usage/v6/accordion/disable-group/vue.md
similarity index 100%
rename from static/usage/accordion/disable-group/vue.md
rename to static/usage/v6/accordion/disable-group/vue.md
diff --git a/static/usage/accordion/disable/group/angular.md b/static/usage/v6/accordion/disable/group/angular.md
similarity index 100%
rename from static/usage/accordion/disable/group/angular.md
rename to static/usage/v6/accordion/disable/group/angular.md
diff --git a/static/usage/v6/accordion/disable/group/demo.html b/static/usage/v6/accordion/disable/group/demo.html
new file mode 100644
index 00000000000..357470c9cb2
--- /dev/null
+++ b/static/usage/v6/accordion/disable/group/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group disabled="true">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/disable/group/index.md b/static/usage/v6/accordion/disable/group/index.md
new file mode 100644
index 00000000000..ccff0c07398
--- /dev/null
+++ b/static/usage/v6/accordion/disable/group/index.md
@@ -0,0 +1,16 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/accordion/disable/group/demo.html"
+/>
diff --git a/static/usage/accordion/disable/group/javascript.md b/static/usage/v6/accordion/disable/group/javascript.md
similarity index 100%
rename from static/usage/accordion/disable/group/javascript.md
rename to static/usage/v6/accordion/disable/group/javascript.md
diff --git a/static/usage/accordion/disable/group/react.md b/static/usage/v6/accordion/disable/group/react.md
similarity index 100%
rename from static/usage/accordion/disable/group/react.md
rename to static/usage/v6/accordion/disable/group/react.md
diff --git a/static/usage/accordion/disable/group/vue.md b/static/usage/v6/accordion/disable/group/vue.md
similarity index 100%
rename from static/usage/accordion/disable/group/vue.md
rename to static/usage/v6/accordion/disable/group/vue.md
diff --git a/static/usage/accordion/disable/individual/angular.md b/static/usage/v6/accordion/disable/individual/angular.md
similarity index 100%
rename from static/usage/accordion/disable/individual/angular.md
rename to static/usage/v6/accordion/disable/individual/angular.md
diff --git a/static/usage/v6/accordion/disable/individual/demo.html b/static/usage/v6/accordion/disable/individual/demo.html
new file mode 100644
index 00000000000..33d7caf6f65
--- /dev/null
+++ b/static/usage/v6/accordion/disable/individual/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second" disabled="true">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion (Disabled)</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/disable/individual/index.md b/static/usage/v6/accordion/disable/individual/index.md
new file mode 100644
index 00000000000..547959c608a
--- /dev/null
+++ b/static/usage/v6/accordion/disable/individual/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="210px"
+  src="usage/v6/accordion/disable/individual/demo.html"
+/>
diff --git a/static/usage/accordion/disable/individual/javascript.md b/static/usage/v6/accordion/disable/individual/javascript.md
similarity index 100%
rename from static/usage/accordion/disable/individual/javascript.md
rename to static/usage/v6/accordion/disable/individual/javascript.md
diff --git a/static/usage/accordion/disable/individual/react.md b/static/usage/v6/accordion/disable/individual/react.md
similarity index 100%
rename from static/usage/accordion/disable/individual/react.md
rename to static/usage/v6/accordion/disable/individual/react.md
diff --git a/static/usage/accordion/disable/individual/vue.md b/static/usage/v6/accordion/disable/individual/vue.md
similarity index 100%
rename from static/usage/accordion/disable/individual/vue.md
rename to static/usage/v6/accordion/disable/individual/vue.md
diff --git a/static/usage/accordion/listen-changes/angular/example_component_html.md b/static/usage/v6/accordion/listen-changes/angular/example_component_html.md
similarity index 100%
rename from static/usage/accordion/listen-changes/angular/example_component_html.md
rename to static/usage/v6/accordion/listen-changes/angular/example_component_html.md
diff --git a/static/usage/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v6/accordion/listen-changes/angular/example_component_ts.md
similarity index 100%
rename from static/usage/accordion/listen-changes/angular/example_component_ts.md
rename to static/usage/v6/accordion/listen-changes/angular/example_component_ts.md
diff --git a/static/usage/v6/accordion/listen-changes/demo.html b/static/usage/v6/accordion/listen-changes/demo.html
new file mode 100644
index 00000000000..986aba59eb6
--- /dev/null
+++ b/static/usage/v6/accordion/listen-changes/demo.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+
+        <p class="listener-out">
+        </p>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const accordionGroup = document.querySelector('ion-accordion-group');
+    const listenerOut = document.querySelector('.listener-out');
+    const values = ['first', 'second', 'third'];
+
+    accordionGroup.addEventListener('ionChange', (ev) => {
+      const collapsedItems = values.filter(value => value !== ev.detail.value);
+      const selectedValue = ev.detail.value;
+
+      listenerOut.innerText = `
+          Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
+          Collapsed: ${collapsedItems.join(', ')}
+        `
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/listen-changes/index.md b/static/usage/v6/accordion/listen-changes/index.md
new file mode 100644
index 00000000000..4084b33fed0
--- /dev/null
+++ b/static/usage/v6/accordion/listen-changes/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  size="320px"
+  src="usage/v6/accordion/listen-changes/demo.html"
+/>
diff --git a/static/usage/accordion/listen-changes/javascript.md b/static/usage/v6/accordion/listen-changes/javascript.md
similarity index 100%
rename from static/usage/accordion/listen-changes/javascript.md
rename to static/usage/v6/accordion/listen-changes/javascript.md
diff --git a/static/usage/accordion/listen-changes/react.md b/static/usage/v6/accordion/listen-changes/react.md
similarity index 100%
rename from static/usage/accordion/listen-changes/react.md
rename to static/usage/v6/accordion/listen-changes/react.md
diff --git a/static/usage/accordion/listen-changes/vue.md b/static/usage/v6/accordion/listen-changes/vue.md
similarity index 100%
rename from static/usage/accordion/listen-changes/vue.md
rename to static/usage/v6/accordion/listen-changes/vue.md
diff --git a/static/usage/accordion/multiple/angular.md b/static/usage/v6/accordion/multiple/angular.md
similarity index 100%
rename from static/usage/accordion/multiple/angular.md
rename to static/usage/v6/accordion/multiple/angular.md
diff --git a/static/usage/v6/accordion/multiple/demo.html b/static/usage/v6/accordion/multiple/demo.html
new file mode 100644
index 00000000000..d7dbbfae658
--- /dev/null
+++ b/static/usage/v6/accordion/multiple/demo.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group multiple="true">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const accordionGroup = document.querySelector('ion-accordion-group');
+    accordionGroup.value = ['first', 'third'];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/multiple/index.md b/static/usage/v6/accordion/multiple/index.md
new file mode 100644
index 00000000000..f34ed0e3808
--- /dev/null
+++ b/static/usage/v6/accordion/multiple/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="320px"
+  src="usage/v6/accordion/multiple/demo.html"
+/>
diff --git a/static/usage/accordion/multiple/javascript.md b/static/usage/v6/accordion/multiple/javascript.md
similarity index 100%
rename from static/usage/accordion/multiple/javascript.md
rename to static/usage/v6/accordion/multiple/javascript.md
diff --git a/static/usage/accordion/multiple/react.md b/static/usage/v6/accordion/multiple/react.md
similarity index 100%
rename from static/usage/accordion/multiple/react.md
rename to static/usage/v6/accordion/multiple/react.md
diff --git a/static/usage/accordion/multiple/vue.md b/static/usage/v6/accordion/multiple/vue.md
similarity index 100%
rename from static/usage/accordion/multiple/vue.md
rename to static/usage/v6/accordion/multiple/vue.md
diff --git a/static/usage/accordion/readonly/group/angular.md b/static/usage/v6/accordion/readonly/group/angular.md
similarity index 100%
rename from static/usage/accordion/readonly/group/angular.md
rename to static/usage/v6/accordion/readonly/group/angular.md
diff --git a/static/usage/v6/accordion/readonly/group/demo.html b/static/usage/v6/accordion/readonly/group/demo.html
new file mode 100644
index 00000000000..7b67c1ce83c
--- /dev/null
+++ b/static/usage/v6/accordion/readonly/group/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group readonly="true">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/readonly/group/index.md b/static/usage/v6/accordion/readonly/group/index.md
new file mode 100644
index 00000000000..921c640de03
--- /dev/null
+++ b/static/usage/v6/accordion/readonly/group/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="210px"
+  src="usage/v6/accordion/readonly/group/demo.html"
+/>
diff --git a/static/usage/accordion/readonly/group/javascript.md b/static/usage/v6/accordion/readonly/group/javascript.md
similarity index 100%
rename from static/usage/accordion/readonly/group/javascript.md
rename to static/usage/v6/accordion/readonly/group/javascript.md
diff --git a/static/usage/accordion/readonly/group/react.md b/static/usage/v6/accordion/readonly/group/react.md
similarity index 100%
rename from static/usage/accordion/readonly/group/react.md
rename to static/usage/v6/accordion/readonly/group/react.md
diff --git a/static/usage/accordion/readonly/group/vue.md b/static/usage/v6/accordion/readonly/group/vue.md
similarity index 100%
rename from static/usage/accordion/readonly/group/vue.md
rename to static/usage/v6/accordion/readonly/group/vue.md
diff --git a/static/usage/accordion/readonly/individual/angular.md b/static/usage/v6/accordion/readonly/individual/angular.md
similarity index 100%
rename from static/usage/accordion/readonly/individual/angular.md
rename to static/usage/v6/accordion/readonly/individual/angular.md
diff --git a/static/usage/v6/accordion/readonly/individual/demo.html b/static/usage/v6/accordion/readonly/individual/demo.html
new file mode 100644
index 00000000000..65b7efbc355
--- /dev/null
+++ b/static/usage/v6/accordion/readonly/individual/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second" readonly="true">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion (Readonly)</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/readonly/individual/index.md b/static/usage/v6/accordion/readonly/individual/index.md
new file mode 100644
index 00000000000..ad6bb9e64a1
--- /dev/null
+++ b/static/usage/v6/accordion/readonly/individual/index.md
@@ -0,0 +1,16 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/accordion/readonly/individual/demo.html"
+/>
diff --git a/static/usage/accordion/readonly/individual/javascript.md b/static/usage/v6/accordion/readonly/individual/javascript.md
similarity index 100%
rename from static/usage/accordion/readonly/individual/javascript.md
rename to static/usage/v6/accordion/readonly/individual/javascript.md
diff --git a/static/usage/accordion/readonly/individual/react.md b/static/usage/v6/accordion/readonly/individual/react.md
similarity index 100%
rename from static/usage/accordion/readonly/individual/react.md
rename to static/usage/v6/accordion/readonly/individual/react.md
diff --git a/static/usage/accordion/readonly/individual/vue.md b/static/usage/v6/accordion/readonly/individual/vue.md
similarity index 100%
rename from static/usage/accordion/readonly/individual/vue.md
rename to static/usage/v6/accordion/readonly/individual/vue.md
diff --git a/static/usage/accordion/toggle/angular/example_component_html.md b/static/usage/v6/accordion/toggle/angular/example_component_html.md
similarity index 100%
rename from static/usage/accordion/toggle/angular/example_component_html.md
rename to static/usage/v6/accordion/toggle/angular/example_component_html.md
diff --git a/static/usage/accordion/toggle/angular/example_component_ts.md b/static/usage/v6/accordion/toggle/angular/example_component_ts.md
similarity index 100%
rename from static/usage/accordion/toggle/angular/example_component_ts.md
rename to static/usage/v6/accordion/toggle/angular/example_component_ts.md
diff --git a/static/usage/v6/accordion/toggle/demo.html b/static/usage/v6/accordion/toggle/demo.html
new file mode 100644
index 00000000000..d230e1e35e0
--- /dev/null
+++ b/static/usage/v6/accordion/toggle/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+
+        <br />
+
+        <ion-button size="block" onclick="toggleSecondAccordion()">Toggle Second Accordion</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const accordionGroup = document.querySelector('ion-accordion-group');
+    const toggleSecondAccordion = () => {
+      if (accordionGroup.value === 'second') {
+        accordionGroup.value = undefined;
+      } else {
+        accordionGroup.value = 'second'
+      }
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/accordion/toggle/index.md b/static/usage/v6/accordion/toggle/index.md
new file mode 100644
index 00000000000..ad7487404fc
--- /dev/null
+++ b/static/usage/v6/accordion/toggle/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  size="medium"
+  src="usage/v6/accordion/toggle/demo.html"
+/>
diff --git a/static/usage/accordion/toggle/javascript.md b/static/usage/v6/accordion/toggle/javascript.md
similarity index 100%
rename from static/usage/accordion/toggle/javascript.md
rename to static/usage/v6/accordion/toggle/javascript.md
diff --git a/static/usage/accordion/toggle/react.md b/static/usage/v6/accordion/toggle/react.md
similarity index 100%
rename from static/usage/accordion/toggle/react.md
rename to static/usage/v6/accordion/toggle/react.md
diff --git a/static/usage/accordion/toggle/vue.md b/static/usage/v6/accordion/toggle/vue.md
similarity index 100%
rename from static/usage/accordion/toggle/vue.md
rename to static/usage/v6/accordion/toggle/vue.md
diff --git a/static/usage/action-sheet/basic/angular/example_component_css.md b/static/usage/v6/action-sheet/basic/angular/example_component_css.md
similarity index 100%
rename from static/usage/action-sheet/basic/angular/example_component_css.md
rename to static/usage/v6/action-sheet/basic/angular/example_component_css.md
diff --git a/static/usage/action-sheet/basic/angular/example_component_html.md b/static/usage/v6/action-sheet/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/action-sheet/basic/angular/example_component_html.md
rename to static/usage/v6/action-sheet/basic/angular/example_component_html.md
diff --git a/static/usage/action-sheet/basic/angular/example_component_ts.md b/static/usage/v6/action-sheet/basic/angular/example_component_ts.md
similarity index 100%
rename from static/usage/action-sheet/basic/angular/example_component_ts.md
rename to static/usage/v6/action-sheet/basic/angular/example_component_ts.md
diff --git a/static/usage/v6/action-sheet/basic/demo.html b/static/usage/v6/action-sheet/basic/demo.html
new file mode 100644
index 00000000000..b41118e24ab
--- /dev/null
+++ b/static/usage/v6/action-sheet/basic/demo.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Action Sheet</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    code {
+      white-space: pre-wrap;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentActionSheet()">Open</ion-button>
+        <code id="action"></code>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const action = document.getElementById('action');
+
+    async function presentActionSheet() {
+      const actionSheet = document.createElement('ion-action-sheet');
+      actionSheet.header = 'Example header';
+      actionSheet.subHeader = 'Example subheader';
+      actionSheet.buttons = [{
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete'
+        }
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share'
+        }
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel'
+        }
+      }];
+
+      document.body.appendChild(actionSheet);
+      await actionSheet.present();
+
+      const result = await actionSheet.onDidDismiss();
+      action.innerText = JSON.stringify(result, null, 2);
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/action-sheet/basic/index.md b/static/usage/v6/action-sheet/basic/index.md
new file mode 100644
index 00000000000..c96980b1b83
--- /dev/null
+++ b/static/usage/v6/action-sheet/basic/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/action-sheet/basic/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/action-sheet/basic/javascript.md b/static/usage/v6/action-sheet/basic/javascript.md
similarity index 100%
rename from static/usage/action-sheet/basic/javascript.md
rename to static/usage/v6/action-sheet/basic/javascript.md
diff --git a/static/usage/action-sheet/basic/react/main_css.md b/static/usage/v6/action-sheet/basic/react/main_css.md
similarity index 100%
rename from static/usage/action-sheet/basic/react/main_css.md
rename to static/usage/v6/action-sheet/basic/react/main_css.md
diff --git a/static/usage/action-sheet/basic/react/main_tsx.md b/static/usage/v6/action-sheet/basic/react/main_tsx.md
similarity index 100%
rename from static/usage/action-sheet/basic/react/main_tsx.md
rename to static/usage/v6/action-sheet/basic/react/main_tsx.md
diff --git a/static/usage/action-sheet/basic/vue.md b/static/usage/v6/action-sheet/basic/vue.md
similarity index 100%
rename from static/usage/action-sheet/basic/vue.md
rename to static/usage/v6/action-sheet/basic/vue.md
diff --git a/static/usage/action-sheet/theming/css-properties/angular/example_component_html.md b/static/usage/v6/action-sheet/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/action-sheet/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/action-sheet/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v6/action-sheet/theming/css-properties/angular/example_component_ts.md
similarity index 100%
rename from static/usage/action-sheet/theming/css-properties/angular/example_component_ts.md
rename to static/usage/v6/action-sheet/theming/css-properties/angular/example_component_ts.md
diff --git a/static/usage/action-sheet/theming/css-properties/angular/global_css.md b/static/usage/v6/action-sheet/theming/css-properties/angular/global_css.md
similarity index 100%
rename from static/usage/action-sheet/theming/css-properties/angular/global_css.md
rename to static/usage/v6/action-sheet/theming/css-properties/angular/global_css.md
diff --git a/static/usage/v6/action-sheet/theming/css-properties/demo.html b/static/usage/v6/action-sheet/theming/css-properties/demo.html
new file mode 100644
index 00000000000..86df5261230
--- /dev/null
+++ b/static/usage/v6/action-sheet/theming/css-properties/demo.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Action Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-action-sheet.my-custom-class {
+      --background: #F58840;
+      --backdrop-opacity: 0.6;
+      --button-background-selected: #e97223;
+      --button-color: #000000;
+      --color: #fff;
+      /* role: "destructive" button iOS styling override */
+      --ion-color-danger: #000000;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentActionSheet()">Open</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    async function presentActionSheet() {
+      const actionSheet = document.createElement('ion-action-sheet');
+      actionSheet.cssClass = 'my-custom-class';
+      actionSheet.header = 'Example header';
+      actionSheet.subHeader = 'Example subheader';
+      actionSheet.buttons = [{
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete'
+        }
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share'
+        }
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel'
+        }
+      }];
+
+      document.body.appendChild(actionSheet);
+      await actionSheet.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/action-sheet/theming/css-properties/index.md b/static/usage/v6/action-sheet/theming/css-properties/index.md
new file mode 100644
index 00000000000..9c53afca208
--- /dev/null
+++ b/static/usage/v6/action-sheet/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v6/action-sheet/theming/css-properties/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/action-sheet/theming/css-properties/javascript.md b/static/usage/v6/action-sheet/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/action-sheet/theming/css-properties/javascript.md
rename to static/usage/v6/action-sheet/theming/css-properties/javascript.md
diff --git a/static/usage/action-sheet/theming/css-properties/react/main_css.md b/static/usage/v6/action-sheet/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/action-sheet/theming/css-properties/react/main_css.md
rename to static/usage/v6/action-sheet/theming/css-properties/react/main_css.md
diff --git a/static/usage/action-sheet/theming/css-properties/react/main_tsx.md b/static/usage/v6/action-sheet/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/action-sheet/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/action-sheet/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/action-sheet/theming/css-properties/vue.md b/static/usage/v6/action-sheet/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/action-sheet/theming/css-properties/vue.md
rename to static/usage/v6/action-sheet/theming/css-properties/vue.md
diff --git a/static/usage/action-sheet/theming/styling/angular/example_component_html.md b/static/usage/v6/action-sheet/theming/styling/angular/example_component_html.md
similarity index 100%
rename from static/usage/action-sheet/theming/styling/angular/example_component_html.md
rename to static/usage/v6/action-sheet/theming/styling/angular/example_component_html.md
diff --git a/static/usage/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v6/action-sheet/theming/styling/angular/example_component_ts.md
similarity index 100%
rename from static/usage/action-sheet/theming/styling/angular/example_component_ts.md
rename to static/usage/v6/action-sheet/theming/styling/angular/example_component_ts.md
diff --git a/static/usage/action-sheet/theming/styling/angular/global_css.md b/static/usage/v6/action-sheet/theming/styling/angular/global_css.md
similarity index 100%
rename from static/usage/action-sheet/theming/styling/angular/global_css.md
rename to static/usage/v6/action-sheet/theming/styling/angular/global_css.md
diff --git a/static/usage/v6/action-sheet/theming/styling/demo.html b/static/usage/v6/action-sheet/theming/styling/demo.html
new file mode 100644
index 00000000000..df397d1220f
--- /dev/null
+++ b/static/usage/v6/action-sheet/theming/styling/demo.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Action Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-action-sheet.my-custom-class .action-sheet-group {
+      background: #F58840;
+    }
+
+    ion-action-sheet.my-custom-class .action-sheet-title {
+      color: #fff;
+    }
+
+    ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+      background: #e97223;
+    }
+
+    ion-action-sheet.my-custom-class .action-sheet-button,
+    ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
+      color: #000000;
+    }
+
+    @media (any-hover: hover) {
+      ion-action-sheet.my-custom-class .action-sheet-button:hover {
+        color: #000000;
+      }
+    }
+
+    ion-action-sheet.my-custom-class ion-backdrop {
+      opacity: 0.6;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentActionSheet()">Open</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    async function presentActionSheet() {
+      const actionSheet = document.createElement('ion-action-sheet');
+      actionSheet.cssClass = 'my-custom-class';
+      actionSheet.header = 'Example header';
+      actionSheet.subHeader = 'Example subheader';
+      actionSheet.buttons = [{
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete'
+        }
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share'
+        }
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel'
+        }
+      }];
+
+      document.body.appendChild(actionSheet);
+      await actionSheet.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/action-sheet/theming/styling/index.md b/static/usage/v6/action-sheet/theming/styling/index.md
new file mode 100644
index 00000000000..c2c3d7c42c6
--- /dev/null
+++ b/static/usage/v6/action-sheet/theming/styling/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v6/action-sheet/theming/styling/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/action-sheet/theming/styling/javascript.md b/static/usage/v6/action-sheet/theming/styling/javascript.md
similarity index 100%
rename from static/usage/action-sheet/theming/styling/javascript.md
rename to static/usage/v6/action-sheet/theming/styling/javascript.md
diff --git a/static/usage/action-sheet/theming/styling/react/main_css.md b/static/usage/v6/action-sheet/theming/styling/react/main_css.md
similarity index 100%
rename from static/usage/action-sheet/theming/styling/react/main_css.md
rename to static/usage/v6/action-sheet/theming/styling/react/main_css.md
diff --git a/static/usage/action-sheet/theming/styling/react/main_tsx.md b/static/usage/v6/action-sheet/theming/styling/react/main_tsx.md
similarity index 100%
rename from static/usage/action-sheet/theming/styling/react/main_tsx.md
rename to static/usage/v6/action-sheet/theming/styling/react/main_tsx.md
diff --git a/static/usage/action-sheet/theming/styling/vue.md b/static/usage/v6/action-sheet/theming/styling/vue.md
similarity index 100%
rename from static/usage/action-sheet/theming/styling/vue.md
rename to static/usage/v6/action-sheet/theming/styling/vue.md
diff --git a/static/usage/alert/buttons/angular/example_component_html.md b/static/usage/v6/alert/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/alert/buttons/angular/example_component_html.md
rename to static/usage/v6/alert/buttons/angular/example_component_html.md
diff --git a/static/usage/alert/buttons/angular/example_component_ts.md b/static/usage/v6/alert/buttons/angular/example_component_ts.md
similarity index 100%
rename from static/usage/alert/buttons/angular/example_component_ts.md
rename to static/usage/v6/alert/buttons/angular/example_component_ts.md
diff --git a/static/usage/v6/alert/buttons/demo.html b/static/usage/v6/alert/buttons/demo.html
new file mode 100644
index 00000000000..bd5f4eb4367
--- /dev/null
+++ b/static/usage/v6/alert/buttons/demo.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Alert</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    .container p {
+      margin-bottom: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentAlert()">Click Me</ion-button>
+        <p id="handlerResult"></p>
+        <p id="roleResult"></p>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const handlerOutput = document.querySelector('#handlerResult');
+    const roleOutput = document.querySelector('#roleResult');
+
+    async function presentAlert() {
+      const alert = document.createElement('ion-alert');
+      alert.header = 'Alert!';
+      alert.buttons = [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => { handlerOutput.innerText = 'Alert canceled'; }
+        },
+        {
+          text: 'OK',
+          role: 'confirm',
+          handler: () => { handlerOutput.innerText = 'Alert confirmed'; }
+        }
+      ];
+
+      document.body.appendChild(alert);
+      await alert.present();
+
+      const { role } = await alert.onDidDismiss();
+      roleOutput.innerText = `Dismissed with role: ${role}`;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/alert/buttons/index.md b/static/usage/v6/alert/buttons/index.md
new file mode 100644
index 00000000000..18c070e5d1c
--- /dev/null
+++ b/static/usage/v6/alert/buttons/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/alert/buttons/demo.html"
+/>
diff --git a/static/usage/alert/buttons/javascript.md b/static/usage/v6/alert/buttons/javascript.md
similarity index 100%
rename from static/usage/alert/buttons/javascript.md
rename to static/usage/v6/alert/buttons/javascript.md
diff --git a/static/usage/alert/buttons/react.md b/static/usage/v6/alert/buttons/react.md
similarity index 100%
rename from static/usage/alert/buttons/react.md
rename to static/usage/v6/alert/buttons/react.md
diff --git a/static/usage/alert/buttons/vue.md b/static/usage/v6/alert/buttons/vue.md
similarity index 100%
rename from static/usage/alert/buttons/vue.md
rename to static/usage/v6/alert/buttons/vue.md
diff --git a/static/usage/alert/customization/angular/example_component_html.md b/static/usage/v6/alert/customization/angular/example_component_html.md
similarity index 100%
rename from static/usage/alert/customization/angular/example_component_html.md
rename to static/usage/v6/alert/customization/angular/example_component_html.md
diff --git a/static/usage/alert/customization/angular/example_component_ts.md b/static/usage/v6/alert/customization/angular/example_component_ts.md
similarity index 100%
rename from static/usage/alert/customization/angular/example_component_ts.md
rename to static/usage/v6/alert/customization/angular/example_component_ts.md
diff --git a/static/usage/alert/customization/angular/global_css.md b/static/usage/v6/alert/customization/angular/global_css.md
similarity index 100%
rename from static/usage/alert/customization/angular/global_css.md
rename to static/usage/v6/alert/customization/angular/global_css.md
diff --git a/static/usage/v6/alert/customization/demo.html b/static/usage/v6/alert/customization/demo.html
new file mode 100644
index 00000000000..a17881c7825
--- /dev/null
+++ b/static/usage/v6/alert/customization/demo.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Alert</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-alert.custom-alert {
+      --backdrop-opacity: 0.7;
+    }
+
+    .custom-alert .alert-button-group {
+      padding: 8px;
+    }
+
+    button.alert-button.alert-button-confirm {
+      background-color: var(--ion-color-success);
+      color: var(--ion-color-success-contrast);
+    }
+
+    .md button.alert-button.alert-button-confirm {
+      border-radius: 4px;
+    }
+
+    .ios .custom-alert button.alert-button {
+      border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+    }
+
+    .ios button.alert-button.alert-button-cancel {
+      border-right: 0;
+      border-bottom-left-radius: 13px;
+      border-top-left-radius: 13px;
+    }
+
+    .ios button.alert-button.alert-button-confirm {
+      border-bottom-right-radius: 13px;
+      border-top-right-radius: 13px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentAlert()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    async function presentAlert() {
+      const alert = document.createElement('ion-alert');
+      alert.header = 'Are you sure?';
+      alert.cssClass = 'custom-alert';
+      alert.buttons = [
+        {
+          text: 'No',
+          cssClass: 'alert-button-cancel'
+        },
+        {
+          text: 'Yes',
+          cssClass: 'alert-button-confirm'
+        }
+      ];
+
+      document.body.appendChild(alert);
+      await alert.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/alert/customization/index.md b/static/usage/v6/alert/customization/index.md
new file mode 100644
index 00000000000..bcb94e81898
--- /dev/null
+++ b/static/usage/v6/alert/customization/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v6/alert/customization/demo.html"
+/>
diff --git a/static/usage/alert/customization/javascript.md b/static/usage/v6/alert/customization/javascript.md
similarity index 100%
rename from static/usage/alert/customization/javascript.md
rename to static/usage/v6/alert/customization/javascript.md
diff --git a/static/usage/alert/customization/react/main_css.md b/static/usage/v6/alert/customization/react/main_css.md
similarity index 100%
rename from static/usage/alert/customization/react/main_css.md
rename to static/usage/v6/alert/customization/react/main_css.md
diff --git a/static/usage/alert/customization/react/main_tsx.md b/static/usage/v6/alert/customization/react/main_tsx.md
similarity index 100%
rename from static/usage/alert/customization/react/main_tsx.md
rename to static/usage/v6/alert/customization/react/main_tsx.md
diff --git a/static/usage/alert/customization/vue.md b/static/usage/v6/alert/customization/vue.md
similarity index 100%
rename from static/usage/alert/customization/vue.md
rename to static/usage/v6/alert/customization/vue.md
diff --git a/static/usage/alert/inputs/radios/angular/example_component_html.md b/static/usage/v6/alert/inputs/radios/angular/example_component_html.md
similarity index 100%
rename from static/usage/alert/inputs/radios/angular/example_component_html.md
rename to static/usage/v6/alert/inputs/radios/angular/example_component_html.md
diff --git a/static/usage/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v6/alert/inputs/radios/angular/example_component_ts.md
similarity index 100%
rename from static/usage/alert/inputs/radios/angular/example_component_ts.md
rename to static/usage/v6/alert/inputs/radios/angular/example_component_ts.md
diff --git a/static/usage/v6/alert/inputs/radios/demo.html b/static/usage/v6/alert/inputs/radios/demo.html
new file mode 100644
index 00000000000..5f5ebb0e8b9
--- /dev/null
+++ b/static/usage/v6/alert/inputs/radios/demo.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Alert</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentAlert()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    async function presentAlert() {
+      const alert = document.createElement('ion-alert');
+      alert.header = 'Select your favorite color';
+      alert.buttons = ['OK'];
+      alert.inputs = [
+        {
+          label: 'Red',
+          type: 'radio',
+          value: 'red'
+        },
+        {
+          label: 'Blue',
+          type: 'radio',
+          value: 'blue'
+        },
+        {
+          label: 'Green',
+          type: 'radio',
+          value: 'green'
+        }
+      ];
+
+      document.body.appendChild(alert);
+      await alert.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/alert/inputs/radios/index.md b/static/usage/v6/alert/inputs/radios/index.md
new file mode 100644
index 00000000000..f76eebd547b
--- /dev/null
+++ b/static/usage/v6/alert/inputs/radios/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="medium"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/alert/inputs/radios/demo.html"
+/>
diff --git a/static/usage/alert/inputs/radios/javascript.md b/static/usage/v6/alert/inputs/radios/javascript.md
similarity index 100%
rename from static/usage/alert/inputs/radios/javascript.md
rename to static/usage/v6/alert/inputs/radios/javascript.md
diff --git a/static/usage/alert/inputs/radios/react.md b/static/usage/v6/alert/inputs/radios/react.md
similarity index 100%
rename from static/usage/alert/inputs/radios/react.md
rename to static/usage/v6/alert/inputs/radios/react.md
diff --git a/static/usage/alert/inputs/radios/vue.md b/static/usage/v6/alert/inputs/radios/vue.md
similarity index 100%
rename from static/usage/alert/inputs/radios/vue.md
rename to static/usage/v6/alert/inputs/radios/vue.md
diff --git a/static/usage/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md
similarity index 100%
rename from static/usage/alert/inputs/text-inputs/angular/example_component_html.md
rename to static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md
diff --git a/static/usage/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_ts.md
similarity index 100%
rename from static/usage/alert/inputs/text-inputs/angular/example_component_ts.md
rename to static/usage/v6/alert/inputs/text-inputs/angular/example_component_ts.md
diff --git a/static/usage/v6/alert/inputs/text-inputs/demo.html b/static/usage/v6/alert/inputs/text-inputs/demo.html
new file mode 100644
index 00000000000..d2badb8c851
--- /dev/null
+++ b/static/usage/v6/alert/inputs/text-inputs/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Alert</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentAlert()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    async function presentAlert() {
+      const alert = document.createElement('ion-alert');
+      alert.header = 'Please enter your info';
+      alert.buttons = ['OK'];
+      alert.inputs = [
+        {
+          placeholder: 'Name'
+        },
+        {
+          placeholder: 'Nickname (max 8 characters)',
+          attributes: {
+            maxlength: 8
+          }
+        },
+        {
+          type: 'number',
+          placeholder: 'Age',
+          min: 1,
+          max: 100
+        },
+        {
+          type: 'textarea',
+          placeholder: 'A little about yourself'
+        }
+      ];
+
+      document.body.appendChild(alert);
+      await alert.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/alert/inputs/text-inputs/index.md b/static/usage/v6/alert/inputs/text-inputs/index.md
new file mode 100644
index 00000000000..ab42a98fe97
--- /dev/null
+++ b/static/usage/v6/alert/inputs/text-inputs/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="450px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/alert/inputs/text-inputs/demo.html"
+/>
diff --git a/static/usage/alert/inputs/text-inputs/javascript.md b/static/usage/v6/alert/inputs/text-inputs/javascript.md
similarity index 100%
rename from static/usage/alert/inputs/text-inputs/javascript.md
rename to static/usage/v6/alert/inputs/text-inputs/javascript.md
diff --git a/static/usage/alert/inputs/text-inputs/react.md b/static/usage/v6/alert/inputs/text-inputs/react.md
similarity index 100%
rename from static/usage/alert/inputs/text-inputs/react.md
rename to static/usage/v6/alert/inputs/text-inputs/react.md
diff --git a/static/usage/alert/inputs/text-inputs/vue.md b/static/usage/v6/alert/inputs/text-inputs/vue.md
similarity index 100%
rename from static/usage/alert/inputs/text-inputs/vue.md
rename to static/usage/v6/alert/inputs/text-inputs/vue.md
diff --git a/static/usage/alert/presenting/controller/angular/example_component_html.md b/static/usage/v6/alert/presenting/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/alert/presenting/controller/angular/example_component_html.md
rename to static/usage/v6/alert/presenting/controller/angular/example_component_html.md
diff --git a/static/usage/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v6/alert/presenting/controller/angular/example_component_ts.md
similarity index 100%
rename from static/usage/alert/presenting/controller/angular/example_component_ts.md
rename to static/usage/v6/alert/presenting/controller/angular/example_component_ts.md
diff --git a/static/usage/v6/alert/presenting/controller/demo.html b/static/usage/v6/alert/presenting/controller/demo.html
new file mode 100644
index 00000000000..fed8c84f369
--- /dev/null
+++ b/static/usage/v6/alert/presenting/controller/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Alert</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentAlert()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    async function presentAlert() {
+      const alert = document.createElement('ion-alert');
+      alert.header = 'Alert';
+      alert.subHeader = 'Important message';
+      alert.message = 'This is an alert!';
+      alert.buttons = ['OK'];
+
+      document.body.appendChild(alert);
+      await alert.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/alert/presenting/controller/index.md b/static/usage/v6/alert/presenting/controller/index.md
new file mode 100644
index 00000000000..5f84fadb3d8
--- /dev/null
+++ b/static/usage/v6/alert/presenting/controller/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/alert/presenting/controller/demo.html"
+/>
diff --git a/static/usage/alert/presenting/controller/javascript.md b/static/usage/v6/alert/presenting/controller/javascript.md
similarity index 100%
rename from static/usage/alert/presenting/controller/javascript.md
rename to static/usage/v6/alert/presenting/controller/javascript.md
diff --git a/static/usage/alert/presenting/controller/react.md b/static/usage/v6/alert/presenting/controller/react.md
similarity index 100%
rename from static/usage/alert/presenting/controller/react.md
rename to static/usage/v6/alert/presenting/controller/react.md
diff --git a/static/usage/alert/presenting/controller/vue.md b/static/usage/v6/alert/presenting/controller/vue.md
similarity index 100%
rename from static/usage/alert/presenting/controller/vue.md
rename to static/usage/v6/alert/presenting/controller/vue.md
diff --git a/static/usage/avatar/basic/angular.md b/static/usage/v6/avatar/basic/angular.md
similarity index 100%
rename from static/usage/avatar/basic/angular.md
rename to static/usage/v6/avatar/basic/angular.md
diff --git a/static/usage/v6/avatar/basic/demo.html b/static/usage/v6/avatar/basic/demo.html
new file mode 100644
index 00000000000..46fbedfd2d3
--- /dev/null
+++ b/static/usage/v6/avatar/basic/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-avatar>
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </ion-avatar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/avatar/basic/index.md b/static/usage/v6/avatar/basic/index.md
new file mode 100644
index 00000000000..cfb4d046b72
--- /dev/null
+++ b/static/usage/v6/avatar/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/avatar/basic/demo.html" />
diff --git a/static/usage/avatar/basic/javascript.md b/static/usage/v6/avatar/basic/javascript.md
similarity index 100%
rename from static/usage/avatar/basic/javascript.md
rename to static/usage/v6/avatar/basic/javascript.md
diff --git a/static/usage/avatar/basic/react.md b/static/usage/v6/avatar/basic/react.md
similarity index 100%
rename from static/usage/avatar/basic/react.md
rename to static/usage/v6/avatar/basic/react.md
diff --git a/static/usage/avatar/basic/vue.md b/static/usage/v6/avatar/basic/vue.md
similarity index 100%
rename from static/usage/avatar/basic/vue.md
rename to static/usage/v6/avatar/basic/vue.md
diff --git a/static/usage/avatar/chip/angular.md b/static/usage/v6/avatar/chip/angular.md
similarity index 100%
rename from static/usage/avatar/chip/angular.md
rename to static/usage/v6/avatar/chip/angular.md
diff --git a/static/usage/v6/avatar/chip/demo.html b/static/usage/v6/avatar/chip/demo.html
new file mode 100644
index 00000000000..d06475bb40f
--- /dev/null
+++ b/static/usage/v6/avatar/chip/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-chip>
+          <ion-avatar>
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>Chip Avatar</ion-label>
+        </ion-chip>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/avatar/chip/index.md b/static/usage/v6/avatar/chip/index.md
new file mode 100644
index 00000000000..25c8aeff123
--- /dev/null
+++ b/static/usage/v6/avatar/chip/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/avatar/chip/demo.html" />
diff --git a/static/usage/avatar/chip/javascript.md b/static/usage/v6/avatar/chip/javascript.md
similarity index 100%
rename from static/usage/avatar/chip/javascript.md
rename to static/usage/v6/avatar/chip/javascript.md
diff --git a/static/usage/avatar/chip/react.md b/static/usage/v6/avatar/chip/react.md
similarity index 100%
rename from static/usage/avatar/chip/react.md
rename to static/usage/v6/avatar/chip/react.md
diff --git a/static/usage/avatar/chip/vue.md b/static/usage/v6/avatar/chip/vue.md
similarity index 100%
rename from static/usage/avatar/chip/vue.md
rename to static/usage/v6/avatar/chip/vue.md
diff --git a/static/usage/avatar/item/angular.md b/static/usage/v6/avatar/item/angular.md
similarity index 100%
rename from static/usage/avatar/item/angular.md
rename to static/usage/v6/avatar/item/angular.md
diff --git a/static/usage/v6/avatar/item/demo.html b/static/usage/v6/avatar/item/demo.html
new file mode 100644
index 00000000000..d51279cdb34
--- /dev/null
+++ b/static/usage/v6/avatar/item/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-avatar slot="start">
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>Item Avatar</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/avatar/item/index.md b/static/usage/v6/avatar/item/index.md
new file mode 100644
index 00000000000..67f97708b02
--- /dev/null
+++ b/static/usage/v6/avatar/item/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/avatar/item/demo.html" />
diff --git a/static/usage/avatar/item/javascript.md b/static/usage/v6/avatar/item/javascript.md
similarity index 100%
rename from static/usage/avatar/item/javascript.md
rename to static/usage/v6/avatar/item/javascript.md
diff --git a/static/usage/avatar/item/react.md b/static/usage/v6/avatar/item/react.md
similarity index 100%
rename from static/usage/avatar/item/react.md
rename to static/usage/v6/avatar/item/react.md
diff --git a/static/usage/avatar/item/vue.md b/static/usage/v6/avatar/item/vue.md
similarity index 100%
rename from static/usage/avatar/item/vue.md
rename to static/usage/v6/avatar/item/vue.md
diff --git a/static/usage/avatar/theming/css-properties/angular/example_component_css.md b/static/usage/v6/avatar/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/avatar/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/avatar/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/avatar/theming/css-properties/angular/example_component_html.md b/static/usage/v6/avatar/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/avatar/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/avatar/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/avatar/theming/css-properties/demo.html b/static/usage/v6/avatar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..3419617edfa
--- /dev/null
+++ b/static/usage/v6/avatar/theming/css-properties/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-avatar {
+      --border-radius: 4px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-avatar slot="start">
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </ion-avatar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/avatar/theming/css-properties/index.md b/static/usage/v6/avatar/theming/css-properties/index.md
new file mode 100644
index 00000000000..51f2c0650ce
--- /dev/null
+++ b/static/usage/v6/avatar/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/avatar/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/avatar/theming/css-properties/javascript.md b/static/usage/v6/avatar/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/avatar/theming/css-properties/javascript.md
rename to static/usage/v6/avatar/theming/css-properties/javascript.md
diff --git a/static/usage/avatar/theming/css-properties/react/main_css.md b/static/usage/v6/avatar/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/avatar/theming/css-properties/react/main_css.md
rename to static/usage/v6/avatar/theming/css-properties/react/main_css.md
diff --git a/static/usage/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/avatar/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/avatar/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/avatar/theming/css-properties/vue.md b/static/usage/v6/avatar/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/avatar/theming/css-properties/vue.md
rename to static/usage/v6/avatar/theming/css-properties/vue.md
diff --git a/static/usage/backdrop/basic/angular.md b/static/usage/v6/backdrop/basic/angular.md
similarity index 100%
rename from static/usage/backdrop/basic/angular.md
rename to static/usage/v6/backdrop/basic/angular.md
diff --git a/static/usage/v6/backdrop/basic/demo.html b/static/usage/v6/backdrop/basic/demo.html
new file mode 100644
index 00000000000..ed5a79768e8
--- /dev/null
+++ b/static/usage/v6/backdrop/basic/demo.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Backdrop</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-backdrop visible="true"></ion-backdrop>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Backdrop</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-item>
+          <ion-checkbox slot="start"></ion-checkbox>
+          <ion-label>Checkbox</ion-label>
+        </ion-item>
+        <ion-button expand="block">Button</ion-button>
+      </ion-content>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/backdrop/basic/index.md b/static/usage/v6/backdrop/basic/index.md
new file mode 100644
index 00000000000..be1bca17132
--- /dev/null
+++ b/static/usage/v6/backdrop/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/backdrop/basic/demo.html" devicePreview={true} />
diff --git a/static/usage/backdrop/basic/javascript.md b/static/usage/v6/backdrop/basic/javascript.md
similarity index 100%
rename from static/usage/backdrop/basic/javascript.md
rename to static/usage/v6/backdrop/basic/javascript.md
diff --git a/static/usage/backdrop/basic/react.md b/static/usage/v6/backdrop/basic/react.md
similarity index 100%
rename from static/usage/backdrop/basic/react.md
rename to static/usage/v6/backdrop/basic/react.md
diff --git a/static/usage/backdrop/basic/vue.md b/static/usage/v6/backdrop/basic/vue.md
similarity index 100%
rename from static/usage/backdrop/basic/vue.md
rename to static/usage/v6/backdrop/basic/vue.md
diff --git a/static/usage/backdrop/styling/angular/example_component_css.md b/static/usage/v6/backdrop/styling/angular/example_component_css.md
similarity index 100%
rename from static/usage/backdrop/styling/angular/example_component_css.md
rename to static/usage/v6/backdrop/styling/angular/example_component_css.md
diff --git a/static/usage/backdrop/styling/angular/example_component_html.md b/static/usage/v6/backdrop/styling/angular/example_component_html.md
similarity index 100%
rename from static/usage/backdrop/styling/angular/example_component_html.md
rename to static/usage/v6/backdrop/styling/angular/example_component_html.md
diff --git a/static/usage/v6/backdrop/styling/demo.html b/static/usage/v6/backdrop/styling/demo.html
new file mode 100644
index 00000000000..8b28987c937
--- /dev/null
+++ b/static/usage/v6/backdrop/styling/demo.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Backdrop</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-backdrop {
+      opacity: 0.9;
+      background: var(--ion-color-primary);
+    }
+
+    #box {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateY(-50%) translateX(-50%);
+      z-index: 100;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--ion-background-color, #fff);
+      width: 90%;
+      height: 100px;
+      border-radius: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-backdrop visible="true"></ion-backdrop>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Backdrop</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+          perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+          expedita vero!</p>
+      </ion-content>
+    </div>
+    <div id="box">
+      <ion-checkbox color="light"></ion-checkbox>
+      <ion-button class="ion-margin-start" color="light">Clickable</ion-button>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/backdrop/styling/index.md b/static/usage/v6/backdrop/styling/index.md
new file mode 100644
index 00000000000..8d16c744a02
--- /dev/null
+++ b/static/usage/v6/backdrop/styling/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/backdrop/styling/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/backdrop/styling/javascript.md b/static/usage/v6/backdrop/styling/javascript.md
similarity index 100%
rename from static/usage/backdrop/styling/javascript.md
rename to static/usage/v6/backdrop/styling/javascript.md
diff --git a/static/usage/backdrop/styling/react/main_css.md b/static/usage/v6/backdrop/styling/react/main_css.md
similarity index 100%
rename from static/usage/backdrop/styling/react/main_css.md
rename to static/usage/v6/backdrop/styling/react/main_css.md
diff --git a/static/usage/backdrop/styling/react/main_tsx.md b/static/usage/v6/backdrop/styling/react/main_tsx.md
similarity index 100%
rename from static/usage/backdrop/styling/react/main_tsx.md
rename to static/usage/v6/backdrop/styling/react/main_tsx.md
diff --git a/static/usage/backdrop/styling/vue.md b/static/usage/v6/backdrop/styling/vue.md
similarity index 100%
rename from static/usage/backdrop/styling/vue.md
rename to static/usage/v6/backdrop/styling/vue.md
diff --git a/static/usage/badge/basic/angular.md b/static/usage/v6/badge/basic/angular.md
similarity index 100%
rename from static/usage/badge/basic/angular.md
rename to static/usage/v6/badge/basic/angular.md
diff --git a/static/usage/v6/badge/basic/demo.html b/static/usage/v6/badge/basic/demo.html
new file mode 100644
index 00000000000..a560f74b87b
--- /dev/null
+++ b/static/usage/v6/badge/basic/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Badge</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 250px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-badge slot="start">11</ion-badge>
+            <ion-label>Badge in start slot</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-badge slot="end">22</ion-badge>
+            <ion-label>Badge in end slot</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/badge/basic/index.md b/static/usage/v6/badge/basic/index.md
new file mode 100644
index 00000000000..7395983f861
--- /dev/null
+++ b/static/usage/v6/badge/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/badge/basic/demo.html" />
diff --git a/static/usage/badge/basic/javascript.md b/static/usage/v6/badge/basic/javascript.md
similarity index 100%
rename from static/usage/badge/basic/javascript.md
rename to static/usage/v6/badge/basic/javascript.md
diff --git a/static/usage/badge/basic/react.md b/static/usage/v6/badge/basic/react.md
similarity index 100%
rename from static/usage/badge/basic/react.md
rename to static/usage/v6/badge/basic/react.md
diff --git a/static/usage/badge/basic/vue.md b/static/usage/v6/badge/basic/vue.md
similarity index 100%
rename from static/usage/badge/basic/vue.md
rename to static/usage/v6/badge/basic/vue.md
diff --git a/static/usage/badge/theming/colors/angular.md b/static/usage/v6/badge/theming/colors/angular.md
similarity index 100%
rename from static/usage/badge/theming/colors/angular.md
rename to static/usage/v6/badge/theming/colors/angular.md
diff --git a/static/usage/v6/badge/theming/colors/demo.html b/static/usage/v6/badge/theming/colors/demo.html
new file mode 100644
index 00000000000..a81103de32b
--- /dev/null
+++ b/static/usage/v6/badge/theming/colors/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Badge</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 250px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Followers</ion-label>
+            <ion-badge color="primary">22k</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Likes</ion-label>
+            <ion-badge color="secondary">118k</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Stars</ion-label>
+            <ion-badge color="tertiary">34k</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Completed</ion-label>
+            <ion-badge color="success">80</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Warnings</ion-label>
+            <ion-badge color="warning">70</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Notifications</ion-label>
+            <ion-badge color="danger">1000</ion-badge>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/badge/theming/colors/index.md b/static/usage/v6/badge/theming/colors/index.md
new file mode 100644
index 00000000000..da0a5d660aa
--- /dev/null
+++ b/static/usage/v6/badge/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/v6/badge/theming/colors/demo.html" />
diff --git a/static/usage/badge/theming/colors/javascript.md b/static/usage/v6/badge/theming/colors/javascript.md
similarity index 100%
rename from static/usage/badge/theming/colors/javascript.md
rename to static/usage/v6/badge/theming/colors/javascript.md
diff --git a/static/usage/badge/theming/colors/react.md b/static/usage/v6/badge/theming/colors/react.md
similarity index 100%
rename from static/usage/badge/theming/colors/react.md
rename to static/usage/v6/badge/theming/colors/react.md
diff --git a/static/usage/badge/theming/colors/vue.md b/static/usage/v6/badge/theming/colors/vue.md
similarity index 100%
rename from static/usage/badge/theming/colors/vue.md
rename to static/usage/v6/badge/theming/colors/vue.md
diff --git a/static/usage/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/badge/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/badge/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/badge/theming/css-properties/angular/example_component_html.md b/static/usage/v6/badge/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/badge/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/badge/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/badge/theming/css-properties/demo.html b/static/usage/v6/badge/theming/css-properties/demo.html
new file mode 100644
index 00000000000..f942c2d83e6
--- /dev/null
+++ b/static/usage/v6/badge/theming/css-properties/demo.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Styling the Select</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 250px;
+    }
+
+    ion-badge {
+      --background: purple;
+      --color: white;
+      --padding-end: 20px;
+      --padding-start: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Badges styled</ion-label>
+            <ion-badge>1</ion-badge>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/badge/theming/css-properties/index.md b/static/usage/v6/badge/theming/css-properties/index.md
new file mode 100644
index 00000000000..48ac100bf66
--- /dev/null
+++ b/static/usage/v6/badge/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/badge/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/badge/theming/css-properties/javascript.md b/static/usage/v6/badge/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/badge/theming/css-properties/javascript.md
rename to static/usage/v6/badge/theming/css-properties/javascript.md
diff --git a/static/usage/badge/theming/css-properties/react/main_css.md b/static/usage/v6/badge/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/badge/theming/css-properties/react/main_css.md
rename to static/usage/v6/badge/theming/css-properties/react/main_css.md
diff --git a/static/usage/badge/theming/css-properties/react/main_tsx.md b/static/usage/v6/badge/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/badge/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/badge/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/badge/theming/css-properties/vue.md b/static/usage/v6/badge/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/badge/theming/css-properties/vue.md
rename to static/usage/v6/badge/theming/css-properties/vue.md
diff --git a/static/usage/breadcrumbs/basic/angular.md b/static/usage/v6/breadcrumbs/basic/angular.md
similarity index 100%
rename from static/usage/breadcrumbs/basic/angular.md
rename to static/usage/v6/breadcrumbs/basic/angular.md
diff --git a/static/usage/v6/breadcrumbs/basic/demo.html b/static/usage/v6/breadcrumbs/basic/demo.html
new file mode 100644
index 00000000000..f230752bad0
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/basic/index.md b/static/usage/v6/breadcrumbs/basic/index.md
new file mode 100644
index 00000000000..f05247a2f80
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/breadcrumbs/basic/demo.html" />
diff --git a/static/usage/breadcrumbs/basic/javascript.md b/static/usage/v6/breadcrumbs/basic/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/basic/javascript.md
rename to static/usage/v6/breadcrumbs/basic/javascript.md
diff --git a/static/usage/breadcrumbs/basic/react.md b/static/usage/v6/breadcrumbs/basic/react.md
similarity index 100%
rename from static/usage/breadcrumbs/basic/react.md
rename to static/usage/v6/breadcrumbs/basic/react.md
diff --git a/static/usage/breadcrumbs/basic/vue.md b/static/usage/v6/breadcrumbs/basic/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/basic/vue.md
rename to static/usage/v6/breadcrumbs/basic/vue.md
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md
rename to static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
rename to static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html
new file mode 100644
index 00000000000..a6977cb29bf
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs max-items="4">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const breadcrumbs = document.querySelector('ion-breadcrumbs');
+
+    breadcrumbs.addEventListener('ionCollapsedClick', () => {
+      breadcrumbs.maxItems = undefined;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md
new file mode 100644
index 00000000000..fd50385529a
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md
@@ -0,0 +1,23 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html"
+/>
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/javascript.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/expand-on-click/javascript.md
rename to static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/javascript.md
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/react.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/react.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/expand-on-click/react.md
rename to static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/react.md
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/expand-on-click/vue.md
rename to static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md
diff --git a/static/usage/breadcrumbs/collapsing-items/items-before-after/angular.md b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/angular.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/items-before-after/angular.md
rename to static/usage/v6/breadcrumbs/collapsing-items/items-before-after/angular.md
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html
new file mode 100644
index 00000000000..96d8ae72cd0
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div>Before Collapse = 2</div>
+        <ion-breadcrumbs max-items="4" items-before-collapse="2">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <div class="ion-margin-top">Before Collapse = 0</div>
+        <ion-breadcrumbs max-items="4" items-before-collapse="0">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <div class="ion-margin-top">After Collapse = 2</div>
+        <ion-breadcrumbs max-items="4" items-after-collapse="2">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <div class="ion-margin-top">Before Collapse = 2, After Collapse = 2</div>
+        <ion-breadcrumbs max-items="4" items-before-collapse="2" items-after-collapse="2">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md
new file mode 100644
index 00000000000..26448ff6079
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html"
+/>
diff --git a/static/usage/breadcrumbs/collapsing-items/items-before-after/javascript.md b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/items-before-after/javascript.md
rename to static/usage/v6/breadcrumbs/collapsing-items/items-before-after/javascript.md
diff --git a/static/usage/breadcrumbs/collapsing-items/items-before-after/react.md b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/react.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/items-before-after/react.md
rename to static/usage/v6/breadcrumbs/collapsing-items/items-before-after/react.md
diff --git a/static/usage/breadcrumbs/collapsing-items/items-before-after/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/items-before-after/vue.md
rename to static/usage/v6/breadcrumbs/collapsing-items/items-before-after/vue.md
diff --git a/static/usage/breadcrumbs/collapsing-items/max-items/angular.md b/static/usage/v6/breadcrumbs/collapsing-items/max-items/angular.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/max-items/angular.md
rename to static/usage/v6/breadcrumbs/collapsing-items/max-items/angular.md
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html
new file mode 100644
index 00000000000..6b2ac36c51c
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs max-items="4">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md
new file mode 100644
index 00000000000..3f7616b8358
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md
@@ -0,0 +1,11 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/breadcrumbs/collapsing-items/max-items/demo.html"
+/>
diff --git a/static/usage/breadcrumbs/collapsing-items/max-items/javascript.md b/static/usage/v6/breadcrumbs/collapsing-items/max-items/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/max-items/javascript.md
rename to static/usage/v6/breadcrumbs/collapsing-items/max-items/javascript.md
diff --git a/static/usage/breadcrumbs/collapsing-items/max-items/react.md b/static/usage/v6/breadcrumbs/collapsing-items/max-items/react.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/max-items/react.md
rename to static/usage/v6/breadcrumbs/collapsing-items/max-items/react.md
diff --git a/static/usage/breadcrumbs/collapsing-items/max-items/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/max-items/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/max-items/vue.md
rename to static/usage/v6/breadcrumbs/collapsing-items/max-items/vue.md
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
rename to static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
rename to static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/demo.html b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/demo.html
new file mode 100644
index 00000000000..fdeba83b336
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/demo.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs max-items="4">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+        <ion-popover>
+          <ion-content>
+            <ion-list></ion-list>
+          </ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const breadcrumbs = document.querySelector('ion-breadcrumbs');
+    const popover = document.querySelector('ion-popover');
+    const popoverList = document.querySelector('ion-popover ion-list');
+
+    breadcrumbs.addEventListener('ionCollapsedClick', e => {
+      let listHTML = ``;
+      e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => {
+        listHTML += `
+          <ion-item
+            ${i === e.detail.collapsedBreadcrumbs.length - 1 ? `lines="none"` : ""}
+            href="${breadcrumb.href}"
+          >
+            <ion-label>${breadcrumb.textContent}</ion-label>
+          </ion-item>
+        `;
+      });
+
+      popoverList.innerHTML = listHTML;
+      popover.event = e;
+      popover.isOpen = true;
+    });
+
+    popover.addEventListener('didDismiss', () => popover.isOpen = false);
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md
new file mode 100644
index 00000000000..a5e3fe3aeec
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="500px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/breadcrumbs/collapsing-items/popover-on-click/demo.html"
+/>
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/popover-on-click/javascript.md
rename to static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/popover-on-click/react.md
rename to static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/collapsing-items/popover-on-click/vue.md
rename to static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md
diff --git a/static/usage/breadcrumbs/icons/custom-separators/angular.md b/static/usage/v6/breadcrumbs/icons/custom-separators/angular.md
similarity index 100%
rename from static/usage/breadcrumbs/icons/custom-separators/angular.md
rename to static/usage/v6/breadcrumbs/icons/custom-separators/angular.md
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/demo.html b/static/usage/v6/breadcrumbs/icons/custom-separators/demo.html
new file mode 100644
index 00000000000..a6db3ad12c6
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#home">
+            Home
+            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            Cameras
+            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            Film
+            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
new file mode 100644
index 00000000000..1656c92b639
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/breadcrumbs/icons/custom-separators/demo.html" />
diff --git a/static/usage/breadcrumbs/icons/custom-separators/javascript.md b/static/usage/v6/breadcrumbs/icons/custom-separators/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/icons/custom-separators/javascript.md
rename to static/usage/v6/breadcrumbs/icons/custom-separators/javascript.md
diff --git a/static/usage/breadcrumbs/icons/custom-separators/react.md b/static/usage/v6/breadcrumbs/icons/custom-separators/react.md
similarity index 100%
rename from static/usage/breadcrumbs/icons/custom-separators/react.md
rename to static/usage/v6/breadcrumbs/icons/custom-separators/react.md
diff --git a/static/usage/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/icons/custom-separators/vue.md
rename to static/usage/v6/breadcrumbs/icons/custom-separators/vue.md
diff --git a/static/usage/breadcrumbs/icons/icons-on-items/angular.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/angular.md
similarity index 100%
rename from static/usage/breadcrumbs/icons/icons-on-items/angular.md
rename to static/usage/v6/breadcrumbs/icons/icons-on-items/angular.md
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html
new file mode 100644
index 00000000000..1a1a9adbe3f
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-label>Icons at Start</ion-label>
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#home">
+            <ion-icon slot="start" name="home"></ion-icon>
+            Home
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            <ion-icon slot="start" name="flash"></ion-icon>
+            Electronics
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            <ion-icon slot="start" name="camera"></ion-icon>
+            Cameras
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            <ion-icon slot="start" name="film"></ion-icon>
+            Film
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <ion-label class="ion-margin-top">Icons at End</ion-label>
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#home">
+            Home
+            <ion-icon slot="end" name="home"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+            <ion-icon slot="end" name="flash"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            Cameras
+            <ion-icon slot="end" name="camera"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            Film
+            <ion-icon slot="end" name="film"></ion-icon>
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
new file mode 100644
index 00000000000..d46f6c6ba52
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/breadcrumbs/icons/icons-on-items/demo.html"
+/>
diff --git a/static/usage/breadcrumbs/icons/icons-on-items/javascript.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/icons/icons-on-items/javascript.md
rename to static/usage/v6/breadcrumbs/icons/icons-on-items/javascript.md
diff --git a/static/usage/breadcrumbs/icons/icons-on-items/react.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/react.md
similarity index 100%
rename from static/usage/breadcrumbs/icons/icons-on-items/react.md
rename to static/usage/v6/breadcrumbs/icons/icons-on-items/react.md
diff --git a/static/usage/breadcrumbs/icons/icons-on-items/vue.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/icons/icons-on-items/vue.md
rename to static/usage/v6/breadcrumbs/icons/icons-on-items/vue.md
diff --git a/static/usage/breadcrumbs/theming/colors/angular.md b/static/usage/v6/breadcrumbs/theming/colors/angular.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/colors/angular.md
rename to static/usage/v6/breadcrumbs/theming/colors/angular.md
diff --git a/static/usage/v6/breadcrumbs/theming/colors/demo.html b/static/usage/v6/breadcrumbs/theming/colors/demo.html
new file mode 100644
index 00000000000..3746b4ad79d
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/theming/colors/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs color="primary">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/theming/colors/index.md b/static/usage/v6/breadcrumbs/theming/colors/index.md
new file mode 100644
index 00000000000..22df9ce3cb4
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/breadcrumbs/theming/colors/demo.html" />
diff --git a/static/usage/breadcrumbs/theming/colors/javascript.md b/static/usage/v6/breadcrumbs/theming/colors/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/colors/javascript.md
rename to static/usage/v6/breadcrumbs/theming/colors/javascript.md
diff --git a/static/usage/breadcrumbs/theming/colors/react.md b/static/usage/v6/breadcrumbs/theming/colors/react.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/colors/react.md
rename to static/usage/v6/breadcrumbs/theming/colors/react.md
diff --git a/static/usage/breadcrumbs/theming/colors/vue.md b/static/usage/v6/breadcrumbs/theming/colors/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/colors/vue.md
rename to static/usage/v6/breadcrumbs/theming/colors/vue.md
diff --git a/static/usage/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/breadcrumbs/theming/css-properties/angular/example_component_html.md b/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/demo.html b/static/usage/v6/breadcrumbs/theming/css-properties/demo.html
new file mode 100644
index 00000000000..9c888d5344d
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/theming/css-properties/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-breadcrumb {
+      --color: rgb(81, 155, 198);
+      --color-active: rgb(150, 112, 220);
+      --color-hover: rgb(103, 61, 180);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/index.md b/static/usage/v6/breadcrumbs/theming/css-properties/index.md
new file mode 100644
index 00000000000..de65ba9677f
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/theming/css-properties/index.md
@@ -0,0 +1,30 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/breadcrumbs/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/breadcrumbs/theming/css-properties/javascript.md b/static/usage/v6/breadcrumbs/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/css-properties/javascript.md
rename to static/usage/v6/breadcrumbs/theming/css-properties/javascript.md
diff --git a/static/usage/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/css-properties/react/main_css.md
rename to static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md
diff --git a/static/usage/breadcrumbs/theming/css-properties/react/main_tsx.md b/static/usage/v6/breadcrumbs/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/breadcrumbs/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/breadcrumbs/theming/css-properties/vue.md b/static/usage/v6/breadcrumbs/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/css-properties/vue.md
rename to static/usage/v6/breadcrumbs/theming/css-properties/vue.md
diff --git a/static/usage/button/basic/angular.md b/static/usage/v6/button/basic/angular.md
similarity index 100%
rename from static/usage/button/basic/angular.md
rename to static/usage/v6/button/basic/angular.md
diff --git a/static/usage/v6/button/basic/demo.html b/static/usage/v6/button/basic/demo.html
new file mode 100644
index 00000000000..2302dbff2ba
--- /dev/null
+++ b/static/usage/v6/button/basic/demo.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Default</ion-button>
+        <ion-button disabled>Disabled</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/button/basic/index.md b/static/usage/v6/button/basic/index.md
new file mode 100644
index 00000000000..a18c429e9d3
--- /dev/null
+++ b/static/usage/v6/button/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/basic/demo.html" />
diff --git a/static/usage/button/basic/javascript.md b/static/usage/v6/button/basic/javascript.md
similarity index 100%
rename from static/usage/button/basic/javascript.md
rename to static/usage/v6/button/basic/javascript.md
diff --git a/static/usage/button/basic/react.md b/static/usage/v6/button/basic/react.md
similarity index 100%
rename from static/usage/button/basic/react.md
rename to static/usage/v6/button/basic/react.md
diff --git a/static/usage/button/basic/vue.md b/static/usage/v6/button/basic/vue.md
similarity index 100%
rename from static/usage/button/basic/vue.md
rename to static/usage/v6/button/basic/vue.md
diff --git a/static/usage/button/expand/angular.md b/static/usage/v6/button/expand/angular.md
similarity index 100%
rename from static/usage/button/expand/angular.md
rename to static/usage/v6/button/expand/angular.md
diff --git a/static/usage/v6/button/expand/demo.html b/static/usage/v6/button/expand/demo.html
new file mode 100644
index 00000000000..90421eefaf3
--- /dev/null
+++ b/static/usage/v6/button/expand/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <div class="container">
+        <ion-button expand="block">Block</ion-button>
+        <ion-button expand="full">Full</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/button/expand/index.md b/static/usage/v6/button/expand/index.md
new file mode 100644
index 00000000000..9f6db466051
--- /dev/null
+++ b/static/usage/v6/button/expand/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/expand/demo.html" />
diff --git a/static/usage/button/expand/javascript.md b/static/usage/v6/button/expand/javascript.md
similarity index 100%
rename from static/usage/button/expand/javascript.md
rename to static/usage/v6/button/expand/javascript.md
diff --git a/static/usage/button/expand/react.md b/static/usage/v6/button/expand/react.md
similarity index 100%
rename from static/usage/button/expand/react.md
rename to static/usage/v6/button/expand/react.md
diff --git a/static/usage/button/expand/vue.md b/static/usage/v6/button/expand/vue.md
similarity index 100%
rename from static/usage/button/expand/vue.md
rename to static/usage/v6/button/expand/vue.md
diff --git a/static/usage/button/fill/angular.md b/static/usage/v6/button/fill/angular.md
similarity index 100%
rename from static/usage/button/fill/angular.md
rename to static/usage/v6/button/fill/angular.md
diff --git a/static/usage/v6/button/fill/demo.html b/static/usage/v6/button/fill/demo.html
new file mode 100644
index 00000000000..6e405f68b24
--- /dev/null
+++ b/static/usage/v6/button/fill/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Default</ion-button>
+        <ion-button fill="clear">Clear</ion-button>
+        <ion-button fill="outline">Outline</ion-button>
+        <ion-button fill="solid">Solid</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/button/fill/index.md b/static/usage/v6/button/fill/index.md
new file mode 100644
index 00000000000..b042cc0c615
--- /dev/null
+++ b/static/usage/v6/button/fill/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/fill/demo.html" />
diff --git a/static/usage/button/fill/javascript.md b/static/usage/v6/button/fill/javascript.md
similarity index 100%
rename from static/usage/button/fill/javascript.md
rename to static/usage/v6/button/fill/javascript.md
diff --git a/static/usage/button/fill/react.md b/static/usage/v6/button/fill/react.md
similarity index 100%
rename from static/usage/button/fill/react.md
rename to static/usage/v6/button/fill/react.md
diff --git a/static/usage/button/fill/vue.md b/static/usage/v6/button/fill/vue.md
similarity index 100%
rename from static/usage/button/fill/vue.md
rename to static/usage/v6/button/fill/vue.md
diff --git a/static/usage/button/icons/angular.md b/static/usage/v6/button/icons/angular.md
similarity index 100%
rename from static/usage/button/icons/angular.md
rename to static/usage/v6/button/icons/angular.md
diff --git a/static/usage/v6/button/icons/demo.html b/static/usage/v6/button/icons/demo.html
new file mode 100644
index 00000000000..e3594ca1f83
--- /dev/null
+++ b/static/usage/v6/button/icons/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>
+          <ion-icon slot="start" name="star"></ion-icon>
+          Left Icon
+        </ion-button>
+
+        <ion-button>
+          Right Icon
+          <ion-icon slot="end" name="star"></ion-icon>
+        </ion-button>
+
+        <ion-button>
+          <ion-icon slot="icon-only" name="star"></ion-icon>
+        </ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/button/icons/index.md b/static/usage/v6/button/icons/index.md
new file mode 100644
index 00000000000..518188e64e0
--- /dev/null
+++ b/static/usage/v6/button/icons/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/icons/demo.html" />
diff --git a/static/usage/button/icons/javascript.md b/static/usage/v6/button/icons/javascript.md
similarity index 100%
rename from static/usage/button/icons/javascript.md
rename to static/usage/v6/button/icons/javascript.md
diff --git a/static/usage/button/icons/react.md b/static/usage/v6/button/icons/react.md
similarity index 100%
rename from static/usage/button/icons/react.md
rename to static/usage/v6/button/icons/react.md
diff --git a/static/usage/button/icons/vue.md b/static/usage/v6/button/icons/vue.md
similarity index 100%
rename from static/usage/button/icons/vue.md
rename to static/usage/v6/button/icons/vue.md
diff --git a/static/usage/button/shape/angular.md b/static/usage/v6/button/shape/angular.md
similarity index 100%
rename from static/usage/button/shape/angular.md
rename to static/usage/v6/button/shape/angular.md
diff --git a/static/usage/v6/button/shape/demo.html b/static/usage/v6/button/shape/demo.html
new file mode 100644
index 00000000000..7cedc61e4c7
--- /dev/null
+++ b/static/usage/v6/button/shape/demo.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Default</ion-button>
+        <ion-button shape="round">Round</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/button/shape/index.md b/static/usage/v6/button/shape/index.md
new file mode 100644
index 00000000000..76562ba231e
--- /dev/null
+++ b/static/usage/v6/button/shape/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/shape/demo.html" />
diff --git a/static/usage/button/shape/javascript.md b/static/usage/v6/button/shape/javascript.md
similarity index 100%
rename from static/usage/button/shape/javascript.md
rename to static/usage/v6/button/shape/javascript.md
diff --git a/static/usage/button/shape/react.md b/static/usage/v6/button/shape/react.md
similarity index 100%
rename from static/usage/button/shape/react.md
rename to static/usage/v6/button/shape/react.md
diff --git a/static/usage/button/shape/vue.md b/static/usage/v6/button/shape/vue.md
similarity index 100%
rename from static/usage/button/shape/vue.md
rename to static/usage/v6/button/shape/vue.md
diff --git a/static/usage/button/size/angular.md b/static/usage/v6/button/size/angular.md
similarity index 100%
rename from static/usage/button/size/angular.md
rename to static/usage/v6/button/size/angular.md
diff --git a/static/usage/v6/button/size/demo.html b/static/usage/v6/button/size/demo.html
new file mode 100644
index 00000000000..4aba9947d6e
--- /dev/null
+++ b/static/usage/v6/button/size/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button size="small">Small</ion-button>
+        <ion-button size="default">Default</ion-button>
+        <ion-button size="large">Large</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/button/size/index.md b/static/usage/v6/button/size/index.md
new file mode 100644
index 00000000000..a606debb051
--- /dev/null
+++ b/static/usage/v6/button/size/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/size/demo.html" />
diff --git a/static/usage/button/size/javascript.md b/static/usage/v6/button/size/javascript.md
similarity index 100%
rename from static/usage/button/size/javascript.md
rename to static/usage/v6/button/size/javascript.md
diff --git a/static/usage/button/size/react.md b/static/usage/v6/button/size/react.md
similarity index 100%
rename from static/usage/button/size/react.md
rename to static/usage/v6/button/size/react.md
diff --git a/static/usage/button/size/vue.md b/static/usage/v6/button/size/vue.md
similarity index 100%
rename from static/usage/button/size/vue.md
rename to static/usage/v6/button/size/vue.md
diff --git a/static/usage/button/theming/colors/angular.md b/static/usage/v6/button/theming/colors/angular.md
similarity index 100%
rename from static/usage/button/theming/colors/angular.md
rename to static/usage/v6/button/theming/colors/angular.md
diff --git a/static/usage/v6/button/theming/colors/demo.html b/static/usage/v6/button/theming/colors/demo.html
new file mode 100644
index 00000000000..9be8d6d0f8b
--- /dev/null
+++ b/static/usage/v6/button/theming/colors/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-wrap: wrap;
+      width: 350px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Default</ion-button>
+        <ion-button color="primary">Primary</ion-button>
+        <ion-button color="secondary">Secondary</ion-button>
+        <ion-button color="tertiary">Tertiary</ion-button>
+        <ion-button color="success">Success</ion-button>
+        <ion-button color="warning">Warning</ion-button>
+        <ion-button color="danger">Danger</ion-button>
+        <ion-button color="light">Light</ion-button>
+        <ion-button color="medium">Medium</ion-button>
+        <ion-button color="dark">Dark</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/button/theming/colors/index.md b/static/usage/v6/button/theming/colors/index.md
new file mode 100644
index 00000000000..3c5760b1e32
--- /dev/null
+++ b/static/usage/v6/button/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/theming/colors/demo.html" />
diff --git a/static/usage/button/theming/colors/javascript.md b/static/usage/v6/button/theming/colors/javascript.md
similarity index 100%
rename from static/usage/button/theming/colors/javascript.md
rename to static/usage/v6/button/theming/colors/javascript.md
diff --git a/static/usage/button/theming/colors/react.md b/static/usage/v6/button/theming/colors/react.md
similarity index 100%
rename from static/usage/button/theming/colors/react.md
rename to static/usage/v6/button/theming/colors/react.md
diff --git a/static/usage/button/theming/colors/vue.md b/static/usage/v6/button/theming/colors/vue.md
similarity index 100%
rename from static/usage/button/theming/colors/vue.md
rename to static/usage/v6/button/theming/colors/vue.md
diff --git a/static/usage/button/theming/css-properties/angular/example_component_css.md b/static/usage/v6/button/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/button/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/button/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/button/theming/css-properties/angular/example_component_html.md b/static/usage/v6/button/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/button/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/button/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/button/theming/css-properties/demo.html b/static/usage/v6/button/theming/css-properties/demo.html
new file mode 100644
index 00000000000..9fd0e65c096
--- /dev/null
+++ b/static/usage/v6/button/theming/css-properties/demo.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-button {
+      --background: #93e9be;
+      --background-hover: #9ce0be;
+      --background-activated: #88f4be;
+      --background-focused: #88f4be;
+
+      --color: blue;
+
+      --border-radius: 0;
+      --border-color: #000;
+      --border-style: solid;
+      --border-width: 1px;
+
+      --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+      --ripple-color: deeppink;
+
+      --padding-top: 10px;
+      --padding-bottom: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Custom Button</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/button/theming/css-properties/index.md b/static/usage/v6/button/theming/css-properties/index.md
new file mode 100644
index 00000000000..9e0fcb66c2b
--- /dev/null
+++ b/static/usage/v6/button/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/button/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/button/theming/css-properties/javascript.md b/static/usage/v6/button/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/button/theming/css-properties/javascript.md
rename to static/usage/v6/button/theming/css-properties/javascript.md
diff --git a/static/usage/button/theming/css-properties/react/main_css.md b/static/usage/v6/button/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/button/theming/css-properties/react/main_css.md
rename to static/usage/v6/button/theming/css-properties/react/main_css.md
diff --git a/static/usage/button/theming/css-properties/react/main_tsx.md b/static/usage/v6/button/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/button/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/button/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/button/theming/css-properties/vue.md b/static/usage/v6/button/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/button/theming/css-properties/vue.md
rename to static/usage/v6/button/theming/css-properties/vue.md
diff --git a/static/usage/buttons/basic/angular.md b/static/usage/v6/buttons/basic/angular.md
similarity index 100%
rename from static/usage/buttons/basic/angular.md
rename to static/usage/v6/buttons/basic/angular.md
diff --git a/static/usage/v6/buttons/basic/demo.html b/static/usage/v6/buttons/basic/demo.html
new file mode 100644
index 00000000000..f74d9eb0eca
--- /dev/null
+++ b/static/usage/v6/buttons/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Buttons</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button>Button</ion-button>
+          </ion-buttons>
+          <ion-title>Default Buttons</ion-title>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/buttons/basic/index.md b/static/usage/v6/buttons/basic/index.md
new file mode 100644
index 00000000000..59f77161471
--- /dev/null
+++ b/static/usage/v6/buttons/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/buttons/basic/demo.html" />
diff --git a/static/usage/buttons/basic/javascript.md b/static/usage/v6/buttons/basic/javascript.md
similarity index 100%
rename from static/usage/buttons/basic/javascript.md
rename to static/usage/v6/buttons/basic/javascript.md
diff --git a/static/usage/buttons/basic/react.md b/static/usage/v6/buttons/basic/react.md
similarity index 100%
rename from static/usage/buttons/basic/react.md
rename to static/usage/v6/buttons/basic/react.md
diff --git a/static/usage/buttons/basic/vue.md b/static/usage/v6/buttons/basic/vue.md
similarity index 100%
rename from static/usage/buttons/basic/vue.md
rename to static/usage/v6/buttons/basic/vue.md
diff --git a/static/usage/buttons/placement/angular.md b/static/usage/v6/buttons/placement/angular.md
similarity index 100%
rename from static/usage/buttons/placement/angular.md
rename to static/usage/v6/buttons/placement/angular.md
diff --git a/static/usage/v6/buttons/placement/demo.html b/static/usage/v6/buttons/placement/demo.html
new file mode 100644
index 00000000000..2c51099331c
--- /dev/null
+++ b/static/usage/v6/buttons/placement/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Buttons</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button>Start</ion-button>
+          </ion-buttons>
+          <ion-title>Buttons</ion-title>
+          <ion-buttons slot="end">
+            <ion-button>End</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button>Secondary</ion-button>
+          </ion-buttons>
+          <ion-title>Buttons</ion-title>
+          <ion-buttons slot="primary">
+            <ion-button>Primary</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/buttons/placement/index.md b/static/usage/v6/buttons/placement/index.md
new file mode 100644
index 00000000000..ed4a5d80d7e
--- /dev/null
+++ b/static/usage/v6/buttons/placement/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/buttons/placement/demo.html" />
diff --git a/static/usage/buttons/placement/javascript.md b/static/usage/v6/buttons/placement/javascript.md
similarity index 100%
rename from static/usage/buttons/placement/javascript.md
rename to static/usage/v6/buttons/placement/javascript.md
diff --git a/static/usage/buttons/placement/react.md b/static/usage/v6/buttons/placement/react.md
similarity index 100%
rename from static/usage/buttons/placement/react.md
rename to static/usage/v6/buttons/placement/react.md
diff --git a/static/usage/buttons/placement/vue.md b/static/usage/v6/buttons/placement/vue.md
similarity index 100%
rename from static/usage/buttons/placement/vue.md
rename to static/usage/v6/buttons/placement/vue.md
diff --git a/static/usage/buttons/types/angular.md b/static/usage/v6/buttons/types/angular.md
similarity index 100%
rename from static/usage/buttons/types/angular.md
rename to static/usage/v6/buttons/types/angular.md
diff --git a/static/usage/v6/buttons/types/demo.html b/static/usage/v6/buttons/types/demo.html
new file mode 100644
index 00000000000..46288e45f1a
--- /dev/null
+++ b/static/usage/v6/buttons/types/demo.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Buttons</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button size="large">
+              Favorite
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Default Buttons</ion-title>
+          <ion-buttons slot="primary">
+            <ion-button>
+              Delete
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button>
+              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Icon Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="solid">
+              <ion-icon slot="start" name="person-circle"></ion-icon>
+              Contact
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button fill="solid">
+              Help
+              <ion-icon slot="end" name="help-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Solid Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="outline">
+              <ion-icon slot="start" name="star"></ion-icon>
+              Star
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button fill="outline">
+              Edit
+              <ion-icon slot="end" name="create"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Outline Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="#"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Back Button</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+          </ion-buttons>
+          <ion-title>Menu Button</ion-title>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/buttons/types/index.md b/static/usage/v6/buttons/types/index.md
new file mode 100644
index 00000000000..910b6526fc7
--- /dev/null
+++ b/static/usage/v6/buttons/types/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/buttons/types/demo.html" size="medium" />
diff --git a/static/usage/buttons/types/javascript.md b/static/usage/v6/buttons/types/javascript.md
similarity index 100%
rename from static/usage/buttons/types/javascript.md
rename to static/usage/v6/buttons/types/javascript.md
diff --git a/static/usage/buttons/types/react.md b/static/usage/v6/buttons/types/react.md
similarity index 100%
rename from static/usage/buttons/types/react.md
rename to static/usage/v6/buttons/types/react.md
diff --git a/static/usage/buttons/types/vue.md b/static/usage/v6/buttons/types/vue.md
similarity index 100%
rename from static/usage/buttons/types/vue.md
rename to static/usage/v6/buttons/types/vue.md
diff --git a/static/usage/card/basic/angular/example_component_css.md b/static/usage/v6/card/basic/angular/example_component_css.md
similarity index 100%
rename from static/usage/card/basic/angular/example_component_css.md
rename to static/usage/v6/card/basic/angular/example_component_css.md
diff --git a/static/usage/card/basic/angular/example_component_html.md b/static/usage/v6/card/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/card/basic/angular/example_component_html.md
rename to static/usage/v6/card/basic/angular/example_component_html.md
diff --git a/static/usage/v6/card/basic/demo.html b/static/usage/v6/card/basic/demo.html
new file mode 100644
index 00000000000..e6464c335a9
--- /dev/null
+++ b/static/usage/v6/card/basic/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Here's a small text description for the card content. Nothing more, nothing less.
+          </ion-card-content>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/card/basic/index.md b/static/usage/v6/card/basic/index.md
new file mode 100644
index 00000000000..2b73d2d8788
--- /dev/null
+++ b/static/usage/v6/card/basic/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/card/basic/demo.html"
+/>
diff --git a/static/usage/card/basic/javascript.md b/static/usage/v6/card/basic/javascript.md
similarity index 100%
rename from static/usage/card/basic/javascript.md
rename to static/usage/v6/card/basic/javascript.md
diff --git a/static/usage/card/basic/react/main_css.md b/static/usage/v6/card/basic/react/main_css.md
similarity index 100%
rename from static/usage/card/basic/react/main_css.md
rename to static/usage/v6/card/basic/react/main_css.md
diff --git a/static/usage/card/basic/react/main_tsx.md b/static/usage/v6/card/basic/react/main_tsx.md
similarity index 100%
rename from static/usage/card/basic/react/main_tsx.md
rename to static/usage/v6/card/basic/react/main_tsx.md
diff --git a/static/usage/card/basic/vue.md b/static/usage/v6/card/basic/vue.md
similarity index 100%
rename from static/usage/card/basic/vue.md
rename to static/usage/v6/card/basic/vue.md
diff --git a/static/usage/card/buttons/angular/example_component_css.md b/static/usage/v6/card/buttons/angular/example_component_css.md
similarity index 100%
rename from static/usage/card/buttons/angular/example_component_css.md
rename to static/usage/v6/card/buttons/angular/example_component_css.md
diff --git a/static/usage/card/buttons/angular/example_component_html.md b/static/usage/v6/card/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/card/buttons/angular/example_component_html.md
rename to static/usage/v6/card/buttons/angular/example_component_html.md
diff --git a/static/usage/v6/card/buttons/demo.html b/static/usage/v6/card/buttons/demo.html
new file mode 100644
index 00000000000..012bbc31321
--- /dev/null
+++ b/static/usage/v6/card/buttons/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Here's a small text description for the card content. Nothing more, nothing less.
+          </ion-card-content>
+
+          <ion-button fill="clear">Action 1</ion-button>
+          <ion-button fill="clear">Action 2</ion-button>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/card/buttons/index.md b/static/usage/v6/card/buttons/index.md
new file mode 100644
index 00000000000..36626c8371f
--- /dev/null
+++ b/static/usage/v6/card/buttons/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/card/buttons/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/card/buttons/javascript.md b/static/usage/v6/card/buttons/javascript.md
similarity index 100%
rename from static/usage/card/buttons/javascript.md
rename to static/usage/v6/card/buttons/javascript.md
diff --git a/static/usage/card/buttons/react/main_css.md b/static/usage/v6/card/buttons/react/main_css.md
similarity index 100%
rename from static/usage/card/buttons/react/main_css.md
rename to static/usage/v6/card/buttons/react/main_css.md
diff --git a/static/usage/card/buttons/react/main_tsx.md b/static/usage/v6/card/buttons/react/main_tsx.md
similarity index 100%
rename from static/usage/card/buttons/react/main_tsx.md
rename to static/usage/v6/card/buttons/react/main_tsx.md
diff --git a/static/usage/card/buttons/vue.md b/static/usage/v6/card/buttons/vue.md
similarity index 100%
rename from static/usage/card/buttons/vue.md
rename to static/usage/v6/card/buttons/vue.md
diff --git a/static/usage/card/list/angular/example_component_css.md b/static/usage/v6/card/list/angular/example_component_css.md
similarity index 100%
rename from static/usage/card/list/angular/example_component_css.md
rename to static/usage/v6/card/list/angular/example_component_css.md
diff --git a/static/usage/card/list/angular/example_component_html.md b/static/usage/v6/card/list/angular/example_component_html.md
similarity index 100%
rename from static/usage/card/list/angular/example_component_html.md
rename to static/usage/v6/card/list/angular/example_component_html.md
diff --git a/static/usage/v6/card/list/demo.html b/static/usage/v6/card/list/demo.html
new file mode 100644
index 00000000000..123db8876cf
--- /dev/null
+++ b/static/usage/v6/card/list/demo.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    ion-card {
+      width: 100%;
+    }
+
+    ion-item {
+      --padding-start: 0;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-list>
+              <ion-item>
+                <ion-thumbnail slot="start">
+                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+                </ion-thumbnail>
+                <ion-label>Item</ion-label>
+              </ion-item>
+
+              <ion-item>
+                <ion-thumbnail slot="start">
+                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+                </ion-thumbnail>
+                <ion-label>Item</ion-label>
+              </ion-item>
+
+              <ion-item>
+                <ion-thumbnail slot="start">
+                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+                </ion-thumbnail>
+                <ion-label>Item</ion-label>
+              </ion-item>
+
+              <ion-item lines="none">
+                <ion-thumbnail slot="start">
+                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+                </ion-thumbnail>
+                <ion-label>Item</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card-content>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/card/list/index.md b/static/usage/v6/card/list/index.md
new file mode 100644
index 00000000000..7ca1159169c
--- /dev/null
+++ b/static/usage/v6/card/list/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/card/list/demo.html"
+  size="400px"
+/>
diff --git a/static/usage/card/list/javascript.md b/static/usage/v6/card/list/javascript.md
similarity index 100%
rename from static/usage/card/list/javascript.md
rename to static/usage/v6/card/list/javascript.md
diff --git a/static/usage/card/list/react/main_css.md b/static/usage/v6/card/list/react/main_css.md
similarity index 100%
rename from static/usage/card/list/react/main_css.md
rename to static/usage/v6/card/list/react/main_css.md
diff --git a/static/usage/card/list/react/main_tsx.md b/static/usage/v6/card/list/react/main_tsx.md
similarity index 100%
rename from static/usage/card/list/react/main_tsx.md
rename to static/usage/v6/card/list/react/main_tsx.md
diff --git a/static/usage/card/list/vue.md b/static/usage/v6/card/list/vue.md
similarity index 100%
rename from static/usage/card/list/vue.md
rename to static/usage/v6/card/list/vue.md
diff --git a/static/usage/card/media/angular/example_component_css.md b/static/usage/v6/card/media/angular/example_component_css.md
similarity index 100%
rename from static/usage/card/media/angular/example_component_css.md
rename to static/usage/v6/card/media/angular/example_component_css.md
diff --git a/static/usage/card/media/angular/example_component_html.md b/static/usage/v6/card/media/angular/example_component_html.md
similarity index 100%
rename from static/usage/card/media/angular/example_component_html.md
rename to static/usage/v6/card/media/angular/example_component_html.md
diff --git a/static/usage/v6/card/media/demo.html b/static/usage/v6/card/media/demo.html
new file mode 100644
index 00000000000..edc1a4b75a1
--- /dev/null
+++ b/static/usage/v6/card/media/demo.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card>
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Here's a small text description for the card content. Nothing more, nothing less.
+          </ion-card-content>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/card/media/index.md b/static/usage/v6/card/media/index.md
new file mode 100644
index 00000000000..2a6ba671517
--- /dev/null
+++ b/static/usage/v6/card/media/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/card/media/demo.html"
+  size="350px"
+/>
diff --git a/static/usage/card/media/javascript.md b/static/usage/v6/card/media/javascript.md
similarity index 100%
rename from static/usage/card/media/javascript.md
rename to static/usage/v6/card/media/javascript.md
diff --git a/static/usage/card/media/react/main_css.md b/static/usage/v6/card/media/react/main_css.md
similarity index 100%
rename from static/usage/card/media/react/main_css.md
rename to static/usage/v6/card/media/react/main_css.md
diff --git a/static/usage/card/media/react/main_tsx.md b/static/usage/v6/card/media/react/main_tsx.md
similarity index 100%
rename from static/usage/card/media/react/main_tsx.md
rename to static/usage/v6/card/media/react/main_tsx.md
diff --git a/static/usage/card/media/vue.md b/static/usage/v6/card/media/vue.md
similarity index 100%
rename from static/usage/card/media/vue.md
rename to static/usage/v6/card/media/vue.md
diff --git a/static/usage/card/theming/colors/angular/example_component_css.md b/static/usage/v6/card/theming/colors/angular/example_component_css.md
similarity index 100%
rename from static/usage/card/theming/colors/angular/example_component_css.md
rename to static/usage/v6/card/theming/colors/angular/example_component_css.md
diff --git a/static/usage/card/theming/colors/angular/example_component_html.md b/static/usage/v6/card/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/card/theming/colors/angular/example_component_html.md
rename to static/usage/v6/card/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v6/card/theming/colors/demo.html b/static/usage/v6/card/theming/colors/demo.html
new file mode 100644
index 00000000000..c0e5f88d827
--- /dev/null
+++ b/static/usage/v6/card/theming/colors/demo.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-wrap: wrap;
+    }
+
+    ion-card {
+      flex: 1 1 28%;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card color="primary">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="secondary">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="tertiary">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="success">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="warning">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="danger">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="light">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="medium">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="dark">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/card/theming/colors/index.md b/static/usage/v6/card/theming/colors/index.md
new file mode 100644
index 00000000000..07b04db71bc
--- /dev/null
+++ b/static/usage/v6/card/theming/colors/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/card/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/card/theming/colors/javascript.md b/static/usage/v6/card/theming/colors/javascript.md
similarity index 100%
rename from static/usage/card/theming/colors/javascript.md
rename to static/usage/v6/card/theming/colors/javascript.md
diff --git a/static/usage/card/theming/colors/react/main_css.md b/static/usage/v6/card/theming/colors/react/main_css.md
similarity index 100%
rename from static/usage/card/theming/colors/react/main_css.md
rename to static/usage/v6/card/theming/colors/react/main_css.md
diff --git a/static/usage/card/theming/colors/react/main_tsx.md b/static/usage/v6/card/theming/colors/react/main_tsx.md
similarity index 100%
rename from static/usage/card/theming/colors/react/main_tsx.md
rename to static/usage/v6/card/theming/colors/react/main_tsx.md
diff --git a/static/usage/card/theming/colors/vue.md b/static/usage/v6/card/theming/colors/vue.md
similarity index 100%
rename from static/usage/card/theming/colors/vue.md
rename to static/usage/v6/card/theming/colors/vue.md
diff --git a/static/usage/card/theming/css-properties/angular/example_component_css.md b/static/usage/v6/card/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/card/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/card/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/card/theming/css-properties/angular/example_component_html.md b/static/usage/v6/card/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/card/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/card/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/card/theming/css-properties/demo.html b/static/usage/v6/card/theming/css-properties/demo.html
new file mode 100644
index 00000000000..dc131842db3
--- /dev/null
+++ b/static/usage/v6/card/theming/css-properties/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    ion-card {
+      --background: #000;
+      --color: #9efff0;
+    }
+
+    ion-card-title {
+      --color: #52ffe4;
+    }
+
+    ion-card-subtitle {
+      --color: #d1fff8;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Here's a small text description for the card content. Nothing more, nothing less.
+          </ion-card-content>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/card/theming/css-properties/index.md b/static/usage/v6/card/theming/css-properties/index.md
new file mode 100644
index 00000000000..fe3114dbdef
--- /dev/null
+++ b/static/usage/v6/card/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/card/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/card/theming/css-properties/javascript.md b/static/usage/v6/card/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/card/theming/css-properties/javascript.md
rename to static/usage/v6/card/theming/css-properties/javascript.md
diff --git a/static/usage/card/theming/css-properties/react/main_css.md b/static/usage/v6/card/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/card/theming/css-properties/react/main_css.md
rename to static/usage/v6/card/theming/css-properties/react/main_css.md
diff --git a/static/usage/card/theming/css-properties/react/main_tsx.md b/static/usage/v6/card/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/card/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/card/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/card/theming/css-properties/vue.md b/static/usage/v6/card/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/card/theming/css-properties/vue.md
rename to static/usage/v6/card/theming/css-properties/vue.md
diff --git a/static/usage/checkbox/basic/angular.md b/static/usage/v6/checkbox/basic/angular.md
similarity index 100%
rename from static/usage/checkbox/basic/angular.md
rename to static/usage/v6/checkbox/basic/angular.md
diff --git a/static/usage/v6/checkbox/basic/demo.html b/static/usage/v6/checkbox/basic/demo.html
new file mode 100644
index 00000000000..2df0497c4fe
--- /dev/null
+++ b/static/usage/v6/checkbox/basic/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Checkbox</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-checkbox slot="start"></ion-checkbox>
+          <ion-label>I agree to the terms and conditions</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/checkbox/basic/index.md b/static/usage/v6/checkbox/basic/index.md
new file mode 100644
index 00000000000..f7ce86204f3
--- /dev/null
+++ b/static/usage/v6/checkbox/basic/index.md
@@ -0,0 +1,16 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/checkbox/basic/demo.html"
+/>
diff --git a/static/usage/checkbox/basic/javascript.md b/static/usage/v6/checkbox/basic/javascript.md
similarity index 100%
rename from static/usage/checkbox/basic/javascript.md
rename to static/usage/v6/checkbox/basic/javascript.md
diff --git a/static/usage/checkbox/basic/react.md b/static/usage/v6/checkbox/basic/react.md
similarity index 100%
rename from static/usage/checkbox/basic/react.md
rename to static/usage/v6/checkbox/basic/react.md
diff --git a/static/usage/checkbox/basic/vue.md b/static/usage/v6/checkbox/basic/vue.md
similarity index 100%
rename from static/usage/checkbox/basic/vue.md
rename to static/usage/v6/checkbox/basic/vue.md
diff --git a/static/usage/checkbox/indeterminate/angular.md b/static/usage/v6/checkbox/indeterminate/angular.md
similarity index 100%
rename from static/usage/checkbox/indeterminate/angular.md
rename to static/usage/v6/checkbox/indeterminate/angular.md
diff --git a/static/usage/v6/checkbox/indeterminate/demo.html b/static/usage/v6/checkbox/indeterminate/demo.html
new file mode 100644
index 00000000000..4e726022577
--- /dev/null
+++ b/static/usage/v6/checkbox/indeterminate/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Checkbox</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-checkbox slot="start" indeterminate="true"></ion-checkbox>
+          <ion-label>Indeterminate checkbox</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/checkbox/indeterminate/index.md b/static/usage/v6/checkbox/indeterminate/index.md
new file mode 100644
index 00000000000..48cd83db7f2
--- /dev/null
+++ b/static/usage/v6/checkbox/indeterminate/index.md
@@ -0,0 +1,16 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/checkbox/indeterminate/demo.html"
+/>
diff --git a/static/usage/checkbox/indeterminate/javascript.md b/static/usage/v6/checkbox/indeterminate/javascript.md
similarity index 100%
rename from static/usage/checkbox/indeterminate/javascript.md
rename to static/usage/v6/checkbox/indeterminate/javascript.md
diff --git a/static/usage/checkbox/indeterminate/react.md b/static/usage/v6/checkbox/indeterminate/react.md
similarity index 100%
rename from static/usage/checkbox/indeterminate/react.md
rename to static/usage/v6/checkbox/indeterminate/react.md
diff --git a/static/usage/checkbox/indeterminate/vue.md b/static/usage/v6/checkbox/indeterminate/vue.md
similarity index 100%
rename from static/usage/checkbox/indeterminate/vue.md
rename to static/usage/v6/checkbox/indeterminate/vue.md
diff --git a/static/usage/checkbox/theming/css-properties/angular/example_component_css.md b/static/usage/v6/checkbox/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/checkbox/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/checkbox/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/checkbox/theming/css-properties/angular/example_component_html.md b/static/usage/v6/checkbox/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/checkbox/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/checkbox/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/checkbox/theming/css-properties/demo.html b/static/usage/v6/checkbox/theming/css-properties/demo.html
new file mode 100644
index 00000000000..b75f12c0655
--- /dev/null
+++ b/static/usage/v6/checkbox/theming/css-properties/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Checkbox</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-checkbox {
+      --size: 32px;
+      --background-checked: #6815ec;
+    }
+
+    ion-checkbox::part(container) {
+      border-radius: 6px;
+      border: 2px solid #6815ec;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-checkbox slot="start"></ion-checkbox>
+          <ion-label>Themed checkbox</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/checkbox/theming/css-properties/index.md b/static/usage/v6/checkbox/theming/css-properties/index.md
new file mode 100644
index 00000000000..df00b8a7342
--- /dev/null
+++ b/static/usage/v6/checkbox/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/checkbox/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/checkbox/theming/css-properties/javascript.md b/static/usage/v6/checkbox/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/checkbox/theming/css-properties/javascript.md
rename to static/usage/v6/checkbox/theming/css-properties/javascript.md
diff --git a/static/usage/checkbox/theming/css-properties/react/main_css.md b/static/usage/v6/checkbox/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/checkbox/theming/css-properties/react/main_css.md
rename to static/usage/v6/checkbox/theming/css-properties/react/main_css.md
diff --git a/static/usage/checkbox/theming/css-properties/react/main_tsx.md b/static/usage/v6/checkbox/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/checkbox/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/checkbox/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/checkbox/theming/css-properties/vue.md b/static/usage/v6/checkbox/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/checkbox/theming/css-properties/vue.md
rename to static/usage/v6/checkbox/theming/css-properties/vue.md
diff --git a/static/usage/chip/basic/angular.md b/static/usage/v6/chip/basic/angular.md
similarity index 100%
rename from static/usage/chip/basic/angular.md
rename to static/usage/v6/chip/basic/angular.md
diff --git a/static/usage/v6/chip/basic/demo.html b/static/usage/v6/chip/basic/demo.html
new file mode 100644
index 00000000000..df4c6569a13
--- /dev/null
+++ b/static/usage/v6/chip/basic/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Chip</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-chip>Default</ion-chip>
+        <ion-chip disabled="true">Disabled</ion-chip>
+        <ion-chip outline="true">Outline</ion-chip>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/chip/basic/index.md b/static/usage/v6/chip/basic/index.md
new file mode 100644
index 00000000000..1d79e0856a0
--- /dev/null
+++ b/static/usage/v6/chip/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/chip/basic/demo.html" />
diff --git a/static/usage/chip/basic/javascript.md b/static/usage/v6/chip/basic/javascript.md
similarity index 100%
rename from static/usage/chip/basic/javascript.md
rename to static/usage/v6/chip/basic/javascript.md
diff --git a/static/usage/chip/basic/react.md b/static/usage/v6/chip/basic/react.md
similarity index 100%
rename from static/usage/chip/basic/react.md
rename to static/usage/v6/chip/basic/react.md
diff --git a/static/usage/chip/basic/vue.md b/static/usage/v6/chip/basic/vue.md
similarity index 100%
rename from static/usage/chip/basic/vue.md
rename to static/usage/v6/chip/basic/vue.md
diff --git a/static/usage/chip/slots/angular.md b/static/usage/v6/chip/slots/angular.md
similarity index 100%
rename from static/usage/chip/slots/angular.md
rename to static/usage/v6/chip/slots/angular.md
diff --git a/static/usage/v6/chip/slots/demo.html b/static/usage/v6/chip/slots/demo.html
new file mode 100644
index 00000000000..bbf70b2e82f
--- /dev/null
+++ b/static/usage/v6/chip/slots/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Chip</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-chip>
+          <ion-avatar>
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>Avatar Chip</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+
+        <ion-chip>
+          <ion-icon name="pin" color="primary"></ion-icon>
+          <ion-label>Icon Chip</ion-label>
+          <ion-icon name="close"></ion-icon>
+        </ion-chip>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/chip/slots/index.md b/static/usage/v6/chip/slots/index.md
new file mode 100644
index 00000000000..7b6ef1233ee
--- /dev/null
+++ b/static/usage/v6/chip/slots/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/chip/slots/demo.html" />
diff --git a/static/usage/chip/slots/javascript.md b/static/usage/v6/chip/slots/javascript.md
similarity index 100%
rename from static/usage/chip/slots/javascript.md
rename to static/usage/v6/chip/slots/javascript.md
diff --git a/static/usage/chip/slots/react.md b/static/usage/v6/chip/slots/react.md
similarity index 100%
rename from static/usage/chip/slots/react.md
rename to static/usage/v6/chip/slots/react.md
diff --git a/static/usage/chip/slots/vue.md b/static/usage/v6/chip/slots/vue.md
similarity index 100%
rename from static/usage/chip/slots/vue.md
rename to static/usage/v6/chip/slots/vue.md
diff --git a/static/usage/chip/theming/colors/angular.md b/static/usage/v6/chip/theming/colors/angular.md
similarity index 100%
rename from static/usage/chip/theming/colors/angular.md
rename to static/usage/v6/chip/theming/colors/angular.md
diff --git a/static/usage/v6/chip/theming/colors/demo.html b/static/usage/v6/chip/theming/colors/demo.html
new file mode 100644
index 00000000000..ecdbe97a047
--- /dev/null
+++ b/static/usage/v6/chip/theming/colors/demo.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Chip</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .flex-items {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      max-width: 440px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="flex-items">
+          <ion-chip>Default</ion-chip>
+          <ion-chip color="primary">Primary</ion-chip>
+          <ion-chip color="secondary">Secondary</ion-chip>
+          <ion-chip color="tertiary">Tertiary</ion-chip>
+          <ion-chip color="success">Success</ion-chip>
+          <ion-chip color="warning">Warning</ion-chip>
+          <ion-chip color="danger">Danger</ion-chip>
+          <ion-chip color="light">Light</ion-chip>
+          <ion-chip color="medium">Medium</ion-chip>
+          <ion-chip color="dark">Dark</ion-chip>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/chip/theming/colors/index.md b/static/usage/v6/chip/theming/colors/index.md
new file mode 100644
index 00000000000..d5561ca8b75
--- /dev/null
+++ b/static/usage/v6/chip/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/chip/theming/colors/demo.html" />
diff --git a/static/usage/chip/theming/colors/javascript.md b/static/usage/v6/chip/theming/colors/javascript.md
similarity index 100%
rename from static/usage/chip/theming/colors/javascript.md
rename to static/usage/v6/chip/theming/colors/javascript.md
diff --git a/static/usage/chip/theming/colors/react.md b/static/usage/v6/chip/theming/colors/react.md
similarity index 100%
rename from static/usage/chip/theming/colors/react.md
rename to static/usage/v6/chip/theming/colors/react.md
diff --git a/static/usage/chip/theming/colors/vue.md b/static/usage/v6/chip/theming/colors/vue.md
similarity index 100%
rename from static/usage/chip/theming/colors/vue.md
rename to static/usage/v6/chip/theming/colors/vue.md
diff --git a/static/usage/chip/theming/css-properties/angular/example_component_css.md b/static/usage/v6/chip/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/chip/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/chip/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/chip/theming/css-properties/angular/example_component_html.md b/static/usage/v6/chip/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/chip/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/chip/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/chip/theming/css-properties/demo.html b/static/usage/v6/chip/theming/css-properties/demo.html
new file mode 100644
index 00000000000..b0621dace2d
--- /dev/null
+++ b/static/usage/v6/chip/theming/css-properties/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Chip</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-chip {
+      --background: #00213F;
+      --color: #ADEFD1;
+    }
+  </style>
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-chip>Default</ion-chip>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/chip/theming/css-properties/index.md b/static/usage/v6/chip/theming/css-properties/index.md
new file mode 100644
index 00000000000..5851a62f350
--- /dev/null
+++ b/static/usage/v6/chip/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/chip/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/chip/theming/css-properties/javascript.md b/static/usage/v6/chip/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/chip/theming/css-properties/javascript.md
rename to static/usage/v6/chip/theming/css-properties/javascript.md
diff --git a/static/usage/chip/theming/css-properties/react/main_css.md b/static/usage/v6/chip/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/chip/theming/css-properties/react/main_css.md
rename to static/usage/v6/chip/theming/css-properties/react/main_css.md
diff --git a/static/usage/chip/theming/css-properties/react/main_tsx.md b/static/usage/v6/chip/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/chip/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/chip/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/chip/theming/css-properties/vue.md b/static/usage/v6/chip/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/chip/theming/css-properties/vue.md
rename to static/usage/v6/chip/theming/css-properties/vue.md
diff --git a/static/usage/content/basic/angular.md b/static/usage/v6/content/basic/angular.md
similarity index 100%
rename from static/usage/content/basic/angular.md
rename to static/usage/v6/content/basic/angular.md
diff --git a/static/usage/v6/content/basic/demo.html b/static/usage/v6/content/basic/demo.html
new file mode 100644
index 00000000000..14dbe3f5e7d
--- /dev/null
+++ b/static/usage/v6/content/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/content/basic/index.md b/static/usage/v6/content/basic/index.md
new file mode 100644
index 00000000000..eb5222bb206
--- /dev/null
+++ b/static/usage/v6/content/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/content/basic/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/basic/javascript.md b/static/usage/v6/content/basic/javascript.md
similarity index 100%
rename from static/usage/content/basic/javascript.md
rename to static/usage/v6/content/basic/javascript.md
diff --git a/static/usage/content/basic/react.md b/static/usage/v6/content/basic/react.md
similarity index 100%
rename from static/usage/content/basic/react.md
rename to static/usage/v6/content/basic/react.md
diff --git a/static/usage/content/basic/vue.md b/static/usage/v6/content/basic/vue.md
similarity index 100%
rename from static/usage/content/basic/vue.md
rename to static/usage/v6/content/basic/vue.md
diff --git a/static/usage/content/fixed/angular.md b/static/usage/v6/content/fixed/angular.md
similarity index 100%
rename from static/usage/content/fixed/angular.md
rename to static/usage/v6/content/fixed/angular.md
diff --git a/static/usage/content/fixed/angular/example_component_css.md b/static/usage/v6/content/fixed/angular/example_component_css.md
similarity index 100%
rename from static/usage/content/fixed/angular/example_component_css.md
rename to static/usage/v6/content/fixed/angular/example_component_css.md
diff --git a/static/usage/content/fixed/angular/example_component_html.md b/static/usage/v6/content/fixed/angular/example_component_html.md
similarity index 100%
rename from static/usage/content/fixed/angular/example_component_html.md
rename to static/usage/v6/content/fixed/angular/example_component_html.md
diff --git a/static/usage/v6/content/fixed/demo.html b/static/usage/v6/content/fixed/demo.html
new file mode 100644
index 00000000000..9ea56f755e2
--- /dev/null
+++ b/static/usage/v6/content/fixed/demo.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-button[slot="fixed"] {
+      top: 50%;
+      right: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+      <ion-button>Normal Button</ion-button>
+      <ion-button slot="fixed">Fixed Button</ion-button>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+        fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+        augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+        mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+        quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+        varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+        consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+        amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+        vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+        Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+        odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+        vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+        odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+        Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+        tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+        et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+        faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+        venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+        sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+        molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+        sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+        amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+        Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+        vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+        at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+        mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+        enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+        orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+        cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+        vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+        egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/content/fixed/index.md b/static/usage/v6/content/fixed/index.md
new file mode 100644
index 00000000000..5088699b439
--- /dev/null
+++ b/static/usage/v6/content/fixed/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/content/fixed/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/fixed/javascript.md b/static/usage/v6/content/fixed/javascript.md
similarity index 100%
rename from static/usage/content/fixed/javascript.md
rename to static/usage/v6/content/fixed/javascript.md
diff --git a/static/usage/content/fixed/react.md b/static/usage/v6/content/fixed/react.md
similarity index 100%
rename from static/usage/content/fixed/react.md
rename to static/usage/v6/content/fixed/react.md
diff --git a/static/usage/content/fixed/react/main_css.md b/static/usage/v6/content/fixed/react/main_css.md
similarity index 100%
rename from static/usage/content/fixed/react/main_css.md
rename to static/usage/v6/content/fixed/react/main_css.md
diff --git a/static/usage/content/fixed/react/main_tsx.md b/static/usage/v6/content/fixed/react/main_tsx.md
similarity index 100%
rename from static/usage/content/fixed/react/main_tsx.md
rename to static/usage/v6/content/fixed/react/main_tsx.md
diff --git a/static/usage/content/fixed/vue.md b/static/usage/v6/content/fixed/vue.md
similarity index 100%
rename from static/usage/content/fixed/vue.md
rename to static/usage/v6/content/fixed/vue.md
diff --git a/static/usage/content/fullscreen/angular/example_component_css.md b/static/usage/v6/content/fullscreen/angular/example_component_css.md
similarity index 100%
rename from static/usage/content/fullscreen/angular/example_component_css.md
rename to static/usage/v6/content/fullscreen/angular/example_component_css.md
diff --git a/static/usage/content/fullscreen/angular/example_component_html.md b/static/usage/v6/content/fullscreen/angular/example_component_html.md
similarity index 100%
rename from static/usage/content/fullscreen/angular/example_component_html.md
rename to static/usage/v6/content/fullscreen/angular/example_component_html.md
diff --git a/static/usage/v6/content/fullscreen/demo.html b/static/usage/v6/content/fullscreen/demo.html
new file mode 100644
index 00000000000..9bf752950d5
--- /dev/null
+++ b/static/usage/v6/content/fullscreen/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-toolbar {
+      --opacity: .5
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>
+          Header
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true" class="ion-padding">
+      <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+        fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+        augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+        mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+        quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+        varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+        consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+        amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+        vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+        Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+        odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+        vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+        odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+        Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+        tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+        et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+        faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+        venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+        sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+        molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+        sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+        amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+        Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+        vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+        at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+        mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+        enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+        orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+        cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+        vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+        egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </ion-content>
+    <ion-footer>
+      <ion-toolbar>
+        <ion-title>
+          Footer
+        </ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/content/fullscreen/index.md b/static/usage/v6/content/fullscreen/index.md
new file mode 100644
index 00000000000..108bab52b60
--- /dev/null
+++ b/static/usage/v6/content/fullscreen/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/content/fullscreen/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/fullscreen/javascript.md b/static/usage/v6/content/fullscreen/javascript.md
similarity index 100%
rename from static/usage/content/fullscreen/javascript.md
rename to static/usage/v6/content/fullscreen/javascript.md
diff --git a/static/usage/content/fullscreen/react/main_css.md b/static/usage/v6/content/fullscreen/react/main_css.md
similarity index 100%
rename from static/usage/content/fullscreen/react/main_css.md
rename to static/usage/v6/content/fullscreen/react/main_css.md
diff --git a/static/usage/content/fullscreen/react/main_tsx.md b/static/usage/v6/content/fullscreen/react/main_tsx.md
similarity index 100%
rename from static/usage/content/fullscreen/react/main_tsx.md
rename to static/usage/v6/content/fullscreen/react/main_tsx.md
diff --git a/static/usage/content/fullscreen/vue.md b/static/usage/v6/content/fullscreen/vue.md
similarity index 100%
rename from static/usage/content/fullscreen/vue.md
rename to static/usage/v6/content/fullscreen/vue.md
diff --git a/static/usage/content/header-footer/angular.md b/static/usage/v6/content/header-footer/angular.md
similarity index 100%
rename from static/usage/content/header-footer/angular.md
rename to static/usage/v6/content/header-footer/angular.md
diff --git a/static/usage/v6/content/header-footer/demo.html b/static/usage/v6/content/header-footer/demo.html
new file mode 100644
index 00000000000..0a39f7a5fa8
--- /dev/null
+++ b/static/usage/v6/content/header-footer/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>
+          Header
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+    <ion-footer>
+      <ion-toolbar>
+        <ion-title>
+          Footer
+        </ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/content/header-footer/index.md b/static/usage/v6/content/header-footer/index.md
new file mode 100644
index 00000000000..991dbe74d83
--- /dev/null
+++ b/static/usage/v6/content/header-footer/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/content/header-footer/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/header-footer/javascript.md b/static/usage/v6/content/header-footer/javascript.md
similarity index 100%
rename from static/usage/content/header-footer/javascript.md
rename to static/usage/v6/content/header-footer/javascript.md
diff --git a/static/usage/content/header-footer/react.md b/static/usage/v6/content/header-footer/react.md
similarity index 100%
rename from static/usage/content/header-footer/react.md
rename to static/usage/v6/content/header-footer/react.md
diff --git a/static/usage/content/header-footer/vue.md b/static/usage/v6/content/header-footer/vue.md
similarity index 100%
rename from static/usage/content/header-footer/vue.md
rename to static/usage/v6/content/header-footer/vue.md
diff --git a/static/usage/content/scroll-events/angular/example_component_html.md b/static/usage/v6/content/scroll-events/angular/example_component_html.md
similarity index 100%
rename from static/usage/content/scroll-events/angular/example_component_html.md
rename to static/usage/v6/content/scroll-events/angular/example_component_html.md
diff --git a/static/usage/content/scroll-events/angular/example_component_ts.md b/static/usage/v6/content/scroll-events/angular/example_component_ts.md
similarity index 100%
rename from static/usage/content/scroll-events/angular/example_component_ts.md
rename to static/usage/v6/content/scroll-events/angular/example_component_ts.md
diff --git a/static/usage/v6/content/scroll-events/demo.html b/static/usage/v6/content/scroll-events/demo.html
new file mode 100644
index 00000000000..1db71ff8972
--- /dev/null
+++ b/static/usage/v6/content/scroll-events/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Scroll to fire the scroll events and view them in the console.</h1>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+        fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+        augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+        mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+        quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+        varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+        consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+        amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+        vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+        Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+        odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+        vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+        odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+        Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+        tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+        et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+        faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+        venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+        sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+        molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+        sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+        amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+        Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+        vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+        at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+        mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+        enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+        orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+        cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+        vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+        egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const content = document.querySelector('ion-content');
+    // Scroll events are disabled by default for content for
+    // performance reasons, enable them to listen to them
+    content.scrollEvents = true;
+
+    content.addEventListener('ionScrollStart', () => console.log('scroll start'));
+    content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
+    content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/content/scroll-events/index.md b/static/usage/v6/content/scroll-events/index.md
new file mode 100644
index 00000000000..732a6ab9032
--- /dev/null
+++ b/static/usage/v6/content/scroll-events/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/content/scroll-events/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/scroll-events/javascript.md b/static/usage/v6/content/scroll-events/javascript.md
similarity index 100%
rename from static/usage/content/scroll-events/javascript.md
rename to static/usage/v6/content/scroll-events/javascript.md
diff --git a/static/usage/content/scroll-events/react.md b/static/usage/v6/content/scroll-events/react.md
similarity index 100%
rename from static/usage/content/scroll-events/react.md
rename to static/usage/v6/content/scroll-events/react.md
diff --git a/static/usage/content/scroll-events/vue.md b/static/usage/v6/content/scroll-events/vue.md
similarity index 100%
rename from static/usage/content/scroll-events/vue.md
rename to static/usage/v6/content/scroll-events/vue.md
diff --git a/static/usage/content/scroll-methods/angular/example_component_html.md b/static/usage/v6/content/scroll-methods/angular/example_component_html.md
similarity index 100%
rename from static/usage/content/scroll-methods/angular/example_component_html.md
rename to static/usage/v6/content/scroll-methods/angular/example_component_html.md
diff --git a/static/usage/content/scroll-methods/angular/example_component_ts.md b/static/usage/v6/content/scroll-methods/angular/example_component_ts.md
similarity index 100%
rename from static/usage/content/scroll-methods/angular/example_component_ts.md
rename to static/usage/v6/content/scroll-methods/angular/example_component_ts.md
diff --git a/static/usage/v6/content/scroll-methods/demo.html b/static/usage/v6/content/scroll-methods/demo.html
new file mode 100644
index 00000000000..c72c5300ff5
--- /dev/null
+++ b/static/usage/v6/content/scroll-methods/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Click on the buttons to scroll the content.</h1>
+
+      <ion-button expand="block" onClick="scrollToBottom()">Scroll to Bottom</ion-button>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+        fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+        augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+        mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+        quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+        varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+        consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+        amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+        vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+        Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+        odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+        vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+        odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+        Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+        tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+        et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+        faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+        venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+        sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+        molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+        sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+        amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+        Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+        vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+        at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+        mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+        enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+        orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+        cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+        vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+        egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+
+      <ion-button expand="block" onClick="scrollToTop()">Scroll to Top</ion-button>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const content = document.querySelector('ion-content');
+
+    function scrollToBottom() {
+      // Passing a duration to the method makes it so the scroll slowly
+      // goes to the bottom instead of instantly
+      content.scrollToBottom(500);
+    }
+
+    function scrollToTop() {
+      // Passing a duration to the method makes it so the scroll slowly
+      // goes to the top instead of instantly
+      content.scrollToTop(500);
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/content/scroll-methods/index.md b/static/usage/v6/content/scroll-methods/index.md
new file mode 100644
index 00000000000..b1aa61e2bf7
--- /dev/null
+++ b/static/usage/v6/content/scroll-methods/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/content/scroll-methods/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/scroll-methods/javascript.md b/static/usage/v6/content/scroll-methods/javascript.md
similarity index 100%
rename from static/usage/content/scroll-methods/javascript.md
rename to static/usage/v6/content/scroll-methods/javascript.md
diff --git a/static/usage/content/scroll-methods/react.md b/static/usage/v6/content/scroll-methods/react.md
similarity index 100%
rename from static/usage/content/scroll-methods/react.md
rename to static/usage/v6/content/scroll-methods/react.md
diff --git a/static/usage/content/scroll-methods/vue.md b/static/usage/v6/content/scroll-methods/vue.md
similarity index 100%
rename from static/usage/content/scroll-methods/vue.md
rename to static/usage/v6/content/scroll-methods/vue.md
diff --git a/static/usage/content/theming/colors/angular.md b/static/usage/v6/content/theming/colors/angular.md
similarity index 100%
rename from static/usage/content/theming/colors/angular.md
rename to static/usage/v6/content/theming/colors/angular.md
diff --git a/static/usage/v6/content/theming/colors/demo.html b/static/usage/v6/content/theming/colors/demo.html
new file mode 100644
index 00000000000..7e9409ec13e
--- /dev/null
+++ b/static/usage/v6/content/theming/colors/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-wrap: wrap;
+      align-content: center;
+    }
+
+    ion-content {
+      flex: 1 1 33%;
+      height: 250px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <div class="container">
+      <ion-content color="primary" class="ion-padding">
+        <h1>Primary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="secondary" class="ion-padding">
+        <h1>Secondary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="tertiary" class="ion-padding">
+        <h1>Tertiary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="success" class="ion-padding">
+        <h1>Success content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="warning" class="ion-padding">
+        <h1>Warning content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="danger" class="ion-padding">
+        <h1>Danger content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="light" class="ion-padding">
+        <h1>Light content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="medium" class="ion-padding">
+        <h1>Medium content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="dark" class="ion-padding">
+        <h1>Dark content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/content/theming/colors/index.md b/static/usage/v6/content/theming/colors/index.md
new file mode 100644
index 00000000000..b233f63b61d
--- /dev/null
+++ b/static/usage/v6/content/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/content/theming/colors/demo.html"
+  includeIonContent={false}
+  size="xlarge"
+/>
diff --git a/static/usage/content/theming/colors/javascript.md b/static/usage/v6/content/theming/colors/javascript.md
similarity index 100%
rename from static/usage/content/theming/colors/javascript.md
rename to static/usage/v6/content/theming/colors/javascript.md
diff --git a/static/usage/content/theming/colors/react.md b/static/usage/v6/content/theming/colors/react.md
similarity index 100%
rename from static/usage/content/theming/colors/react.md
rename to static/usage/v6/content/theming/colors/react.md
diff --git a/static/usage/content/theming/colors/vue.md b/static/usage/v6/content/theming/colors/vue.md
similarity index 100%
rename from static/usage/content/theming/colors/vue.md
rename to static/usage/v6/content/theming/colors/vue.md
diff --git a/static/usage/content/theming/css-properties/angular/example_component_css.md b/static/usage/v6/content/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/content/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/content/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/content/theming/css-properties/angular/example_component_html.md b/static/usage/v6/content/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/content/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/content/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/content/theming/css-properties/demo.html b/static/usage/v6/content/theming/css-properties/demo.html
new file mode 100644
index 00000000000..aeab8bee49b
--- /dev/null
+++ b/static/usage/v6/content/theming/css-properties/demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-content {
+      --background: #d31373;
+      --color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/content/theming/css-properties/index.md b/static/usage/v6/content/theming/css-properties/index.md
new file mode 100644
index 00000000000..3a95fce44eb
--- /dev/null
+++ b/static/usage/v6/content/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/content/theming/css-properties/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/theming/css-properties/javascript.md b/static/usage/v6/content/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/content/theming/css-properties/javascript.md
rename to static/usage/v6/content/theming/css-properties/javascript.md
diff --git a/static/usage/content/theming/css-properties/react/main_css.md b/static/usage/v6/content/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/content/theming/css-properties/react/main_css.md
rename to static/usage/v6/content/theming/css-properties/react/main_css.md
diff --git a/static/usage/content/theming/css-properties/react/main_tsx.md b/static/usage/v6/content/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/content/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/content/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/content/theming/css-properties/vue.md b/static/usage/v6/content/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/content/theming/css-properties/vue.md
rename to static/usage/v6/content/theming/css-properties/vue.md
diff --git a/static/usage/content/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/content/theming/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/content/theming/css-shadow-parts/angular/example_component_css.md
rename to static/usage/v6/content/theming/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/content/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/content/theming/css-shadow-parts/angular/example_component_html.md
similarity index 100%
rename from static/usage/content/theming/css-shadow-parts/angular/example_component_html.md
rename to static/usage/v6/content/theming/css-shadow-parts/angular/example_component_html.md
diff --git a/static/usage/v6/content/theming/css-shadow-parts/demo.html b/static/usage/v6/content/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..9b15b01757d
--- /dev/null
+++ b/static/usage/v6/content/theming/css-shadow-parts/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-content::part(background) {
+      background: #d31373;
+    }
+
+    ion-content::part(scroll) {
+      color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/content/theming/css-shadow-parts/index.md b/static/usage/v6/content/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..72303692b02
--- /dev/null
+++ b/static/usage/v6/content/theming/css-shadow-parts/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/content/theming/css-shadow-parts/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/theming/css-shadow-parts/javascript.md b/static/usage/v6/content/theming/css-shadow-parts/javascript.md
similarity index 100%
rename from static/usage/content/theming/css-shadow-parts/javascript.md
rename to static/usage/v6/content/theming/css-shadow-parts/javascript.md
diff --git a/static/usage/content/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/content/theming/css-shadow-parts/react/main_css.md
similarity index 100%
rename from static/usage/content/theming/css-shadow-parts/react/main_css.md
rename to static/usage/v6/content/theming/css-shadow-parts/react/main_css.md
diff --git a/static/usage/content/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/content/theming/css-shadow-parts/react/main_tsx.md
similarity index 100%
rename from static/usage/content/theming/css-shadow-parts/react/main_tsx.md
rename to static/usage/v6/content/theming/css-shadow-parts/react/main_tsx.md
diff --git a/static/usage/content/theming/css-shadow-parts/vue.md b/static/usage/v6/content/theming/css-shadow-parts/vue.md
similarity index 100%
rename from static/usage/content/theming/css-shadow-parts/vue.md
rename to static/usage/v6/content/theming/css-shadow-parts/vue.md
diff --git a/static/usage/datetime-button/basic/angular.md b/static/usage/v6/datetime-button/basic/angular.md
similarity index 100%
rename from static/usage/datetime-button/basic/angular.md
rename to static/usage/v6/datetime-button/basic/angular.md
diff --git a/static/usage/v6/datetime-button/basic/demo.html b/static/usage/v6/datetime-button/basic/demo.html
new file mode 100644
index 00000000000..73f3f9b1ab7
--- /dev/null
+++ b/static/usage/v6/datetime-button/basic/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.2.0/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.2.0/css/ionic.bundle.css" />
+  <style>
+    ion-modal {
+      --border-radius: 8px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+        <ion-modal>
+          <ion-datetime id="datetime"></ion-datetime>
+        </ion-modal>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime-button/basic/index.md b/static/usage/v6/datetime-button/basic/index.md
new file mode 100644
index 00000000000..c835c072c58
--- /dev/null
+++ b/static/usage/v6/datetime-button/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/v6/datetime-button/basic/demo.html" />
diff --git a/static/usage/datetime-button/basic/javascript.md b/static/usage/v6/datetime-button/basic/javascript.md
similarity index 100%
rename from static/usage/datetime-button/basic/javascript.md
rename to static/usage/v6/datetime-button/basic/javascript.md
diff --git a/static/usage/datetime-button/basic/react.md b/static/usage/v6/datetime-button/basic/react.md
similarity index 100%
rename from static/usage/datetime-button/basic/react.md
rename to static/usage/v6/datetime-button/basic/react.md
diff --git a/static/usage/datetime-button/basic/vue.md b/static/usage/v6/datetime-button/basic/vue.md
similarity index 100%
rename from static/usage/datetime-button/basic/vue.md
rename to static/usage/v6/datetime-button/basic/vue.md
diff --git a/static/usage/datetime/basic/angular.md b/static/usage/v6/datetime/basic/angular.md
similarity index 100%
rename from static/usage/datetime/basic/angular.md
rename to static/usage/v6/datetime/basic/angular.md
diff --git a/static/usage/v6/datetime/basic/demo.html b/static/usage/v6/datetime/basic/demo.html
new file mode 100644
index 00000000000..a3945e21ce9
--- /dev/null
+++ b/static/usage/v6/datetime/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/basic/index.md b/static/usage/v6/datetime/basic/index.md
new file mode 100644
index 00000000000..d63897a88e0
--- /dev/null
+++ b/static/usage/v6/datetime/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/v6/datetime/basic/demo.html" />
diff --git a/static/usage/datetime/basic/javascript.md b/static/usage/v6/datetime/basic/javascript.md
similarity index 100%
rename from static/usage/datetime/basic/javascript.md
rename to static/usage/v6/datetime/basic/javascript.md
diff --git a/static/usage/datetime/basic/react.md b/static/usage/v6/datetime/basic/react.md
similarity index 100%
rename from static/usage/datetime/basic/react.md
rename to static/usage/v6/datetime/basic/react.md
diff --git a/static/usage/datetime/basic/vue.md b/static/usage/v6/datetime/basic/vue.md
similarity index 100%
rename from static/usage/datetime/basic/vue.md
rename to static/usage/v6/datetime/basic/vue.md
diff --git a/static/usage/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v6/datetime/buttons/customizing-button-texts/angular.md
similarity index 100%
rename from static/usage/datetime/buttons/customizing-button-texts/angular.md
rename to static/usage/v6/datetime/buttons/customizing-button-texts/angular.md
diff --git a/static/usage/v6/datetime/buttons/customizing-button-texts/demo.html b/static/usage/v6/datetime/buttons/customizing-button-texts/demo.html
new file mode 100644
index 00000000000..44074047aca
--- /dev/null
+++ b/static/usage/v6/datetime/buttons/customizing-button-texts/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+      min-height: 400px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime show-default-buttons="true" done-text="All set" cancel-text="Never mind"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/buttons/customizing-button-texts/index.md b/static/usage/v6/datetime/buttons/customizing-button-texts/index.md
new file mode 100644
index 00000000000..01c27026f13
--- /dev/null
+++ b/static/usage/v6/datetime/buttons/customizing-button-texts/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="500px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/buttons/customizing-button-texts/demo.html"
+/>
diff --git a/static/usage/datetime/buttons/customizing-button-texts/javascript.md b/static/usage/v6/datetime/buttons/customizing-button-texts/javascript.md
similarity index 100%
rename from static/usage/datetime/buttons/customizing-button-texts/javascript.md
rename to static/usage/v6/datetime/buttons/customizing-button-texts/javascript.md
diff --git a/static/usage/datetime/buttons/customizing-button-texts/react.md b/static/usage/v6/datetime/buttons/customizing-button-texts/react.md
similarity index 100%
rename from static/usage/datetime/buttons/customizing-button-texts/react.md
rename to static/usage/v6/datetime/buttons/customizing-button-texts/react.md
diff --git a/static/usage/datetime/buttons/customizing-button-texts/vue.md b/static/usage/v6/datetime/buttons/customizing-button-texts/vue.md
similarity index 100%
rename from static/usage/datetime/buttons/customizing-button-texts/vue.md
rename to static/usage/v6/datetime/buttons/customizing-button-texts/vue.md
diff --git a/static/usage/datetime/buttons/customizing-buttons/angular.md b/static/usage/v6/datetime/buttons/customizing-buttons/angular.md
similarity index 100%
rename from static/usage/datetime/buttons/customizing-buttons/angular.md
rename to static/usage/v6/datetime/buttons/customizing-buttons/angular.md
diff --git a/static/usage/v6/datetime/buttons/customizing-buttons/demo.html b/static/usage/v6/datetime/buttons/customizing-buttons/demo.html
new file mode 100644
index 00000000000..d0ce780da3d
--- /dev/null
+++ b/static/usage/v6/datetime/buttons/customizing-buttons/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+      min-height: 400px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime>
+          <ion-buttons slot="buttons">
+            <ion-button color="danger" onclick="datetime.reset()">Reset</ion-button>
+            <ion-button color="primary" onclick="datetime.cancel()">Never mind</ion-button>
+            <ion-button color="primary" onclick="datetime.confirm()">All Set</ion-button>
+          </ion-buttons>
+        </ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/buttons/customizing-buttons/index.md b/static/usage/v6/datetime/buttons/customizing-buttons/index.md
new file mode 100644
index 00000000000..8ae133878d9
--- /dev/null
+++ b/static/usage/v6/datetime/buttons/customizing-buttons/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="500px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/buttons/customizing-buttons/demo.html"
+/>
diff --git a/static/usage/datetime/buttons/customizing-buttons/javascript.md b/static/usage/v6/datetime/buttons/customizing-buttons/javascript.md
similarity index 100%
rename from static/usage/datetime/buttons/customizing-buttons/javascript.md
rename to static/usage/v6/datetime/buttons/customizing-buttons/javascript.md
diff --git a/static/usage/datetime/buttons/customizing-buttons/react.md b/static/usage/v6/datetime/buttons/customizing-buttons/react.md
similarity index 100%
rename from static/usage/datetime/buttons/customizing-buttons/react.md
rename to static/usage/v6/datetime/buttons/customizing-buttons/react.md
diff --git a/static/usage/datetime/buttons/customizing-buttons/vue.md b/static/usage/v6/datetime/buttons/customizing-buttons/vue.md
similarity index 100%
rename from static/usage/datetime/buttons/customizing-buttons/vue.md
rename to static/usage/v6/datetime/buttons/customizing-buttons/vue.md
diff --git a/static/usage/datetime/buttons/showing-confirmation-buttons/angular.md b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/angular.md
similarity index 100%
rename from static/usage/datetime/buttons/showing-confirmation-buttons/angular.md
rename to static/usage/v6/datetime/buttons/showing-confirmation-buttons/angular.md
diff --git a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html
new file mode 100644
index 00000000000..54b26b53f90
--- /dev/null
+++ b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+      min-height: 400px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime show-default-buttons="true"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md
new file mode 100644
index 00000000000..eac02cfaf31
--- /dev/null
+++ b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="500px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html"
+/>
diff --git a/static/usage/datetime/buttons/showing-confirmation-buttons/javascript.md b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/javascript.md
similarity index 100%
rename from static/usage/datetime/buttons/showing-confirmation-buttons/javascript.md
rename to static/usage/v6/datetime/buttons/showing-confirmation-buttons/javascript.md
diff --git a/static/usage/datetime/buttons/showing-confirmation-buttons/react.md b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/react.md
similarity index 100%
rename from static/usage/datetime/buttons/showing-confirmation-buttons/react.md
rename to static/usage/v6/datetime/buttons/showing-confirmation-buttons/react.md
diff --git a/static/usage/datetime/buttons/showing-confirmation-buttons/vue.md b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/vue.md
similarity index 100%
rename from static/usage/datetime/buttons/showing-confirmation-buttons/vue.md
rename to static/usage/v6/datetime/buttons/showing-confirmation-buttons/vue.md
diff --git a/static/usage/datetime/date-constraints/advanced/angular/example_component_html.md b/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_html.md
similarity index 100%
rename from static/usage/datetime/date-constraints/advanced/angular/example_component_html.md
rename to static/usage/v6/datetime/date-constraints/advanced/angular/example_component_html.md
diff --git a/static/usage/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md
similarity index 100%
rename from static/usage/datetime/date-constraints/advanced/angular/example_component_ts.md
rename to static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md
diff --git a/static/usage/v6/datetime/date-constraints/advanced/demo.html b/static/usage/v6/datetime/date-constraints/advanced/demo.html
new file mode 100644
index 00000000000..b7650f3740d
--- /dev/null
+++ b/static/usage/v6/datetime/date-constraints/advanced/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.isDateEnabled = (dateString) => {
+      const date = new Date(dateString);
+      const utcDay = date.getUTCDay();
+
+      /**
+       * Date will be enabled if it is not
+       * Sunday or Saturday
+       */
+      return utcDay !== 0 && utcDay !== 6;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/date-constraints/advanced/index.md b/static/usage/v6/datetime/date-constraints/advanced/index.md
new file mode 100644
index 00000000000..559f102f49c
--- /dev/null
+++ b/static/usage/v6/datetime/date-constraints/advanced/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="medium"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/datetime/date-constraints/advanced/demo.html"
+/>
diff --git a/static/usage/datetime/date-constraints/advanced/javascript.md b/static/usage/v6/datetime/date-constraints/advanced/javascript.md
similarity index 100%
rename from static/usage/datetime/date-constraints/advanced/javascript.md
rename to static/usage/v6/datetime/date-constraints/advanced/javascript.md
diff --git a/static/usage/datetime/date-constraints/advanced/react.md b/static/usage/v6/datetime/date-constraints/advanced/react.md
similarity index 100%
rename from static/usage/datetime/date-constraints/advanced/react.md
rename to static/usage/v6/datetime/date-constraints/advanced/react.md
diff --git a/static/usage/datetime/date-constraints/advanced/vue.md b/static/usage/v6/datetime/date-constraints/advanced/vue.md
similarity index 100%
rename from static/usage/datetime/date-constraints/advanced/vue.md
rename to static/usage/v6/datetime/date-constraints/advanced/vue.md
diff --git a/static/usage/datetime/date-constraints/max-min/angular.md b/static/usage/v6/datetime/date-constraints/max-min/angular.md
similarity index 100%
rename from static/usage/datetime/date-constraints/max-min/angular.md
rename to static/usage/v6/datetime/date-constraints/max-min/angular.md
diff --git a/static/usage/v6/datetime/date-constraints/max-min/demo.html b/static/usage/v6/datetime/date-constraints/max-min/demo.html
new file mode 100644
index 00000000000..b1f9e57810d
--- /dev/null
+++ b/static/usage/v6/datetime/date-constraints/max-min/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/date-constraints/max-min/index.md b/static/usage/v6/datetime/date-constraints/max-min/index.md
new file mode 100644
index 00000000000..efebb40972c
--- /dev/null
+++ b/static/usage/v6/datetime/date-constraints/max-min/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/date-constraints/max-min/demo.html"
+/>
diff --git a/static/usage/datetime/date-constraints/max-min/javascript.md b/static/usage/v6/datetime/date-constraints/max-min/javascript.md
similarity index 100%
rename from static/usage/datetime/date-constraints/max-min/javascript.md
rename to static/usage/v6/datetime/date-constraints/max-min/javascript.md
diff --git a/static/usage/datetime/date-constraints/max-min/react.md b/static/usage/v6/datetime/date-constraints/max-min/react.md
similarity index 100%
rename from static/usage/datetime/date-constraints/max-min/react.md
rename to static/usage/v6/datetime/date-constraints/max-min/react.md
diff --git a/static/usage/datetime/date-constraints/max-min/vue.md b/static/usage/v6/datetime/date-constraints/max-min/vue.md
similarity index 100%
rename from static/usage/datetime/date-constraints/max-min/vue.md
rename to static/usage/v6/datetime/date-constraints/max-min/vue.md
diff --git a/static/usage/datetime/date-constraints/values/angular.md b/static/usage/v6/datetime/date-constraints/values/angular.md
similarity index 100%
rename from static/usage/datetime/date-constraints/values/angular.md
rename to static/usage/v6/datetime/date-constraints/values/angular.md
diff --git a/static/usage/v6/datetime/date-constraints/values/demo.html b/static/usage/v6/datetime/date-constraints/values/demo.html
new file mode 100644
index 00000000000..ba560da4969
--- /dev/null
+++ b/static/usage/v6/datetime/date-constraints/values/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime minute-values="0,15,30,45" day-values="5,10,15,20,25,30"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/date-constraints/values/index.md b/static/usage/v6/datetime/date-constraints/values/index.md
new file mode 100644
index 00000000000..e1bc1900d1f
--- /dev/null
+++ b/static/usage/v6/datetime/date-constraints/values/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/date-constraints/values/demo.html"
+/>
diff --git a/static/usage/datetime/date-constraints/values/javascript.md b/static/usage/v6/datetime/date-constraints/values/javascript.md
similarity index 100%
rename from static/usage/datetime/date-constraints/values/javascript.md
rename to static/usage/v6/datetime/date-constraints/values/javascript.md
diff --git a/static/usage/datetime/date-constraints/values/react.md b/static/usage/v6/datetime/date-constraints/values/react.md
similarity index 100%
rename from static/usage/datetime/date-constraints/values/react.md
rename to static/usage/v6/datetime/date-constraints/values/react.md
diff --git a/static/usage/datetime/date-constraints/values/vue.md b/static/usage/v6/datetime/date-constraints/values/vue.md
similarity index 100%
rename from static/usage/datetime/date-constraints/values/vue.md
rename to static/usage/v6/datetime/date-constraints/values/vue.md
diff --git a/static/usage/datetime/localization/custom-locale/angular.md b/static/usage/v6/datetime/localization/custom-locale/angular.md
similarity index 100%
rename from static/usage/datetime/localization/custom-locale/angular.md
rename to static/usage/v6/datetime/localization/custom-locale/angular.md
diff --git a/static/usage/v6/datetime/localization/custom-locale/demo.html b/static/usage/v6/datetime/localization/custom-locale/demo.html
new file mode 100644
index 00000000000..70e266f3402
--- /dev/null
+++ b/static/usage/v6/datetime/localization/custom-locale/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime locale="es-ES"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/localization/custom-locale/index.md b/static/usage/v6/datetime/localization/custom-locale/index.md
new file mode 100644
index 00000000000..4b099f67d75
--- /dev/null
+++ b/static/usage/v6/datetime/localization/custom-locale/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/localization/custom-locale/demo.html"
+/>
diff --git a/static/usage/datetime/localization/custom-locale/javascript.md b/static/usage/v6/datetime/localization/custom-locale/javascript.md
similarity index 100%
rename from static/usage/datetime/localization/custom-locale/javascript.md
rename to static/usage/v6/datetime/localization/custom-locale/javascript.md
diff --git a/static/usage/datetime/localization/custom-locale/react.md b/static/usage/v6/datetime/localization/custom-locale/react.md
similarity index 100%
rename from static/usage/datetime/localization/custom-locale/react.md
rename to static/usage/v6/datetime/localization/custom-locale/react.md
diff --git a/static/usage/datetime/localization/custom-locale/vue.md b/static/usage/v6/datetime/localization/custom-locale/vue.md
similarity index 100%
rename from static/usage/datetime/localization/custom-locale/vue.md
rename to static/usage/v6/datetime/localization/custom-locale/vue.md
diff --git a/static/usage/datetime/localization/first-day-of-week/angular.md b/static/usage/v6/datetime/localization/first-day-of-week/angular.md
similarity index 100%
rename from static/usage/datetime/localization/first-day-of-week/angular.md
rename to static/usage/v6/datetime/localization/first-day-of-week/angular.md
diff --git a/static/usage/v6/datetime/localization/first-day-of-week/demo.html b/static/usage/v6/datetime/localization/first-day-of-week/demo.html
new file mode 100644
index 00000000000..ce555ed4b74
--- /dev/null
+++ b/static/usage/v6/datetime/localization/first-day-of-week/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime first-day-of-week="1"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/localization/first-day-of-week/index.md b/static/usage/v6/datetime/localization/first-day-of-week/index.md
new file mode 100644
index 00000000000..d837e73176f
--- /dev/null
+++ b/static/usage/v6/datetime/localization/first-day-of-week/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/localization/first-day-of-week/demo.html"
+/>
diff --git a/static/usage/datetime/localization/first-day-of-week/javascript.md b/static/usage/v6/datetime/localization/first-day-of-week/javascript.md
similarity index 100%
rename from static/usage/datetime/localization/first-day-of-week/javascript.md
rename to static/usage/v6/datetime/localization/first-day-of-week/javascript.md
diff --git a/static/usage/datetime/localization/first-day-of-week/react.md b/static/usage/v6/datetime/localization/first-day-of-week/react.md
similarity index 100%
rename from static/usage/datetime/localization/first-day-of-week/react.md
rename to static/usage/v6/datetime/localization/first-day-of-week/react.md
diff --git a/static/usage/datetime/localization/first-day-of-week/vue.md b/static/usage/v6/datetime/localization/first-day-of-week/vue.md
similarity index 100%
rename from static/usage/datetime/localization/first-day-of-week/vue.md
rename to static/usage/v6/datetime/localization/first-day-of-week/vue.md
diff --git a/static/usage/datetime/localization/hour-cycle/angular.md b/static/usage/v6/datetime/localization/hour-cycle/angular.md
similarity index 100%
rename from static/usage/datetime/localization/hour-cycle/angular.md
rename to static/usage/v6/datetime/localization/hour-cycle/angular.md
diff --git a/static/usage/v6/datetime/localization/hour-cycle/demo.html b/static/usage/v6/datetime/localization/hour-cycle/demo.html
new file mode 100644
index 00000000000..db65b072c82
--- /dev/null
+++ b/static/usage/v6/datetime/localization/hour-cycle/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime locale="en-GB" hour-cycle="h12"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/localization/hour-cycle/index.md b/static/usage/v6/datetime/localization/hour-cycle/index.md
new file mode 100644
index 00000000000..528447c273c
--- /dev/null
+++ b/static/usage/v6/datetime/localization/hour-cycle/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/localization/hour-cycle/demo.html"
+/>
diff --git a/static/usage/datetime/localization/hour-cycle/javascript.md b/static/usage/v6/datetime/localization/hour-cycle/javascript.md
similarity index 100%
rename from static/usage/datetime/localization/hour-cycle/javascript.md
rename to static/usage/v6/datetime/localization/hour-cycle/javascript.md
diff --git a/static/usage/datetime/localization/hour-cycle/react.md b/static/usage/v6/datetime/localization/hour-cycle/react.md
similarity index 100%
rename from static/usage/datetime/localization/hour-cycle/react.md
rename to static/usage/v6/datetime/localization/hour-cycle/react.md
diff --git a/static/usage/datetime/localization/hour-cycle/vue.md b/static/usage/v6/datetime/localization/hour-cycle/vue.md
similarity index 100%
rename from static/usage/datetime/localization/hour-cycle/vue.md
rename to static/usage/v6/datetime/localization/hour-cycle/vue.md
diff --git a/static/usage/datetime/localization/locale-extension-tags/angular.md b/static/usage/v6/datetime/localization/locale-extension-tags/angular.md
similarity index 100%
rename from static/usage/datetime/localization/locale-extension-tags/angular.md
rename to static/usage/v6/datetime/localization/locale-extension-tags/angular.md
diff --git a/static/usage/v6/datetime/localization/locale-extension-tags/demo.html b/static/usage/v6/datetime/localization/locale-extension-tags/demo.html
new file mode 100644
index 00000000000..6d7328eddf6
--- /dev/null
+++ b/static/usage/v6/datetime/localization/locale-extension-tags/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/localization/locale-extension-tags/index.md b/static/usage/v6/datetime/localization/locale-extension-tags/index.md
new file mode 100644
index 00000000000..ed3ef3875f9
--- /dev/null
+++ b/static/usage/v6/datetime/localization/locale-extension-tags/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/localization/locale-extension-tags/demo.html"
+/>
diff --git a/static/usage/datetime/localization/locale-extension-tags/javascript.md b/static/usage/v6/datetime/localization/locale-extension-tags/javascript.md
similarity index 100%
rename from static/usage/datetime/localization/locale-extension-tags/javascript.md
rename to static/usage/v6/datetime/localization/locale-extension-tags/javascript.md
diff --git a/static/usage/datetime/localization/locale-extension-tags/react.md b/static/usage/v6/datetime/localization/locale-extension-tags/react.md
similarity index 100%
rename from static/usage/datetime/localization/locale-extension-tags/react.md
rename to static/usage/v6/datetime/localization/locale-extension-tags/react.md
diff --git a/static/usage/datetime/localization/locale-extension-tags/vue.md b/static/usage/v6/datetime/localization/locale-extension-tags/vue.md
similarity index 100%
rename from static/usage/datetime/localization/locale-extension-tags/vue.md
rename to static/usage/v6/datetime/localization/locale-extension-tags/vue.md
diff --git a/static/usage/datetime/localization/time-label/angular.md b/static/usage/v6/datetime/localization/time-label/angular.md
similarity index 100%
rename from static/usage/datetime/localization/time-label/angular.md
rename to static/usage/v6/datetime/localization/time-label/angular.md
diff --git a/static/usage/v6/datetime/localization/time-label/demo.html b/static/usage/v6/datetime/localization/time-label/demo.html
new file mode 100644
index 00000000000..8ad93461f78
--- /dev/null
+++ b/static/usage/v6/datetime/localization/time-label/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime locale="es-ES">
+          <span slot="time-label">Tiempo</span>
+        </ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/localization/time-label/index.md b/static/usage/v6/datetime/localization/time-label/index.md
new file mode 100644
index 00000000000..8f879d68807
--- /dev/null
+++ b/static/usage/v6/datetime/localization/time-label/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/localization/time-label/demo.html"
+/>
diff --git a/static/usage/datetime/localization/time-label/javascript.md b/static/usage/v6/datetime/localization/time-label/javascript.md
similarity index 100%
rename from static/usage/datetime/localization/time-label/javascript.md
rename to static/usage/v6/datetime/localization/time-label/javascript.md
diff --git a/static/usage/datetime/localization/time-label/react.md b/static/usage/v6/datetime/localization/time-label/react.md
similarity index 100%
rename from static/usage/datetime/localization/time-label/react.md
rename to static/usage/v6/datetime/localization/time-label/react.md
diff --git a/static/usage/datetime/localization/time-label/vue.md b/static/usage/v6/datetime/localization/time-label/vue.md
similarity index 100%
rename from static/usage/datetime/localization/time-label/vue.md
rename to static/usage/v6/datetime/localization/time-label/vue.md
diff --git a/static/usage/datetime/multiple/angular.md b/static/usage/v6/datetime/multiple/angular.md
similarity index 100%
rename from static/usage/datetime/multiple/angular.md
rename to static/usage/v6/datetime/multiple/angular.md
diff --git a/static/usage/v6/datetime/multiple/demo.html b/static/usage/v6/datetime/multiple/demo.html
new file mode 100644
index 00000000000..43edb188016
--- /dev/null
+++ b/static/usage/v6/datetime/multiple/demo.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date" multiple="true"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/multiple/index.md b/static/usage/v6/datetime/multiple/index.md
new file mode 100644
index 00000000000..89d02155e38
--- /dev/null
+++ b/static/usage/v6/datetime/multiple/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/v6/datetime/multiple/demo.html" />
diff --git a/static/usage/datetime/multiple/javascript.md b/static/usage/v6/datetime/multiple/javascript.md
similarity index 100%
rename from static/usage/datetime/multiple/javascript.md
rename to static/usage/v6/datetime/multiple/javascript.md
diff --git a/static/usage/datetime/multiple/react.md b/static/usage/v6/datetime/multiple/react.md
similarity index 100%
rename from static/usage/datetime/multiple/react.md
rename to static/usage/v6/datetime/multiple/react.md
diff --git a/static/usage/datetime/multiple/vue.md b/static/usage/v6/datetime/multiple/vue.md
similarity index 100%
rename from static/usage/datetime/multiple/vue.md
rename to static/usage/v6/datetime/multiple/vue.md
diff --git a/static/usage/datetime/presentation/date/angular.md b/static/usage/v6/datetime/presentation/date/angular.md
similarity index 100%
rename from static/usage/datetime/presentation/date/angular.md
rename to static/usage/v6/datetime/presentation/date/angular.md
diff --git a/static/usage/v6/datetime/presentation/date/demo.html b/static/usage/v6/datetime/presentation/date/demo.html
new file mode 100644
index 00000000000..ca76bcec306
--- /dev/null
+++ b/static/usage/v6/datetime/presentation/date/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/presentation/date/index.md b/static/usage/v6/datetime/presentation/date/index.md
new file mode 100644
index 00000000000..da12ceaaf60
--- /dev/null
+++ b/static/usage/v6/datetime/presentation/date/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/presentation/date/demo.html"
+/>
diff --git a/static/usage/datetime/presentation/date/javascript.md b/static/usage/v6/datetime/presentation/date/javascript.md
similarity index 100%
rename from static/usage/datetime/presentation/date/javascript.md
rename to static/usage/v6/datetime/presentation/date/javascript.md
diff --git a/static/usage/datetime/presentation/date/react.md b/static/usage/v6/datetime/presentation/date/react.md
similarity index 100%
rename from static/usage/datetime/presentation/date/react.md
rename to static/usage/v6/datetime/presentation/date/react.md
diff --git a/static/usage/datetime/presentation/date/vue.md b/static/usage/v6/datetime/presentation/date/vue.md
similarity index 100%
rename from static/usage/datetime/presentation/date/vue.md
rename to static/usage/v6/datetime/presentation/date/vue.md
diff --git a/static/usage/datetime/presentation/month-and-year/angular.md b/static/usage/v6/datetime/presentation/month-and-year/angular.md
similarity index 100%
rename from static/usage/datetime/presentation/month-and-year/angular.md
rename to static/usage/v6/datetime/presentation/month-and-year/angular.md
diff --git a/static/usage/v6/datetime/presentation/month-and-year/demo.html b/static/usage/v6/datetime/presentation/month-and-year/demo.html
new file mode 100644
index 00000000000..58fa960c863
--- /dev/null
+++ b/static/usage/v6/datetime/presentation/month-and-year/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="month-year"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/presentation/month-and-year/index.md b/static/usage/v6/datetime/presentation/month-and-year/index.md
new file mode 100644
index 00000000000..949de3ccdba
--- /dev/null
+++ b/static/usage/v6/datetime/presentation/month-and-year/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="240px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/presentation/month-and-year/demo.html"
+/>
diff --git a/static/usage/datetime/presentation/month-and-year/javascript.md b/static/usage/v6/datetime/presentation/month-and-year/javascript.md
similarity index 100%
rename from static/usage/datetime/presentation/month-and-year/javascript.md
rename to static/usage/v6/datetime/presentation/month-and-year/javascript.md
diff --git a/static/usage/datetime/presentation/month-and-year/react.md b/static/usage/v6/datetime/presentation/month-and-year/react.md
similarity index 100%
rename from static/usage/datetime/presentation/month-and-year/react.md
rename to static/usage/v6/datetime/presentation/month-and-year/react.md
diff --git a/static/usage/datetime/presentation/month-and-year/vue.md b/static/usage/v6/datetime/presentation/month-and-year/vue.md
similarity index 100%
rename from static/usage/datetime/presentation/month-and-year/vue.md
rename to static/usage/v6/datetime/presentation/month-and-year/vue.md
diff --git a/static/usage/datetime/presentation/time/angular.md b/static/usage/v6/datetime/presentation/time/angular.md
similarity index 100%
rename from static/usage/datetime/presentation/time/angular.md
rename to static/usage/v6/datetime/presentation/time/angular.md
diff --git a/static/usage/v6/datetime/presentation/time/demo.html b/static/usage/v6/datetime/presentation/time/demo.html
new file mode 100644
index 00000000000..7ea21d3f4d5
--- /dev/null
+++ b/static/usage/v6/datetime/presentation/time/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="time"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/presentation/time/index.md b/static/usage/v6/datetime/presentation/time/index.md
new file mode 100644
index 00000000000..9b556ffda89
--- /dev/null
+++ b/static/usage/v6/datetime/presentation/time/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/datetime/presentation/time/demo.html" />
diff --git a/static/usage/datetime/presentation/time/javascript.md b/static/usage/v6/datetime/presentation/time/javascript.md
similarity index 100%
rename from static/usage/datetime/presentation/time/javascript.md
rename to static/usage/v6/datetime/presentation/time/javascript.md
diff --git a/static/usage/datetime/presentation/time/react.md b/static/usage/v6/datetime/presentation/time/react.md
similarity index 100%
rename from static/usage/datetime/presentation/time/react.md
rename to static/usage/v6/datetime/presentation/time/react.md
diff --git a/static/usage/datetime/presentation/time/vue.md b/static/usage/v6/datetime/presentation/time/vue.md
similarity index 100%
rename from static/usage/datetime/presentation/time/vue.md
rename to static/usage/v6/datetime/presentation/time/vue.md
diff --git a/static/usage/datetime/presentation/wheel/angular.md b/static/usage/v6/datetime/presentation/wheel/angular.md
similarity index 100%
rename from static/usage/datetime/presentation/wheel/angular.md
rename to static/usage/v6/datetime/presentation/wheel/angular.md
diff --git a/static/usage/v6/datetime/presentation/wheel/demo.html b/static/usage/v6/datetime/presentation/wheel/demo.html
new file mode 100644
index 00000000000..5b2028d4a6b
--- /dev/null
+++ b/static/usage/v6/datetime/presentation/wheel/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date-time" prefer-wheel="true"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/presentation/wheel/index.md b/static/usage/v6/datetime/presentation/wheel/index.md
new file mode 100644
index 00000000000..e187340b607
--- /dev/null
+++ b/static/usage/v6/datetime/presentation/wheel/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/presentation/wheel/demo.html"
+/>
diff --git a/static/usage/datetime/presentation/wheel/javascript.md b/static/usage/v6/datetime/presentation/wheel/javascript.md
similarity index 100%
rename from static/usage/datetime/presentation/wheel/javascript.md
rename to static/usage/v6/datetime/presentation/wheel/javascript.md
diff --git a/static/usage/datetime/presentation/wheel/react.md b/static/usage/v6/datetime/presentation/wheel/react.md
similarity index 100%
rename from static/usage/datetime/presentation/wheel/react.md
rename to static/usage/v6/datetime/presentation/wheel/react.md
diff --git a/static/usage/datetime/presentation/wheel/vue.md b/static/usage/v6/datetime/presentation/wheel/vue.md
similarity index 100%
rename from static/usage/datetime/presentation/wheel/vue.md
rename to static/usage/v6/datetime/presentation/wheel/vue.md
diff --git a/static/usage/datetime/theming/angular/example_component_html.md b/static/usage/v6/datetime/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/datetime/theming/angular/example_component_html.md
rename to static/usage/v6/datetime/theming/angular/example_component_html.md
diff --git a/static/usage/datetime/theming/angular/global_css.md b/static/usage/v6/datetime/theming/angular/global_css.md
similarity index 100%
rename from static/usage/datetime/theming/angular/global_css.md
rename to static/usage/v6/datetime/theming/angular/global_css.md
diff --git a/static/usage/v6/datetime/theming/demo.html b/static/usage/v6/datetime/theming/demo.html
new file mode 100644
index 00000000000..e50a5576c63
--- /dev/null
+++ b/static/usage/v6/datetime/theming/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    :root,
+    .ios body.dark,
+    .md body.dark {
+      --ion-color-rose: #831843;
+      --ion-color-rose-rgb: 131, 24, 67;
+      --ion-color-rose-contrast: #ffffff;
+      --ion-color-rose-contrast-rgb: 255, 255, 255;
+      --ion-color-rose-shade: #73153b;
+      --ion-color-rose-tint: #8f2f56;
+
+      --ion-text-color: #881337;
+      --ion-text-color-rgb: 136, 19, 55;
+
+      --ion-color-step-50: #f9e6e9;
+      --ion-color-step-100: #f3dbdf;
+      --ion-color-step-150: #edd0d6;
+      --ion-color-step-200: #e7c5cd;
+      --ion-color-step-250: #e1bac3;
+      --ion-color-step-300: #dbaeba;
+      --ion-color-step-350: #d5a3b1;
+      --ion-color-step-400: #cf98a7;
+      --ion-color-step-450: #c98d9e;
+      --ion-color-step-500: #c48295;
+      --ion-color-step-550: #be778b;
+      --ion-color-step-600: #b86c82;
+      --ion-color-step-650: #b26178;
+      --ion-color-step-700: #ac566f;
+      --ion-color-step-750: #a64b66;
+      --ion-color-step-800: #a03f5c;
+      --ion-color-step-850: #9a3453;
+      --ion-color-step-900: #94294a;
+      --ion-color-step-950: #8e1e40;
+    }
+
+    .ion-color-rose {
+      --ion-color-base: var(--ion-color-rose);
+      --ion-color-base-rgb: var(--ion-color-rose-rgb);
+      --ion-color-contrast: var(--ion-color-rose-contrast);
+      --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+      --ion-color-shade: var(--ion-color-rose-shade);
+      --ion-color-tint: var(--ion-color-rose-tint);
+    }
+
+    ion-datetime {
+      --background: #fff1f2;
+      --background-rgb: 255, 241, 242;
+
+      width: 350px;
+
+      border-radius: 16px;
+      box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime color="rose"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/theming/index.md b/static/usage/v6/datetime/theming/index.md
new file mode 100644
index 00000000000..280d490b5c3
--- /dev/null
+++ b/static/usage/v6/datetime/theming/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  size="450px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v6/datetime/theming/demo.html"
+/>
diff --git a/static/usage/datetime/theming/javascript.md b/static/usage/v6/datetime/theming/javascript.md
similarity index 100%
rename from static/usage/datetime/theming/javascript.md
rename to static/usage/v6/datetime/theming/javascript.md
diff --git a/static/usage/datetime/theming/react/main_css.md b/static/usage/v6/datetime/theming/react/main_css.md
similarity index 100%
rename from static/usage/datetime/theming/react/main_css.md
rename to static/usage/v6/datetime/theming/react/main_css.md
diff --git a/static/usage/datetime/theming/react/main_tsx.md b/static/usage/v6/datetime/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/datetime/theming/react/main_tsx.md
rename to static/usage/v6/datetime/theming/react/main_tsx.md
diff --git a/static/usage/datetime/theming/vue.md b/static/usage/v6/datetime/theming/vue.md
similarity index 100%
rename from static/usage/datetime/theming/vue.md
rename to static/usage/v6/datetime/theming/vue.md
diff --git a/static/usage/datetime/title/customizing-title/angular.md b/static/usage/v6/datetime/title/customizing-title/angular.md
similarity index 100%
rename from static/usage/datetime/title/customizing-title/angular.md
rename to static/usage/v6/datetime/title/customizing-title/angular.md
diff --git a/static/usage/v6/datetime/title/customizing-title/demo.html b/static/usage/v6/datetime/title/customizing-title/demo.html
new file mode 100644
index 00000000000..ab7ead5aca6
--- /dev/null
+++ b/static/usage/v6/datetime/title/customizing-title/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime>
+          <span slot="title">Select a Reservation Date</span>
+        </ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/title/customizing-title/index.md b/static/usage/v6/datetime/title/customizing-title/index.md
new file mode 100644
index 00000000000..a9aa5d8b67e
--- /dev/null
+++ b/static/usage/v6/datetime/title/customizing-title/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="large"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/title/customizing-title/demo.html"
+/>
diff --git a/static/usage/datetime/title/customizing-title/javascript.md b/static/usage/v6/datetime/title/customizing-title/javascript.md
similarity index 100%
rename from static/usage/datetime/title/customizing-title/javascript.md
rename to static/usage/v6/datetime/title/customizing-title/javascript.md
diff --git a/static/usage/datetime/title/customizing-title/react.md b/static/usage/v6/datetime/title/customizing-title/react.md
similarity index 100%
rename from static/usage/datetime/title/customizing-title/react.md
rename to static/usage/v6/datetime/title/customizing-title/react.md
diff --git a/static/usage/datetime/title/customizing-title/vue.md b/static/usage/v6/datetime/title/customizing-title/vue.md
similarity index 100%
rename from static/usage/datetime/title/customizing-title/vue.md
rename to static/usage/v6/datetime/title/customizing-title/vue.md
diff --git a/static/usage/datetime/title/showing-default-title/angular.md b/static/usage/v6/datetime/title/showing-default-title/angular.md
similarity index 100%
rename from static/usage/datetime/title/showing-default-title/angular.md
rename to static/usage/v6/datetime/title/showing-default-title/angular.md
diff --git a/static/usage/v6/datetime/title/showing-default-title/demo.html b/static/usage/v6/datetime/title/showing-default-title/demo.html
new file mode 100644
index 00000000000..3d725f9eb92
--- /dev/null
+++ b/static/usage/v6/datetime/title/showing-default-title/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime show-default-title="true"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/title/showing-default-title/index.md b/static/usage/v6/datetime/title/showing-default-title/index.md
new file mode 100644
index 00000000000..f4ad4c455cd
--- /dev/null
+++ b/static/usage/v6/datetime/title/showing-default-title/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="large"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/title/showing-default-title/demo.html"
+/>
diff --git a/static/usage/datetime/title/showing-default-title/javascript.md b/static/usage/v6/datetime/title/showing-default-title/javascript.md
similarity index 100%
rename from static/usage/datetime/title/showing-default-title/javascript.md
rename to static/usage/v6/datetime/title/showing-default-title/javascript.md
diff --git a/static/usage/datetime/title/showing-default-title/react.md b/static/usage/v6/datetime/title/showing-default-title/react.md
similarity index 100%
rename from static/usage/datetime/title/showing-default-title/react.md
rename to static/usage/v6/datetime/title/showing-default-title/react.md
diff --git a/static/usage/datetime/title/showing-default-title/vue.md b/static/usage/v6/datetime/title/showing-default-title/vue.md
similarity index 100%
rename from static/usage/datetime/title/showing-default-title/vue.md
rename to static/usage/v6/datetime/title/showing-default-title/vue.md
diff --git a/static/usage/fab/basic/angular.md b/static/usage/v6/fab/basic/angular.md
similarity index 100%
rename from static/usage/fab/basic/angular.md
rename to static/usage/v6/fab/basic/angular.md
diff --git a/static/usage/v6/fab/basic/demo.html b/static/usage/v6/fab/basic/demo.html
new file mode 100644
index 00000000000..bf3ddf18220
--- /dev/null
+++ b/static/usage/v6/fab/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab>
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/fab/basic/index.md b/static/usage/v6/fab/basic/index.md
new file mode 100644
index 00000000000..37811091d30
--- /dev/null
+++ b/static/usage/v6/fab/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/fab/basic/demo.html" />
diff --git a/static/usage/fab/basic/javascript.md b/static/usage/v6/fab/basic/javascript.md
similarity index 100%
rename from static/usage/fab/basic/javascript.md
rename to static/usage/v6/fab/basic/javascript.md
diff --git a/static/usage/fab/basic/react.md b/static/usage/v6/fab/basic/react.md
similarity index 100%
rename from static/usage/fab/basic/react.md
rename to static/usage/v6/fab/basic/react.md
diff --git a/static/usage/fab/basic/vue.md b/static/usage/v6/fab/basic/vue.md
similarity index 100%
rename from static/usage/fab/basic/vue.md
rename to static/usage/v6/fab/basic/vue.md
diff --git a/static/usage/fab/button-sizing/angular.md b/static/usage/v6/fab/button-sizing/angular.md
similarity index 100%
rename from static/usage/fab/button-sizing/angular.md
rename to static/usage/v6/fab/button-sizing/angular.md
diff --git a/static/usage/v6/fab/button-sizing/demo.html b/static/usage/v6/fab/button-sizing/demo.html
new file mode 100644
index 00000000000..e3595399219
--- /dev/null
+++ b/static/usage/v6/fab/button-sizing/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab>
+          <ion-fab-button size="small">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="end">
+            <ion-fab-button>
+              <ion-icon name="document"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="color-palette"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="globe"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/fab/button-sizing/index.md b/static/usage/v6/fab/button-sizing/index.md
new file mode 100644
index 00000000000..4ce8f551be2
--- /dev/null
+++ b/static/usage/v6/fab/button-sizing/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/fab/button-sizing/demo.html" />
diff --git a/static/usage/fab/button-sizing/javascript.md b/static/usage/v6/fab/button-sizing/javascript.md
similarity index 100%
rename from static/usage/fab/button-sizing/javascript.md
rename to static/usage/v6/fab/button-sizing/javascript.md
diff --git a/static/usage/fab/button-sizing/react.md b/static/usage/v6/fab/button-sizing/react.md
similarity index 100%
rename from static/usage/fab/button-sizing/react.md
rename to static/usage/v6/fab/button-sizing/react.md
diff --git a/static/usage/fab/button-sizing/vue.md b/static/usage/v6/fab/button-sizing/vue.md
similarity index 100%
rename from static/usage/fab/button-sizing/vue.md
rename to static/usage/v6/fab/button-sizing/vue.md
diff --git a/static/usage/fab/list-side/angular.md b/static/usage/v6/fab/list-side/angular.md
similarity index 100%
rename from static/usage/fab/list-side/angular.md
rename to static/usage/v6/fab/list-side/angular.md
diff --git a/static/usage/v6/fab/list-side/demo.html b/static/usage/v6/fab/list-side/demo.html
new file mode 100644
index 00000000000..2b24622135a
--- /dev/null
+++ b/static/usage/v6/fab/list-side/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab slot="fixed" horizontal="center" vertical="center">
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="top">
+            <ion-fab-button>
+              <ion-icon name="chevron-up"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end">
+            <ion-fab-button>
+              <ion-icon name="chevron-forward"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="chevron-forward"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="bottom">
+            <ion-fab-button>
+              <ion-icon name="chevron-down"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="start">
+            <ion-fab-button>
+              <ion-icon name="chevron-back"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="chevron-back"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/fab/list-side/index.md b/static/usage/v6/fab/list-side/index.md
new file mode 100644
index 00000000000..cf72e0722be
--- /dev/null
+++ b/static/usage/v6/fab/list-side/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/fab/list-side/demo.html" />
diff --git a/static/usage/fab/list-side/javascript.md b/static/usage/v6/fab/list-side/javascript.md
similarity index 100%
rename from static/usage/fab/list-side/javascript.md
rename to static/usage/v6/fab/list-side/javascript.md
diff --git a/static/usage/fab/list-side/react.md b/static/usage/v6/fab/list-side/react.md
similarity index 100%
rename from static/usage/fab/list-side/react.md
rename to static/usage/v6/fab/list-side/react.md
diff --git a/static/usage/fab/list-side/vue.md b/static/usage/v6/fab/list-side/vue.md
similarity index 100%
rename from static/usage/fab/list-side/vue.md
rename to static/usage/v6/fab/list-side/vue.md
diff --git a/static/usage/fab/positioning/angular.md b/static/usage/v6/fab/positioning/angular.md
similarity index 100%
rename from static/usage/fab/positioning/angular.md
rename to static/usage/v6/fab/positioning/angular.md
diff --git a/static/usage/v6/fab/positioning/demo.html b/static/usage/v6/fab/positioning/demo.html
new file mode 100644
index 00000000000..bb00b1cfdc4
--- /dev/null
+++ b/static/usage/v6/fab/positioning/demo.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Fab Buttons</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-fab slot="fixed" vertical="top" horizontal="start">
+        <ion-fab-button>
+          <ion-icon name="chevron-forward-circle"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-list side="end">
+          <ion-fab-button>
+            <ion-icon name="document"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="color-palette"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="globe"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+      </ion-fab>
+
+      <ion-fab slot="fixed" vertical="top" horizontal="end" edge="true">
+        <ion-fab-button>
+          <ion-icon name="chevron-down-circle"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-list side="bottom">
+          <ion-fab-button>
+            <ion-icon name="document"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="color-palette"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="globe"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+      </ion-fab>
+
+      <ion-fab slot="fixed" vertical="bottom" horizontal="end">
+        <ion-fab-button>
+          <ion-icon name="chevron-up-circle"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-list side="top">
+          <ion-fab-button>
+            <ion-icon name="document"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="color-palette"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="globe"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+      </ion-fab>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/fab/positioning/index.md b/static/usage/v6/fab/positioning/index.md
new file mode 100644
index 00000000000..e3270c0b23d
--- /dev/null
+++ b/static/usage/v6/fab/positioning/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/fab/positioning/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/fab/positioning/javascript.md b/static/usage/v6/fab/positioning/javascript.md
similarity index 100%
rename from static/usage/fab/positioning/javascript.md
rename to static/usage/v6/fab/positioning/javascript.md
diff --git a/static/usage/fab/positioning/react.md b/static/usage/v6/fab/positioning/react.md
similarity index 100%
rename from static/usage/fab/positioning/react.md
rename to static/usage/v6/fab/positioning/react.md
diff --git a/static/usage/fab/positioning/vue.md b/static/usage/v6/fab/positioning/vue.md
similarity index 100%
rename from static/usage/fab/positioning/vue.md
rename to static/usage/v6/fab/positioning/vue.md
diff --git a/static/usage/fab/theming/colors/angular.md b/static/usage/v6/fab/theming/colors/angular.md
similarity index 100%
rename from static/usage/fab/theming/colors/angular.md
rename to static/usage/v6/fab/theming/colors/angular.md
diff --git a/static/usage/v6/fab/theming/colors/demo.html b/static/usage/v6/fab/theming/colors/demo.html
new file mode 100644
index 00000000000..7f1b059484c
--- /dev/null
+++ b/static/usage/v6/fab/theming/colors/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab slot="fixed" horizontal="center" vertical="center">
+          <ion-fab-button color="secondary">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="top">
+            <ion-fab-button color="primary">
+              <ion-icon name="chevron-up"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end">
+            <ion-fab-button color="tertiary">
+              <ion-icon name="chevron-forward"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button color="success">
+              <ion-icon name="chevron-forward"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="bottom">
+            <ion-fab-button color="warning">
+              <ion-icon name="chevron-down"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="start">
+            <ion-fab-button color="danger">
+              <ion-icon name="chevron-back"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button color="dark">
+              <ion-icon name="chevron-back"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/fab/theming/colors/index.md b/static/usage/v6/fab/theming/colors/index.md
new file mode 100644
index 00000000000..abeac1f6ffa
--- /dev/null
+++ b/static/usage/v6/fab/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/fab/theming/colors/demo.html" />
diff --git a/static/usage/fab/theming/colors/javascript.md b/static/usage/v6/fab/theming/colors/javascript.md
similarity index 100%
rename from static/usage/fab/theming/colors/javascript.md
rename to static/usage/v6/fab/theming/colors/javascript.md
diff --git a/static/usage/fab/theming/colors/react.md b/static/usage/v6/fab/theming/colors/react.md
similarity index 100%
rename from static/usage/fab/theming/colors/react.md
rename to static/usage/v6/fab/theming/colors/react.md
diff --git a/static/usage/fab/theming/colors/vue.md b/static/usage/v6/fab/theming/colors/vue.md
similarity index 100%
rename from static/usage/fab/theming/colors/vue.md
rename to static/usage/v6/fab/theming/colors/vue.md
diff --git a/static/usage/fab/theming/css-custom-properties/angular/example_component_css.md b/static/usage/v6/fab/theming/css-custom-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/fab/theming/css-custom-properties/angular/example_component_css.md
rename to static/usage/v6/fab/theming/css-custom-properties/angular/example_component_css.md
diff --git a/static/usage/fab/theming/css-custom-properties/angular/example_component_html.md b/static/usage/v6/fab/theming/css-custom-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/fab/theming/css-custom-properties/angular/example_component_html.md
rename to static/usage/v6/fab/theming/css-custom-properties/angular/example_component_html.md
diff --git a/static/usage/v6/fab/theming/css-custom-properties/demo.html b/static/usage/v6/fab/theming/css-custom-properties/demo.html
new file mode 100644
index 00000000000..90b398450b3
--- /dev/null
+++ b/static/usage/v6/fab/theming/css-custom-properties/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-fab-button {
+      --background: #b7f399;
+      --background-activated: #87d361;
+      --background-hover: #a3e681;
+      --border-radius: 15px;
+      --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);
+      --color: black;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab>
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="end">
+            <ion-fab-button>
+              <ion-icon name="document"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="color-palette"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="globe"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/fab/theming/css-custom-properties/index.md b/static/usage/v6/fab/theming/css-custom-properties/index.md
new file mode 100644
index 00000000000..6ef760440ae
--- /dev/null
+++ b/static/usage/v6/fab/theming/css-custom-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/fab/theming/css-custom-properties/demo.html"
+/>
diff --git a/static/usage/fab/theming/css-custom-properties/javascript.md b/static/usage/v6/fab/theming/css-custom-properties/javascript.md
similarity index 100%
rename from static/usage/fab/theming/css-custom-properties/javascript.md
rename to static/usage/v6/fab/theming/css-custom-properties/javascript.md
diff --git a/static/usage/fab/theming/css-custom-properties/react/main_css.md b/static/usage/v6/fab/theming/css-custom-properties/react/main_css.md
similarity index 100%
rename from static/usage/fab/theming/css-custom-properties/react/main_css.md
rename to static/usage/v6/fab/theming/css-custom-properties/react/main_css.md
diff --git a/static/usage/fab/theming/css-custom-properties/react/main_tsx.md b/static/usage/v6/fab/theming/css-custom-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/fab/theming/css-custom-properties/react/main_tsx.md
rename to static/usage/v6/fab/theming/css-custom-properties/react/main_tsx.md
diff --git a/static/usage/fab/theming/css-custom-properties/vue.md b/static/usage/v6/fab/theming/css-custom-properties/vue.md
similarity index 100%
rename from static/usage/fab/theming/css-custom-properties/vue.md
rename to static/usage/v6/fab/theming/css-custom-properties/vue.md
diff --git a/static/usage/fab/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/fab/theming/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/fab/theming/css-shadow-parts/angular/example_component_css.md
rename to static/usage/v6/fab/theming/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/fab/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/fab/theming/css-shadow-parts/angular/example_component_html.md
similarity index 100%
rename from static/usage/fab/theming/css-shadow-parts/angular/example_component_html.md
rename to static/usage/v6/fab/theming/css-shadow-parts/angular/example_component_html.md
diff --git a/static/usage/v6/fab/theming/css-shadow-parts/demo.html b/static/usage/v6/fab/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..40c416ab32c
--- /dev/null
+++ b/static/usage/v6/fab/theming/css-shadow-parts/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-fab-button::part(native) {
+      background-color: #b7f399;
+      border-radius: 15px;
+      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);
+      color: black;
+    }
+
+    ion-fab-button::part(native):hover::after {
+      background-color: #a3e681;
+    }
+
+    ion-fab-button::part(native):active::after {
+      background-color: #87d361;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab>
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="end">
+            <ion-fab-button>
+              <ion-icon name="document"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="color-palette"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="globe"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/fab/theming/css-shadow-parts/index.md b/static/usage/v6/fab/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..0353c1eec7f
--- /dev/null
+++ b/static/usage/v6/fab/theming/css-shadow-parts/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/fab/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/fab/theming/css-shadow-parts/javascript.md b/static/usage/v6/fab/theming/css-shadow-parts/javascript.md
similarity index 100%
rename from static/usage/fab/theming/css-shadow-parts/javascript.md
rename to static/usage/v6/fab/theming/css-shadow-parts/javascript.md
diff --git a/static/usage/fab/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/fab/theming/css-shadow-parts/react/main_css.md
similarity index 100%
rename from static/usage/fab/theming/css-shadow-parts/react/main_css.md
rename to static/usage/v6/fab/theming/css-shadow-parts/react/main_css.md
diff --git a/static/usage/fab/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/fab/theming/css-shadow-parts/react/main_tsx.md
similarity index 100%
rename from static/usage/fab/theming/css-shadow-parts/react/main_tsx.md
rename to static/usage/v6/fab/theming/css-shadow-parts/react/main_tsx.md
diff --git a/static/usage/fab/theming/css-shadow-parts/vue.md b/static/usage/v6/fab/theming/css-shadow-parts/vue.md
similarity index 100%
rename from static/usage/fab/theming/css-shadow-parts/vue.md
rename to static/usage/v6/fab/theming/css-shadow-parts/vue.md
diff --git a/static/usage/footer/basic/angular.md b/static/usage/v6/footer/basic/angular.md
similarity index 100%
rename from static/usage/footer/basic/angular.md
rename to static/usage/v6/footer/basic/angular.md
diff --git a/static/usage/v6/footer/basic/demo.html b/static/usage/v6/footer/basic/demo.html
new file mode 100644
index 00000000000..205a6543d4b
--- /dev/null
+++ b/static/usage/v6/footer/basic/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Footer</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Content</h1>
+    </ion-content>
+    <ion-footer>
+      <ion-toolbar>
+        <ion-title>Footer</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/footer/basic/index.md b/static/usage/v6/footer/basic/index.md
new file mode 100644
index 00000000000..4f91c2bd6ab
--- /dev/null
+++ b/static/usage/v6/footer/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/footer/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/footer/basic/javascript.md b/static/usage/v6/footer/basic/javascript.md
similarity index 100%
rename from static/usage/footer/basic/javascript.md
rename to static/usage/v6/footer/basic/javascript.md
diff --git a/static/usage/footer/basic/react.md b/static/usage/v6/footer/basic/react.md
similarity index 100%
rename from static/usage/footer/basic/react.md
rename to static/usage/v6/footer/basic/react.md
diff --git a/static/usage/footer/basic/vue.md b/static/usage/v6/footer/basic/vue.md
similarity index 100%
rename from static/usage/footer/basic/vue.md
rename to static/usage/v6/footer/basic/vue.md
diff --git a/static/usage/footer/custom-scroll-target/angular/example_component_css.md b/static/usage/v6/footer/custom-scroll-target/angular/example_component_css.md
similarity index 100%
rename from static/usage/footer/custom-scroll-target/angular/example_component_css.md
rename to static/usage/v6/footer/custom-scroll-target/angular/example_component_css.md
diff --git a/static/usage/footer/custom-scroll-target/angular/example_component_html.md b/static/usage/v6/footer/custom-scroll-target/angular/example_component_html.md
similarity index 100%
rename from static/usage/footer/custom-scroll-target/angular/example_component_html.md
rename to static/usage/v6/footer/custom-scroll-target/angular/example_component_html.md
diff --git a/static/usage/v6/footer/custom-scroll-target/demo.html b/static/usage/v6/footer/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..f9349b02086
--- /dev/null
+++ b/static/usage/v6/footer/custom-scroll-target/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Footer</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .ion-content-scroll-host {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content scroll-y="false">
+      <div class="ion-content-scroll-host ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+        <h2>Sea Turtle</h2>
+        <img alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.</p>
+
+        <h2>Giraffe</h2>
+        <img alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+          have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+        <h2>Elephant</h2>
+        <img alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.</p>
+
+        <h2>Dolphin</h2>
+        <img alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+          gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with
+          about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap
+          that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+      </div>
+    </ion-content>
+    <ion-footer collapse="fade">
+      <ion-toolbar>
+        <ion-title>Footer</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/footer/custom-scroll-target/index.md b/static/usage/v6/footer/custom-scroll-target/index.md
new file mode 100644
index 00000000000..4fbda3e091a
--- /dev/null
+++ b/static/usage/v6/footer/custom-scroll-target/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/footer/custom-scroll-target/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/footer/custom-scroll-target/javascript.md b/static/usage/v6/footer/custom-scroll-target/javascript.md
similarity index 100%
rename from static/usage/footer/custom-scroll-target/javascript.md
rename to static/usage/v6/footer/custom-scroll-target/javascript.md
diff --git a/static/usage/footer/custom-scroll-target/react/main_css.md b/static/usage/v6/footer/custom-scroll-target/react/main_css.md
similarity index 100%
rename from static/usage/footer/custom-scroll-target/react/main_css.md
rename to static/usage/v6/footer/custom-scroll-target/react/main_css.md
diff --git a/static/usage/footer/custom-scroll-target/react/main_tsx.md b/static/usage/v6/footer/custom-scroll-target/react/main_tsx.md
similarity index 100%
rename from static/usage/footer/custom-scroll-target/react/main_tsx.md
rename to static/usage/v6/footer/custom-scroll-target/react/main_tsx.md
diff --git a/static/usage/footer/custom-scroll-target/vue.md b/static/usage/v6/footer/custom-scroll-target/vue.md
similarity index 100%
rename from static/usage/footer/custom-scroll-target/vue.md
rename to static/usage/v6/footer/custom-scroll-target/vue.md
diff --git a/static/usage/footer/fade/angular.md b/static/usage/v6/footer/fade/angular.md
similarity index 100%
rename from static/usage/footer/fade/angular.md
rename to static/usage/v6/footer/fade/angular.md
diff --git a/static/usage/v6/footer/fade/demo.html b/static/usage/v6/footer/fade/demo.html
new file mode 100644
index 00000000000..75ed07ea1bf
--- /dev/null
+++ b/static/usage/v6/footer/fade/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Footer</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Animal Facts</h1>
+
+      <h2>Rhinoceros</h2>
+      <img alt="rhino standing near grass"
+        src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+        the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+        the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+        horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+      <h2>Sea Turtle</h2>
+      <img alt="brown sea turtle in water"
+        src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+        turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+        adapted for swimming, so they are vulnerable while on land.</p>
+
+      <h2>Giraffe</h2>
+      <img alt="giraffe sticking its tongue out"
+        src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+        a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+        the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+      <h2>Elephant</h2>
+      <img alt="two grey elephants on grass plains during sunset"
+        src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+        long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+        suck up water for drinking or bathing.</p>
+
+      <h2>Dolphin</h2>
+      <img alt="black and white dolphin in water"
+        src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+        blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+        100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+        to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+    </ion-content>
+    <ion-footer collapse="fade">
+      <ion-toolbar>
+        <ion-title>Footer</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/footer/fade/index.md b/static/usage/v6/footer/fade/index.md
new file mode 100644
index 00000000000..72472ad29cd
--- /dev/null
+++ b/static/usage/v6/footer/fade/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/footer/fade/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/footer/fade/javascript.md b/static/usage/v6/footer/fade/javascript.md
similarity index 100%
rename from static/usage/footer/fade/javascript.md
rename to static/usage/v6/footer/fade/javascript.md
diff --git a/static/usage/footer/fade/react.md b/static/usage/v6/footer/fade/react.md
similarity index 100%
rename from static/usage/footer/fade/react.md
rename to static/usage/v6/footer/fade/react.md
diff --git a/static/usage/footer/fade/vue.md b/static/usage/v6/footer/fade/vue.md
similarity index 100%
rename from static/usage/footer/fade/vue.md
rename to static/usage/v6/footer/fade/vue.md
diff --git a/static/usage/footer/no-border/angular.md b/static/usage/v6/footer/no-border/angular.md
similarity index 100%
rename from static/usage/footer/no-border/angular.md
rename to static/usage/v6/footer/no-border/angular.md
diff --git a/static/usage/v6/footer/no-border/demo.html b/static/usage/v6/footer/no-border/demo.html
new file mode 100644
index 00000000000..8050b2a7bcd
--- /dev/null
+++ b/static/usage/v6/footer/no-border/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Footer</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Content</h1>
+    </ion-content>
+    <ion-footer class="ion-no-border">
+      <ion-toolbar>
+        <ion-title>Footer</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/footer/no-border/index.md b/static/usage/v6/footer/no-border/index.md
new file mode 100644
index 00000000000..5230bfac7e8
--- /dev/null
+++ b/static/usage/v6/footer/no-border/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/footer/no-border/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/footer/no-border/javascript.md b/static/usage/v6/footer/no-border/javascript.md
similarity index 100%
rename from static/usage/footer/no-border/javascript.md
rename to static/usage/v6/footer/no-border/javascript.md
diff --git a/static/usage/footer/no-border/react.md b/static/usage/v6/footer/no-border/react.md
similarity index 100%
rename from static/usage/footer/no-border/react.md
rename to static/usage/v6/footer/no-border/react.md
diff --git a/static/usage/footer/no-border/vue.md b/static/usage/v6/footer/no-border/vue.md
similarity index 100%
rename from static/usage/footer/no-border/vue.md
rename to static/usage/v6/footer/no-border/vue.md
diff --git a/static/usage/footer/translucent/angular.md b/static/usage/v6/footer/translucent/angular.md
similarity index 100%
rename from static/usage/footer/translucent/angular.md
rename to static/usage/v6/footer/translucent/angular.md
diff --git a/static/usage/v6/footer/translucent/demo.html b/static/usage/v6/footer/translucent/demo.html
new file mode 100644
index 00000000000..b04fd24bddc
--- /dev/null
+++ b/static/usage/v6/footer/translucent/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Footer</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content fullscreen="true" class="ion-padding">
+      <h1>Animal Facts</h1>
+
+      <h2>Rhinoceros</h2>
+      <img alt="rhino standing near grass"
+        src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+        the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+        the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+        horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+      <h2>Sea Turtle</h2>
+      <img alt="brown sea turtle in water"
+        src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+        turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+        adapted for swimming, so they are vulnerable while on land.</p>
+
+      <h2>Giraffe</h2>
+      <img alt="giraffe sticking its tongue out"
+        src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+        a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+        the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+      <h2>Elephant</h2>
+      <img alt="two grey elephants on grass plains during sunset"
+        src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+        long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+        suck up water for drinking or bathing.</p>
+
+      <h2>Dolphin</h2>
+      <img alt="black and white dolphin in water"
+        src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+        blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+        100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+        to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+    </ion-content>
+    <ion-footer translucent="true">
+      <ion-toolbar>
+        <ion-title>Footer</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/footer/translucent/index.md b/static/usage/v6/footer/translucent/index.md
new file mode 100644
index 00000000000..adcf2ff32c4
--- /dev/null
+++ b/static/usage/v6/footer/translucent/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/footer/translucent/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/footer/translucent/javascript.md b/static/usage/v6/footer/translucent/javascript.md
similarity index 100%
rename from static/usage/footer/translucent/javascript.md
rename to static/usage/v6/footer/translucent/javascript.md
diff --git a/static/usage/footer/translucent/react.md b/static/usage/v6/footer/translucent/react.md
similarity index 100%
rename from static/usage/footer/translucent/react.md
rename to static/usage/v6/footer/translucent/react.md
diff --git a/static/usage/footer/translucent/vue.md b/static/usage/v6/footer/translucent/vue.md
similarity index 100%
rename from static/usage/footer/translucent/vue.md
rename to static/usage/v6/footer/translucent/vue.md
diff --git a/static/usage/grid/basic/angular/example_component_css.md b/static/usage/v6/grid/basic/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/basic/angular/example_component_css.md
rename to static/usage/v6/grid/basic/angular/example_component_css.md
diff --git a/static/usage/grid/basic/angular/example_component_html.md b/static/usage/v6/grid/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/basic/angular/example_component_html.md
rename to static/usage/v6/grid/basic/angular/example_component_html.md
diff --git a/static/usage/v6/grid/basic/demo.html b/static/usage/v6/grid/basic/demo.html
new file mode 100644
index 00000000000..36ef496f817
--- /dev/null
+++ b/static/usage/v6/grid/basic/demo.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+            <ion-col>4</ion-col>
+            <ion-col>5</ion-col>
+            <ion-col>6</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+            <ion-col>4</ion-col>
+            <ion-col>5</ion-col>
+            <ion-col>6</ion-col>
+            <ion-col>7</ion-col>
+            <ion-col>8</ion-col>
+            <ion-col>9</ion-col>
+            <ion-col>10</ion-col>
+            <ion-col>11</ion-col>
+            <ion-col>12</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/basic/index.md b/static/usage/v6/grid/basic/index.md
new file mode 100644
index 00000000000..8b8773e605b
--- /dev/null
+++ b/static/usage/v6/grid/basic/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/basic/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/grid/basic/javascript.md b/static/usage/v6/grid/basic/javascript.md
similarity index 100%
rename from static/usage/grid/basic/javascript.md
rename to static/usage/v6/grid/basic/javascript.md
diff --git a/static/usage/grid/basic/react/main_css.md b/static/usage/v6/grid/basic/react/main_css.md
similarity index 100%
rename from static/usage/grid/basic/react/main_css.md
rename to static/usage/v6/grid/basic/react/main_css.md
diff --git a/static/usage/grid/basic/react/main_tsx.md b/static/usage/v6/grid/basic/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/basic/react/main_tsx.md
rename to static/usage/v6/grid/basic/react/main_tsx.md
diff --git a/static/usage/grid/basic/vue.md b/static/usage/v6/grid/basic/vue.md
similarity index 100%
rename from static/usage/grid/basic/vue.md
rename to static/usage/v6/grid/basic/vue.md
diff --git a/static/usage/grid/customizing/column-number/angular/example_component_css.md b/static/usage/v6/grid/customizing/column-number/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/customizing/column-number/angular/example_component_css.md
rename to static/usage/v6/grid/customizing/column-number/angular/example_component_css.md
diff --git a/static/usage/grid/customizing/column-number/angular/example_component_html.md b/static/usage/v6/grid/customizing/column-number/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/customizing/column-number/angular/example_component_html.md
rename to static/usage/v6/grid/customizing/column-number/angular/example_component_html.md
diff --git a/static/usage/v6/grid/customizing/column-number/demo.html b/static/usage/v6/grid/customizing/column-number/demo.html
new file mode 100644
index 00000000000..ee0550437e5
--- /dev/null
+++ b/static/usage/v6/grid/customizing/column-number/demo.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+
+      --ion-grid-columns: 6;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Total number of columns is set to <code>6</code>, column <code>size</code> is set to <code>1</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="1">1</ion-col>
+            <ion-col size="1">2</ion-col>
+            <ion-col size="1">3</ion-col>
+            <ion-col size="1">4</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/customizing/column-number/index.md b/static/usage/v6/grid/customizing/column-number/index.md
new file mode 100644
index 00000000000..65bea72c7bf
--- /dev/null
+++ b/static/usage/v6/grid/customizing/column-number/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/customizing/column-number/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/grid/customizing/column-number/javascript.md b/static/usage/v6/grid/customizing/column-number/javascript.md
similarity index 100%
rename from static/usage/grid/customizing/column-number/javascript.md
rename to static/usage/v6/grid/customizing/column-number/javascript.md
diff --git a/static/usage/grid/customizing/column-number/react/main_css.md b/static/usage/v6/grid/customizing/column-number/react/main_css.md
similarity index 100%
rename from static/usage/grid/customizing/column-number/react/main_css.md
rename to static/usage/v6/grid/customizing/column-number/react/main_css.md
diff --git a/static/usage/grid/customizing/column-number/react/main_tsx.md b/static/usage/v6/grid/customizing/column-number/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/customizing/column-number/react/main_tsx.md
rename to static/usage/v6/grid/customizing/column-number/react/main_tsx.md
diff --git a/static/usage/grid/customizing/column-number/vue.md b/static/usage/v6/grid/customizing/column-number/vue.md
similarity index 100%
rename from static/usage/grid/customizing/column-number/vue.md
rename to static/usage/v6/grid/customizing/column-number/vue.md
diff --git a/static/usage/grid/customizing/padding/angular/example_component_css.md b/static/usage/v6/grid/customizing/padding/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/customizing/padding/angular/example_component_css.md
rename to static/usage/v6/grid/customizing/padding/angular/example_component_css.md
diff --git a/static/usage/grid/customizing/padding/angular/example_component_html.md b/static/usage/v6/grid/customizing/padding/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/customizing/padding/angular/example_component_html.md
rename to static/usage/v6/grid/customizing/padding/angular/example_component_html.md
diff --git a/static/usage/v6/grid/customizing/padding/demo.html b/static/usage/v6/grid/customizing/padding/demo.html
new file mode 100644
index 00000000000..38dae06af73
--- /dev/null
+++ b/static/usage/v6/grid/customizing/padding/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+
+      --ion-grid-padding: 20px;
+
+      --ion-grid-padding-xs: 20px;
+      --ion-grid-padding-sm: 20px;
+      --ion-grid-padding-md: 20px;
+      --ion-grid-padding-lg: 20px;
+      --ion-grid-padding-xl: 20px;
+
+      --ion-grid-column-padding: 30px;
+
+      --ion-grid-column-padding-xs: 30px;
+      --ion-grid-column-padding-sm: 30px;
+      --ion-grid-column-padding-md: 30px;
+      --ion-grid-column-padding-lg: 30px;
+      --ion-grid-column-padding-xl: 30px;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/customizing/padding/index.md b/static/usage/v6/grid/customizing/padding/index.md
new file mode 100644
index 00000000000..4ff00c1135c
--- /dev/null
+++ b/static/usage/v6/grid/customizing/padding/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/customizing/padding/demo.html"
+  size="150px"
+/>
diff --git a/static/usage/grid/customizing/padding/javascript.md b/static/usage/v6/grid/customizing/padding/javascript.md
similarity index 100%
rename from static/usage/grid/customizing/padding/javascript.md
rename to static/usage/v6/grid/customizing/padding/javascript.md
diff --git a/static/usage/grid/customizing/padding/react/main_css.md b/static/usage/v6/grid/customizing/padding/react/main_css.md
similarity index 100%
rename from static/usage/grid/customizing/padding/react/main_css.md
rename to static/usage/v6/grid/customizing/padding/react/main_css.md
diff --git a/static/usage/grid/customizing/padding/react/main_tsx.md b/static/usage/v6/grid/customizing/padding/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/customizing/padding/react/main_tsx.md
rename to static/usage/v6/grid/customizing/padding/react/main_tsx.md
diff --git a/static/usage/grid/customizing/padding/vue.md b/static/usage/v6/grid/customizing/padding/vue.md
similarity index 100%
rename from static/usage/grid/customizing/padding/vue.md
rename to static/usage/v6/grid/customizing/padding/vue.md
diff --git a/static/usage/grid/customizing/width/angular/example_component_css.md b/static/usage/v6/grid/customizing/width/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/customizing/width/angular/example_component_css.md
rename to static/usage/v6/grid/customizing/width/angular/example_component_css.md
diff --git a/static/usage/grid/customizing/width/angular/example_component_html.md b/static/usage/v6/grid/customizing/width/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/customizing/width/angular/example_component_html.md
rename to static/usage/v6/grid/customizing/width/angular/example_component_html.md
diff --git a/static/usage/v6/grid/customizing/width/demo.html b/static/usage/v6/grid/customizing/width/demo.html
new file mode 100644
index 00000000000..09527dca430
--- /dev/null
+++ b/static/usage/v6/grid/customizing/width/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      flex-grow: 0;
+
+      --ion-grid-width: 50%;
+
+      --ion-grid-width-xs: 50%;
+      --ion-grid-width-sm: 288px;
+      --ion-grid-width-md: 384px;
+      --ion-grid-width-lg: 480px;
+      --ion-grid-width-xl: 570px;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-grid fixed="true">
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/customizing/width/index.md b/static/usage/v6/grid/customizing/width/index.md
new file mode 100644
index 00000000000..9a5c4a4ddd3
--- /dev/null
+++ b/static/usage/v6/grid/customizing/width/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/customizing/width/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/grid/customizing/width/javascript.md b/static/usage/v6/grid/customizing/width/javascript.md
similarity index 100%
rename from static/usage/grid/customizing/width/javascript.md
rename to static/usage/v6/grid/customizing/width/javascript.md
diff --git a/static/usage/grid/customizing/width/react/main_css.md b/static/usage/v6/grid/customizing/width/react/main_css.md
similarity index 100%
rename from static/usage/grid/customizing/width/react/main_css.md
rename to static/usage/v6/grid/customizing/width/react/main_css.md
diff --git a/static/usage/grid/customizing/width/react/main_tsx.md b/static/usage/v6/grid/customizing/width/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/customizing/width/react/main_tsx.md
rename to static/usage/v6/grid/customizing/width/react/main_tsx.md
diff --git a/static/usage/grid/customizing/width/vue.md b/static/usage/v6/grid/customizing/width/vue.md
similarity index 100%
rename from static/usage/grid/customizing/width/vue.md
rename to static/usage/v6/grid/customizing/width/vue.md
diff --git a/static/usage/grid/fixed/angular/example_component_css.md b/static/usage/v6/grid/fixed/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/fixed/angular/example_component_css.md
rename to static/usage/v6/grid/fixed/angular/example_component_css.md
diff --git a/static/usage/grid/fixed/angular/example_component_html.md b/static/usage/v6/grid/fixed/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/fixed/angular/example_component_html.md
rename to static/usage/v6/grid/fixed/angular/example_component_html.md
diff --git a/static/usage/v6/grid/fixed/demo.html b/static/usage/v6/grid/fixed/demo.html
new file mode 100644
index 00000000000..9dcc3781d7c
--- /dev/null
+++ b/static/usage/v6/grid/fixed/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-grid fixed="true">
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/fixed/index.md b/static/usage/v6/grid/fixed/index.md
new file mode 100644
index 00000000000..5c671422a22
--- /dev/null
+++ b/static/usage/v6/grid/fixed/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/fixed/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/grid/fixed/javascript.md b/static/usage/v6/grid/fixed/javascript.md
similarity index 100%
rename from static/usage/grid/fixed/javascript.md
rename to static/usage/v6/grid/fixed/javascript.md
diff --git a/static/usage/grid/fixed/react/main_css.md b/static/usage/v6/grid/fixed/react/main_css.md
similarity index 100%
rename from static/usage/grid/fixed/react/main_css.md
rename to static/usage/v6/grid/fixed/react/main_css.md
diff --git a/static/usage/grid/fixed/react/main_tsx.md b/static/usage/v6/grid/fixed/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/fixed/react/main_tsx.md
rename to static/usage/v6/grid/fixed/react/main_tsx.md
diff --git a/static/usage/grid/fixed/vue.md b/static/usage/v6/grid/fixed/vue.md
similarity index 100%
rename from static/usage/grid/fixed/vue.md
rename to static/usage/v6/grid/fixed/vue.md
diff --git a/static/usage/grid/horizontal-alignment/angular/example_component_css.md b/static/usage/v6/grid/horizontal-alignment/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/horizontal-alignment/angular/example_component_css.md
rename to static/usage/v6/grid/horizontal-alignment/angular/example_component_css.md
diff --git a/static/usage/grid/horizontal-alignment/angular/example_component_html.md b/static/usage/v6/grid/horizontal-alignment/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/horizontal-alignment/angular/example_component_html.md
rename to static/usage/v6/grid/horizontal-alignment/angular/example_component_html.md
diff --git a/static/usage/v6/grid/horizontal-alignment/demo.html b/static/usage/v6/grid/horizontal-alignment/demo.html
new file mode 100644
index 00000000000..2960357e81e
--- /dev/null
+++ b/static/usage/v6/grid/horizontal-alignment/demo.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Columns aligned at the start</b>
+        <ion-grid>
+          <ion-row class="ion-justify-content-start">
+            <ion-col size="3">
+              1
+            </ion-col>
+            <ion-col size="3">
+              2
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned at the center</b>
+        <ion-grid>
+          <ion-row class="ion-justify-content-center">
+            <ion-col size="3">
+              1
+            </ion-col>
+            <ion-col size="3">
+              2
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned at the end</b>
+        <ion-grid>
+          <ion-row class="ion-justify-content-end">
+            <ion-col size="3">
+              1
+            </ion-col>
+            <ion-col size="3">
+              2
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned with space around</b>
+        <ion-grid>
+          <ion-row class="ion-justify-content-around">
+            <ion-col size="3">
+              1
+            </ion-col>
+            <ion-col size="3">
+              2
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned with space between</b>
+        <ion-grid>
+          <ion-row class="ion-justify-content-between">
+            <ion-col size="3">
+              1
+            </ion-col>
+            <ion-col size="3">
+              2
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/horizontal-alignment/index.md b/static/usage/v6/grid/horizontal-alignment/index.md
new file mode 100644
index 00000000000..1a8e23ad7c6
--- /dev/null
+++ b/static/usage/v6/grid/horizontal-alignment/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/horizontal-alignment/demo.html"
+  size="400px"
+/>
diff --git a/static/usage/grid/horizontal-alignment/javascript.md b/static/usage/v6/grid/horizontal-alignment/javascript.md
similarity index 100%
rename from static/usage/grid/horizontal-alignment/javascript.md
rename to static/usage/v6/grid/horizontal-alignment/javascript.md
diff --git a/static/usage/grid/horizontal-alignment/react/main_css.md b/static/usage/v6/grid/horizontal-alignment/react/main_css.md
similarity index 100%
rename from static/usage/grid/horizontal-alignment/react/main_css.md
rename to static/usage/v6/grid/horizontal-alignment/react/main_css.md
diff --git a/static/usage/grid/horizontal-alignment/react/main_tsx.md b/static/usage/v6/grid/horizontal-alignment/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/horizontal-alignment/react/main_tsx.md
rename to static/usage/v6/grid/horizontal-alignment/react/main_tsx.md
diff --git a/static/usage/grid/horizontal-alignment/vue.md b/static/usage/v6/grid/horizontal-alignment/vue.md
similarity index 100%
rename from static/usage/grid/horizontal-alignment/vue.md
rename to static/usage/v6/grid/horizontal-alignment/vue.md
diff --git a/static/usage/grid/offset-responsive/angular/example_component_css.md b/static/usage/v6/grid/offset-responsive/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/offset-responsive/angular/example_component_css.md
rename to static/usage/v6/grid/offset-responsive/angular/example_component_css.md
diff --git a/static/usage/grid/offset-responsive/angular/example_component_html.md b/static/usage/v6/grid/offset-responsive/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/offset-responsive/angular/example_component_html.md
rename to static/usage/v6/grid/offset-responsive/angular/example_component_html.md
diff --git a/static/usage/v6/grid/offset-responsive/demo.html b/static/usage/v6/grid/offset-responsive/demo.html
new file mode 100644
index 00000000000..07c5cdca37b
--- /dev/null
+++ b/static/usage/v6/grid/offset-responsive/demo.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>No offset for xs breakpoint, offset 1st column for sm and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col offset-sm="2">1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+            <ion-col>4</ion-col>
+            <ion-col>5</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>No offset for xs breakpoint, offset last 3 columns for md and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col offset-md="2">2</ion-col>
+            <ion-col offset-md="2">3</ion-col>
+            <ion-col offset-md="2">4</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col offset="6" offset-md="4" offset-lg="2">1</ion-col>
+            <ion-col offset="6" offset-md="4" offset-lg="2">2</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/offset-responsive/index.md b/static/usage/v6/grid/offset-responsive/index.md
new file mode 100644
index 00000000000..c1fd31f0254
--- /dev/null
+++ b/static/usage/v6/grid/offset-responsive/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/offset-responsive/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/grid/offset-responsive/javascript.md b/static/usage/v6/grid/offset-responsive/javascript.md
similarity index 100%
rename from static/usage/grid/offset-responsive/javascript.md
rename to static/usage/v6/grid/offset-responsive/javascript.md
diff --git a/static/usage/grid/offset-responsive/react/main_css.md b/static/usage/v6/grid/offset-responsive/react/main_css.md
similarity index 100%
rename from static/usage/grid/offset-responsive/react/main_css.md
rename to static/usage/v6/grid/offset-responsive/react/main_css.md
diff --git a/static/usage/grid/offset-responsive/react/main_tsx.md b/static/usage/v6/grid/offset-responsive/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/offset-responsive/react/main_tsx.md
rename to static/usage/v6/grid/offset-responsive/react/main_tsx.md
diff --git a/static/usage/grid/offset-responsive/vue.md b/static/usage/v6/grid/offset-responsive/vue.md
similarity index 100%
rename from static/usage/grid/offset-responsive/vue.md
rename to static/usage/v6/grid/offset-responsive/vue.md
diff --git a/static/usage/grid/offset/angular/example_component_css.md b/static/usage/v6/grid/offset/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/offset/angular/example_component_css.md
rename to static/usage/v6/grid/offset/angular/example_component_css.md
diff --git a/static/usage/grid/offset/angular/example_component_html.md b/static/usage/v6/grid/offset/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/offset/angular/example_component_html.md
rename to static/usage/v6/grid/offset/angular/example_component_html.md
diff --git a/static/usage/v6/grid/offset/demo.html b/static/usage/v6/grid/offset/demo.html
new file mode 100644
index 00000000000..876e4f9acf1
--- /dev/null
+++ b/static/usage/v6/grid/offset/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Column 2 has <code>offset</code> set to <code>"3"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col offset="3">2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 5 has <code>offset</code> set to <code>"2"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+            <ion-col>4</ion-col>
+            <ion-col offset="2">5</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 1 has <code>offset</code> set to <code>"4"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="2" offset="4">1</ion-col>
+            <ion-col size="2">2</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/offset/index.md b/static/usage/v6/grid/offset/index.md
new file mode 100644
index 00000000000..d7229800569
--- /dev/null
+++ b/static/usage/v6/grid/offset/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/offset/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/grid/offset/javascript.md b/static/usage/v6/grid/offset/javascript.md
similarity index 100%
rename from static/usage/grid/offset/javascript.md
rename to static/usage/v6/grid/offset/javascript.md
diff --git a/static/usage/grid/offset/react/main_css.md b/static/usage/v6/grid/offset/react/main_css.md
similarity index 100%
rename from static/usage/grid/offset/react/main_css.md
rename to static/usage/v6/grid/offset/react/main_css.md
diff --git a/static/usage/grid/offset/react/main_tsx.md b/static/usage/v6/grid/offset/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/offset/react/main_tsx.md
rename to static/usage/v6/grid/offset/react/main_tsx.md
diff --git a/static/usage/grid/offset/vue.md b/static/usage/v6/grid/offset/vue.md
similarity index 100%
rename from static/usage/grid/offset/vue.md
rename to static/usage/v6/grid/offset/vue.md
diff --git a/static/usage/grid/push-pull-responsive/angular/example_component_css.md b/static/usage/v6/grid/push-pull-responsive/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/push-pull-responsive/angular/example_component_css.md
rename to static/usage/v6/grid/push-pull-responsive/angular/example_component_css.md
diff --git a/static/usage/grid/push-pull-responsive/angular/example_component_html.md b/static/usage/v6/grid/push-pull-responsive/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/push-pull-responsive/angular/example_component_html.md
rename to static/usage/v6/grid/push-pull-responsive/angular/example_component_html.md
diff --git a/static/usage/v6/grid/push-pull-responsive/demo.html b/static/usage/v6/grid/push-pull-responsive/demo.html
new file mode 100644
index 00000000000..aa956b2c1b0
--- /dev/null
+++ b/static/usage/v6/grid/push-pull-responsive/demo.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>No change for xs breakpoint, push 1st column & pull 2nd column for sm and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col push-sm="6">1</ion-col>
+            <ion-col pull-sm="6">2</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>No change for xs breakpoint, push middle columns & pull last column for md and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col push-md="3">2</ion-col>
+            <ion-col push-md="3">3</ion-col>
+            <ion-col pull-md="6">4</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col push="6" push-lg="10">1</ion-col>
+            <ion-col push="6" push-lg="6">2</ion-col>
+            <ion-col push="6" push-lg="2">3</ion-col>
+            <ion-col pull="6" pull-lg="2">4</ion-col>
+            <ion-col pull="6" pull-lg="6">5</ion-col>
+            <ion-col pull="6" pull-lg="10">6</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/push-pull-responsive/index.md b/static/usage/v6/grid/push-pull-responsive/index.md
new file mode 100644
index 00000000000..87192579f8c
--- /dev/null
+++ b/static/usage/v6/grid/push-pull-responsive/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/push-pull-responsive/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/grid/push-pull-responsive/javascript.md b/static/usage/v6/grid/push-pull-responsive/javascript.md
similarity index 100%
rename from static/usage/grid/push-pull-responsive/javascript.md
rename to static/usage/v6/grid/push-pull-responsive/javascript.md
diff --git a/static/usage/grid/push-pull-responsive/react/main_css.md b/static/usage/v6/grid/push-pull-responsive/react/main_css.md
similarity index 100%
rename from static/usage/grid/push-pull-responsive/react/main_css.md
rename to static/usage/v6/grid/push-pull-responsive/react/main_css.md
diff --git a/static/usage/grid/push-pull-responsive/react/main_tsx.md b/static/usage/v6/grid/push-pull-responsive/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/push-pull-responsive/react/main_tsx.md
rename to static/usage/v6/grid/push-pull-responsive/react/main_tsx.md
diff --git a/static/usage/grid/push-pull-responsive/vue.md b/static/usage/v6/grid/push-pull-responsive/vue.md
similarity index 100%
rename from static/usage/grid/push-pull-responsive/vue.md
rename to static/usage/v6/grid/push-pull-responsive/vue.md
diff --git a/static/usage/grid/push-pull/angular/example_component_css.md b/static/usage/v6/grid/push-pull/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/push-pull/angular/example_component_css.md
rename to static/usage/v6/grid/push-pull/angular/example_component_css.md
diff --git a/static/usage/grid/push-pull/angular/example_component_html.md b/static/usage/v6/grid/push-pull/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/push-pull/angular/example_component_html.md
rename to static/usage/v6/grid/push-pull/angular/example_component_html.md
diff --git a/static/usage/v6/grid/push-pull/demo.html b/static/usage/v6/grid/push-pull/demo.html
new file mode 100644
index 00000000000..b34be1bb39d
--- /dev/null
+++ b/static/usage/v6/grid/push-pull/demo.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Column 1 has <code>push</code> set to <code>"4"</code> and column 2 has <code>pull</code> set to
+          <code>"4"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col push="4">1</ion-col>
+            <ion-col pull="4">2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 2 has <code>push</code> set to <code>"4"</code> and column 3 & 4 have <code>pull</code> set to
+          <code>"2"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col push="4">2</ion-col>
+            <ion-col pull="2">3</ion-col>
+            <ion-col pull="2">4</ion-col>
+            <ion-col>5</ion-col>
+            <ion-col>6</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 1 has <code>push</code> set to <code>"3"</code> and column 2 has <code>pull</code> set to
+          <code>"9"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="9" push="3">1</ion-col>
+            <ion-col size="3" pull="9">2</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/push-pull/index.md b/static/usage/v6/grid/push-pull/index.md
new file mode 100644
index 00000000000..a2749ef09a3
--- /dev/null
+++ b/static/usage/v6/grid/push-pull/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/push-pull/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/grid/push-pull/javascript.md b/static/usage/v6/grid/push-pull/javascript.md
similarity index 100%
rename from static/usage/grid/push-pull/javascript.md
rename to static/usage/v6/grid/push-pull/javascript.md
diff --git a/static/usage/grid/push-pull/react/main_css.md b/static/usage/v6/grid/push-pull/react/main_css.md
similarity index 100%
rename from static/usage/grid/push-pull/react/main_css.md
rename to static/usage/v6/grid/push-pull/react/main_css.md
diff --git a/static/usage/grid/push-pull/react/main_tsx.md b/static/usage/v6/grid/push-pull/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/push-pull/react/main_tsx.md
rename to static/usage/v6/grid/push-pull/react/main_tsx.md
diff --git a/static/usage/grid/push-pull/vue.md b/static/usage/v6/grid/push-pull/vue.md
similarity index 100%
rename from static/usage/grid/push-pull/vue.md
rename to static/usage/v6/grid/push-pull/vue.md
diff --git a/static/usage/grid/size-auto/angular/example_component_css.md b/static/usage/v6/grid/size-auto/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/size-auto/angular/example_component_css.md
rename to static/usage/v6/grid/size-auto/angular/example_component_css.md
diff --git a/static/usage/grid/size-auto/angular/example_component_html.md b/static/usage/v6/grid/size-auto/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/size-auto/angular/example_component_html.md
rename to static/usage/v6/grid/size-auto/angular/example_component_html.md
diff --git a/static/usage/v6/grid/size-auto/demo.html b/static/usage/v6/grid/size-auto/demo.html
new file mode 100644
index 00000000000..364d5db3c9a
--- /dev/null
+++ b/static/usage/v6/grid/size-auto/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Column 1 has <code>size</code> set to <code>"auto"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="auto">1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 3 contains an input and has <code>size</code> set to <code>"auto"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col size="auto">
+              <ion-input placeholder="3"></ion-input>
+            </ion-col>
+            <ion-col>4</ion-col>
+            <ion-col>5</ion-col>
+            <ion-col>6</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 2 has <code>size</code> set to <code>"auto"</code> and a defined width</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col size="auto">
+              <div style="width: 150px">2</div>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/size-auto/index.md b/static/usage/v6/grid/size-auto/index.md
new file mode 100644
index 00000000000..92a37d7f116
--- /dev/null
+++ b/static/usage/v6/grid/size-auto/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/size-auto/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/grid/size-auto/javascript.md b/static/usage/v6/grid/size-auto/javascript.md
similarity index 100%
rename from static/usage/grid/size-auto/javascript.md
rename to static/usage/v6/grid/size-auto/javascript.md
diff --git a/static/usage/grid/size-auto/react/main_css.md b/static/usage/v6/grid/size-auto/react/main_css.md
similarity index 100%
rename from static/usage/grid/size-auto/react/main_css.md
rename to static/usage/v6/grid/size-auto/react/main_css.md
diff --git a/static/usage/grid/size-auto/react/main_tsx.md b/static/usage/v6/grid/size-auto/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/size-auto/react/main_tsx.md
rename to static/usage/v6/grid/size-auto/react/main_tsx.md
diff --git a/static/usage/grid/size-auto/vue.md b/static/usage/v6/grid/size-auto/vue.md
similarity index 100%
rename from static/usage/grid/size-auto/vue.md
rename to static/usage/v6/grid/size-auto/vue.md
diff --git a/static/usage/grid/size-responsive/angular/example_component_css.md b/static/usage/v6/grid/size-responsive/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/size-responsive/angular/example_component_css.md
rename to static/usage/v6/grid/size-responsive/angular/example_component_css.md
diff --git a/static/usage/grid/size-responsive/angular/example_component_html.md b/static/usage/v6/grid/size-responsive/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/size-responsive/angular/example_component_html.md
rename to static/usage/v6/grid/size-responsive/angular/example_component_html.md
diff --git a/static/usage/v6/grid/size-responsive/demo.html b/static/usage/v6/grid/size-responsive/demo.html
new file mode 100644
index 00000000000..9176b7070a6
--- /dev/null
+++ b/static/usage/v6/grid/size-responsive/demo.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Stacked for xs breakpoint, equal width for sm and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="12" size-sm="3">1</ion-col>
+            <ion-col size="12" size-sm="3">2</ion-col>
+            <ion-col size="12" size-sm="3">3</ion-col>
+            <ion-col size="12" size-sm="3">4</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Equal width until md breakpoint, last column takes full width for md and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size-md="6">1</ion-col>
+            <ion-col size-md="6">2</ion-col>
+            <ion-col size-md="12">3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>2 per row until md breakpoint, 3 per row for md, equal width for lg and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="6" size-md="4" size-lg="2">1</ion-col>
+            <ion-col size="6" size-md="4" size-lg="2">2</ion-col>
+            <ion-col size="6" size-md="4" size-lg="2">3</ion-col>
+            <ion-col size="6" size-md="4" size-lg="2">4</ion-col>
+            <ion-col size="6" size-md="4" size-lg="2">5</ion-col>
+            <ion-col size="6" size-md="4" size-lg="2">6</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/size-responsive/index.md b/static/usage/v6/grid/size-responsive/index.md
new file mode 100644
index 00000000000..2d8c019868d
--- /dev/null
+++ b/static/usage/v6/grid/size-responsive/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/size-responsive/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/grid/size-responsive/javascript.md b/static/usage/v6/grid/size-responsive/javascript.md
similarity index 100%
rename from static/usage/grid/size-responsive/javascript.md
rename to static/usage/v6/grid/size-responsive/javascript.md
diff --git a/static/usage/grid/size-responsive/react/main_css.md b/static/usage/v6/grid/size-responsive/react/main_css.md
similarity index 100%
rename from static/usage/grid/size-responsive/react/main_css.md
rename to static/usage/v6/grid/size-responsive/react/main_css.md
diff --git a/static/usage/grid/size-responsive/react/main_tsx.md b/static/usage/v6/grid/size-responsive/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/size-responsive/react/main_tsx.md
rename to static/usage/v6/grid/size-responsive/react/main_tsx.md
diff --git a/static/usage/grid/size-responsive/vue.md b/static/usage/v6/grid/size-responsive/vue.md
similarity index 100%
rename from static/usage/grid/size-responsive/vue.md
rename to static/usage/v6/grid/size-responsive/vue.md
diff --git a/static/usage/grid/size/angular/example_component_css.md b/static/usage/v6/grid/size/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/size/angular/example_component_css.md
rename to static/usage/v6/grid/size/angular/example_component_css.md
diff --git a/static/usage/grid/size/angular/example_component_html.md b/static/usage/v6/grid/size/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/size/angular/example_component_html.md
rename to static/usage/v6/grid/size/angular/example_component_html.md
diff --git a/static/usage/v6/grid/size/demo.html b/static/usage/v6/grid/size/demo.html
new file mode 100644
index 00000000000..4d16f74065e
--- /dev/null
+++ b/static/usage/v6/grid/size/demo.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Column 2 has <code>size</code> set to <code>"8"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col size="8">2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns 3 & 4 have <code>size</code> set to <code>"3"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col size="3">3</ion-col>
+            <ion-col size="3">4</ion-col>
+            <ion-col>5</ion-col>
+            <ion-col>6</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns 1 & 2 have <code>size</code> set to <code>"4"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="4">1</ion-col>
+            <ion-col size="4">2</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/size/index.md b/static/usage/v6/grid/size/index.md
new file mode 100644
index 00000000000..58594977f92
--- /dev/null
+++ b/static/usage/v6/grid/size/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/size/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/grid/size/javascript.md b/static/usage/v6/grid/size/javascript.md
similarity index 100%
rename from static/usage/grid/size/javascript.md
rename to static/usage/v6/grid/size/javascript.md
diff --git a/static/usage/grid/size/react/main_css.md b/static/usage/v6/grid/size/react/main_css.md
similarity index 100%
rename from static/usage/grid/size/react/main_css.md
rename to static/usage/v6/grid/size/react/main_css.md
diff --git a/static/usage/grid/size/react/main_tsx.md b/static/usage/v6/grid/size/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/size/react/main_tsx.md
rename to static/usage/v6/grid/size/react/main_tsx.md
diff --git a/static/usage/grid/size/vue.md b/static/usage/v6/grid/size/vue.md
similarity index 100%
rename from static/usage/grid/size/vue.md
rename to static/usage/v6/grid/size/vue.md
diff --git a/static/usage/grid/vertical-alignment/angular/example_component_css.md b/static/usage/v6/grid/vertical-alignment/angular/example_component_css.md
similarity index 100%
rename from static/usage/grid/vertical-alignment/angular/example_component_css.md
rename to static/usage/v6/grid/vertical-alignment/angular/example_component_css.md
diff --git a/static/usage/grid/vertical-alignment/angular/example_component_html.md b/static/usage/v6/grid/vertical-alignment/angular/example_component_html.md
similarity index 100%
rename from static/usage/grid/vertical-alignment/angular/example_component_html.md
rename to static/usage/v6/grid/vertical-alignment/angular/example_component_html.md
diff --git a/static/usage/v6/grid/vertical-alignment/demo.html b/static/usage/v6/grid/vertical-alignment/demo.html
new file mode 100644
index 00000000000..dd1388fcdbf
--- /dev/null
+++ b/static/usage/v6/grid/vertical-alignment/demo.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Columns aligned at the top</b>
+        <ion-grid>
+          <ion-row class="ion-align-items-start">
+            <ion-col>
+              1
+            </ion-col>
+            <ion-col>
+              2
+            </ion-col>
+            <ion-col>
+              3
+            </ion-col>
+            <ion-col>
+              4 <br />
+              # <br />
+              # <br />
+              # <br />
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned at the center</b>
+        <ion-grid>
+          <ion-row class="ion-align-items-center">
+            <ion-col>
+              1
+            </ion-col>
+            <ion-col>
+              2
+            </ion-col>
+            <ion-col>
+              3
+            </ion-col>
+            <ion-col>
+              4 <br />
+              # <br />
+              # <br />
+              # <br />
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned at the bottom</b>
+        <ion-grid>
+          <ion-row class="ion-align-items-end">
+            <ion-col>
+              1
+            </ion-col>
+            <ion-col>
+              2
+            </ion-col>
+            <ion-col>
+              3
+            </ion-col>
+            <ion-col>
+              4 <br />
+              # <br />
+              # <br />
+              # <br />
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/grid/vertical-alignment/index.md b/static/usage/v6/grid/vertical-alignment/index.md
new file mode 100644
index 00000000000..954af27bfea
--- /dev/null
+++ b/static/usage/v6/grid/vertical-alignment/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/grid/vertical-alignment/demo.html"
+  size="400px"
+/>
diff --git a/static/usage/grid/vertical-alignment/javascript.md b/static/usage/v6/grid/vertical-alignment/javascript.md
similarity index 100%
rename from static/usage/grid/vertical-alignment/javascript.md
rename to static/usage/v6/grid/vertical-alignment/javascript.md
diff --git a/static/usage/grid/vertical-alignment/react/main_css.md b/static/usage/v6/grid/vertical-alignment/react/main_css.md
similarity index 100%
rename from static/usage/grid/vertical-alignment/react/main_css.md
rename to static/usage/v6/grid/vertical-alignment/react/main_css.md
diff --git a/static/usage/grid/vertical-alignment/react/main_tsx.md b/static/usage/v6/grid/vertical-alignment/react/main_tsx.md
similarity index 100%
rename from static/usage/grid/vertical-alignment/react/main_tsx.md
rename to static/usage/v6/grid/vertical-alignment/react/main_tsx.md
diff --git a/static/usage/grid/vertical-alignment/vue.md b/static/usage/v6/grid/vertical-alignment/vue.md
similarity index 100%
rename from static/usage/grid/vertical-alignment/vue.md
rename to static/usage/v6/grid/vertical-alignment/vue.md
diff --git a/static/usage/header/basic/angular.md b/static/usage/v6/header/basic/angular.md
similarity index 100%
rename from static/usage/header/basic/angular.md
rename to static/usage/v6/header/basic/angular.md
diff --git a/static/usage/v6/header/basic/demo.html b/static/usage/v6/header/basic/demo.html
new file mode 100644
index 00000000000..a6752caddb9
--- /dev/null
+++ b/static/usage/v6/header/basic/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Content</h1>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/header/basic/index.md b/static/usage/v6/header/basic/index.md
new file mode 100644
index 00000000000..67bc5d4fd6c
--- /dev/null
+++ b/static/usage/v6/header/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/header/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/basic/javascript.md b/static/usage/v6/header/basic/javascript.md
similarity index 100%
rename from static/usage/header/basic/javascript.md
rename to static/usage/v6/header/basic/javascript.md
diff --git a/static/usage/header/basic/react.md b/static/usage/v6/header/basic/react.md
similarity index 100%
rename from static/usage/header/basic/react.md
rename to static/usage/v6/header/basic/react.md
diff --git a/static/usage/header/basic/vue.md b/static/usage/v6/header/basic/vue.md
similarity index 100%
rename from static/usage/header/basic/vue.md
rename to static/usage/v6/header/basic/vue.md
diff --git a/static/usage/header/condense/angular.md b/static/usage/v6/header/condense/angular.md
similarity index 100%
rename from static/usage/header/condense/angular.md
rename to static/usage/v6/header/condense/angular.md
diff --git a/static/usage/v6/header/condense/demo.html b/static/usage/v6/header/condense/demo.html
new file mode 100644
index 00000000000..caed21b4dcd
--- /dev/null
+++ b/static/usage/v6/header/condense/demo.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Header</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <div class="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+        <h2>Sea Turtle</h2>
+        <img alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.</p>
+
+        <h2>Giraffe</h2>
+        <img alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+          have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+        <h2>Elephant</h2>
+        <img alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.</p>
+
+        <h2>Dolphin</h2>
+        <img alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+          gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with
+          about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap
+          that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/header/condense/index.md b/static/usage/v6/header/condense/index.md
new file mode 100644
index 00000000000..f1f8c0d8038
--- /dev/null
+++ b/static/usage/v6/header/condense/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/header/condense/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/condense/javascript.md b/static/usage/v6/header/condense/javascript.md
similarity index 100%
rename from static/usage/header/condense/javascript.md
rename to static/usage/v6/header/condense/javascript.md
diff --git a/static/usage/header/condense/react.md b/static/usage/v6/header/condense/react.md
similarity index 100%
rename from static/usage/header/condense/react.md
rename to static/usage/v6/header/condense/react.md
diff --git a/static/usage/header/condense/vue.md b/static/usage/v6/header/condense/vue.md
similarity index 100%
rename from static/usage/header/condense/vue.md
rename to static/usage/v6/header/condense/vue.md
diff --git a/static/usage/header/custom-scroll-target/angular/example_component_css.md b/static/usage/v6/header/custom-scroll-target/angular/example_component_css.md
similarity index 100%
rename from static/usage/header/custom-scroll-target/angular/example_component_css.md
rename to static/usage/v6/header/custom-scroll-target/angular/example_component_css.md
diff --git a/static/usage/header/custom-scroll-target/angular/example_component_html.md b/static/usage/v6/header/custom-scroll-target/angular/example_component_html.md
similarity index 100%
rename from static/usage/header/custom-scroll-target/angular/example_component_html.md
rename to static/usage/v6/header/custom-scroll-target/angular/example_component_html.md
diff --git a/static/usage/v6/header/custom-scroll-target/demo.html b/static/usage/v6/header/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..337bd2ece48
--- /dev/null
+++ b/static/usage/v6/header/custom-scroll-target/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .ion-content-scroll-host {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header collapse="fade">
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content scroll-y="false">
+      <div class="ion-content-scroll-host ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+        <h2>Sea Turtle</h2>
+        <img alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.</p>
+
+        <h2>Giraffe</h2>
+        <img alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+          have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+        <h2>Elephant</h2>
+        <img alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.</p>
+
+        <h2>Dolphin</h2>
+        <img alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+          gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with
+          about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap
+          that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/header/custom-scroll-target/index.md b/static/usage/v6/header/custom-scroll-target/index.md
new file mode 100644
index 00000000000..413db200c00
--- /dev/null
+++ b/static/usage/v6/header/custom-scroll-target/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/header/custom-scroll-target/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/custom-scroll-target/javascript.md b/static/usage/v6/header/custom-scroll-target/javascript.md
similarity index 100%
rename from static/usage/header/custom-scroll-target/javascript.md
rename to static/usage/v6/header/custom-scroll-target/javascript.md
diff --git a/static/usage/header/custom-scroll-target/react/main_css.md b/static/usage/v6/header/custom-scroll-target/react/main_css.md
similarity index 100%
rename from static/usage/header/custom-scroll-target/react/main_css.md
rename to static/usage/v6/header/custom-scroll-target/react/main_css.md
diff --git a/static/usage/header/custom-scroll-target/react/main_tsx.md b/static/usage/v6/header/custom-scroll-target/react/main_tsx.md
similarity index 100%
rename from static/usage/header/custom-scroll-target/react/main_tsx.md
rename to static/usage/v6/header/custom-scroll-target/react/main_tsx.md
diff --git a/static/usage/header/custom-scroll-target/vue.md b/static/usage/v6/header/custom-scroll-target/vue.md
similarity index 100%
rename from static/usage/header/custom-scroll-target/vue.md
rename to static/usage/v6/header/custom-scroll-target/vue.md
diff --git a/static/usage/header/fade/angular.md b/static/usage/v6/header/fade/angular.md
similarity index 100%
rename from static/usage/header/fade/angular.md
rename to static/usage/v6/header/fade/angular.md
diff --git a/static/usage/v6/header/fade/demo.html b/static/usage/v6/header/fade/demo.html
new file mode 100644
index 00000000000..06b24cc2eb4
--- /dev/null
+++ b/static/usage/v6/header/fade/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header collapse="fade">
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Animal Facts</h1>
+
+      <h2>Rhinoceros</h2>
+      <img alt="rhino standing near grass"
+        src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+        the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+        the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+        horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+      <h2>Sea Turtle</h2>
+      <img alt="brown sea turtle in water"
+        src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+        turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+        adapted for swimming, so they are vulnerable while on land.</p>
+
+      <h2>Giraffe</h2>
+      <img alt="giraffe sticking its tongue out"
+        src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+        a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+        the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+      <h2>Elephant</h2>
+      <img alt="two grey elephants on grass plains during sunset"
+        src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+        long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+        suck up water for drinking or bathing.</p>
+
+      <h2>Dolphin</h2>
+      <img alt="black and white dolphin in water"
+        src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+        blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+        100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+        to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/header/fade/index.md b/static/usage/v6/header/fade/index.md
new file mode 100644
index 00000000000..37d3c68df77
--- /dev/null
+++ b/static/usage/v6/header/fade/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/header/fade/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/fade/javascript.md b/static/usage/v6/header/fade/javascript.md
similarity index 100%
rename from static/usage/header/fade/javascript.md
rename to static/usage/v6/header/fade/javascript.md
diff --git a/static/usage/header/fade/react.md b/static/usage/v6/header/fade/react.md
similarity index 100%
rename from static/usage/header/fade/react.md
rename to static/usage/v6/header/fade/react.md
diff --git a/static/usage/header/fade/vue.md b/static/usage/v6/header/fade/vue.md
similarity index 100%
rename from static/usage/header/fade/vue.md
rename to static/usage/v6/header/fade/vue.md
diff --git a/static/usage/header/no-border/angular.md b/static/usage/v6/header/no-border/angular.md
similarity index 100%
rename from static/usage/header/no-border/angular.md
rename to static/usage/v6/header/no-border/angular.md
diff --git a/static/usage/v6/header/no-border/demo.html b/static/usage/v6/header/no-border/demo.html
new file mode 100644
index 00000000000..9e8356fe253
--- /dev/null
+++ b/static/usage/v6/header/no-border/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header class="ion-no-border">
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Content</h1>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/header/no-border/index.md b/static/usage/v6/header/no-border/index.md
new file mode 100644
index 00000000000..d81316d4c33
--- /dev/null
+++ b/static/usage/v6/header/no-border/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/header/no-border/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/no-border/javascript.md b/static/usage/v6/header/no-border/javascript.md
similarity index 100%
rename from static/usage/header/no-border/javascript.md
rename to static/usage/v6/header/no-border/javascript.md
diff --git a/static/usage/header/no-border/react.md b/static/usage/v6/header/no-border/react.md
similarity index 100%
rename from static/usage/header/no-border/react.md
rename to static/usage/v6/header/no-border/react.md
diff --git a/static/usage/header/no-border/vue.md b/static/usage/v6/header/no-border/vue.md
similarity index 100%
rename from static/usage/header/no-border/vue.md
rename to static/usage/v6/header/no-border/vue.md
diff --git a/static/usage/header/translucent/angular.md b/static/usage/v6/header/translucent/angular.md
similarity index 100%
rename from static/usage/header/translucent/angular.md
rename to static/usage/v6/header/translucent/angular.md
diff --git a/static/usage/v6/header/translucent/demo.html b/static/usage/v6/header/translucent/demo.html
new file mode 100644
index 00000000000..bea9d3ecba1
--- /dev/null
+++ b/static/usage/v6/header/translucent/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true" class="ion-padding">
+      <h1>Animal Facts</h1>
+
+      <h2>Rhinoceros</h2>
+      <img alt="rhino standing near grass"
+        src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+        the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+        the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+        horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+      <h2>Sea Turtle</h2>
+      <img alt="brown sea turtle in water"
+        src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+        turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+        adapted for swimming, so they are vulnerable while on land.</p>
+
+      <h2>Giraffe</h2>
+      <img alt="giraffe sticking its tongue out"
+        src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+        a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+        the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+      <h2>Elephant</h2>
+      <img alt="two grey elephants on grass plains during sunset"
+        src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+        long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+        suck up water for drinking or bathing.</p>
+
+      <h2>Dolphin</h2>
+      <img alt="black and white dolphin in water"
+        src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+        blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+        100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+        to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/header/translucent/index.md b/static/usage/v6/header/translucent/index.md
new file mode 100644
index 00000000000..19f3e1a3d05
--- /dev/null
+++ b/static/usage/v6/header/translucent/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/header/translucent/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/translucent/javascript.md b/static/usage/v6/header/translucent/javascript.md
similarity index 100%
rename from static/usage/header/translucent/javascript.md
rename to static/usage/v6/header/translucent/javascript.md
diff --git a/static/usage/header/translucent/react.md b/static/usage/v6/header/translucent/react.md
similarity index 100%
rename from static/usage/header/translucent/react.md
rename to static/usage/v6/header/translucent/react.md
diff --git a/static/usage/header/translucent/vue.md b/static/usage/v6/header/translucent/vue.md
similarity index 100%
rename from static/usage/header/translucent/vue.md
rename to static/usage/v6/header/translucent/vue.md
diff --git a/static/usage/img/basic/angular.md b/static/usage/v6/img/basic/angular.md
similarity index 100%
rename from static/usage/img/basic/angular.md
rename to static/usage/v6/img/basic/angular.md
diff --git a/static/usage/v6/img/basic/demo.html b/static/usage/v6/img/basic/demo.html
new file mode 100644
index 00000000000..63f7703963c
--- /dev/null
+++ b/static/usage/v6/img/basic/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Image</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-img {
+      width: 300px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-img src="https://docs-demo.ionic.io/assets/madison.jpg"
+          alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/img/basic/index.md b/static/usage/v6/img/basic/index.md
new file mode 100644
index 00000000000..2988f9ce3b8
--- /dev/null
+++ b/static/usage/v6/img/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/img/basic/demo.html" />
diff --git a/static/usage/img/basic/javascript.md b/static/usage/v6/img/basic/javascript.md
similarity index 100%
rename from static/usage/img/basic/javascript.md
rename to static/usage/v6/img/basic/javascript.md
diff --git a/static/usage/img/basic/react.md b/static/usage/v6/img/basic/react.md
similarity index 100%
rename from static/usage/img/basic/react.md
rename to static/usage/v6/img/basic/react.md
diff --git a/static/usage/img/basic/vue.md b/static/usage/v6/img/basic/vue.md
similarity index 100%
rename from static/usage/img/basic/vue.md
rename to static/usage/v6/img/basic/vue.md
diff --git a/static/usage/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v6/infinite-scroll/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/infinite-scroll/basic/angular/example_component_html.md
rename to static/usage/v6/infinite-scroll/basic/angular/example_component_html.md
diff --git a/static/usage/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md
similarity index 100%
rename from static/usage/infinite-scroll/basic/angular/example_component_ts.md
rename to static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md
diff --git a/static/usage/v6/infinite-scroll/basic/demo.html b/static/usage/v6/infinite-scroll/basic/demo.html
new file mode 100644
index 00000000000..ea12f54b686
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/basic/demo.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Infinite Scroll</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <ion-list></ion-list>
+      <ion-infinite-scroll>
+        <ion-infinite-scroll-content></ion-infinite-scroll-content>
+      </ion-infinite-scroll>
+    </ion-content>
+  </ion-app>
+  <script>
+    const infiniteScroll = document.querySelector('ion-infinite-scroll');
+    infiniteScroll.addEventListener('ionInfinite', (event) => {
+      setTimeout(() => {
+        generateItems();
+        event.target.complete();
+      }, 500);
+    });
+
+    const list = document.querySelector('ion-list');
+
+    function generateItems() {
+      const count = list.childElementCount + 1;
+      const total = count + 50;
+      for (let i = count; i < total; i++) {
+        const el = document.createElement('ion-item');
+
+        const avatar = document.createElement('ion-avatar');
+        avatar.slot = 'start';
+        const img = document.createElement('img');
+        img.src = `https://picsum.photos/80/80?random=${i}`;
+        img.alt = 'Avatar';
+
+        avatar.appendChild(img);
+        el.appendChild(avatar);
+
+        const text = document.createElement('ion-label');
+        text.textContent = `Item ${i}`;
+
+        el.appendChild(text);
+
+        list.appendChild(el);
+      }
+    }
+
+    generateItems();
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/infinite-scroll/basic/index.md b/static/usage/v6/infinite-scroll/basic/index.md
new file mode 100644
index 00000000000..9082f9eed87
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/basic/index.md
@@ -0,0 +1,23 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/infinite-scroll/basic/demo.html"
+/>
diff --git a/static/usage/infinite-scroll/basic/javascript.md b/static/usage/v6/infinite-scroll/basic/javascript.md
similarity index 100%
rename from static/usage/infinite-scroll/basic/javascript.md
rename to static/usage/v6/infinite-scroll/basic/javascript.md
diff --git a/static/usage/infinite-scroll/basic/react.md b/static/usage/v6/infinite-scroll/basic/react.md
similarity index 100%
rename from static/usage/infinite-scroll/basic/react.md
rename to static/usage/v6/infinite-scroll/basic/react.md
diff --git a/static/usage/infinite-scroll/basic/vue.md b/static/usage/v6/infinite-scroll/basic/vue.md
similarity index 100%
rename from static/usage/infinite-scroll/basic/vue.md
rename to static/usage/v6/infinite-scroll/basic/vue.md
diff --git a/static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
similarity index 100%
rename from static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
rename to static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
diff --git a/static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
similarity index 100%
rename from static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
rename to static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
diff --git a/static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
similarity index 100%
rename from static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
rename to static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..b56e952cfe7
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Infinite Scroll</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    svg {
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+    }
+
+    .infinite-scroll-content {
+      text-align: center;
+      padding: 20px 0;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <ion-list></ion-list>
+      <ion-infinite-scroll>
+        <div class="infinite-scroll-content">
+          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+            y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+            <circle fill="none" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
+            <line fill="none" stroke-linecap="round" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" x1="50"
+              y1="50" x2="85" y2="50.5">
+              <animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 50" to="360 50 50"
+                repeatCount="indefinite" />
+            </line>
+            <line fill="none" stroke-linecap="round" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" x1="50"
+              y1="50" x2="49.5" y2="74">
+              <animateTransform attributeName="transform" dur="15s" type="rotate" from="0 50 50" to="360 50 50"
+                repeatCount="indefinite" />
+            </line>
+          </svg>
+        </div>
+      </ion-infinite-scroll>
+    </ion-content>
+  </ion-app>
+  <script>
+    const list = document.querySelector('ion-list');
+
+    function generateItems() {
+      const count = list.childElementCount + 1;
+      const total = count + 50;
+      for (let i = count; i < total; i++) {
+        const el = document.createElement('ion-item');
+
+        const avatar = document.createElement('ion-avatar');
+        avatar.slot = 'start';
+        const img = document.createElement('img');
+        img.src = `https://picsum.photos/80/80?random=${i}`;
+        img.alt = 'Avatar';
+
+        avatar.appendChild(img);
+        el.appendChild(avatar);
+
+        const text = document.createElement('ion-label');
+        text.textContent = `Item ${i}`;
+
+        el.appendChild(text);
+
+        list.appendChild(el);
+      }
+    }
+
+    generateItems();
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md
new file mode 100644
index 00000000000..12ee6e7d975
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html"
+/>
diff --git a/static/usage/infinite-scroll/custom-infinite-scroll-content/javascript.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/javascript.md
similarity index 100%
rename from static/usage/infinite-scroll/custom-infinite-scroll-content/javascript.md
rename to static/usage/v6/infinite-scroll/custom-infinite-scroll-content/javascript.md
diff --git a/static/usage/infinite-scroll/custom-infinite-scroll-content/react/main_css.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
similarity index 100%
rename from static/usage/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
rename to static/usage/v6/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
diff --git a/static/usage/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
similarity index 100%
rename from static/usage/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
rename to static/usage/v6/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
diff --git a/static/usage/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/vue.md
similarity index 100%
rename from static/usage/infinite-scroll/custom-infinite-scroll-content/vue.md
rename to static/usage/v6/infinite-scroll/custom-infinite-scroll-content/vue.md
diff --git a/static/usage/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
similarity index 100%
rename from static/usage/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
rename to static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
diff --git a/static/usage/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
similarity index 100%
rename from static/usage/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
rename to static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..46016207432
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Infinite Scroll</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <ion-list></ion-list>
+      <ion-infinite-scroll>
+        <ion-infinite-scroll-content loading-text="Please wait..." loading-spinner="bubbles">
+        </ion-infinite-scroll-content>
+      </ion-infinite-scroll>
+    </ion-content>
+  </ion-app>
+  <script>
+    const list = document.querySelector('ion-list');
+
+    function generateItems() {
+      const count = list.childElementCount + 1;
+      const total = count + 50;
+      for (let i = count; i < total; i++) {
+        const el = document.createElement('ion-item');
+
+        const avatar = document.createElement('ion-avatar');
+        avatar.slot = 'start';
+        const img = document.createElement('img');
+        img.src = `https://picsum.photos/80/80?random=${i}`;
+        img.alt = 'Avatar';
+
+        avatar.appendChild(img);
+        el.appendChild(avatar);
+
+        const text = document.createElement('ion-label');
+        text.textContent = `Item ${i}`;
+
+        el.appendChild(text);
+
+        list.appendChild(el);
+      }
+    }
+
+    generateItems();
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
new file mode 100644
index 00000000000..4a391e1ec3a
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
@@ -0,0 +1,23 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/infinite-scroll/infinite-scroll-content/demo.html"
+/>
diff --git a/static/usage/infinite-scroll/infinite-scroll-content/javascript.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/javascript.md
similarity index 100%
rename from static/usage/infinite-scroll/infinite-scroll-content/javascript.md
rename to static/usage/v6/infinite-scroll/infinite-scroll-content/javascript.md
diff --git a/static/usage/infinite-scroll/infinite-scroll-content/react.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/react.md
similarity index 100%
rename from static/usage/infinite-scroll/infinite-scroll-content/react.md
rename to static/usage/v6/infinite-scroll/infinite-scroll-content/react.md
diff --git a/static/usage/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/vue.md
similarity index 100%
rename from static/usage/infinite-scroll/infinite-scroll-content/vue.md
rename to static/usage/v6/infinite-scroll/infinite-scroll-content/vue.md
diff --git a/static/usage/input/basic/angular.md b/static/usage/v6/input/basic/angular.md
similarity index 100%
rename from static/usage/input/basic/angular.md
rename to static/usage/v6/input/basic/angular.md
diff --git a/static/usage/v6/input/basic/demo.html b/static/usage/v6/input/basic/demo.html
new file mode 100644
index 00000000000..264bbaa75e6
--- /dev/null
+++ b/static/usage/v6/input/basic/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Default input</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Input with placeholder</ion-label>
+            <ion-input placeholder="Enter company name"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Input with value</ion-label>
+            <ion-input value="121 S Pinckney St #300"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Readonly input</ion-label>
+            <ion-input value="Madison" readonly="true"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled input</ion-label>
+            <ion-input value="53703" disabled="true"></ion-input>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/input/basic/index.md b/static/usage/v6/input/basic/index.md
new file mode 100644
index 00000000000..aec74aa5fe6
--- /dev/null
+++ b/static/usage/v6/input/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/input/basic/demo.html" size="300px" />
diff --git a/static/usage/input/basic/javascript.md b/static/usage/v6/input/basic/javascript.md
similarity index 100%
rename from static/usage/input/basic/javascript.md
rename to static/usage/v6/input/basic/javascript.md
diff --git a/static/usage/input/basic/react.md b/static/usage/v6/input/basic/react.md
similarity index 100%
rename from static/usage/input/basic/react.md
rename to static/usage/v6/input/basic/react.md
diff --git a/static/usage/input/basic/vue.md b/static/usage/v6/input/basic/vue.md
similarity index 100%
rename from static/usage/input/basic/vue.md
rename to static/usage/v6/input/basic/vue.md
diff --git a/static/usage/input/clear/angular.md b/static/usage/v6/input/clear/angular.md
similarity index 100%
rename from static/usage/input/clear/angular.md
rename to static/usage/v6/input/clear/angular.md
diff --git a/static/usage/v6/input/clear/demo.html b/static/usage/v6/input/clear/demo.html
new file mode 100644
index 00000000000..e46c310a3a4
--- /dev/null
+++ b/static/usage/v6/input/clear/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label position="stacked">Input with clear button</ion-label>
+            <ion-input clear-input="true" placeholder="Enter text to see clear button" value="Default value">
+            </ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label position="stacked">Input with clear on edit</ion-label>
+            <ion-input clear-on-edit="true" placeholder="Enter text, leave the input, come back and type to clear">
+            </ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label position="stacked">Password input</ion-label>
+            <ion-input type="password" placeholder="Enter text, leave the input, come back and type to clear">
+            </ion-input>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/input/clear/index.md b/static/usage/v6/input/clear/index.md
new file mode 100644
index 00000000000..1bd98995375
--- /dev/null
+++ b/static/usage/v6/input/clear/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/input/clear/demo.html" size="250px" />
diff --git a/static/usage/input/clear/javascript.md b/static/usage/v6/input/clear/javascript.md
similarity index 100%
rename from static/usage/input/clear/javascript.md
rename to static/usage/v6/input/clear/javascript.md
diff --git a/static/usage/input/clear/react.md b/static/usage/v6/input/clear/react.md
similarity index 100%
rename from static/usage/input/clear/react.md
rename to static/usage/v6/input/clear/react.md
diff --git a/static/usage/input/clear/vue.md b/static/usage/v6/input/clear/vue.md
similarity index 100%
rename from static/usage/input/clear/vue.md
rename to static/usage/v6/input/clear/vue.md
diff --git a/static/usage/input/fill/angular.md b/static/usage/v6/input/fill/angular.md
similarity index 100%
rename from static/usage/input/fill/angular.md
rename to static/usage/v6/input/fill/angular.md
diff --git a/static/usage/v6/input/fill/demo.html b/static/usage/v6/input/fill/demo.html
new file mode 100644
index 00000000000..a7afe6c8d13
--- /dev/null
+++ b/static/usage/v6/input/fill/demo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label position="floating">Default input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item fill="solid">
+          <ion-label position="floating">Solid input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item fill="outline">
+          <ion-label position="floating">Outline input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/input/fill/index.md b/static/usage/v6/input/fill/index.md
new file mode 100644
index 00000000000..cad46dc2dda
--- /dev/null
+++ b/static/usage/v6/input/fill/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/input/fill/demo.html" size="250px" />
diff --git a/static/usage/input/fill/javascript.md b/static/usage/v6/input/fill/javascript.md
similarity index 100%
rename from static/usage/input/fill/javascript.md
rename to static/usage/v6/input/fill/javascript.md
diff --git a/static/usage/input/fill/react.md b/static/usage/v6/input/fill/react.md
similarity index 100%
rename from static/usage/input/fill/react.md
rename to static/usage/v6/input/fill/react.md
diff --git a/static/usage/input/fill/vue.md b/static/usage/v6/input/fill/vue.md
similarity index 100%
rename from static/usage/input/fill/vue.md
rename to static/usage/v6/input/fill/vue.md
diff --git a/static/usage/input/labels/angular.md b/static/usage/v6/input/labels/angular.md
similarity index 100%
rename from static/usage/input/labels/angular.md
rename to static/usage/v6/input/labels/angular.md
diff --git a/static/usage/v6/input/labels/demo.html b/static/usage/v6/input/labels/demo.html
new file mode 100644
index 00000000000..ea089a533e8
--- /dev/null
+++ b/static/usage/v6/input/labels/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Default label</ion-label>
+            <ion-input placeholder="Enter text"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label position="fixed">Fixed label</ion-label>
+            <ion-input placeholder="Enter text"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label position="stacked">Stacked label</ion-label>
+            <ion-input placeholder="Enter text"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label position="floating">Floating label</ion-label>
+            <ion-input placeholder="Enter text"></ion-input>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/input/labels/index.md b/static/usage/v6/input/labels/index.md
new file mode 100644
index 00000000000..95cb588ac19
--- /dev/null
+++ b/static/usage/v6/input/labels/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/input/labels/demo.html" size="300px" />
diff --git a/static/usage/input/labels/javascript.md b/static/usage/v6/input/labels/javascript.md
similarity index 100%
rename from static/usage/input/labels/javascript.md
rename to static/usage/v6/input/labels/javascript.md
diff --git a/static/usage/input/labels/react.md b/static/usage/v6/input/labels/react.md
similarity index 100%
rename from static/usage/input/labels/react.md
rename to static/usage/v6/input/labels/react.md
diff --git a/static/usage/input/labels/vue.md b/static/usage/v6/input/labels/vue.md
similarity index 100%
rename from static/usage/input/labels/vue.md
rename to static/usage/v6/input/labels/vue.md
diff --git a/static/usage/input/theming/colors/angular.md b/static/usage/v6/input/theming/colors/angular.md
similarity index 100%
rename from static/usage/input/theming/colors/angular.md
rename to static/usage/v6/input/theming/colors/angular.md
diff --git a/static/usage/v6/input/theming/colors/demo.html b/static/usage/v6/input/theming/colors/demo.html
new file mode 100644
index 00000000000..c0c93908ac6
--- /dev/null
+++ b/static/usage/v6/input/theming/colors/demo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+      flex-wrap: wrap;
+    }
+
+    .container ion-input {
+      flex: 1 1 33%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-input color="primary" placeholder="Primary input"></ion-input>
+        <ion-input color="secondary" placeholder="Secondary input"></ion-input>
+        <ion-input color="tertiary" placeholder="Tertiary input"></ion-input>
+        <ion-input color="success" placeholder="Success input"></ion-input>
+        <ion-input color="warning" placeholder="Warning input"></ion-input>
+        <ion-input color="danger" placeholder="Danger input"></ion-input>
+        <ion-input color="light" placeholder="Light input"></ion-input>
+        <ion-input color="medium" placeholder="Medium input"></ion-input>
+        <ion-input color="dark" placeholder="Dark input"></ion-input>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/input/theming/colors/index.md b/static/usage/v6/input/theming/colors/index.md
new file mode 100644
index 00000000000..c20a64153fe
--- /dev/null
+++ b/static/usage/v6/input/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/input/theming/colors/demo.html" size="200px" />
diff --git a/static/usage/input/theming/colors/javascript.md b/static/usage/v6/input/theming/colors/javascript.md
similarity index 100%
rename from static/usage/input/theming/colors/javascript.md
rename to static/usage/v6/input/theming/colors/javascript.md
diff --git a/static/usage/input/theming/colors/react.md b/static/usage/v6/input/theming/colors/react.md
similarity index 100%
rename from static/usage/input/theming/colors/react.md
rename to static/usage/v6/input/theming/colors/react.md
diff --git a/static/usage/input/theming/colors/vue.md b/static/usage/v6/input/theming/colors/vue.md
similarity index 100%
rename from static/usage/input/theming/colors/vue.md
rename to static/usage/v6/input/theming/colors/vue.md
diff --git a/static/usage/input/theming/css-properties/angular/example_component_css.md b/static/usage/v6/input/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/input/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/input/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/input/theming/css-properties/angular/example_component_html.md b/static/usage/v6/input/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/input/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/input/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/input/theming/css-properties/demo.html b/static/usage/v6/input/theming/css-properties/demo.html
new file mode 100644
index 00000000000..4414ead7bf6
--- /dev/null
+++ b/static/usage/v6/input/theming/css-properties/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 200px;
+      margin: 0 auto;
+    }
+
+    ion-input.custom {
+      --background: #373737;
+      --color: #fff;
+      --placeholder-color: #ddd;
+      --placeholder-opacity: .8;
+
+      --padding-bottom: 10px;
+      --padding-end: 10px;
+      --padding-start: 10px;
+      --padding-top: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-input placeholder="Custom input" class="custom"></ion-input>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/input/theming/css-properties/index.md b/static/usage/v6/input/theming/css-properties/index.md
new file mode 100644
index 00000000000..a2e6ef2484b
--- /dev/null
+++ b/static/usage/v6/input/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/input/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/input/theming/css-properties/javascript.md b/static/usage/v6/input/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/input/theming/css-properties/javascript.md
rename to static/usage/v6/input/theming/css-properties/javascript.md
diff --git a/static/usage/input/theming/css-properties/react/main_css.md b/static/usage/v6/input/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/input/theming/css-properties/react/main_css.md
rename to static/usage/v6/input/theming/css-properties/react/main_css.md
diff --git a/static/usage/input/theming/css-properties/react/main_tsx.md b/static/usage/v6/input/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/input/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/input/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/input/theming/css-properties/vue.md b/static/usage/v6/input/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/input/theming/css-properties/vue.md
rename to static/usage/v6/input/theming/css-properties/vue.md
diff --git a/static/usage/input/types/angular.md b/static/usage/v6/input/types/angular.md
similarity index 100%
rename from static/usage/input/types/angular.md
rename to static/usage/v6/input/types/angular.md
diff --git a/static/usage/v6/input/types/demo.html b/static/usage/v6/input/types/demo.html
new file mode 100644
index 00000000000..5955051f78f
--- /dev/null
+++ b/static/usage/v6/input/types/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Text input</ion-label>
+            <ion-input placeholder="Enter text"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Number input</ion-label>
+            <ion-input type="number" placeholder="000"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Password input</ion-label>
+            <ion-input type="password" value="password"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Email input</ion-label>
+            <ion-input type="email" placeholder="email@domain.com"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Telephone input</ion-label>
+            <ion-input type="tel" placeholder="888-888-8888"></ion-input>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/input/types/index.md b/static/usage/v6/input/types/index.md
new file mode 100644
index 00000000000..a5cddfe6f48
--- /dev/null
+++ b/static/usage/v6/input/types/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/input/types/demo.html" size="300px" />
diff --git a/static/usage/input/types/javascript.md b/static/usage/v6/input/types/javascript.md
similarity index 100%
rename from static/usage/input/types/javascript.md
rename to static/usage/v6/input/types/javascript.md
diff --git a/static/usage/input/types/react.md b/static/usage/v6/input/types/react.md
similarity index 100%
rename from static/usage/input/types/react.md
rename to static/usage/v6/input/types/react.md
diff --git a/static/usage/input/types/vue.md b/static/usage/v6/input/types/vue.md
similarity index 100%
rename from static/usage/input/types/vue.md
rename to static/usage/v6/input/types/vue.md
diff --git a/static/usage/item-divider/basic/angular.md b/static/usage/v6/item-divider/basic/angular.md
similarity index 100%
rename from static/usage/item-divider/basic/angular.md
rename to static/usage/v6/item-divider/basic/angular.md
diff --git a/static/usage/v6/item-divider/basic/demo.html b/static/usage/v6/item-divider/basic/demo.html
new file mode 100644
index 00000000000..d99c52d65af
--- /dev/null
+++ b/static/usage/v6/item-divider/basic/demo.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Divider</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item-group>
+            <ion-item-divider>
+              <ion-label>
+                Section A
+              </ion-label>
+            </ion-item-divider>
+
+            <ion-item>
+              <ion-label>A1</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>A2</ion-label>
+            </ion-item>
+            <ion-item lines="none">
+              <ion-label>A3</ion-label>
+            </ion-item>
+          </ion-item-group>
+
+          <ion-item-group>
+            <ion-item-divider>
+              <ion-label>
+                Section B
+              </ion-label>
+            </ion-item-divider>
+
+            <ion-item>
+              <ion-label>B1</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>B2</ion-label>
+            </ion-item>
+            <ion-item lines="none">
+              <ion-label>B3</ion-label>
+            </ion-item>
+          </ion-item-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item-divider/basic/index.md b/static/usage/v6/item-divider/basic/index.md
new file mode 100644
index 00000000000..0e88dd9accf
--- /dev/null
+++ b/static/usage/v6/item-divider/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item-divider/basic/demo.html" size="medium" />
diff --git a/static/usage/item-divider/basic/javascript.md b/static/usage/v6/item-divider/basic/javascript.md
similarity index 100%
rename from static/usage/item-divider/basic/javascript.md
rename to static/usage/v6/item-divider/basic/javascript.md
diff --git a/static/usage/item-divider/basic/react.md b/static/usage/v6/item-divider/basic/react.md
similarity index 100%
rename from static/usage/item-divider/basic/react.md
rename to static/usage/v6/item-divider/basic/react.md
diff --git a/static/usage/item-divider/basic/vue.md b/static/usage/v6/item-divider/basic/vue.md
similarity index 100%
rename from static/usage/item-divider/basic/vue.md
rename to static/usage/v6/item-divider/basic/vue.md
diff --git a/static/usage/item-divider/theming/colors/angular.md b/static/usage/v6/item-divider/theming/colors/angular.md
similarity index 100%
rename from static/usage/item-divider/theming/colors/angular.md
rename to static/usage/v6/item-divider/theming/colors/angular.md
diff --git a/static/usage/v6/item-divider/theming/colors/demo.html b/static/usage/v6/item-divider/theming/colors/demo.html
new file mode 100644
index 00000000000..354ab9096e8
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/colors/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Divider</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item-divider>
+          <ion-label>Default</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="primary">
+          <ion-label>Primary</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="secondary">
+          <ion-label>Secondary</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="tertiary">
+          <ion-label>Tertiary</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="success">
+          <ion-label>Success</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="warning">
+          <ion-label>Warning</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="danger">
+          <ion-label>Danger</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="light">
+          <ion-label>Light</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="medium">
+          <ion-label>Medium</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="dark">
+          <ion-label>Dark</ion-label>
+        </ion-item-divider>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item-divider/theming/colors/index.md b/static/usage/v6/item-divider/theming/colors/index.md
new file mode 100644
index 00000000000..d883aabbdf7
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/colors/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item-divider/theming/colors/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/item-divider/theming/colors/javascript.md b/static/usage/v6/item-divider/theming/colors/javascript.md
similarity index 100%
rename from static/usage/item-divider/theming/colors/javascript.md
rename to static/usage/v6/item-divider/theming/colors/javascript.md
diff --git a/static/usage/item-divider/theming/colors/react.md b/static/usage/v6/item-divider/theming/colors/react.md
similarity index 100%
rename from static/usage/item-divider/theming/colors/react.md
rename to static/usage/v6/item-divider/theming/colors/react.md
diff --git a/static/usage/item-divider/theming/colors/vue.md b/static/usage/v6/item-divider/theming/colors/vue.md
similarity index 100%
rename from static/usage/item-divider/theming/colors/vue.md
rename to static/usage/v6/item-divider/theming/colors/vue.md
diff --git a/static/usage/item-divider/theming/css-properties/angular/example_component_css.md b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/item-divider/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/item-divider/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/item-divider/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/item-divider/theming/css-properties/demo.html b/static/usage/v6/item-divider/theming/css-properties/demo.html
new file mode 100644
index 00000000000..9223767446d
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/css-properties/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Divider</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-item-divider {
+      --background: #19422d;
+      --color: #fff;
+
+      --padding-top: 10px;
+      --padding-bottom: 10px;
+      --padding-start: 20px;
+      --padding-end: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item-divider>
+          <ion-label>
+            Item Divider
+          </ion-label>
+        </ion-item-divider>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item-divider/theming/css-properties/index.md b/static/usage/v6/item-divider/theming/css-properties/index.md
new file mode 100644
index 00000000000..0b3763560e2
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/item-divider/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/item-divider/theming/css-properties/javascript.md b/static/usage/v6/item-divider/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/item-divider/theming/css-properties/javascript.md
rename to static/usage/v6/item-divider/theming/css-properties/javascript.md
diff --git a/static/usage/item-divider/theming/css-properties/react/main_css.md b/static/usage/v6/item-divider/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/item-divider/theming/css-properties/react/main_css.md
rename to static/usage/v6/item-divider/theming/css-properties/react/main_css.md
diff --git a/static/usage/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/item-divider/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/item-divider/theming/css-properties/vue.md b/static/usage/v6/item-divider/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/item-divider/theming/css-properties/vue.md
rename to static/usage/v6/item-divider/theming/css-properties/vue.md
diff --git a/static/usage/item-group/basic/angular.md b/static/usage/v6/item-group/basic/angular.md
similarity index 100%
rename from static/usage/item-group/basic/angular.md
rename to static/usage/v6/item-group/basic/angular.md
diff --git a/static/usage/v6/item-group/basic/demo.html b/static/usage/v6/item-group/basic/demo.html
new file mode 100644
index 00000000000..eaf062c371d
--- /dev/null
+++ b/static/usage/v6/item-group/basic/demo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Group</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>A</ion-label>
+          </ion-item-divider>
+
+          <ion-item>
+            <ion-label>Angola</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Argentina</ion-label>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label>Armenia</ion-label>
+          </ion-item>
+        </ion-item-group>
+
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>B</ion-label>
+          </ion-item-divider>
+
+          <ion-item>
+            <ion-label>Bangladesh</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Belarus</ion-label>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label>Belgium</ion-label>
+          </ion-item>
+        </ion-item-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item-group/basic/index.md b/static/usage/v6/item-group/basic/index.md
new file mode 100644
index 00000000000..456e85a4064
--- /dev/null
+++ b/static/usage/v6/item-group/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item-group/basic/demo.html" size="medium" />
diff --git a/static/usage/item-group/basic/javascript.md b/static/usage/v6/item-group/basic/javascript.md
similarity index 100%
rename from static/usage/item-group/basic/javascript.md
rename to static/usage/v6/item-group/basic/javascript.md
diff --git a/static/usage/item-group/basic/react.md b/static/usage/v6/item-group/basic/react.md
similarity index 100%
rename from static/usage/item-group/basic/react.md
rename to static/usage/v6/item-group/basic/react.md
diff --git a/static/usage/item-group/basic/vue.md b/static/usage/v6/item-group/basic/vue.md
similarity index 100%
rename from static/usage/item-group/basic/vue.md
rename to static/usage/v6/item-group/basic/vue.md
diff --git a/static/usage/item-group/sliding-items/angular.md b/static/usage/v6/item-group/sliding-items/angular.md
similarity index 100%
rename from static/usage/item-group/sliding-items/angular.md
rename to static/usage/v6/item-group/sliding-items/angular.md
diff --git a/static/usage/v6/item-group/sliding-items/demo.html b/static/usage/v6/item-group/sliding-items/demo.html
new file mode 100644
index 00000000000..87c87870df4
--- /dev/null
+++ b/static/usage/v6/item-group/sliding-items/demo.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Group</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>
+              Fruits
+            </ion-label>
+          </ion-item-divider>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>
+                Grapes
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>
+                Apples
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item lines="none">
+              <ion-label>
+                Bananas
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </ion-item-group>
+
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>
+              Vegetables
+            </ion-label>
+          </ion-item-divider>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>
+                Carrots
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>
+                Broccoli
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item lines="none">
+              <ion-label>
+                Celery
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </ion-item-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item-group/sliding-items/index.md b/static/usage/v6/item-group/sliding-items/index.md
new file mode 100644
index 00000000000..b63a864a248
--- /dev/null
+++ b/static/usage/v6/item-group/sliding-items/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item-group/sliding-items/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/item-group/sliding-items/javascript.md b/static/usage/v6/item-group/sliding-items/javascript.md
similarity index 100%
rename from static/usage/item-group/sliding-items/javascript.md
rename to static/usage/v6/item-group/sliding-items/javascript.md
diff --git a/static/usage/item-group/sliding-items/react.md b/static/usage/v6/item-group/sliding-items/react.md
similarity index 100%
rename from static/usage/item-group/sliding-items/react.md
rename to static/usage/v6/item-group/sliding-items/react.md
diff --git a/static/usage/item-group/sliding-items/vue.md b/static/usage/v6/item-group/sliding-items/vue.md
similarity index 100%
rename from static/usage/item-group/sliding-items/vue.md
rename to static/usage/v6/item-group/sliding-items/vue.md
diff --git a/static/usage/item-sliding/basic/angular.md b/static/usage/v6/item-sliding/basic/angular.md
similarity index 100%
rename from static/usage/item-sliding/basic/angular.md
rename to static/usage/v6/item-sliding/basic/angular.md
diff --git a/static/usage/v6/item-sliding/basic/demo.html b/static/usage/v6/item-sliding/basic/demo.html
new file mode 100644
index 00000000000..00e4bc82f99
--- /dev/null
+++ b/static/usage/v6/item-sliding/basic/demo.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Sliding</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>Sliding Item with End Options</ion-label>
+            </ion-item>
+
+            <ion-item-options>
+              <ion-item-option>Favorite</ion-item-option>
+              <ion-item-option color="danger">Delete</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">Archive</ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>Sliding Item with Start Options</ion-label>
+            </ion-item>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">Archive</ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>Sliding Item with Options on Both Sides</ion-label>
+            </ion-item>
+
+            <ion-item-options side="end">
+              <ion-item-option>Favorite</ion-item-option>
+              <ion-item-option color="danger">Delete</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item-sliding/basic/index.md b/static/usage/v6/item-sliding/basic/index.md
new file mode 100644
index 00000000000..4735020120d
--- /dev/null
+++ b/static/usage/v6/item-sliding/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item-sliding/basic/demo.html" />
diff --git a/static/usage/item-sliding/basic/javascript.md b/static/usage/v6/item-sliding/basic/javascript.md
similarity index 100%
rename from static/usage/item-sliding/basic/javascript.md
rename to static/usage/v6/item-sliding/basic/javascript.md
diff --git a/static/usage/item-sliding/basic/react.md b/static/usage/v6/item-sliding/basic/react.md
similarity index 100%
rename from static/usage/item-sliding/basic/react.md
rename to static/usage/v6/item-sliding/basic/react.md
diff --git a/static/usage/item-sliding/basic/vue.md b/static/usage/v6/item-sliding/basic/vue.md
similarity index 100%
rename from static/usage/item-sliding/basic/vue.md
rename to static/usage/v6/item-sliding/basic/vue.md
diff --git a/static/usage/item-sliding/expandable/angular.md b/static/usage/v6/item-sliding/expandable/angular.md
similarity index 100%
rename from static/usage/item-sliding/expandable/angular.md
rename to static/usage/v6/item-sliding/expandable/angular.md
diff --git a/static/usage/v6/item-sliding/expandable/demo.html b/static/usage/v6/item-sliding/expandable/demo.html
new file mode 100644
index 00000000000..bfdb1ef5884
--- /dev/null
+++ b/static/usage/v6/item-sliding/expandable/demo.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Sliding</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success" expandable>Archive</ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>Sliding Item with Expandable Options</ion-label>
+            </ion-item>
+
+            <ion-item-options side="end">
+              <ion-item-option>Favorite</ion-item-option>
+              <ion-item-option color="danger" expandable>Delete</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item-sliding/expandable/index.md b/static/usage/v6/item-sliding/expandable/index.md
new file mode 100644
index 00000000000..fe0929ce8b2
--- /dev/null
+++ b/static/usage/v6/item-sliding/expandable/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item-sliding/expandable/demo.html" size="100px" />
diff --git a/static/usage/item-sliding/expandable/javascript.md b/static/usage/v6/item-sliding/expandable/javascript.md
similarity index 100%
rename from static/usage/item-sliding/expandable/javascript.md
rename to static/usage/v6/item-sliding/expandable/javascript.md
diff --git a/static/usage/item-sliding/expandable/react.md b/static/usage/v6/item-sliding/expandable/react.md
similarity index 100%
rename from static/usage/item-sliding/expandable/react.md
rename to static/usage/v6/item-sliding/expandable/react.md
diff --git a/static/usage/item-sliding/expandable/vue.md b/static/usage/v6/item-sliding/expandable/vue.md
similarity index 100%
rename from static/usage/item-sliding/expandable/vue.md
rename to static/usage/v6/item-sliding/expandable/vue.md
diff --git a/static/usage/item-sliding/icons/angular.md b/static/usage/v6/item-sliding/icons/angular.md
similarity index 100%
rename from static/usage/item-sliding/icons/angular.md
rename to static/usage/v6/item-sliding/icons/angular.md
diff --git a/static/usage/v6/item-sliding/icons/demo.html b/static/usage/v6/item-sliding/icons/demo.html
new file mode 100644
index 00000000000..6bc01e42837
--- /dev/null
+++ b/static/usage/v6/item-sliding/icons/demo.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Sliding</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      align-items: stretch;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">
+                <ion-icon slot="icon-only" name="archive"></ion-icon>
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>Sliding Item with Icons Only</ion-label>
+            </ion-item>
+
+            <ion-item-options side="end">
+              <ion-item-option>
+                <ion-icon slot="icon-only" name="heart"></ion-icon>
+              </ion-item-option>
+              <ion-item-option color="danger">
+                <ion-icon slot="icon-only" name="trash"></ion-icon>
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">
+                <ion-icon slot="start" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>
+                Sliding Item with Start Icons
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options side="end">
+              <ion-item-option>
+                <ion-icon slot="start" name="heart"></ion-icon>
+                Favorite
+              </ion-item-option>
+              <ion-item-option color="danger">
+                <ion-icon slot="start" name="trash"></ion-icon>
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">
+                <ion-icon slot="end" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>
+                Sliding Item with End Icons
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options>
+              <ion-item-option>
+                <ion-icon slot="end" name="heart"></ion-icon>
+                Favorite
+              </ion-item-option>
+              <ion-item-option color="danger">
+                <ion-icon slot="end" name="trash"></ion-icon>
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">
+                <ion-icon slot="top" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>
+                Sliding Item with Top Icons
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options>
+              <ion-item-option>
+                <ion-icon slot="top" name="heart"></ion-icon>
+                Favorite
+              </ion-item-option>
+              <ion-item-option color="danger">
+                <ion-icon slot="top" name="trash"></ion-icon>
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">
+                <ion-icon slot="bottom" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>
+                Sliding Item with Bottom Icons
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options>
+              <ion-item-option>
+                <ion-icon slot="bottom" name="heart"></ion-icon>
+                Favorite
+              </ion-item-option>
+              <ion-item-option color="danger">
+                <ion-icon slot="bottom" name="trash"></ion-icon>
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item-sliding/icons/index.md b/static/usage/v6/item-sliding/icons/index.md
new file mode 100644
index 00000000000..208b70bb14f
--- /dev/null
+++ b/static/usage/v6/item-sliding/icons/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item-sliding/icons/demo.html" size="300px" />
diff --git a/static/usage/item-sliding/icons/javascript.md b/static/usage/v6/item-sliding/icons/javascript.md
similarity index 100%
rename from static/usage/item-sliding/icons/javascript.md
rename to static/usage/v6/item-sliding/icons/javascript.md
diff --git a/static/usage/item-sliding/icons/react.md b/static/usage/v6/item-sliding/icons/react.md
similarity index 100%
rename from static/usage/item-sliding/icons/react.md
rename to static/usage/v6/item-sliding/icons/react.md
diff --git a/static/usage/item-sliding/icons/vue.md b/static/usage/v6/item-sliding/icons/vue.md
similarity index 100%
rename from static/usage/item-sliding/icons/vue.md
rename to static/usage/v6/item-sliding/icons/vue.md
diff --git a/static/usage/item/basic/angular.md b/static/usage/v6/item/basic/angular.md
similarity index 100%
rename from static/usage/item/basic/angular.md
rename to static/usage/v6/item/basic/angular.md
diff --git a/static/usage/v6/item/basic/demo.html b/static/usage/v6/item/basic/demo.html
new file mode 100644
index 00000000000..55e5fe17a30
--- /dev/null
+++ b/static/usage/v6/item/basic/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Basic Item</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Multi-line text that should ellipsis when it is too long
+            to fit on one line. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit.
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            Multi-line text that should wrap when it is too long
+            to fit on one line. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit.
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h1>H1 Heading</h1>
+            <p>Paragraph</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h2>H2 Heading</h2>
+            <p>Paragraph</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h3>H3 Heading</h3>
+            <p>Paragraph</p>
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/basic/index.md b/static/usage/v6/item/basic/index.md
new file mode 100644
index 00000000000..11fec7eecf2
--- /dev/null
+++ b/static/usage/v6/item/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/basic/demo.html" size="medium" />
diff --git a/static/usage/item/basic/javascript.md b/static/usage/v6/item/basic/javascript.md
similarity index 100%
rename from static/usage/item/basic/javascript.md
rename to static/usage/v6/item/basic/javascript.md
diff --git a/static/usage/item/basic/react.md b/static/usage/v6/item/basic/react.md
similarity index 100%
rename from static/usage/item/basic/react.md
rename to static/usage/v6/item/basic/react.md
diff --git a/static/usage/item/basic/vue.md b/static/usage/v6/item/basic/vue.md
similarity index 100%
rename from static/usage/item/basic/vue.md
rename to static/usage/v6/item/basic/vue.md
diff --git a/static/usage/item/buttons/angular.md b/static/usage/v6/item/buttons/angular.md
similarity index 100%
rename from static/usage/item/buttons/angular.md
rename to static/usage/v6/item/buttons/angular.md
diff --git a/static/usage/v6/item/buttons/demo.html b/static/usage/v6/item/buttons/demo.html
new file mode 100644
index 00000000000..08847fb4fff
--- /dev/null
+++ b/static/usage/v6/item/buttons/demo.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      align-items: stretch;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-button slot="start">
+            Start
+          </ion-button>
+          <ion-label>Default Buttons</ion-label>
+          <ion-button slot="end">
+            End
+          </ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-button slot="start">
+            Start
+            <ion-icon name="home" slot="end"></ion-icon>
+          </ion-button>
+          <ion-label>Buttons with Icons</ion-label>
+          <ion-button slot="end">
+            <ion-icon name="star" slot="end"></ion-icon>
+            End
+          </ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-button slot="start">
+            <ion-icon slot="icon-only" name="navigate"></ion-icon>
+          </ion-button>
+          <ion-label>Icon only Buttons</ion-label>
+          <ion-button slot="end">
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Button Sizes</ion-label>
+          <ion-button slot="end" size="small">
+            Small
+          </ion-button>
+          <ion-button slot="end" size="default">
+            Default
+          </ion-button>
+          <ion-button slot="end" size="large">
+            Large
+          </ion-button>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/buttons/index.md b/static/usage/v6/item/buttons/index.md
new file mode 100644
index 00000000000..b079b352558
--- /dev/null
+++ b/static/usage/v6/item/buttons/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/buttons/demo.html" size="250px" />
diff --git a/static/usage/item/buttons/javascript.md b/static/usage/v6/item/buttons/javascript.md
similarity index 100%
rename from static/usage/item/buttons/javascript.md
rename to static/usage/v6/item/buttons/javascript.md
diff --git a/static/usage/item/buttons/react.md b/static/usage/v6/item/buttons/react.md
similarity index 100%
rename from static/usage/item/buttons/react.md
rename to static/usage/v6/item/buttons/react.md
diff --git a/static/usage/item/buttons/vue.md b/static/usage/v6/item/buttons/vue.md
similarity index 100%
rename from static/usage/item/buttons/vue.md
rename to static/usage/v6/item/buttons/vue.md
diff --git a/static/usage/item/clickable/angular.md b/static/usage/v6/item/clickable/angular.md
similarity index 100%
rename from static/usage/item/clickable/angular.md
rename to static/usage/v6/item/clickable/angular.md
diff --git a/static/usage/v6/item/clickable/demo.html b/static/usage/v6/item/clickable/demo.html
new file mode 100644
index 00000000000..189cbffbd35
--- /dev/null
+++ b/static/usage/v6/item/clickable/demo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item href="#">
+          <ion-label>Anchor Item</ion-label>
+        </ion-item>
+
+        <ion-item href="#" disabled="true">
+          <ion-label>Disabled Anchor Item</ion-label>
+        </ion-item>
+
+        <ion-item button>
+          <ion-label>Button Item</ion-label>
+        </ion-item>
+
+        <ion-item button disabled="true">
+          <ion-label>Disabled Button Item</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/clickable/index.md b/static/usage/v6/item/clickable/index.md
new file mode 100644
index 00000000000..909f021eb38
--- /dev/null
+++ b/static/usage/v6/item/clickable/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/clickable/demo.html" />
diff --git a/static/usage/item/clickable/javascript.md b/static/usage/v6/item/clickable/javascript.md
similarity index 100%
rename from static/usage/item/clickable/javascript.md
rename to static/usage/v6/item/clickable/javascript.md
diff --git a/static/usage/item/clickable/react.md b/static/usage/v6/item/clickable/react.md
similarity index 100%
rename from static/usage/item/clickable/react.md
rename to static/usage/v6/item/clickable/react.md
diff --git a/static/usage/item/clickable/vue.md b/static/usage/v6/item/clickable/vue.md
similarity index 100%
rename from static/usage/item/clickable/vue.md
rename to static/usage/v6/item/clickable/vue.md
diff --git a/static/usage/item/counter/angular/example_component_html.md b/static/usage/v6/item/counter/angular/example_component_html.md
similarity index 100%
rename from static/usage/item/counter/angular/example_component_html.md
rename to static/usage/v6/item/counter/angular/example_component_html.md
diff --git a/static/usage/item/counter/angular/example_component_ts.md b/static/usage/v6/item/counter/angular/example_component_ts.md
similarity index 100%
rename from static/usage/item/counter/angular/example_component_ts.md
rename to static/usage/v6/item/counter/angular/example_component_ts.md
diff --git a/static/usage/v6/item/counter/demo.html b/static/usage/v6/item/counter/demo.html
new file mode 100644
index 00000000000..cb68d350bc2
--- /dev/null
+++ b/static/usage/v6/item/counter/demo.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    ion-item {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item counter="true">
+          <ion-label position="floating">Default Counter</ion-label>
+          <ion-input maxlength="20"></ion-input>
+        </ion-item>
+
+        <ion-item id="custom-item" counter="true">
+          <ion-label position="floating">Custom Counter Format</ion-label>
+          <ion-input maxlength="20"></ion-input>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+<script>
+  const customItem = document.querySelector('#custom-item');
+  customItem.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
+</script>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/counter/index.md b/static/usage/v6/item/counter/index.md
new file mode 100644
index 00000000000..2dae9aa08ff
--- /dev/null
+++ b/static/usage/v6/item/counter/index.md
@@ -0,0 +1,23 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/item/counter/demo.html"
+/>
diff --git a/static/usage/item/counter/javascript.md b/static/usage/v6/item/counter/javascript.md
similarity index 100%
rename from static/usage/item/counter/javascript.md
rename to static/usage/v6/item/counter/javascript.md
diff --git a/static/usage/item/counter/react.md b/static/usage/v6/item/counter/react.md
similarity index 100%
rename from static/usage/item/counter/react.md
rename to static/usage/v6/item/counter/react.md
diff --git a/static/usage/item/counter/vue.md b/static/usage/v6/item/counter/vue.md
similarity index 100%
rename from static/usage/item/counter/vue.md
rename to static/usage/v6/item/counter/vue.md
diff --git a/static/usage/item/detail-arrows/angular.md b/static/usage/v6/item/detail-arrows/angular.md
similarity index 100%
rename from static/usage/item/detail-arrows/angular.md
rename to static/usage/v6/item/detail-arrows/angular.md
diff --git a/static/usage/v6/item/detail-arrows/demo.html b/static/usage/v6/item/detail-arrows/demo.html
new file mode 100644
index 00000000000..1cc1c907045
--- /dev/null
+++ b/static/usage/v6/item/detail-arrows/demo.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item detail="true">
+          <ion-label>
+            <h3>Text Item</h3>
+            <p>Detail set to true - detail arrow displays on both modes</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item button>
+          <ion-label>
+            <h3>Button Item</h3>
+            <p>Default detail - detail arrow displays on iOS only</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item button detail="true">
+          <ion-label>
+            <h3>Button Item</h3>
+            <p>Detail set to true - detail arrow displays on both modes</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item button detail="false">
+          <ion-label>
+            <h3>Button Item</h3>
+            <p>Detail set to false - detail arrow hidden on both modes</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item button detail="true" detail-icon="caret-forward-outline">
+          <ion-label>
+            <h3>Button Item</h3>
+            <p>Detail set to true - detail arrow displays on both modes</p>
+            <p>Detail icon set to caret-forward-outline</p>
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/detail-arrows/index.md b/static/usage/v6/item/detail-arrows/index.md
new file mode 100644
index 00000000000..b1404bf636b
--- /dev/null
+++ b/static/usage/v6/item/detail-arrows/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/detail-arrows/demo.html" size="350px" />
diff --git a/static/usage/item/detail-arrows/javascript.md b/static/usage/v6/item/detail-arrows/javascript.md
similarity index 100%
rename from static/usage/item/detail-arrows/javascript.md
rename to static/usage/v6/item/detail-arrows/javascript.md
diff --git a/static/usage/item/detail-arrows/react.md b/static/usage/v6/item/detail-arrows/react.md
similarity index 100%
rename from static/usage/item/detail-arrows/react.md
rename to static/usage/v6/item/detail-arrows/react.md
diff --git a/static/usage/item/detail-arrows/vue.md b/static/usage/v6/item/detail-arrows/vue.md
similarity index 100%
rename from static/usage/item/detail-arrows/vue.md
rename to static/usage/v6/item/detail-arrows/vue.md
diff --git a/static/usage/item/helper-error/angular.md b/static/usage/v6/item/helper-error/angular.md
similarity index 100%
rename from static/usage/item/helper-error/angular.md
rename to static/usage/v6/item/helper-error/angular.md
diff --git a/static/usage/v6/item/helper-error/demo.html b/static/usage/v6/item/helper-error/demo.html
new file mode 100644
index 00000000000..399f66d1270
--- /dev/null
+++ b/static/usage/v6/item/helper-error/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item fill="solid">
+          <ion-label position="floating">Email</ion-label>
+          <ion-input></ion-input>
+          <ion-note slot="helper">Enter a valid email</ion-note>
+          <ion-note slot="error">Invalid email</ion-note>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const item = document.querySelector('ion-item');
+    const input = item.querySelector('ion-input');
+
+    input.addEventListener('ionInput', (ev) => validate(ev));
+    input.addEventListener('ionBlur', () => markTouched());
+
+    const validateEmail = (email) => {
+      return email.match(/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/);
+    };
+
+    const validate = (ev) => {
+      const value = ev.target.value;
+
+      item.classList.remove('ion-valid');
+      item.classList.remove('ion-invalid');
+
+      if (value === "") return;
+
+      validateEmail(value) ? item.classList.add('ion-valid') : item.classList.add('ion-invalid');
+    }
+
+    const markTouched = () => {
+      item.classList.add('ion-touched');
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/helper-error/index.md b/static/usage/v6/item/helper-error/index.md
new file mode 100644
index 00000000000..69cbae09c2a
--- /dev/null
+++ b/static/usage/v6/item/helper-error/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/item/helper-error/demo.html"
+  size="150px"
+/>
diff --git a/static/usage/item/helper-error/javascript.md b/static/usage/v6/item/helper-error/javascript.md
similarity index 100%
rename from static/usage/item/helper-error/javascript.md
rename to static/usage/v6/item/helper-error/javascript.md
diff --git a/static/usage/item/helper-error/react.md b/static/usage/v6/item/helper-error/react.md
similarity index 100%
rename from static/usage/item/helper-error/react.md
rename to static/usage/v6/item/helper-error/react.md
diff --git a/static/usage/item/helper-error/vue.md b/static/usage/v6/item/helper-error/vue.md
similarity index 100%
rename from static/usage/item/helper-error/vue.md
rename to static/usage/v6/item/helper-error/vue.md
diff --git a/static/usage/item/icons/angular.md b/static/usage/v6/item/icons/angular.md
similarity index 100%
rename from static/usage/item/icons/angular.md
rename to static/usage/v6/item/icons/angular.md
diff --git a/static/usage/v6/item/icons/demo.html b/static/usage/v6/item/icons/demo.html
new file mode 100644
index 00000000000..6cbd9d1b2a9
--- /dev/null
+++ b/static/usage/v6/item/icons/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>
+            Default Icon
+          </ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Large Icon
+          </ion-label>
+          <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Small Icon
+          </ion-label>
+          <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="star" slot="start"></ion-icon>
+          <ion-label>
+            Default Icon
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/icons/index.md b/static/usage/v6/item/icons/index.md
new file mode 100644
index 00000000000..ecccb7f12e3
--- /dev/null
+++ b/static/usage/v6/item/icons/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/icons/demo.html" size="250px" />
diff --git a/static/usage/item/icons/javascript.md b/static/usage/v6/item/icons/javascript.md
similarity index 100%
rename from static/usage/item/icons/javascript.md
rename to static/usage/v6/item/icons/javascript.md
diff --git a/static/usage/item/icons/react.md b/static/usage/v6/item/icons/react.md
similarity index 100%
rename from static/usage/item/icons/react.md
rename to static/usage/v6/item/icons/react.md
diff --git a/static/usage/item/icons/vue.md b/static/usage/v6/item/icons/vue.md
similarity index 100%
rename from static/usage/item/icons/vue.md
rename to static/usage/v6/item/icons/vue.md
diff --git a/static/usage/item/inputs/angular.md b/static/usage/v6/item/inputs/angular.md
similarity index 100%
rename from static/usage/item/inputs/angular.md
rename to static/usage/v6/item/inputs/angular.md
diff --git a/static/usage/v6/item/inputs/demo.html b/static/usage/v6/item/inputs/demo.html
new file mode 100644
index 00000000000..4ab92196b2e
--- /dev/null
+++ b/static/usage/v6/item/inputs/demo.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Default Input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="fixed">Fixed Input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="stacked">Stacked Input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="floating">Floating Input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item fill="outline">
+          <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item fill="solid">
+          <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Select</ion-label>
+          <ion-select placeholder="Make a Selection">
+            <ion-select-option value="">No Game Console</ion-select-option>
+            <ion-select-option value="nes">NES</ion-select-option>
+            <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+            <ion-select-option value="ps">PlayStation</ion-select-option>
+            <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+            <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+            <ion-select-option value="snes">SNES</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Toggle</ion-label>
+          <ion-toggle slot="end"></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Checkbox</ion-label>
+          <ion-checkbox slot="end"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="stacked">Range</ion-label>
+          <ion-range></ion-range>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/inputs/index.md b/static/usage/v6/item/inputs/index.md
new file mode 100644
index 00000000000..1468e3c5bc1
--- /dev/null
+++ b/static/usage/v6/item/inputs/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/inputs/demo.html" size="large" />
diff --git a/static/usage/item/inputs/javascript.md b/static/usage/v6/item/inputs/javascript.md
similarity index 100%
rename from static/usage/item/inputs/javascript.md
rename to static/usage/v6/item/inputs/javascript.md
diff --git a/static/usage/item/inputs/react.md b/static/usage/v6/item/inputs/react.md
similarity index 100%
rename from static/usage/item/inputs/react.md
rename to static/usage/v6/item/inputs/react.md
diff --git a/static/usage/item/inputs/vue.md b/static/usage/v6/item/inputs/vue.md
similarity index 100%
rename from static/usage/item/inputs/vue.md
rename to static/usage/v6/item/inputs/vue.md
diff --git a/static/usage/item/lines/angular.md b/static/usage/v6/item/lines/angular.md
similarity index 100%
rename from static/usage/item/lines/angular.md
rename to static/usage/v6/item/lines/angular.md
diff --git a/static/usage/v6/item/lines/demo.html b/static/usage/v6/item/lines/demo.html
new file mode 100644
index 00000000000..79cb3ce7933
--- /dev/null
+++ b/static/usage/v6/item/lines/demo.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>
+            Default Item Lines
+          </ion-label>
+        </ion-item>
+
+        <ion-item lines="inset">
+          <ion-label>Item Lines Inset</ion-label>
+        </ion-item>
+
+        <ion-item lines="full">
+          <ion-label>Item Lines Full</ion-label>
+        </ion-item>
+
+        <ion-item lines="none">
+          <ion-label>Item Lines None</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="star" slot="start"></ion-icon>
+          <ion-label>Default Item Lines</ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item lines="inset">
+          <ion-icon name="star" slot="start"></ion-icon>
+          <ion-label>Item Lines Inset</ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item lines="full">
+          <ion-icon name="star" slot="start"></ion-icon>
+          <ion-label>Item Lines Full</ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item lines="none">
+          <ion-icon name="star" slot="start"></ion-icon>
+          <ion-label>Item Lines None</ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/lines/index.md b/static/usage/v6/item/lines/index.md
new file mode 100644
index 00000000000..79afa46163e
--- /dev/null
+++ b/static/usage/v6/item/lines/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/lines/demo.html" size="medium" />
diff --git a/static/usage/item/lines/javascript.md b/static/usage/v6/item/lines/javascript.md
similarity index 100%
rename from static/usage/item/lines/javascript.md
rename to static/usage/v6/item/lines/javascript.md
diff --git a/static/usage/item/lines/react.md b/static/usage/v6/item/lines/react.md
similarity index 100%
rename from static/usage/item/lines/react.md
rename to static/usage/v6/item/lines/react.md
diff --git a/static/usage/item/lines/vue.md b/static/usage/v6/item/lines/vue.md
similarity index 100%
rename from static/usage/item/lines/vue.md
rename to static/usage/v6/item/lines/vue.md
diff --git a/static/usage/item/media/angular.md b/static/usage/v6/item/media/angular.md
similarity index 100%
rename from static/usage/item/media/angular.md
rename to static/usage/v6/item/media/angular.md
diff --git a/static/usage/v6/item/media/demo.html b/static/usage/v6/item/media/demo.html
new file mode 100644
index 00000000000..451c5d6eaf1
--- /dev/null
+++ b/static/usage/v6/item/media/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-avatar slot="start">
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>
+            Avatar Item
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+          </ion-thumbnail>
+          <ion-label>
+            Thumbnail Item
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/media/index.md b/static/usage/v6/item/media/index.md
new file mode 100644
index 00000000000..7f6f5bcf2f5
--- /dev/null
+++ b/static/usage/v6/item/media/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/media/demo.html" />
diff --git a/static/usage/item/media/javascript.md b/static/usage/v6/item/media/javascript.md
similarity index 100%
rename from static/usage/item/media/javascript.md
rename to static/usage/v6/item/media/javascript.md
diff --git a/static/usage/item/media/react.md b/static/usage/v6/item/media/react.md
similarity index 100%
rename from static/usage/item/media/react.md
rename to static/usage/v6/item/media/react.md
diff --git a/static/usage/item/media/vue.md b/static/usage/v6/item/media/vue.md
similarity index 100%
rename from static/usage/item/media/vue.md
rename to static/usage/v6/item/media/vue.md
diff --git a/static/usage/item/theming/colors/angular.md b/static/usage/v6/item/theming/colors/angular.md
similarity index 100%
rename from static/usage/item/theming/colors/angular.md
rename to static/usage/v6/item/theming/colors/angular.md
diff --git a/static/usage/v6/item/theming/colors/demo.html b/static/usage/v6/item/theming/colors/demo.html
new file mode 100644
index 00000000000..fbd225c988b
--- /dev/null
+++ b/static/usage/v6/item/theming/colors/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Default Item</ion-label>
+        </ion-item>
+        <ion-item color="primary">
+          <ion-label>Primary Item</ion-label>
+        </ion-item>
+        <ion-item color="secondary">
+          <ion-label>Secondary Item</ion-label>
+        </ion-item>
+        <ion-item color="tertiary">
+          <ion-label>Tertiary Item</ion-label>
+        </ion-item>
+        <ion-item color="success">
+          <ion-label>Success Item</ion-label>
+        </ion-item>
+        <ion-item color="warning">
+          <ion-label>Warning Item</ion-label>
+        </ion-item>
+        <ion-item color="danger">
+          <ion-label>Danger Item</ion-label>
+        </ion-item>
+        <ion-item color="light">
+          <ion-label>Light Item</ion-label>
+        </ion-item>
+        <ion-item color="medium">
+          <ion-label>Medium Item</ion-label>
+        </ion-item>
+        <ion-item color="dark">
+          <ion-label>Dark Item</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/theming/colors/index.md b/static/usage/v6/item/theming/colors/index.md
new file mode 100644
index 00000000000..88b26e3a529
--- /dev/null
+++ b/static/usage/v6/item/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/theming/colors/demo.html" size="500px" />
diff --git a/static/usage/item/theming/colors/javascript.md b/static/usage/v6/item/theming/colors/javascript.md
similarity index 100%
rename from static/usage/item/theming/colors/javascript.md
rename to static/usage/v6/item/theming/colors/javascript.md
diff --git a/static/usage/item/theming/colors/react.md b/static/usage/v6/item/theming/colors/react.md
similarity index 100%
rename from static/usage/item/theming/colors/react.md
rename to static/usage/v6/item/theming/colors/react.md
diff --git a/static/usage/item/theming/colors/vue.md b/static/usage/v6/item/theming/colors/vue.md
similarity index 100%
rename from static/usage/item/theming/colors/vue.md
rename to static/usage/v6/item/theming/colors/vue.md
diff --git a/static/usage/item/theming/css-properties/angular/example_component_css.md b/static/usage/v6/item/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/item/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/item/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/item/theming/css-properties/angular/example_component_html.md b/static/usage/v6/item/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/item/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/item/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/item/theming/css-properties/demo.html b/static/usage/v6/item/theming/css-properties/demo.html
new file mode 100644
index 00000000000..c255a677199
--- /dev/null
+++ b/static/usage/v6/item/theming/css-properties/demo.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+
+    ion-item {
+      --background: #19422d;
+      --color: #fff;
+
+      --border-color: #fff;
+      --border-style: dashed;
+      --border-width: 2px;
+
+      --border-radius: 20px;
+
+      --ripple-color: purple;
+
+      --detail-icon-color: white;
+      --detail-icon-opacity: 1;
+      --detail-icon-font-size: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/theming/css-properties/index.md b/static/usage/v6/item/theming/css-properties/index.md
new file mode 100644
index 00000000000..0a0793092c4
--- /dev/null
+++ b/static/usage/v6/item/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/item/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/item/theming/css-properties/javascript.md b/static/usage/v6/item/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/item/theming/css-properties/javascript.md
rename to static/usage/v6/item/theming/css-properties/javascript.md
diff --git a/static/usage/item/theming/css-properties/react/main_css.md b/static/usage/v6/item/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/item/theming/css-properties/react/main_css.md
rename to static/usage/v6/item/theming/css-properties/react/main_css.md
diff --git a/static/usage/item/theming/css-properties/react/main_tsx.md b/static/usage/v6/item/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/item/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/item/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/item/theming/css-properties/vue.md b/static/usage/v6/item/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/item/theming/css-properties/vue.md
rename to static/usage/v6/item/theming/css-properties/vue.md
diff --git a/static/usage/item/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/item/theming/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/item/theming/css-shadow-parts/angular/example_component_css.md
rename to static/usage/v6/item/theming/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/item/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/item/theming/css-shadow-parts/angular/example_component_html.md
similarity index 100%
rename from static/usage/item/theming/css-shadow-parts/angular/example_component_html.md
rename to static/usage/v6/item/theming/css-shadow-parts/angular/example_component_html.md
diff --git a/static/usage/v6/item/theming/css-shadow-parts/demo.html b/static/usage/v6/item/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..132c0900cb8
--- /dev/null
+++ b/static/usage/v6/item/theming/css-shadow-parts/demo.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+
+    ion-item::part(native) {
+      background: #19422d;
+      color: #fff;
+
+      border-color: #fff;
+      border-style: dashed;
+      border-width: 2px;
+
+      border-radius: 20px;
+    }
+
+    ion-item::part(detail-icon) {
+      color: white;
+      opacity: 1;
+      font-size: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/theming/css-shadow-parts/index.md b/static/usage/v6/item/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..bc82df768ea
--- /dev/null
+++ b/static/usage/v6/item/theming/css-shadow-parts/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/item/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/item/theming/css-shadow-parts/javascript.md b/static/usage/v6/item/theming/css-shadow-parts/javascript.md
similarity index 100%
rename from static/usage/item/theming/css-shadow-parts/javascript.md
rename to static/usage/v6/item/theming/css-shadow-parts/javascript.md
diff --git a/static/usage/item/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/item/theming/css-shadow-parts/react/main_css.md
similarity index 100%
rename from static/usage/item/theming/css-shadow-parts/react/main_css.md
rename to static/usage/v6/item/theming/css-shadow-parts/react/main_css.md
diff --git a/static/usage/item/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/item/theming/css-shadow-parts/react/main_tsx.md
similarity index 100%
rename from static/usage/item/theming/css-shadow-parts/react/main_tsx.md
rename to static/usage/v6/item/theming/css-shadow-parts/react/main_tsx.md
diff --git a/static/usage/item/theming/css-shadow-parts/vue.md b/static/usage/v6/item/theming/css-shadow-parts/vue.md
similarity index 100%
rename from static/usage/item/theming/css-shadow-parts/vue.md
rename to static/usage/v6/item/theming/css-shadow-parts/vue.md
diff --git a/static/usage/item/theming/input-highlight/angular/example_component_css.md b/static/usage/v6/item/theming/input-highlight/angular/example_component_css.md
similarity index 100%
rename from static/usage/item/theming/input-highlight/angular/example_component_css.md
rename to static/usage/v6/item/theming/input-highlight/angular/example_component_css.md
diff --git a/static/usage/item/theming/input-highlight/angular/example_component_html.md b/static/usage/v6/item/theming/input-highlight/angular/example_component_html.md
similarity index 100%
rename from static/usage/item/theming/input-highlight/angular/example_component_html.md
rename to static/usage/v6/item/theming/input-highlight/angular/example_component_html.md
diff --git a/static/usage/v6/item/theming/input-highlight/demo.html b/static/usage/v6/item/theming/input-highlight/demo.html
new file mode 100644
index 00000000000..2094539141e
--- /dev/null
+++ b/static/usage/v6/item/theming/input-highlight/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+
+    ion-item {
+      --highlight-height: 2px;
+      --highlight-color-focused: #43e7f3;
+      --highlight-color-valid: #6f58d8;
+      --highlight-color-invalid: #ff46be;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item lines="full" class="item-has-focus ion-touched">
+          <ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
+          <ion-input></ion-input>
+        </ion-item>
+
+        <ion-item lines="full" class="item-has-focus ion-touched ion-valid">
+          <ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
+          <ion-input></ion-input>
+        </ion-item>
+
+        <ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
+          <ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
+          <ion-input></ion-input>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/item/theming/input-highlight/index.md b/static/usage/v6/item/theming/input-highlight/index.md
new file mode 100644
index 00000000000..3932ef07433
--- /dev/null
+++ b/static/usage/v6/item/theming/input-highlight/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/item/theming/input-highlight/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/item/theming/input-highlight/javascript.md b/static/usage/v6/item/theming/input-highlight/javascript.md
similarity index 100%
rename from static/usage/item/theming/input-highlight/javascript.md
rename to static/usage/v6/item/theming/input-highlight/javascript.md
diff --git a/static/usage/item/theming/input-highlight/react/main_css.md b/static/usage/v6/item/theming/input-highlight/react/main_css.md
similarity index 100%
rename from static/usage/item/theming/input-highlight/react/main_css.md
rename to static/usage/v6/item/theming/input-highlight/react/main_css.md
diff --git a/static/usage/item/theming/input-highlight/react/main_tsx.md b/static/usage/v6/item/theming/input-highlight/react/main_tsx.md
similarity index 100%
rename from static/usage/item/theming/input-highlight/react/main_tsx.md
rename to static/usage/v6/item/theming/input-highlight/react/main_tsx.md
diff --git a/static/usage/item/theming/input-highlight/vue.md b/static/usage/v6/item/theming/input-highlight/vue.md
similarity index 100%
rename from static/usage/item/theming/input-highlight/vue.md
rename to static/usage/v6/item/theming/input-highlight/vue.md
diff --git a/static/usage/label/basic/angular.md b/static/usage/v6/label/basic/angular.md
similarity index 100%
rename from static/usage/label/basic/angular.md
rename to static/usage/v6/label/basic/angular.md
diff --git a/static/usage/v6/label/basic/demo.html b/static/usage/v6/label/basic/demo.html
new file mode 100644
index 00000000000..a6bad98959e
--- /dev/null
+++ b/static/usage/v6/label/basic/demo.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Label</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-label>Label</ion-label>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/label/basic/index.md b/static/usage/v6/label/basic/index.md
new file mode 100644
index 00000000000..0841cbe71ee
--- /dev/null
+++ b/static/usage/v6/label/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/label/basic/demo.html" />
diff --git a/static/usage/label/basic/javascript.md b/static/usage/v6/label/basic/javascript.md
similarity index 100%
rename from static/usage/label/basic/javascript.md
rename to static/usage/v6/label/basic/javascript.md
diff --git a/static/usage/label/basic/react.md b/static/usage/v6/label/basic/react.md
similarity index 100%
rename from static/usage/label/basic/react.md
rename to static/usage/v6/label/basic/react.md
diff --git a/static/usage/label/basic/vue.md b/static/usage/v6/label/basic/vue.md
similarity index 100%
rename from static/usage/label/basic/vue.md
rename to static/usage/v6/label/basic/vue.md
diff --git a/static/usage/label/input/angular.md b/static/usage/v6/label/input/angular.md
similarity index 100%
rename from static/usage/label/input/angular.md
rename to static/usage/v6/label/input/angular.md
diff --git a/static/usage/v6/label/input/demo.html b/static/usage/v6/label/input/demo.html
new file mode 100644
index 00000000000..d43bb5ba712
--- /dev/null
+++ b/static/usage/v6/label/input/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Label</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Default Label</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="fixed">Fixed Label</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="floating">Floating Label</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="stacked">Stacked Label</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Toggle</ion-label>
+          <ion-toggle slot="end" checked></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-checkbox slot="start" checked></ion-checkbox>
+          <ion-label>Checkbox</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/label/input/index.md b/static/usage/v6/label/input/index.md
new file mode 100644
index 00000000000..714a8b2d253
--- /dev/null
+++ b/static/usage/v6/label/input/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/label/input/demo.html" size="medium" />
diff --git a/static/usage/label/input/javascript.md b/static/usage/v6/label/input/javascript.md
similarity index 100%
rename from static/usage/label/input/javascript.md
rename to static/usage/v6/label/input/javascript.md
diff --git a/static/usage/label/input/react.md b/static/usage/v6/label/input/react.md
similarity index 100%
rename from static/usage/label/input/react.md
rename to static/usage/v6/label/input/react.md
diff --git a/static/usage/label/input/vue.md b/static/usage/v6/label/input/vue.md
similarity index 100%
rename from static/usage/label/input/vue.md
rename to static/usage/v6/label/input/vue.md
diff --git a/static/usage/label/item/angular.md b/static/usage/v6/label/item/angular.md
similarity index 100%
rename from static/usage/label/item/angular.md
rename to static/usage/v6/label/item/angular.md
diff --git a/static/usage/v6/label/item/demo.html b/static/usage/v6/label/item/demo.html
new file mode 100644
index 00000000000..67dbf234345
--- /dev/null
+++ b/static/usage/v6/label/item/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Label</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Default Label</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Multi-line text that should ellipsis when it is too long
+            to fit on one line. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit.
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            Multi-line text that should wrap when it is too long
+            to fit on one line. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit.
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h1>Heading</h1>
+            <p>Paragraph</p>
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/label/item/index.md b/static/usage/v6/label/item/index.md
new file mode 100644
index 00000000000..41a5421ab0b
--- /dev/null
+++ b/static/usage/v6/label/item/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/label/item/demo.html" size="medium" />
diff --git a/static/usage/label/item/javascript.md b/static/usage/v6/label/item/javascript.md
similarity index 100%
rename from static/usage/label/item/javascript.md
rename to static/usage/v6/label/item/javascript.md
diff --git a/static/usage/label/item/react.md b/static/usage/v6/label/item/react.md
similarity index 100%
rename from static/usage/label/item/react.md
rename to static/usage/v6/label/item/react.md
diff --git a/static/usage/label/item/vue.md b/static/usage/v6/label/item/vue.md
similarity index 100%
rename from static/usage/label/item/vue.md
rename to static/usage/v6/label/item/vue.md
diff --git a/static/usage/label/theming/colors/angular.md b/static/usage/v6/label/theming/colors/angular.md
similarity index 100%
rename from static/usage/label/theming/colors/angular.md
rename to static/usage/v6/label/theming/colors/angular.md
diff --git a/static/usage/v6/label/theming/colors/demo.html b/static/usage/v6/label/theming/colors/demo.html
new file mode 100644
index 00000000000..3444d3c2da9
--- /dev/null
+++ b/static/usage/v6/label/theming/colors/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Label</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-label {
+      margin: 0 2px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-label>Default</ion-label>
+        <ion-label color="primary">Primary</ion-label>
+        <ion-label color="secondary">Secondary</ion-label>
+        <ion-label color="tertiary">Tertiary</ion-label>
+        <ion-label color="success">Success</ion-label>
+        <ion-label color="warning">Warning</ion-label>
+        <ion-label color="danger">Danger</ion-label>
+        <ion-label color="light">Light</ion-label>
+        <ion-label color="medium">Medium</ion-label>
+        <ion-label color="dark">Dark</ion-label>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/label/theming/colors/index.md b/static/usage/v6/label/theming/colors/index.md
new file mode 100644
index 00000000000..79b5ebbc946
--- /dev/null
+++ b/static/usage/v6/label/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/label/theming/colors/demo.html" />
diff --git a/static/usage/label/theming/colors/javascript.md b/static/usage/v6/label/theming/colors/javascript.md
similarity index 100%
rename from static/usage/label/theming/colors/javascript.md
rename to static/usage/v6/label/theming/colors/javascript.md
diff --git a/static/usage/label/theming/colors/react.md b/static/usage/v6/label/theming/colors/react.md
similarity index 100%
rename from static/usage/label/theming/colors/react.md
rename to static/usage/v6/label/theming/colors/react.md
diff --git a/static/usage/label/theming/colors/vue.md b/static/usage/v6/label/theming/colors/vue.md
similarity index 100%
rename from static/usage/label/theming/colors/vue.md
rename to static/usage/v6/label/theming/colors/vue.md
diff --git a/static/usage/list-header/basic/angular.md b/static/usage/v6/list-header/basic/angular.md
similarity index 100%
rename from static/usage/list-header/basic/angular.md
rename to static/usage/v6/list-header/basic/angular.md
diff --git a/static/usage/v6/list-header/basic/demo.html b/static/usage/v6/list-header/basic/demo.html
new file mode 100644
index 00000000000..dae3477fac9
--- /dev/null
+++ b/static/usage/v6/list-header/basic/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-list-header>
+            <ion-label>Video Games</ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Pokémon Yellow</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Mega Man X</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>The Legend of Zelda</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Pac-Man</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Super Mario World</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/list-header/basic/index.md b/static/usage/v6/list-header/basic/index.md
new file mode 100644
index 00000000000..d3abe151a87
--- /dev/null
+++ b/static/usage/v6/list-header/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list-header/basic/demo.html" size="325px" />
diff --git a/static/usage/list-header/basic/javascript.md b/static/usage/v6/list-header/basic/javascript.md
similarity index 100%
rename from static/usage/list-header/basic/javascript.md
rename to static/usage/v6/list-header/basic/javascript.md
diff --git a/static/usage/list-header/basic/react.md b/static/usage/v6/list-header/basic/react.md
similarity index 100%
rename from static/usage/list-header/basic/react.md
rename to static/usage/v6/list-header/basic/react.md
diff --git a/static/usage/list-header/basic/vue.md b/static/usage/v6/list-header/basic/vue.md
similarity index 100%
rename from static/usage/list-header/basic/vue.md
rename to static/usage/v6/list-header/basic/vue.md
diff --git a/static/usage/list-header/buttons/angular.md b/static/usage/v6/list-header/buttons/angular.md
similarity index 100%
rename from static/usage/list-header/buttons/angular.md
rename to static/usage/v6/list-header/buttons/angular.md
diff --git a/static/usage/v6/list-header/buttons/demo.html b/static/usage/v6/list-header/buttons/demo.html
new file mode 100644
index 00000000000..19ecb87a9a2
--- /dev/null
+++ b/static/usage/v6/list-header/buttons/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-list-header>
+            <ion-label>Video Games</ion-label>
+            <ion-button>See All</ion-button>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Pokémon Yellow</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Mega Man X</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>The Legend of Zelda</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Pac-Man</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Super Mario World</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/list-header/buttons/index.md b/static/usage/v6/list-header/buttons/index.md
new file mode 100644
index 00000000000..f3eef534dd0
--- /dev/null
+++ b/static/usage/v6/list-header/buttons/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list-header/buttons/demo.html" size="325px" />
diff --git a/static/usage/list-header/buttons/javascript.md b/static/usage/v6/list-header/buttons/javascript.md
similarity index 100%
rename from static/usage/list-header/buttons/javascript.md
rename to static/usage/v6/list-header/buttons/javascript.md
diff --git a/static/usage/list-header/buttons/react.md b/static/usage/v6/list-header/buttons/react.md
similarity index 100%
rename from static/usage/list-header/buttons/react.md
rename to static/usage/v6/list-header/buttons/react.md
diff --git a/static/usage/list-header/buttons/vue.md b/static/usage/v6/list-header/buttons/vue.md
similarity index 100%
rename from static/usage/list-header/buttons/vue.md
rename to static/usage/v6/list-header/buttons/vue.md
diff --git a/static/usage/list-header/lines/angular.md b/static/usage/v6/list-header/lines/angular.md
similarity index 100%
rename from static/usage/list-header/lines/angular.md
rename to static/usage/v6/list-header/lines/angular.md
diff --git a/static/usage/v6/list-header/lines/demo.html b/static/usage/v6/list-header/lines/demo.html
new file mode 100644
index 00000000000..dad3ebc17cb
--- /dev/null
+++ b/static/usage/v6/list-header/lines/demo.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-list-header>
+            <ion-label>Default</ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header lines="inset">
+            <ion-label>Inset</ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header lines="full">
+            <ion-label>Full</ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/list-header/lines/index.md b/static/usage/v6/list-header/lines/index.md
new file mode 100644
index 00000000000..54598147a4f
--- /dev/null
+++ b/static/usage/v6/list-header/lines/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list-header/lines/demo.html" size="500px" />
diff --git a/static/usage/list-header/lines/javascript.md b/static/usage/v6/list-header/lines/javascript.md
similarity index 100%
rename from static/usage/list-header/lines/javascript.md
rename to static/usage/v6/list-header/lines/javascript.md
diff --git a/static/usage/list-header/lines/react.md b/static/usage/v6/list-header/lines/react.md
similarity index 100%
rename from static/usage/list-header/lines/react.md
rename to static/usage/v6/list-header/lines/react.md
diff --git a/static/usage/list-header/lines/vue.md b/static/usage/v6/list-header/lines/vue.md
similarity index 100%
rename from static/usage/list-header/lines/vue.md
rename to static/usage/v6/list-header/lines/vue.md
diff --git a/static/usage/list-header/theming/colors/angular.md b/static/usage/v6/list-header/theming/colors/angular.md
similarity index 100%
rename from static/usage/list-header/theming/colors/angular.md
rename to static/usage/v6/list-header/theming/colors/angular.md
diff --git a/static/usage/v6/list-header/theming/colors/demo.html b/static/usage/v6/list-header/theming/colors/demo.html
new file mode 100644
index 00000000000..fa36d9b0a9a
--- /dev/null
+++ b/static/usage/v6/list-header/theming/colors/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List Header</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list-header>
+          <ion-label>Default</ion-label>
+        </ion-list-header>
+        <ion-list-header color="primary">
+          <ion-label>Primary</ion-label>
+        </ion-list-header>
+        <ion-list-header color="secondary">
+          <ion-label>Secondary</ion-label>
+        </ion-list-header>
+        <ion-list-header color="tertiary">
+          <ion-label>Tertiary</ion-label>
+        </ion-list-header>
+        <ion-list-header color="success">
+          <ion-label>Success</ion-label>
+        </ion-list-header>
+        <ion-list-header color="warning">
+          <ion-label>Warning</ion-label>
+        </ion-list-header>
+        <ion-list-header color="danger">
+          <ion-label>Danger</ion-label>
+        </ion-list-header>
+        <ion-list-header color="light">
+          <ion-label>Light</ion-label>
+        </ion-list-header>
+        <ion-list-header color="medium">
+          <ion-label>Medium</ion-label>
+        </ion-list-header>
+        <ion-list-header color="dark">
+          <ion-label>Dark</ion-label>
+        </ion-list-header>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/list-header/theming/colors/index.md b/static/usage/v6/list-header/theming/colors/index.md
new file mode 100644
index 00000000000..10be0e14877
--- /dev/null
+++ b/static/usage/v6/list-header/theming/colors/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/list-header/theming/colors/demo.html"
+  size="650px"
+/>
diff --git a/static/usage/list-header/theming/colors/javascript.md b/static/usage/v6/list-header/theming/colors/javascript.md
similarity index 100%
rename from static/usage/list-header/theming/colors/javascript.md
rename to static/usage/v6/list-header/theming/colors/javascript.md
diff --git a/static/usage/list-header/theming/colors/react.md b/static/usage/v6/list-header/theming/colors/react.md
similarity index 100%
rename from static/usage/list-header/theming/colors/react.md
rename to static/usage/v6/list-header/theming/colors/react.md
diff --git a/static/usage/list-header/theming/colors/vue.md b/static/usage/v6/list-header/theming/colors/vue.md
similarity index 100%
rename from static/usage/list-header/theming/colors/vue.md
rename to static/usage/v6/list-header/theming/colors/vue.md
diff --git a/static/usage/list-header/theming/css-properties/angular/example_component_css.md b/static/usage/v6/list-header/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/list-header/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/list-header/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/list-header/theming/css-properties/angular/example_component_html.md b/static/usage/v6/list-header/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/list-header/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/list-header/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/list-header/theming/css-properties/demo.html b/static/usage/v6/list-header/theming/css-properties/demo.html
new file mode 100644
index 00000000000..133c2d8f994
--- /dev/null
+++ b/static/usage/v6/list-header/theming/css-properties/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List Header</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list-header {
+      --background: #19422d;
+      --color: #fff;
+
+      --border-width: 0 0 4px 0;
+      --border-color: #f24aec;
+      --border-style: double;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list-header>
+          <ion-label>Custom List Header</ion-label>
+        </ion-list-header>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/list-header/theming/css-properties/index.md b/static/usage/v6/list-header/theming/css-properties/index.md
new file mode 100644
index 00000000000..f9a497142e7
--- /dev/null
+++ b/static/usage/v6/list-header/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/list-header/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/list-header/theming/css-properties/javascript.md b/static/usage/v6/list-header/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/list-header/theming/css-properties/javascript.md
rename to static/usage/v6/list-header/theming/css-properties/javascript.md
diff --git a/static/usage/list-header/theming/css-properties/react/main_css.md b/static/usage/v6/list-header/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/list-header/theming/css-properties/react/main_css.md
rename to static/usage/v6/list-header/theming/css-properties/react/main_css.md
diff --git a/static/usage/list-header/theming/css-properties/react/main_tsx.md b/static/usage/v6/list-header/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/list-header/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/list-header/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/list-header/theming/css-properties/vue.md b/static/usage/v6/list-header/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/list-header/theming/css-properties/vue.md
rename to static/usage/v6/list-header/theming/css-properties/vue.md
diff --git a/static/usage/list/basic/angular.md b/static/usage/v6/list/basic/angular.md
similarity index 100%
rename from static/usage/list/basic/angular.md
rename to static/usage/v6/list/basic/angular.md
diff --git a/static/usage/v6/list/basic/demo.html b/static/usage/v6/list/basic/demo.html
new file mode 100644
index 00000000000..86ed4981f63
--- /dev/null
+++ b/static/usage/v6/list/basic/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Pokémon Yellow</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Mega Man X</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>The Legend of Zelda</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Pac-Man</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Super Mario World</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/list/basic/index.md b/static/usage/v6/list/basic/index.md
new file mode 100644
index 00000000000..04da67f403d
--- /dev/null
+++ b/static/usage/v6/list/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list/basic/demo.html" size="300px" />
diff --git a/static/usage/list/basic/javascript.md b/static/usage/v6/list/basic/javascript.md
similarity index 100%
rename from static/usage/list/basic/javascript.md
rename to static/usage/v6/list/basic/javascript.md
diff --git a/static/usage/list/basic/react.md b/static/usage/v6/list/basic/react.md
similarity index 100%
rename from static/usage/list/basic/react.md
rename to static/usage/v6/list/basic/react.md
diff --git a/static/usage/list/basic/vue.md b/static/usage/v6/list/basic/vue.md
similarity index 100%
rename from static/usage/list/basic/vue.md
rename to static/usage/v6/list/basic/vue.md
diff --git a/static/usage/list/inset/angular.md b/static/usage/v6/list/inset/angular.md
similarity index 100%
rename from static/usage/list/inset/angular.md
rename to static/usage/v6/list/inset/angular.md
diff --git a/static/usage/v6/list/inset/demo.html b/static/usage/v6/list/inset/demo.html
new file mode 100644
index 00000000000..b2cbacc4e11
--- /dev/null
+++ b/static/usage/v6/list/inset/demo.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-content {
+      --background: #f9f9f9;
+    }
+
+    .container {
+      flex-flow: column;
+      align-items: stretch;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list inset>
+          <ion-item>
+            <ion-label>Pokémon Yellow</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Mega Man X</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>The Legend of Zelda</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Pac-Man</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Super Mario World</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/list/inset/index.md b/static/usage/v6/list/inset/index.md
new file mode 100644
index 00000000000..a98a9f03e82
--- /dev/null
+++ b/static/usage/v6/list/inset/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list/inset/demo.html" size="350px" />
diff --git a/static/usage/list/inset/javascript.md b/static/usage/v6/list/inset/javascript.md
similarity index 100%
rename from static/usage/list/inset/javascript.md
rename to static/usage/v6/list/inset/javascript.md
diff --git a/static/usage/list/inset/react.md b/static/usage/v6/list/inset/react.md
similarity index 100%
rename from static/usage/list/inset/react.md
rename to static/usage/v6/list/inset/react.md
diff --git a/static/usage/list/inset/vue.md b/static/usage/v6/list/inset/vue.md
similarity index 100%
rename from static/usage/list/inset/vue.md
rename to static/usage/v6/list/inset/vue.md
diff --git a/static/usage/list/lines/angular.md b/static/usage/v6/list/lines/angular.md
similarity index 100%
rename from static/usage/list/lines/angular.md
rename to static/usage/v6/list/lines/angular.md
diff --git a/static/usage/v6/list/lines/demo.html b/static/usage/v6/list/lines/demo.html
new file mode 100644
index 00000000000..259465266e1
--- /dev/null
+++ b/static/usage/v6/list/lines/demo.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      align-items: stretch;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list lines="full">
+          <ion-item>
+            <ion-label>Full Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Full Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Full Lines</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-list lines="inset">
+          <ion-item>
+            <ion-label>Inset Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Inset Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Inset Lines</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-list lines="none">
+          <ion-item>
+            <ion-label>No Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>No Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>No Lines</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/list/lines/index.md b/static/usage/v6/list/lines/index.md
new file mode 100644
index 00000000000..bc8750c13c8
--- /dev/null
+++ b/static/usage/v6/list/lines/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list/lines/demo.html" size="500px" />
diff --git a/static/usage/list/lines/javascript.md b/static/usage/v6/list/lines/javascript.md
similarity index 100%
rename from static/usage/list/lines/javascript.md
rename to static/usage/v6/list/lines/javascript.md
diff --git a/static/usage/list/lines/react.md b/static/usage/v6/list/lines/react.md
similarity index 100%
rename from static/usage/list/lines/react.md
rename to static/usage/v6/list/lines/react.md
diff --git a/static/usage/list/lines/vue.md b/static/usage/v6/list/lines/vue.md
similarity index 100%
rename from static/usage/list/lines/vue.md
rename to static/usage/v6/list/lines/vue.md
diff --git a/static/usage/loading/controller/angular/example_component_html.md b/static/usage/v6/loading/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/loading/controller/angular/example_component_html.md
rename to static/usage/v6/loading/controller/angular/example_component_html.md
diff --git a/static/usage/loading/controller/angular/example_component_ts.md b/static/usage/v6/loading/controller/angular/example_component_ts.md
similarity index 100%
rename from static/usage/loading/controller/angular/example_component_ts.md
rename to static/usage/v6/loading/controller/angular/example_component_ts.md
diff --git a/static/usage/v6/loading/controller/demo.html b/static/usage/v6/loading/controller/demo.html
new file mode 100644
index 00000000000..9a3385f7307
--- /dev/null
+++ b/static/usage/v6/loading/controller/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.loadingController = loadingController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="showLoading()">Show Loading</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const loading = document.querySelector('ion-loading');
+    const showLoading = async () => {
+      const loading = await loadingController.create({
+        message: 'Dismissing after 3 seconds...',
+        duration: 3000
+      });
+      loading.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/loading/controller/index.md b/static/usage/v6/loading/controller/index.md
new file mode 100644
index 00000000000..7d62fd4f345
--- /dev/null
+++ b/static/usage/v6/loading/controller/index.md
@@ -0,0 +1,23 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/loading/controller/demo.html"
+/>
diff --git a/static/usage/loading/controller/javascript.md b/static/usage/v6/loading/controller/javascript.md
similarity index 100%
rename from static/usage/loading/controller/javascript.md
rename to static/usage/v6/loading/controller/javascript.md
diff --git a/static/usage/loading/controller/react.md b/static/usage/v6/loading/controller/react.md
similarity index 100%
rename from static/usage/loading/controller/react.md
rename to static/usage/v6/loading/controller/react.md
diff --git a/static/usage/loading/controller/vue.md b/static/usage/v6/loading/controller/vue.md
similarity index 100%
rename from static/usage/loading/controller/vue.md
rename to static/usage/v6/loading/controller/vue.md
diff --git a/static/usage/loading/spinners/angular/example_component_html.md b/static/usage/v6/loading/spinners/angular/example_component_html.md
similarity index 100%
rename from static/usage/loading/spinners/angular/example_component_html.md
rename to static/usage/v6/loading/spinners/angular/example_component_html.md
diff --git a/static/usage/loading/spinners/angular/example_component_ts.md b/static/usage/v6/loading/spinners/angular/example_component_ts.md
similarity index 100%
rename from static/usage/loading/spinners/angular/example_component_ts.md
rename to static/usage/v6/loading/spinners/angular/example_component_ts.md
diff --git a/static/usage/v6/loading/spinners/demo.html b/static/usage/v6/loading/spinners/demo.html
new file mode 100644
index 00000000000..01929a4e1f2
--- /dev/null
+++ b/static/usage/v6/loading/spinners/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.loadingController = loadingController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="showLoading()">Show Loading</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const loading = document.querySelector('ion-loading');
+    const showLoading = async () => {
+      const loading = await loadingController.create({
+        message: 'Loading...',
+        duration: 3000,
+        spinner: 'circles'
+      });
+      loading.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/loading/spinners/index.md b/static/usage/v6/loading/spinners/index.md
new file mode 100644
index 00000000000..2fded40331d
--- /dev/null
+++ b/static/usage/v6/loading/spinners/index.md
@@ -0,0 +1,23 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/loading/spinners/demo.html"
+/>
diff --git a/static/usage/loading/spinners/javascript.md b/static/usage/v6/loading/spinners/javascript.md
similarity index 100%
rename from static/usage/loading/spinners/javascript.md
rename to static/usage/v6/loading/spinners/javascript.md
diff --git a/static/usage/loading/spinners/react.md b/static/usage/v6/loading/spinners/react.md
similarity index 100%
rename from static/usage/loading/spinners/react.md
rename to static/usage/v6/loading/spinners/react.md
diff --git a/static/usage/loading/spinners/vue.md b/static/usage/v6/loading/spinners/vue.md
similarity index 100%
rename from static/usage/loading/spinners/vue.md
rename to static/usage/v6/loading/spinners/vue.md
diff --git a/static/usage/loading/theming/angular/example_component_html.md b/static/usage/v6/loading/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/loading/theming/angular/example_component_html.md
rename to static/usage/v6/loading/theming/angular/example_component_html.md
diff --git a/static/usage/loading/theming/angular/example_component_ts.md b/static/usage/v6/loading/theming/angular/example_component_ts.md
similarity index 100%
rename from static/usage/loading/theming/angular/example_component_ts.md
rename to static/usage/v6/loading/theming/angular/example_component_ts.md
diff --git a/static/usage/loading/theming/angular/global_css.md b/static/usage/v6/loading/theming/angular/global_css.md
similarity index 100%
rename from static/usage/loading/theming/angular/global_css.md
rename to static/usage/v6/loading/theming/angular/global_css.md
diff --git a/static/usage/v6/loading/theming/demo.html b/static/usage/v6/loading/theming/demo.html
new file mode 100644
index 00000000000..d901557c331
--- /dev/null
+++ b/static/usage/v6/loading/theming/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.loadingController = loadingController;
+  </script>
+  <style>
+    ion-loading.custom-loading {
+      --background: #e3edff;
+      --spinner-color: #1c6dff;
+
+      color: #1c6dff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="showLoading()">Show Loading</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const loading = document.querySelector('ion-loading');
+    const showLoading = async () => {
+      const loading = await loadingController.create({
+        message: 'Loading...',
+        duration: 3000,
+        cssClass: 'custom-loading'
+      });
+      loading.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/loading/theming/index.md b/static/usage/v6/loading/theming/index.md
new file mode 100644
index 00000000000..8f96b3a28e0
--- /dev/null
+++ b/static/usage/v6/loading/theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v6/loading/theming/demo.html"
+/>
diff --git a/static/usage/loading/theming/javascript.md b/static/usage/v6/loading/theming/javascript.md
similarity index 100%
rename from static/usage/loading/theming/javascript.md
rename to static/usage/v6/loading/theming/javascript.md
diff --git a/static/usage/loading/theming/react.md b/static/usage/v6/loading/theming/react.md
similarity index 100%
rename from static/usage/loading/theming/react.md
rename to static/usage/v6/loading/theming/react.md
diff --git a/static/usage/loading/theming/react/main_css.md b/static/usage/v6/loading/theming/react/main_css.md
similarity index 100%
rename from static/usage/loading/theming/react/main_css.md
rename to static/usage/v6/loading/theming/react/main_css.md
diff --git a/static/usage/loading/theming/react/main_tsx.md b/static/usage/v6/loading/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/loading/theming/react/main_tsx.md
rename to static/usage/v6/loading/theming/react/main_tsx.md
diff --git a/static/usage/loading/theming/vue.md b/static/usage/v6/loading/theming/vue.md
similarity index 100%
rename from static/usage/loading/theming/vue.md
rename to static/usage/v6/loading/theming/vue.md
diff --git a/static/usage/menu/basic/angular.md b/static/usage/v6/menu/basic/angular.md
similarity index 100%
rename from static/usage/menu/basic/angular.md
rename to static/usage/v6/menu/basic/angular.md
diff --git a/static/usage/v6/menu/basic/demo.html b/static/usage/v6/menu/basic/demo.html
new file mode 100644
index 00000000000..83f3f3ac7c4
--- /dev/null
+++ b/static/usage/v6/menu/basic/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Menu</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu content-id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu Content</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">This is the menu content.</ion-content>
+    </ion-menu>
+    <div class="ion-page" id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button></ion-menu-button>
+          </ion-buttons>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        Tap the button in the toolbar to open the menu.
+      </ion-content>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/menu/basic/index.md b/static/usage/v6/menu/basic/index.md
new file mode 100644
index 00000000000..ebfb7a81a3a
--- /dev/null
+++ b/static/usage/v6/menu/basic/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/menu/basic/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/menu/basic/javascript.md b/static/usage/v6/menu/basic/javascript.md
similarity index 100%
rename from static/usage/menu/basic/javascript.md
rename to static/usage/v6/menu/basic/javascript.md
diff --git a/static/usage/menu/basic/react.md b/static/usage/v6/menu/basic/react.md
similarity index 100%
rename from static/usage/menu/basic/react.md
rename to static/usage/v6/menu/basic/react.md
diff --git a/static/usage/menu/basic/vue.md b/static/usage/v6/menu/basic/vue.md
similarity index 100%
rename from static/usage/menu/basic/vue.md
rename to static/usage/v6/menu/basic/vue.md
diff --git a/static/usage/menu/theming/angular/example_component_css.md b/static/usage/v6/menu/theming/angular/example_component_css.md
similarity index 100%
rename from static/usage/menu/theming/angular/example_component_css.md
rename to static/usage/v6/menu/theming/angular/example_component_css.md
diff --git a/static/usage/menu/theming/angular/example_component_html.md b/static/usage/v6/menu/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/menu/theming/angular/example_component_html.md
rename to static/usage/v6/menu/theming/angular/example_component_html.md
diff --git a/static/usage/v6/menu/theming/demo.html b/static/usage/v6/menu/theming/demo.html
new file mode 100644
index 00000000000..e3d7c78a20f
--- /dev/null
+++ b/static/usage/v6/menu/theming/demo.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Menu</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-menu::part(backdrop) {
+      background-color: rgba(255, 0, 255, 0.5);
+    }
+
+    ion-menu::part(container) {
+      border-radius: 0 20px 20px 0;
+
+      box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu content-id="main-content">
+      <ion-header>
+        <ion-toolbar color="tertiary">
+          <ion-title>Menu Content</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">This is the menu content.</ion-content>
+    </ion-menu>
+    <div class="ion-page" id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button></ion-menu-button>
+          </ion-buttons>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        Tap the button in the toolbar to open the menu.
+      </ion-content>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/menu/theming/index.md b/static/usage/v6/menu/theming/index.md
new file mode 100644
index 00000000000..be01c7e08a8
--- /dev/null
+++ b/static/usage/v6/menu/theming/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/menu/theming/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/menu/theming/javascript.md b/static/usage/v6/menu/theming/javascript.md
similarity index 100%
rename from static/usage/menu/theming/javascript.md
rename to static/usage/v6/menu/theming/javascript.md
diff --git a/static/usage/menu/theming/react/main_css.md b/static/usage/v6/menu/theming/react/main_css.md
similarity index 100%
rename from static/usage/menu/theming/react/main_css.md
rename to static/usage/v6/menu/theming/react/main_css.md
diff --git a/static/usage/menu/theming/react/main_tsx.md b/static/usage/v6/menu/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/menu/theming/react/main_tsx.md
rename to static/usage/v6/menu/theming/react/main_tsx.md
diff --git a/static/usage/menu/theming/vue.md b/static/usage/v6/menu/theming/vue.md
similarity index 100%
rename from static/usage/menu/theming/vue.md
rename to static/usage/v6/menu/theming/vue.md
diff --git a/static/usage/menu/toggle/angular.md b/static/usage/v6/menu/toggle/angular.md
similarity index 100%
rename from static/usage/menu/toggle/angular.md
rename to static/usage/v6/menu/toggle/angular.md
diff --git a/static/usage/v6/menu/toggle/demo.html b/static/usage/v6/menu/toggle/demo.html
new file mode 100644
index 00000000000..6a760b44aa3
--- /dev/null
+++ b/static/usage/v6/menu/toggle/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Menu - Toggle</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu id="custom-menu" content-id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu Content</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-menu-toggle>
+          <ion-button>Click to close the menu</ion-button>
+        </ion-menu-toggle>
+      </ion-content>
+    </ion-menu>
+    <div class="ion-page" id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-menu-toggle>
+          <ion-button>Click to open the menu</ion-button>
+        </ion-menu-toggle>
+      </ion-content>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/menu/toggle/index.md b/static/usage/v6/menu/toggle/index.md
new file mode 100644
index 00000000000..b56daf9751f
--- /dev/null
+++ b/static/usage/v6/menu/toggle/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/menu/toggle/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/menu/toggle/javascript.md b/static/usage/v6/menu/toggle/javascript.md
similarity index 100%
rename from static/usage/menu/toggle/javascript.md
rename to static/usage/v6/menu/toggle/javascript.md
diff --git a/static/usage/menu/toggle/react.md b/static/usage/v6/menu/toggle/react.md
similarity index 100%
rename from static/usage/menu/toggle/react.md
rename to static/usage/v6/menu/toggle/react.md
diff --git a/static/usage/menu/toggle/vue.md b/static/usage/v6/menu/toggle/vue.md
similarity index 100%
rename from static/usage/menu/toggle/vue.md
rename to static/usage/v6/menu/toggle/vue.md
diff --git a/static/usage/menu/type/angular/example_component_html.md b/static/usage/v6/menu/type/angular/example_component_html.md
similarity index 100%
rename from static/usage/menu/type/angular/example_component_html.md
rename to static/usage/v6/menu/type/angular/example_component_html.md
diff --git a/static/usage/menu/type/angular/example_component_ts.md b/static/usage/v6/menu/type/angular/example_component_ts.md
similarity index 100%
rename from static/usage/menu/type/angular/example_component_ts.md
rename to static/usage/v6/menu/type/angular/example_component_ts.md
diff --git a/static/usage/v6/menu/type/demo.html b/static/usage/v6/menu/type/demo.html
new file mode 100644
index 00000000000..7dbfe39cffa
--- /dev/null
+++ b/static/usage/v6/menu/type/demo.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Menu - Type</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu type="overlay" content-id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu Content</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-menu-toggle>
+          <ion-button>Click to close the menu</ion-button>
+        </ion-menu-toggle>
+      </ion-content>
+    </ion-menu>
+
+    <div class="ion-page" id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h2>Select an overlay type:</h2>
+        <ion-radio-group value="overlay">
+          <ion-item>
+            <ion-label>
+              <code>overlay</code>
+            </ion-label>
+            <ion-radio value="overlay"></ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-label>
+              <code>reveal</code>
+            </ion-label>
+            <ion-radio value="reveal"></ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-label>
+              <code>push</code>
+            </ion-label>
+            <ion-radio value="push"></ion-radio>
+          </ion-item>
+        </ion-radio-group> <br />
+        <ion-menu-toggle>
+          <ion-button>Click to open the menu</ion-button>
+        </ion-menu-toggle>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const menu = document.querySelector('ion-menu');
+    const radioGroup = document.querySelector('ion-radio-group');
+
+    radioGroup.addEventListener('ionChange', (ev) => {
+      menu.type = ev.detail.value;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/menu/type/index.md b/static/usage/v6/menu/type/index.md
new file mode 100644
index 00000000000..b05232459c0
--- /dev/null
+++ b/static/usage/v6/menu/type/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/menu/type/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/menu/type/javascript.md b/static/usage/v6/menu/type/javascript.md
similarity index 100%
rename from static/usage/menu/type/javascript.md
rename to static/usage/v6/menu/type/javascript.md
diff --git a/static/usage/menu/type/react.md b/static/usage/v6/menu/type/react.md
similarity index 100%
rename from static/usage/menu/type/react.md
rename to static/usage/v6/menu/type/react.md
diff --git a/static/usage/menu/type/vue.md b/static/usage/v6/menu/type/vue.md
similarity index 100%
rename from static/usage/menu/type/vue.md
rename to static/usage/v6/menu/type/vue.md
diff --git a/static/usage/modal/can-dismiss/boolean/angular/example_component_html.md b/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/can-dismiss/boolean/angular/example_component_html.md
rename to static/usage/v6/modal/can-dismiss/boolean/angular/example_component_html.md
diff --git a/static/usage/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md
similarity index 100%
rename from static/usage/modal/can-dismiss/boolean/angular/example_component_ts.md
rename to static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md
diff --git a/static/usage/v6/modal/can-dismiss/boolean/demo.html b/static/usage/v6/modal/can-dismiss/boolean/demo.html
new file mode 100644
index 00000000000..d548f1c9e61
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/boolean/demo.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Can Dismiss</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>App</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-modal" expand="block">Open</ion-button>
+
+        <ion-modal trigger="open-modal">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Modal</ion-title>
+              <ion-buttons slot="end">
+                <ion-button onclick="dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
+            <ion-item>
+              <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+              <ion-checkbox id="terms"></ion-checkbox>
+            </ion-item>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.canDismiss = false;
+    modal.presentingElement = document.querySelector('.ion-page');
+
+    function dismiss() {
+      modal.dismiss();
+    }
+
+    modal.addEventListener('didPresent', () => {
+      const terms = document.getElementById('terms');
+      terms.addEventListener('ionChange', ev => {
+        modal.canDismiss = ev.detail.checked;
+      });
+    });
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/can-dismiss/boolean/index.md b/static/usage/v6/modal/can-dismiss/boolean/index.md
new file mode 100644
index 00000000000..29fc2404f17
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/boolean/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/modal/can-dismiss/boolean/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/modal/can-dismiss/boolean/javascript.md b/static/usage/v6/modal/can-dismiss/boolean/javascript.md
similarity index 100%
rename from static/usage/modal/can-dismiss/boolean/javascript.md
rename to static/usage/v6/modal/can-dismiss/boolean/javascript.md
diff --git a/static/usage/modal/can-dismiss/boolean/react.md b/static/usage/v6/modal/can-dismiss/boolean/react.md
similarity index 100%
rename from static/usage/modal/can-dismiss/boolean/react.md
rename to static/usage/v6/modal/can-dismiss/boolean/react.md
diff --git a/static/usage/modal/can-dismiss/boolean/vue.md b/static/usage/v6/modal/can-dismiss/boolean/vue.md
similarity index 100%
rename from static/usage/modal/can-dismiss/boolean/vue.md
rename to static/usage/v6/modal/can-dismiss/boolean/vue.md
diff --git a/static/usage/modal/can-dismiss/function/angular/example_component_html.md b/static/usage/v6/modal/can-dismiss/function/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/can-dismiss/function/angular/example_component_html.md
rename to static/usage/v6/modal/can-dismiss/function/angular/example_component_html.md
diff --git a/static/usage/modal/can-dismiss/function/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md
similarity index 100%
rename from static/usage/modal/can-dismiss/function/angular/example_component_ts.md
rename to static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md
diff --git a/static/usage/v6/modal/can-dismiss/function/demo.html b/static/usage/v6/modal/can-dismiss/function/demo.html
new file mode 100644
index 00000000000..0f97193113f
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/function/demo.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Can Dismiss</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>App</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-modal" expand="block">Open</ion-button>
+
+        <ion-modal trigger="open-modal">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Modal</ion-title>
+              <ion-buttons slot="end">
+                <ion-button onclick="dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content class="ion-padding">
+            <p>You will be prompted when closing this modal.</p>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.canDismiss = promptClose;
+    modal.presentingElement = document.querySelector('.ion-page');
+
+    function dismiss() {
+      modal.dismiss();
+    }
+
+    async function promptClose() {
+      const actionSheet = document.createElement('ion-action-sheet');
+
+      actionSheet.header = 'Are you sure?';
+      actionSheet.buttons = [{
+        text: 'Yes',
+        role: 'confirm'
+      }, {
+        text: 'No',
+        role: 'cancel'
+      }];
+      document.body.appendChild(actionSheet);
+      await actionSheet.present();
+
+      const { role } = await actionSheet.onWillDismiss();
+
+      return role === 'confirm';
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/can-dismiss/function/index.md b/static/usage/v6/modal/can-dismiss/function/index.md
new file mode 100644
index 00000000000..37de40102aa
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/function/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/modal/can-dismiss/function/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/modal/can-dismiss/function/javascript.md b/static/usage/v6/modal/can-dismiss/function/javascript.md
similarity index 100%
rename from static/usage/modal/can-dismiss/function/javascript.md
rename to static/usage/v6/modal/can-dismiss/function/javascript.md
diff --git a/static/usage/modal/can-dismiss/function/react.md b/static/usage/v6/modal/can-dismiss/function/react.md
similarity index 100%
rename from static/usage/modal/can-dismiss/function/react.md
rename to static/usage/v6/modal/can-dismiss/function/react.md
diff --git a/static/usage/modal/can-dismiss/function/vue.md b/static/usage/v6/modal/can-dismiss/function/vue.md
similarity index 100%
rename from static/usage/modal/can-dismiss/function/vue.md
rename to static/usage/v6/modal/can-dismiss/function/vue.md
diff --git a/static/usage/modal/card/basic/angular/example_component_html.md b/static/usage/v6/modal/card/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/card/basic/angular/example_component_html.md
rename to static/usage/v6/modal/card/basic/angular/example_component_html.md
diff --git a/static/usage/modal/card/basic/angular/example_component_ts.md b/static/usage/v6/modal/card/basic/angular/example_component_ts.md
similarity index 100%
rename from static/usage/modal/card/basic/angular/example_component_ts.md
rename to static/usage/v6/modal/card/basic/angular/example_component_ts.md
diff --git a/static/usage/v6/modal/card/basic/demo.html b/static/usage/v6/modal/card/basic/demo.html
new file mode 100644
index 00000000000..ea2200494f8
--- /dev/null
+++ b/static/usage/v6/modal/card/basic/demo.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Card</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>App</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-modal" expand="block">Open Card Modal</ion-button>
+
+        <ion-modal trigger="open-modal">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Modal</ion-title>
+              <ion-buttons slot="end">
+                <ion-button onclick="modal.dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <ion-list>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=b" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Connor Smith</h2>
+                  <p>Sales Rep</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=a" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Daniel Smith</h2>
+                  <p>Product Designer</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=d" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Greg Smith</h2>
+                  <p>Director of Operations</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=e" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Zoey Smith</h2>
+                  <p>CEO</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.presentingElement = document.querySelector('.ion-page');
+
+    function dismiss() {
+      modal.dismiss();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/card/basic/index.md b/static/usage/v6/modal/card/basic/index.md
new file mode 100644
index 00000000000..1d68e0f9f07
--- /dev/null
+++ b/static/usage/v6/modal/card/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/modal/card/basic/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/modal/card/basic/javascript.md b/static/usage/v6/modal/card/basic/javascript.md
similarity index 100%
rename from static/usage/modal/card/basic/javascript.md
rename to static/usage/v6/modal/card/basic/javascript.md
diff --git a/static/usage/modal/card/basic/react.md b/static/usage/v6/modal/card/basic/react.md
similarity index 100%
rename from static/usage/modal/card/basic/react.md
rename to static/usage/v6/modal/card/basic/react.md
diff --git a/static/usage/modal/card/basic/vue.md b/static/usage/v6/modal/card/basic/vue.md
similarity index 100%
rename from static/usage/modal/card/basic/vue.md
rename to static/usage/v6/modal/card/basic/vue.md
diff --git a/static/usage/modal/controller/angular/app_module_ts.md b/static/usage/v6/modal/controller/angular/app_module_ts.md
similarity index 100%
rename from static/usage/modal/controller/angular/app_module_ts.md
rename to static/usage/v6/modal/controller/angular/app_module_ts.md
diff --git a/static/usage/modal/controller/angular/example_component_html.md b/static/usage/v6/modal/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/controller/angular/example_component_html.md
rename to static/usage/v6/modal/controller/angular/example_component_html.md
diff --git a/static/usage/modal/controller/angular/example_component_ts.md b/static/usage/v6/modal/controller/angular/example_component_ts.md
similarity index 100%
rename from static/usage/modal/controller/angular/example_component_ts.md
rename to static/usage/v6/modal/controller/angular/example_component_ts.md
diff --git a/static/usage/modal/controller/angular/modal-example_component_html.md b/static/usage/v6/modal/controller/angular/modal-example_component_html.md
similarity index 100%
rename from static/usage/modal/controller/angular/modal-example_component_html.md
rename to static/usage/v6/modal/controller/angular/modal-example_component_html.md
diff --git a/static/usage/modal/controller/angular/modal-example_component_ts.md b/static/usage/v6/modal/controller/angular/modal-example_component_ts.md
similarity index 100%
rename from static/usage/modal/controller/angular/modal-example_component_ts.md
rename to static/usage/v6/modal/controller/angular/modal-example_component_ts.md
diff --git a/static/usage/v6/modal/controller/demo.html b/static/usage/v6/modal/controller/demo.html
new file mode 100644
index 00000000000..67c8cd24fc6
--- /dev/null
+++ b/static/usage/v6/modal/controller/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Controller</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.modalController = modalController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Controller Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button expand="block" onclick="openModal()">Open</ion-button>
+      <p id="message">This modal example uses the modalController to present and dismiss modals.</p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const openModal = async () => {
+      const div = document.createElement('div');
+      div.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button color="medium" onclick="cancel()">Cancel</ion-button>
+          </ion-buttons>
+          <ion-title>Welcome</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="confirm()">Confirm</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-item>
+          <ion-label position="stacked">Enter your name</ion-label>
+          <ion-input type="text" placeholder="Your name"></ion-input>
+        </ion-item>
+      </ion-content>
+      `;
+
+      const modal = await modalController.create({
+        component: div,
+      });
+
+      modal.present();
+
+      const { data, role } = await modal.onWillDismiss();
+
+      if (role === 'confirm') {
+        document.querySelector('#message').innerHTML = `Hello, ${data}!`;
+      }
+    }
+
+    function cancel() {
+      modalController.dismiss(null, 'cancel');
+    }
+
+    function confirm() {
+      const input = document.querySelector('ion-input');
+      modalController.dismiss(input.value, 'confirm');
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/controller/index.md b/static/usage/v6/modal/controller/index.md
new file mode 100644
index 00000000000..5b98f7a0a37
--- /dev/null
+++ b/static/usage/v6/modal/controller/index.md
@@ -0,0 +1,38 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_modal from './vue/modal_vue.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_modal_example_component_ts from './angular/modal-example_component_ts.md';
+import angular_modal_example_component_html from './angular/modal-example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/Modal.vue': vue_modal,
+      },
+    },
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/modal-example.component.html': angular_modal_example_component_html,
+        'src/app/modal-example.component.ts': angular_modal_example_component_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+      },
+    },
+  }}
+  src="usage/v6/modal/controller/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/modal/controller/javascript.md b/static/usage/v6/modal/controller/javascript.md
similarity index 100%
rename from static/usage/modal/controller/javascript.md
rename to static/usage/v6/modal/controller/javascript.md
diff --git a/static/usage/modal/controller/react.md b/static/usage/v6/modal/controller/react.md
similarity index 100%
rename from static/usage/modal/controller/react.md
rename to static/usage/v6/modal/controller/react.md
diff --git a/static/usage/modal/controller/vue/example_vue.md b/static/usage/v6/modal/controller/vue/example_vue.md
similarity index 100%
rename from static/usage/modal/controller/vue/example_vue.md
rename to static/usage/v6/modal/controller/vue/example_vue.md
diff --git a/static/usage/modal/controller/vue/modal_vue.md b/static/usage/v6/modal/controller/vue/modal_vue.md
similarity index 100%
rename from static/usage/modal/controller/vue/modal_vue.md
rename to static/usage/v6/modal/controller/vue/modal_vue.md
diff --git a/static/usage/modal/custom-dialogs/angular/example_component_html.md b/static/usage/v6/modal/custom-dialogs/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/custom-dialogs/angular/example_component_html.md
rename to static/usage/v6/modal/custom-dialogs/angular/example_component_html.md
diff --git a/static/usage/modal/custom-dialogs/angular/global_css.md b/static/usage/v6/modal/custom-dialogs/angular/global_css.md
similarity index 100%
rename from static/usage/modal/custom-dialogs/angular/global_css.md
rename to static/usage/v6/modal/custom-dialogs/angular/global_css.md
diff --git a/static/usage/v6/modal/custom-dialogs/demo.html b/static/usage/v6/modal/custom-dialogs/demo.html
new file mode 100644
index 00000000000..95149828ba7
--- /dev/null
+++ b/static/usage/v6/modal/custom-dialogs/demo.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Custom Dialog</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@ionic/core@6.1.15-dev.11657743655.1e3dcc3c/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@ionic/core@6.1.15-dev.11657743655.1e3dcc3c/css/ionic.bundle.css" />
+  <style>
+    ion-modal {
+      --width: fit-content;
+      --min-width: 250px;
+      --height: fit-content;
+      --border-radius: 6px;
+      --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+    }
+
+    ion-modal h1 {
+      margin: 20px 20px 10px 20px;
+    }
+
+    ion-modal ion-icon {
+      margin-right: 6px;
+
+      width: 48px;
+      height: 48px;
+
+      padding: 4px 0;
+
+      color: #aaaaaa;
+    }
+
+    ion-modal .wrapper {
+      margin-bottom: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="custom-modal" expand="block">Open Custom Dialog</ion-button>
+
+      <ion-modal trigger="custom-modal">
+        <div class="wrapper">
+          <h1>Dialog header</h1>
+
+          <ion-list lines="none">
+            <ion-item button="true" detail="false" onclick="dismiss()">
+              <ion-icon name="person-circle"></ion-icon>
+              <ion-label>Item 1</ion-label>
+            </ion-item>
+            <ion-item button="true" detail="false" onclick="dismiss()">
+              <ion-icon name="person-circle"></ion-icon>
+              <ion-label>Item 2</ion-label>
+            </ion-item>
+            <ion-item button="true" detail="false" onclick="dismiss()">
+              <ion-icon name="person-circle"></ion-icon>
+              <ion-label>Item 3</ion-label>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+    const dismiss = () => modal.dismiss();
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/custom-dialogs/index.md b/static/usage/v6/modal/custom-dialogs/index.md
new file mode 100644
index 00000000000..f1dd66838a2
--- /dev/null
+++ b/static/usage/v6/modal/custom-dialogs/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_global_css from './angular/global_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    vue,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v6/modal/custom-dialogs/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/modal/custom-dialogs/javascript.md b/static/usage/v6/modal/custom-dialogs/javascript.md
similarity index 100%
rename from static/usage/modal/custom-dialogs/javascript.md
rename to static/usage/v6/modal/custom-dialogs/javascript.md
diff --git a/static/usage/modal/custom-dialogs/react/main_css.md b/static/usage/v6/modal/custom-dialogs/react/main_css.md
similarity index 100%
rename from static/usage/modal/custom-dialogs/react/main_css.md
rename to static/usage/v6/modal/custom-dialogs/react/main_css.md
diff --git a/static/usage/modal/custom-dialogs/react/main_tsx.md b/static/usage/v6/modal/custom-dialogs/react/main_tsx.md
similarity index 100%
rename from static/usage/modal/custom-dialogs/react/main_tsx.md
rename to static/usage/v6/modal/custom-dialogs/react/main_tsx.md
diff --git a/static/usage/modal/custom-dialogs/vue.md b/static/usage/v6/modal/custom-dialogs/vue.md
similarity index 100%
rename from static/usage/modal/custom-dialogs/vue.md
rename to static/usage/v6/modal/custom-dialogs/vue.md
diff --git a/static/usage/modal/inline/basic/angular/example_component_html.md b/static/usage/v6/modal/inline/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/inline/basic/angular/example_component_html.md
rename to static/usage/v6/modal/inline/basic/angular/example_component_html.md
diff --git a/static/usage/modal/inline/basic/angular/example_component_ts.md b/static/usage/v6/modal/inline/basic/angular/example_component_ts.md
similarity index 100%
rename from static/usage/modal/inline/basic/angular/example_component_ts.md
rename to static/usage/v6/modal/inline/basic/angular/example_component_ts.md
diff --git a/static/usage/v6/modal/inline/basic/demo.html b/static/usage/v6/modal/inline/basic/demo.html
new file mode 100644
index 00000000000..4007d9fc2be
--- /dev/null
+++ b/static/usage/v6/modal/inline/basic/demo.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Inline</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Inline Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open</ion-button>
+      <p id="message">This modal example uses triggers to automatically open a modal when the button is clicked.</p>
+      <ion-modal trigger="open-modal">
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-button onclick="cancel()">Cancel</ion-button>
+            </ion-buttons>
+            <ion-title>Welcome</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="confirm()" strong="true">Confirm
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <ion-item>
+            <ion-label position="stacked">Enter your name</ion-label>
+            <ion-input type="text" placeholder="Your name"></ion-input>
+          </ion-item>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    function cancel() {
+      modal.dismiss(null, 'cancel');
+    }
+
+    function confirm() {
+      const input = document.querySelector('ion-input');
+      modal.dismiss(input.value, 'confirm');
+    }
+
+    modal.addEventListener('willDismiss', ev => {
+      if (ev.detail.role === 'confirm') {
+        const message = document.querySelector('#message');
+        message.textContent = `Hello ${ev.detail.data}!`;
+      }
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/inline/basic/index.md b/static/usage/v6/modal/inline/basic/index.md
new file mode 100644
index 00000000000..af73ad2fc9b
--- /dev/null
+++ b/static/usage/v6/modal/inline/basic/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/modal/inline/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/modal/inline/basic/javascript.md b/static/usage/v6/modal/inline/basic/javascript.md
similarity index 100%
rename from static/usage/modal/inline/basic/javascript.md
rename to static/usage/v6/modal/inline/basic/javascript.md
diff --git a/static/usage/modal/inline/basic/react.md b/static/usage/v6/modal/inline/basic/react.md
similarity index 100%
rename from static/usage/modal/inline/basic/react.md
rename to static/usage/v6/modal/inline/basic/react.md
diff --git a/static/usage/modal/inline/basic/vue.md b/static/usage/v6/modal/inline/basic/vue.md
similarity index 100%
rename from static/usage/modal/inline/basic/vue.md
rename to static/usage/v6/modal/inline/basic/vue.md
diff --git a/static/usage/modal/inline/is-open/angular/example_component_html.md b/static/usage/v6/modal/inline/is-open/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/inline/is-open/angular/example_component_html.md
rename to static/usage/v6/modal/inline/is-open/angular/example_component_html.md
diff --git a/static/usage/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md
similarity index 100%
rename from static/usage/modal/inline/is-open/angular/example_component_ts.md
rename to static/usage/v6/modal/inline/is-open/angular/example_component_ts.md
diff --git a/static/usage/v6/modal/inline/is-open/demo.html b/static/usage/v6/modal/inline/is-open/demo.html
new file mode 100644
index 00000000000..ed5f3494869
--- /dev/null
+++ b/static/usage/v6/modal/inline/is-open/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Inline</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Inline Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button expand="block" onclick="modal.isOpen = true">Open</ion-button>
+      <ion-modal>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="modal.isOpen = false">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+            reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
+            dicta.</p>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/inline/is-open/index.md b/static/usage/v6/modal/inline/is-open/index.md
new file mode 100644
index 00000000000..8ecbcd11c04
--- /dev/null
+++ b/static/usage/v6/modal/inline/is-open/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/modal/inline/is-open/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/modal/inline/is-open/javascript.md b/static/usage/v6/modal/inline/is-open/javascript.md
similarity index 100%
rename from static/usage/modal/inline/is-open/javascript.md
rename to static/usage/v6/modal/inline/is-open/javascript.md
diff --git a/static/usage/modal/inline/is-open/react.md b/static/usage/v6/modal/inline/is-open/react.md
similarity index 100%
rename from static/usage/modal/inline/is-open/react.md
rename to static/usage/v6/modal/inline/is-open/react.md
diff --git a/static/usage/modal/inline/is-open/vue.md b/static/usage/v6/modal/inline/is-open/vue.md
similarity index 100%
rename from static/usage/modal/inline/is-open/vue.md
rename to static/usage/v6/modal/inline/is-open/vue.md
diff --git a/static/usage/modal/performance/mount/angular.md b/static/usage/v6/modal/performance/mount/angular.md
similarity index 100%
rename from static/usage/modal/performance/mount/angular.md
rename to static/usage/v6/modal/performance/mount/angular.md
diff --git a/static/usage/v6/modal/performance/mount/demo.html b/static/usage/v6/modal/performance/mount/demo.html
new file mode 100644
index 00000000000..03d47899733
--- /dev/null
+++ b/static/usage/v6/modal/performance/mount/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Performance</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.modalController = modalController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Example</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+      <ion-modal trigger="open-modal">
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-button id="close">Close</ion-button>
+            </ion-buttons>
+            <ion-title>Modal</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          This content was mounted as soon as the modal was created.
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    const closeBtn = document.querySelector('#close');
+    closeBtn.addEventListener('click', () => close());
+
+    const close = () => {
+      modal.dismiss();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/performance/mount/index.md b/static/usage/v6/modal/performance/mount/index.md
new file mode 100644
index 00000000000..08401681fa3
--- /dev/null
+++ b/static/usage/v6/modal/performance/mount/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/modal/performance/mount/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/modal/performance/mount/javascript.md b/static/usage/v6/modal/performance/mount/javascript.md
similarity index 100%
rename from static/usage/modal/performance/mount/javascript.md
rename to static/usage/v6/modal/performance/mount/javascript.md
diff --git a/static/usage/modal/performance/mount/react.md b/static/usage/v6/modal/performance/mount/react.md
similarity index 100%
rename from static/usage/modal/performance/mount/react.md
rename to static/usage/v6/modal/performance/mount/react.md
diff --git a/static/usage/modal/performance/mount/vue.md b/static/usage/v6/modal/performance/mount/vue.md
similarity index 100%
rename from static/usage/modal/performance/mount/vue.md
rename to static/usage/v6/modal/performance/mount/vue.md
diff --git a/static/usage/modal/sheet/background-content/angular/example_component_css.md b/static/usage/v6/modal/sheet/background-content/angular/example_component_css.md
similarity index 100%
rename from static/usage/modal/sheet/background-content/angular/example_component_css.md
rename to static/usage/v6/modal/sheet/background-content/angular/example_component_css.md
diff --git a/static/usage/modal/sheet/background-content/angular/example_component_html.md b/static/usage/v6/modal/sheet/background-content/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/sheet/background-content/angular/example_component_html.md
rename to static/usage/v6/modal/sheet/background-content/angular/example_component_html.md
diff --git a/static/usage/modal/sheet/background-content/angular/example_component_ts.md b/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md
similarity index 100%
rename from static/usage/modal/sheet/background-content/angular/example_component_ts.md
rename to static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md
diff --git a/static/usage/v6/modal/sheet/background-content/demo.html b/static/usage/v6/modal/sheet/background-content/demo.html
new file mode 100644
index 00000000000..9ba868a9e1e
--- /dev/null
+++ b/static/usage/v6/modal/sheet/background-content/demo.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .counter__section {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+
+      <p>You can interact with the +/- buttons until the sheet is fully expanded.</p>
+
+      <div class="counter__section">
+        <ion-button id="decrement" onclick="decrement()">-</ion-button>
+        <p id="counter">0</p>
+        <ion-button id="increment" onclick="increment()">+</ion-button>
+      </div>
+
+      <ion-modal is-open="true" initial-breakpoint="0.25" backdrop-dismiss="false" backdrop-breakpoint="0.5">
+        <ion-content>
+          <ion-searchbar placeholder="Search"></ion-searchbar>
+          <ion-list>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=b" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Connor Smith</h2>
+                <p>Sales Rep</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=a" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Daniel Smith</h2>
+                <p>Product Designer</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=d" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Greg Smith</h2>
+                <p>Director of Operations</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=e" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Zoey Smith</h2>
+                <p>CEO</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+    const searchBar = document.querySelector('ion-searchbar');
+
+    modal.breakpoints = [0, 0.25, 0.5, 0.75];
+
+    searchBar.addEventListener('click', () => {
+      modal.setCurrentBreakpoint(0.75);
+    });
+
+    function increment() {
+      const counter = document.querySelector('#counter');
+      counter.innerHTML = parseInt(counter.innerText) + 1;
+    }
+
+    function decrement() {
+      const counter = document.querySelector('#counter');
+      counter.innerHTML = parseInt(counter.innerText) - 1;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/sheet/background-content/index.md b/static/usage/v6/modal/sheet/background-content/index.md
new file mode 100644
index 00000000000..28fca16d4be
--- /dev/null
+++ b/static/usage/v6/modal/sheet/background-content/index.md
@@ -0,0 +1,27 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/modal/sheet/background-content/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/modal/sheet/background-content/javascript.md b/static/usage/v6/modal/sheet/background-content/javascript.md
similarity index 100%
rename from static/usage/modal/sheet/background-content/javascript.md
rename to static/usage/v6/modal/sheet/background-content/javascript.md
diff --git a/static/usage/modal/sheet/background-content/react.md b/static/usage/v6/modal/sheet/background-content/react.md
similarity index 100%
rename from static/usage/modal/sheet/background-content/react.md
rename to static/usage/v6/modal/sheet/background-content/react.md
diff --git a/static/usage/modal/sheet/background-content/vue.md b/static/usage/v6/modal/sheet/background-content/vue.md
similarity index 100%
rename from static/usage/modal/sheet/background-content/vue.md
rename to static/usage/v6/modal/sheet/background-content/vue.md
diff --git a/static/usage/modal/sheet/basic/angular.md b/static/usage/v6/modal/sheet/basic/angular.md
similarity index 100%
rename from static/usage/modal/sheet/basic/angular.md
rename to static/usage/v6/modal/sheet/basic/angular.md
diff --git a/static/usage/v6/modal/sheet/basic/demo.html b/static/usage/v6/modal/sheet/basic/demo.html
new file mode 100644
index 00000000000..65be6a2ceab
--- /dev/null
+++ b/static/usage/v6/modal/sheet/basic/demo.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+      <ion-modal trigger="open-modal" initial-breakpoint="0.25">
+        <ion-content>
+          <ion-searchbar placeholder="Search"></ion-searchbar>
+          <ion-list>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=b" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Connor Smith</h2>
+                <p>Sales Rep</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=a" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Daniel Smith</h2>
+                <p>Product Designer</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=d" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Greg Smith</h2>
+                <p>Director of Operations</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=e" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Zoey Smith</h2>
+                <p>CEO</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+    const searchBar = document.querySelector('ion-searchbar');
+
+    modal.breakpoints = [0, 0.25, 0.5, 0.75];
+
+    searchBar.addEventListener('click', () => {
+      modal.setCurrentBreakpoint(0.75);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/sheet/basic/index.md b/static/usage/v6/modal/sheet/basic/index.md
new file mode 100644
index 00000000000..bdbfd4d93e9
--- /dev/null
+++ b/static/usage/v6/modal/sheet/basic/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/modal/sheet/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/modal/sheet/basic/javascript.md b/static/usage/v6/modal/sheet/basic/javascript.md
similarity index 100%
rename from static/usage/modal/sheet/basic/javascript.md
rename to static/usage/v6/modal/sheet/basic/javascript.md
diff --git a/static/usage/modal/sheet/basic/react.md b/static/usage/v6/modal/sheet/basic/react.md
similarity index 100%
rename from static/usage/modal/sheet/basic/react.md
rename to static/usage/v6/modal/sheet/basic/react.md
diff --git a/static/usage/modal/sheet/basic/vue.md b/static/usage/v6/modal/sheet/basic/vue.md
similarity index 100%
rename from static/usage/modal/sheet/basic/vue.md
rename to static/usage/v6/modal/sheet/basic/vue.md
diff --git a/static/usage/modal/sheet/handle-behavior/angular.md b/static/usage/v6/modal/sheet/handle-behavior/angular.md
similarity index 100%
rename from static/usage/modal/sheet/handle-behavior/angular.md
rename to static/usage/v6/modal/sheet/handle-behavior/angular.md
diff --git a/static/usage/v6/modal/sheet/handle-behavior/demo.html b/static/usage/v6/modal/sheet/handle-behavior/demo.html
new file mode 100644
index 00000000000..c89417e7ecf
--- /dev/null
+++ b/static/usage/v6/modal/sheet/handle-behavior/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+      <ion-modal trigger="open-modal" initial-breakpoint="0.25" handle-behavior="cycle">
+        <ion-content class="ion-padding">
+          <div class="ion-margin-top">
+            <ion-label>Click the handle above to advance to the next breakpoint.</ion-label>
+          </div>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.breakpoints = [0, 0.25, 0.5, 0.75];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/sheet/handle-behavior/index.md b/static/usage/v6/modal/sheet/handle-behavior/index.md
new file mode 100644
index 00000000000..e6406ba35aa
--- /dev/null
+++ b/static/usage/v6/modal/sheet/handle-behavior/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v6/modal/sheet/handle-behavior/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/modal/sheet/handle-behavior/javascript.md b/static/usage/v6/modal/sheet/handle-behavior/javascript.md
similarity index 100%
rename from static/usage/modal/sheet/handle-behavior/javascript.md
rename to static/usage/v6/modal/sheet/handle-behavior/javascript.md
diff --git a/static/usage/modal/sheet/handle-behavior/react.md b/static/usage/v6/modal/sheet/handle-behavior/react.md
similarity index 100%
rename from static/usage/modal/sheet/handle-behavior/react.md
rename to static/usage/v6/modal/sheet/handle-behavior/react.md
diff --git a/static/usage/modal/sheet/handle-behavior/vue.md b/static/usage/v6/modal/sheet/handle-behavior/vue.md
similarity index 100%
rename from static/usage/modal/sheet/handle-behavior/vue.md
rename to static/usage/v6/modal/sheet/handle-behavior/vue.md
diff --git a/static/usage/modal/styling/animations/angular/example_component_html.md b/static/usage/v6/modal/styling/animations/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/styling/animations/angular/example_component_html.md
rename to static/usage/v6/modal/styling/animations/angular/example_component_html.md
diff --git a/static/usage/modal/styling/animations/angular/example_component_ts.md b/static/usage/v6/modal/styling/animations/angular/example_component_ts.md
similarity index 100%
rename from static/usage/modal/styling/animations/angular/example_component_ts.md
rename to static/usage/v6/modal/styling/animations/angular/example_component_ts.md
diff --git a/static/usage/v6/modal/styling/animations/demo.html b/static/usage/v6/modal/styling/animations/demo.html
new file mode 100644
index 00000000000..555667996c4
--- /dev/null
+++ b/static/usage/v6/modal/styling/animations/demo.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Animations</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.createAnimation = createAnimation;
+  </script>
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+
+      <ion-modal trigger="open-modal">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="modal.dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=b" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Connor Smith</h2>
+                <p>Sales Rep</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=a" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Daniel Smith</h2>
+                <p>Product Designer</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=d" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Greg Smith</h2>
+                <p>Director of Operations</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=e" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Zoey Smith</h2>
+                <p>CEO</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    const enterAnimation = (baseEl) => {
+      const root = baseEl.shadowRoot;
+
+      const backdropAnimation = createAnimation()
+        .addElement(root.querySelector('ion-backdrop'))
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = createAnimation()
+        .addElement(root.querySelector('.modal-wrapper'))
+        .keyframes([
+          { offset: 0, opacity: '0', transform: 'scale(0)' },
+          { offset: 1, opacity: '0.99', transform: 'scale(1)' }
+        ]);
+
+      return createAnimation()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl) => enterAnimation(baseEl).direction('reverse');
+
+    modal.enterAnimation = enterAnimation;
+    modal.leaveAnimation = leaveAnimation;
+
+    function dismiss() {
+      modal.dismiss();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/styling/animations/index.md b/static/usage/v6/modal/styling/animations/index.md
new file mode 100644
index 00000000000..def0fe99908
--- /dev/null
+++ b/static/usage/v6/modal/styling/animations/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import vue from './vue.md';
+import react from './react.md';
+
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/modal/styling/animations/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/modal/styling/animations/javascript/index_html.md b/static/usage/v6/modal/styling/animations/javascript/index_html.md
similarity index 100%
rename from static/usage/modal/styling/animations/javascript/index_html.md
rename to static/usage/v6/modal/styling/animations/javascript/index_html.md
diff --git a/static/usage/modal/styling/animations/javascript/index_ts.md b/static/usage/v6/modal/styling/animations/javascript/index_ts.md
similarity index 100%
rename from static/usage/modal/styling/animations/javascript/index_ts.md
rename to static/usage/v6/modal/styling/animations/javascript/index_ts.md
diff --git a/static/usage/modal/styling/animations/react.md b/static/usage/v6/modal/styling/animations/react.md
similarity index 100%
rename from static/usage/modal/styling/animations/react.md
rename to static/usage/v6/modal/styling/animations/react.md
diff --git a/static/usage/modal/styling/animations/vue.md b/static/usage/v6/modal/styling/animations/vue.md
similarity index 100%
rename from static/usage/modal/styling/animations/vue.md
rename to static/usage/v6/modal/styling/animations/vue.md
diff --git a/static/usage/modal/styling/theming/angular/example_component_html.md b/static/usage/v6/modal/styling/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/styling/theming/angular/example_component_html.md
rename to static/usage/v6/modal/styling/theming/angular/example_component_html.md
diff --git a/static/usage/modal/styling/theming/angular/global_css.md b/static/usage/v6/modal/styling/theming/angular/global_css.md
similarity index 100%
rename from static/usage/modal/styling/theming/angular/global_css.md
rename to static/usage/v6/modal/styling/theming/angular/global_css.md
diff --git a/static/usage/v6/modal/styling/theming/demo.html b/static/usage/v6/modal/styling/theming/demo.html
new file mode 100644
index 00000000000..f0c3f00bbe4
--- /dev/null
+++ b/static/usage/v6/modal/styling/theming/demo.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Theming</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-modal {
+      --height: 50%;
+      --border-radius: 16px;
+      --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    }
+
+    ion-modal::part(backdrop) {
+      background: rgba(209, 213, 219);
+      opacity: 1;
+    }
+
+    ion-modal ion-toolbar {
+      --background: rgb(14 116 144);
+      --color: white;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+
+      <ion-modal trigger="open-modal">
+        <ion-content>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button color="light" onclick="modal.dismiss()">Close
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-list>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=b" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Connor Smith</h2>
+                <p>Sales Rep</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=a" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Daniel Smith</h2>
+                <p>Product Designer</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=d" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Greg Smith</h2>
+                <p>Director of Operations</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=e" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Zoey Smith</h2>
+                <p>CEO</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    function dismiss() {
+      modal.dismiss();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/styling/theming/index.md b/static/usage/v6/modal/styling/theming/index.md
new file mode 100644
index 00000000000..ac8d2b95877
--- /dev/null
+++ b/static/usage/v6/modal/styling/theming/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_global_css from './angular/global_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    vue,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v6/modal/styling/theming/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/modal/styling/theming/javascript.md b/static/usage/v6/modal/styling/theming/javascript.md
similarity index 100%
rename from static/usage/modal/styling/theming/javascript.md
rename to static/usage/v6/modal/styling/theming/javascript.md
diff --git a/static/usage/modal/styling/theming/react/main_css.md b/static/usage/v6/modal/styling/theming/react/main_css.md
similarity index 100%
rename from static/usage/modal/styling/theming/react/main_css.md
rename to static/usage/v6/modal/styling/theming/react/main_css.md
diff --git a/static/usage/modal/styling/theming/react/main_tsx.md b/static/usage/v6/modal/styling/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/modal/styling/theming/react/main_tsx.md
rename to static/usage/v6/modal/styling/theming/react/main_tsx.md
diff --git a/static/usage/modal/styling/theming/vue.md b/static/usage/v6/modal/styling/theming/vue.md
similarity index 100%
rename from static/usage/modal/styling/theming/vue.md
rename to static/usage/v6/modal/styling/theming/vue.md
diff --git a/static/usage/nav/modal-navigation/angular/app_module_ts.md b/static/usage/v6/nav/modal-navigation/angular/app_module_ts.md
similarity index 100%
rename from static/usage/nav/modal-navigation/angular/app_module_ts.md
rename to static/usage/v6/nav/modal-navigation/angular/app_module_ts.md
diff --git a/static/usage/nav/modal-navigation/angular/example_component_html.md b/static/usage/v6/nav/modal-navigation/angular/example_component_html.md
similarity index 100%
rename from static/usage/nav/modal-navigation/angular/example_component_html.md
rename to static/usage/v6/nav/modal-navigation/angular/example_component_html.md
diff --git a/static/usage/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v6/nav/modal-navigation/angular/example_component_ts.md
similarity index 100%
rename from static/usage/nav/modal-navigation/angular/example_component_ts.md
rename to static/usage/v6/nav/modal-navigation/angular/example_component_ts.md
diff --git a/static/usage/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v6/nav/modal-navigation/angular/page_one_component_ts.md
similarity index 100%
rename from static/usage/nav/modal-navigation/angular/page_one_component_ts.md
rename to static/usage/v6/nav/modal-navigation/angular/page_one_component_ts.md
diff --git a/static/usage/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v6/nav/modal-navigation/angular/page_three_component_ts.md
similarity index 100%
rename from static/usage/nav/modal-navigation/angular/page_three_component_ts.md
rename to static/usage/v6/nav/modal-navigation/angular/page_three_component_ts.md
diff --git a/static/usage/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v6/nav/modal-navigation/angular/page_two_component_ts.md
similarity index 100%
rename from static/usage/nav/modal-navigation/angular/page_two_component_ts.md
rename to static/usage/v6/nav/modal-navigation/angular/page_two_component_ts.md
diff --git a/static/usage/v6/nav/modal-navigation/demo.html b/static/usage/v6/nav/modal-navigation/demo.html
new file mode 100644
index 00000000000..0d099f1e3cc
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/demo.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Nav | Modal Navigation</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Navigation</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="openModal">Open Modal</ion-button>
+      <ion-modal trigger="openModal">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="dismiss()">
+                Close
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-nav></ion-nav>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+    const nav = document.querySelector('ion-nav');
+
+    modal.addEventListener('willPresent', () => {
+      nav.setRoot('page-one');
+    });
+
+    const dismiss = () => modal.dismiss();
+
+    const navigate = (component) => {
+      nav.push(component);
+    }
+
+    const navigateBack = () => {
+      nav.pop();
+    }
+
+    const navigateToRoot = () => {
+      nav.popToRoot();
+    }
+
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-button onclick="navigate('page-two')">Go to Page Two</ion-button>
+        </ion-content>
+      `;
+      }
+    }
+
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <ion-button onclick="navigate('page-three')">Go to Page Three</ion-button>
+        </ion-content>
+      `;
+      }
+    }
+
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+          <ion-button onclick="navigateBack()">Go Back</ion-button>
+          <ion-button onclick="navigateToRoot()">Go to Root</ion-button>
+        </ion-content>
+      `;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/nav/modal-navigation/index.md b/static/usage/v6/nav/modal-navigation/index.md
new file mode 100644
index 00000000000..8ba2cf1132b
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/index.md
@@ -0,0 +1,55 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+<Playground
+  code={{
+    javascript,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/page-one.component.ts': angular_page_one_component_ts,
+        'src/app/page-two.component.ts': angular_page_two_component_ts,
+        'src/app/page-three.component.ts': angular_page_three_component_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/page-one.tsx': react_page_one_tsx,
+        'src/page-two.tsx': react_page_two_tsx,
+        'src/page-three.tsx': react_page_three_tsx,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+        'src/components/PageThree.vue': vue_page_three,
+      },
+    },
+  }}
+  src="usage/v6/nav/modal-navigation/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/nav/modal-navigation/javascript.md b/static/usage/v6/nav/modal-navigation/javascript.md
similarity index 100%
rename from static/usage/nav/modal-navigation/javascript.md
rename to static/usage/v6/nav/modal-navigation/javascript.md
diff --git a/static/usage/nav/modal-navigation/react/main_tsx.md b/static/usage/v6/nav/modal-navigation/react/main_tsx.md
similarity index 100%
rename from static/usage/nav/modal-navigation/react/main_tsx.md
rename to static/usage/v6/nav/modal-navigation/react/main_tsx.md
diff --git a/static/usage/nav/modal-navigation/react/page_one_tsx.md b/static/usage/v6/nav/modal-navigation/react/page_one_tsx.md
similarity index 100%
rename from static/usage/nav/modal-navigation/react/page_one_tsx.md
rename to static/usage/v6/nav/modal-navigation/react/page_one_tsx.md
diff --git a/static/usage/nav/modal-navigation/react/page_three_tsx.md b/static/usage/v6/nav/modal-navigation/react/page_three_tsx.md
similarity index 100%
rename from static/usage/nav/modal-navigation/react/page_three_tsx.md
rename to static/usage/v6/nav/modal-navigation/react/page_three_tsx.md
diff --git a/static/usage/nav/modal-navigation/react/page_two_tsx.md b/static/usage/v6/nav/modal-navigation/react/page_two_tsx.md
similarity index 100%
rename from static/usage/nav/modal-navigation/react/page_two_tsx.md
rename to static/usage/v6/nav/modal-navigation/react/page_two_tsx.md
diff --git a/static/usage/nav/modal-navigation/vue/example_vue.md b/static/usage/v6/nav/modal-navigation/vue/example_vue.md
similarity index 100%
rename from static/usage/nav/modal-navigation/vue/example_vue.md
rename to static/usage/v6/nav/modal-navigation/vue/example_vue.md
diff --git a/static/usage/nav/modal-navigation/vue/page_one_vue.md b/static/usage/v6/nav/modal-navigation/vue/page_one_vue.md
similarity index 100%
rename from static/usage/nav/modal-navigation/vue/page_one_vue.md
rename to static/usage/v6/nav/modal-navigation/vue/page_one_vue.md
diff --git a/static/usage/nav/modal-navigation/vue/page_three_vue.md b/static/usage/v6/nav/modal-navigation/vue/page_three_vue.md
similarity index 100%
rename from static/usage/nav/modal-navigation/vue/page_three_vue.md
rename to static/usage/v6/nav/modal-navigation/vue/page_three_vue.md
diff --git a/static/usage/nav/modal-navigation/vue/page_two_vue.md b/static/usage/v6/nav/modal-navigation/vue/page_two_vue.md
similarity index 100%
rename from static/usage/nav/modal-navigation/vue/page_two_vue.md
rename to static/usage/v6/nav/modal-navigation/vue/page_two_vue.md
diff --git a/static/usage/nav/nav-link/angular/app_module_ts.md b/static/usage/v6/nav/nav-link/angular/app_module_ts.md
similarity index 100%
rename from static/usage/nav/nav-link/angular/app_module_ts.md
rename to static/usage/v6/nav/nav-link/angular/app_module_ts.md
diff --git a/static/usage/nav/nav-link/angular/example_component_html.md b/static/usage/v6/nav/nav-link/angular/example_component_html.md
similarity index 100%
rename from static/usage/nav/nav-link/angular/example_component_html.md
rename to static/usage/v6/nav/nav-link/angular/example_component_html.md
diff --git a/static/usage/nav/nav-link/angular/example_component_ts.md b/static/usage/v6/nav/nav-link/angular/example_component_ts.md
similarity index 100%
rename from static/usage/nav/nav-link/angular/example_component_ts.md
rename to static/usage/v6/nav/nav-link/angular/example_component_ts.md
diff --git a/static/usage/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md
similarity index 100%
rename from static/usage/nav/nav-link/angular/page_one_component_ts.md
rename to static/usage/v6/nav/nav-link/angular/page_one_component_ts.md
diff --git a/static/usage/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md
similarity index 100%
rename from static/usage/nav/nav-link/angular/page_three_component_ts.md
rename to static/usage/v6/nav/nav-link/angular/page_three_component_ts.md
diff --git a/static/usage/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md
similarity index 100%
rename from static/usage/nav/nav-link/angular/page_two_component_ts.md
rename to static/usage/v6/nav/nav-link/angular/page_two_component_ts.md
diff --git a/static/usage/v6/nav/nav-link/demo.html b/static/usage/v6/nav/nav-link/demo.html
new file mode 100644
index 00000000000..9d8aa06c58f
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/demo.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Nav | NavLink</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-nav root="page-one"></ion-nav>
+  </ion-app>
+
+  <script>
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Go to Page Two</ion-button>
+          </ion-nav-link>
+        </ion-content>
+      `;
+      }
+    }
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <div>
+            <ion-nav-link router-direction="forward" component="page-three">
+              <ion-button>Go to Page Three</ion-button>
+            </ion-nav-link>
+          </div>
+        </ion-content>
+      `;
+      }
+    }
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+      }
+    }
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/nav/nav-link/index.md b/static/usage/v6/nav/nav-link/index.md
new file mode 100644
index 00000000000..f0ff7bb0415
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/index.md
@@ -0,0 +1,54 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+<Playground
+  code={{
+    javascript,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/page-one.component.ts': angular_page_one_component_ts,
+        'src/app/page-two.component.ts': angular_page_two_component_ts,
+        'src/app/page-three.component.ts': angular_page_three_component_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/page-one.tsx': react_page_one_tsx,
+        'src/page-two.tsx': react_page_two_tsx,
+        'src/page-three.tsx': react_page_three_tsx,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+        'src/components/PageThree.vue': vue_page_three,
+      },
+    },
+  }}
+  src="usage/v6/nav/nav-link/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/nav/nav-link/javascript.md b/static/usage/v6/nav/nav-link/javascript.md
similarity index 100%
rename from static/usage/nav/nav-link/javascript.md
rename to static/usage/v6/nav/nav-link/javascript.md
diff --git a/static/usage/nav/nav-link/react/main_tsx.md b/static/usage/v6/nav/nav-link/react/main_tsx.md
similarity index 100%
rename from static/usage/nav/nav-link/react/main_tsx.md
rename to static/usage/v6/nav/nav-link/react/main_tsx.md
diff --git a/static/usage/nav/nav-link/react/page_one_tsx.md b/static/usage/v6/nav/nav-link/react/page_one_tsx.md
similarity index 100%
rename from static/usage/nav/nav-link/react/page_one_tsx.md
rename to static/usage/v6/nav/nav-link/react/page_one_tsx.md
diff --git a/static/usage/nav/nav-link/react/page_three_tsx.md b/static/usage/v6/nav/nav-link/react/page_three_tsx.md
similarity index 100%
rename from static/usage/nav/nav-link/react/page_three_tsx.md
rename to static/usage/v6/nav/nav-link/react/page_three_tsx.md
diff --git a/static/usage/nav/nav-link/react/page_two_tsx.md b/static/usage/v6/nav/nav-link/react/page_two_tsx.md
similarity index 100%
rename from static/usage/nav/nav-link/react/page_two_tsx.md
rename to static/usage/v6/nav/nav-link/react/page_two_tsx.md
diff --git a/static/usage/nav/nav-link/vue/example_vue.md b/static/usage/v6/nav/nav-link/vue/example_vue.md
similarity index 100%
rename from static/usage/nav/nav-link/vue/example_vue.md
rename to static/usage/v6/nav/nav-link/vue/example_vue.md
diff --git a/static/usage/nav/nav-link/vue/page_one_vue.md b/static/usage/v6/nav/nav-link/vue/page_one_vue.md
similarity index 100%
rename from static/usage/nav/nav-link/vue/page_one_vue.md
rename to static/usage/v6/nav/nav-link/vue/page_one_vue.md
diff --git a/static/usage/nav/nav-link/vue/page_three_vue.md b/static/usage/v6/nav/nav-link/vue/page_three_vue.md
similarity index 100%
rename from static/usage/nav/nav-link/vue/page_three_vue.md
rename to static/usage/v6/nav/nav-link/vue/page_three_vue.md
diff --git a/static/usage/nav/nav-link/vue/page_two_vue.md b/static/usage/v6/nav/nav-link/vue/page_two_vue.md
similarity index 100%
rename from static/usage/nav/nav-link/vue/page_two_vue.md
rename to static/usage/v6/nav/nav-link/vue/page_two_vue.md
diff --git a/static/usage/note/basic/angular.md b/static/usage/v6/note/basic/angular.md
similarity index 100%
rename from static/usage/note/basic/angular.md
rename to static/usage/v6/note/basic/angular.md
diff --git a/static/usage/v6/note/basic/demo.html b/static/usage/v6/note/basic/demo.html
new file mode 100644
index 00000000000..ae5b7ce7f04
--- /dev/null
+++ b/static/usage/v6/note/basic/demo.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Note</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-note>Default Note</ion-note>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/note/basic/index.md b/static/usage/v6/note/basic/index.md
new file mode 100644
index 00000000000..be75c1214e7
--- /dev/null
+++ b/static/usage/v6/note/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/note/basic/demo.html" />
diff --git a/static/usage/note/basic/javascript.md b/static/usage/v6/note/basic/javascript.md
similarity index 100%
rename from static/usage/note/basic/javascript.md
rename to static/usage/v6/note/basic/javascript.md
diff --git a/static/usage/note/basic/react.md b/static/usage/v6/note/basic/react.md
similarity index 100%
rename from static/usage/note/basic/react.md
rename to static/usage/v6/note/basic/react.md
diff --git a/static/usage/note/basic/vue.md b/static/usage/v6/note/basic/vue.md
similarity index 100%
rename from static/usage/note/basic/vue.md
rename to static/usage/v6/note/basic/vue.md
diff --git a/static/usage/note/item/angular.md b/static/usage/v6/note/item/angular.md
similarity index 100%
rename from static/usage/note/item/angular.md
rename to static/usage/v6/note/item/angular.md
diff --git a/static/usage/v6/note/item/demo.html b/static/usage/v6/note/item/demo.html
new file mode 100644
index 00000000000..3aea8507aa8
--- /dev/null
+++ b/static/usage/v6/note/item/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Note</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Label</ion-label>
+          <ion-note slot="end">Note (End)</ion-note>
+        </ion-item>
+
+        <ion-item>
+          <ion-note slot="start">Note (Start)</ion-note>
+          <ion-label>Label</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/note/item/index.md b/static/usage/v6/note/item/index.md
new file mode 100644
index 00000000000..d829308cdec
--- /dev/null
+++ b/static/usage/v6/note/item/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/note/item/demo.html" />
diff --git a/static/usage/note/item/javascript.md b/static/usage/v6/note/item/javascript.md
similarity index 100%
rename from static/usage/note/item/javascript.md
rename to static/usage/v6/note/item/javascript.md
diff --git a/static/usage/note/item/react.md b/static/usage/v6/note/item/react.md
similarity index 100%
rename from static/usage/note/item/react.md
rename to static/usage/v6/note/item/react.md
diff --git a/static/usage/note/item/vue.md b/static/usage/v6/note/item/vue.md
similarity index 100%
rename from static/usage/note/item/vue.md
rename to static/usage/v6/note/item/vue.md
diff --git a/static/usage/note/theming/colors/angular.md b/static/usage/v6/note/theming/colors/angular.md
similarity index 100%
rename from static/usage/note/theming/colors/angular.md
rename to static/usage/v6/note/theming/colors/angular.md
diff --git a/static/usage/v6/note/theming/colors/demo.html b/static/usage/v6/note/theming/colors/demo.html
new file mode 100644
index 00000000000..2564a686b1a
--- /dev/null
+++ b/static/usage/v6/note/theming/colors/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Note</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .flex-items {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      max-width: 440px;
+    }
+
+    ion-note {
+      margin: 0 2px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="flex-items">
+          <ion-note>Default Note</ion-note>
+          <ion-note color="primary">Primary Note</ion-note>
+          <ion-note color="secondary">Secondary Note</ion-note>
+          <ion-note color="tertiary">Tertiary Note</ion-note>
+          <ion-note color="success">Success Note</ion-note>
+          <ion-note color="warning">Warning Note</ion-note>
+          <ion-note color="danger">Danger Note</ion-note>
+          <ion-note color="light">Light Note</ion-note>
+          <ion-note color="medium">Medium Note</ion-note>
+          <ion-note color="dark">Dark Note</ion-note>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/note/theming/colors/index.md b/static/usage/v6/note/theming/colors/index.md
new file mode 100644
index 00000000000..62d29bd2be9
--- /dev/null
+++ b/static/usage/v6/note/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/note/theming/colors/demo.html" />
diff --git a/static/usage/note/theming/colors/javascript.md b/static/usage/v6/note/theming/colors/javascript.md
similarity index 100%
rename from static/usage/note/theming/colors/javascript.md
rename to static/usage/v6/note/theming/colors/javascript.md
diff --git a/static/usage/note/theming/colors/react.md b/static/usage/v6/note/theming/colors/react.md
similarity index 100%
rename from static/usage/note/theming/colors/react.md
rename to static/usage/v6/note/theming/colors/react.md
diff --git a/static/usage/note/theming/colors/vue.md b/static/usage/v6/note/theming/colors/vue.md
similarity index 100%
rename from static/usage/note/theming/colors/vue.md
rename to static/usage/v6/note/theming/colors/vue.md
diff --git a/static/usage/note/theming/css-properties/angular/example_component_css.md b/static/usage/v6/note/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/note/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/note/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/note/theming/css-properties/angular/example_component_html.md b/static/usage/v6/note/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/note/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/note/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/note/theming/css-properties/demo.html b/static/usage/v6/note/theming/css-properties/demo.html
new file mode 100644
index 00000000000..400d4bf0b10
--- /dev/null
+++ b/static/usage/v6/note/theming/css-properties/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Note</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-note {
+      --color: #54dc98;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-note>Default Note</ion-note>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/note/theming/css-properties/index.md b/static/usage/v6/note/theming/css-properties/index.md
new file mode 100644
index 00000000000..c1e731f8d1b
--- /dev/null
+++ b/static/usage/v6/note/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/note/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/note/theming/css-properties/javascript.md b/static/usage/v6/note/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/note/theming/css-properties/javascript.md
rename to static/usage/v6/note/theming/css-properties/javascript.md
diff --git a/static/usage/note/theming/css-properties/react/main_css.md b/static/usage/v6/note/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/note/theming/css-properties/react/main_css.md
rename to static/usage/v6/note/theming/css-properties/react/main_css.md
diff --git a/static/usage/note/theming/css-properties/react/main_tsx.md b/static/usage/v6/note/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/note/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/note/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/note/theming/css-properties/vue.md b/static/usage/v6/note/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/note/theming/css-properties/vue.md
rename to static/usage/v6/note/theming/css-properties/vue.md
diff --git a/static/usage/picker/multiple-column/angular/example_component_html.md b/static/usage/v6/picker/multiple-column/angular/example_component_html.md
similarity index 100%
rename from static/usage/picker/multiple-column/angular/example_component_html.md
rename to static/usage/v6/picker/multiple-column/angular/example_component_html.md
diff --git a/static/usage/picker/multiple-column/angular/example_component_ts.md b/static/usage/v6/picker/multiple-column/angular/example_component_ts.md
similarity index 100%
rename from static/usage/picker/multiple-column/angular/example_component_ts.md
rename to static/usage/v6/picker/multiple-column/angular/example_component_ts.md
diff --git a/static/usage/v6/picker/multiple-column/demo.html b/static/usage/v6/picker/multiple-column/demo.html
new file mode 100644
index 00000000000..50b673172e2
--- /dev/null
+++ b/static/usage/v6/picker/multiple-column/demo.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Picker | Multiple Columns</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.pickerController = pickerController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="openPicker()">Open</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    async function openPicker() {
+      const picker = await pickerController.create({
+        columns: [{
+          name: 'meat',
+          options: [
+            {
+              text: 'Pepperoni',
+              value: 'pepperoni'
+            }, {
+              text: 'Smoked Ham',
+              value: 'smoked-ham'
+            }, {
+              text: 'Crispy Bacon',
+              value: 'bacon'
+            }
+          ]
+        }, {
+          name: 'veggies',
+          options: [
+            {
+              text: 'Red onion',
+              value: 'red-onion'
+            }, {
+              text: 'Peppers',
+              value: 'peppers'
+            }, {
+              text: 'Black olives',
+              value: 'black-olives'
+            }
+          ]
+        }, {
+          name: 'crust',
+          options: [
+            {
+              text: 'Pan style',
+              value: 'pan'
+            }, {
+              text: 'Hand tossed',
+              value: 'hand-tossed'
+            }, {
+              text: 'Stuffed crust',
+              value: 'stuffed-crust'
+            }
+          ]
+        }],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel'
+          },
+          {
+            text: 'Confirm',
+            handler: (value) => {
+              window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+            }
+          }
+        ]
+      });
+      await picker.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/picker/multiple-column/index.md b/static/usage/v6/picker/multiple-column/index.md
new file mode 100644
index 00000000000..3ec3e30f391
--- /dev/null
+++ b/static/usage/v6/picker/multiple-column/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/picker/multiple-column/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/picker/multiple-column/javascript.md b/static/usage/v6/picker/multiple-column/javascript.md
similarity index 100%
rename from static/usage/picker/multiple-column/javascript.md
rename to static/usage/v6/picker/multiple-column/javascript.md
diff --git a/static/usage/picker/multiple-column/react.md b/static/usage/v6/picker/multiple-column/react.md
similarity index 100%
rename from static/usage/picker/multiple-column/react.md
rename to static/usage/v6/picker/multiple-column/react.md
diff --git a/static/usage/picker/multiple-column/vue.md b/static/usage/v6/picker/multiple-column/vue.md
similarity index 100%
rename from static/usage/picker/multiple-column/vue.md
rename to static/usage/v6/picker/multiple-column/vue.md
diff --git a/static/usage/picker/single-column/angular/example_component_html.md b/static/usage/v6/picker/single-column/angular/example_component_html.md
similarity index 100%
rename from static/usage/picker/single-column/angular/example_component_html.md
rename to static/usage/v6/picker/single-column/angular/example_component_html.md
diff --git a/static/usage/picker/single-column/angular/example_component_ts.md b/static/usage/v6/picker/single-column/angular/example_component_ts.md
similarity index 100%
rename from static/usage/picker/single-column/angular/example_component_ts.md
rename to static/usage/v6/picker/single-column/angular/example_component_ts.md
diff --git a/static/usage/v6/picker/single-column/demo.html b/static/usage/v6/picker/single-column/demo.html
new file mode 100644
index 00000000000..6f81b1c6e8f
--- /dev/null
+++ b/static/usage/v6/picker/single-column/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Picker | Single Column</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.pickerController = pickerController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="openPicker()">Open</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    async function openPicker() {
+      const picker = await pickerController.create({
+        columns: [{
+          name: 'languages',
+          options: [
+            {
+              text: 'JavaScript',
+              value: 'javascript'
+            }, {
+              text: 'TypeScript',
+              value: 'typescript'
+            }, {
+              text: 'Rust',
+              value: 'rust'
+            }, {
+              text: 'C#',
+              value: 'c#'
+            }
+          ]
+        }],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel'
+          },
+          {
+            text: 'Confirm',
+            handler: (value) => {
+              window.alert(`You selected: ${value.languages.value}`);
+            }
+          }
+        ]
+      });
+      await picker.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/picker/single-column/index.md b/static/usage/v6/picker/single-column/index.md
new file mode 100644
index 00000000000..4f012f8e3f6
--- /dev/null
+++ b/static/usage/v6/picker/single-column/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/picker/single-column/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/picker/single-column/javascript.md b/static/usage/v6/picker/single-column/javascript.md
similarity index 100%
rename from static/usage/picker/single-column/javascript.md
rename to static/usage/v6/picker/single-column/javascript.md
diff --git a/static/usage/picker/single-column/react.md b/static/usage/v6/picker/single-column/react.md
similarity index 100%
rename from static/usage/picker/single-column/react.md
rename to static/usage/v6/picker/single-column/react.md
diff --git a/static/usage/picker/single-column/vue.md b/static/usage/v6/picker/single-column/vue.md
similarity index 100%
rename from static/usage/picker/single-column/vue.md
rename to static/usage/v6/picker/single-column/vue.md
diff --git a/static/usage/popover/customization/positioning/angular/example_component_css.md b/static/usage/v6/popover/customization/positioning/angular/example_component_css.md
similarity index 100%
rename from static/usage/popover/customization/positioning/angular/example_component_css.md
rename to static/usage/v6/popover/customization/positioning/angular/example_component_css.md
diff --git a/static/usage/popover/customization/positioning/angular/example_component_html.md b/static/usage/v6/popover/customization/positioning/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/customization/positioning/angular/example_component_html.md
rename to static/usage/v6/popover/customization/positioning/angular/example_component_html.md
diff --git a/static/usage/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md
similarity index 100%
rename from static/usage/popover/customization/positioning/angular/example_component_ts.md
rename to static/usage/v6/popover/customization/positioning/angular/example_component_ts.md
diff --git a/static/usage/v6/popover/customization/positioning/demo.html b/static/usage/v6/popover/customization/positioning/demo.html
new file mode 100644
index 00000000000..71a74fb45e9
--- /dev/null
+++ b/static/usage/v6/popover/customization/positioning/demo.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    ion-popover {
+      --width: 80px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
+        <ion-popover trigger="top-center" side="top" alignment="center">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
+        <ion-popover trigger="bottom-start" side="bottom" alignment="start">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
+        <ion-popover trigger="left-start" side="left" alignment="start">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="right-end">Side=Right, Alignment=End</ion-button>
+        <ion-popover trigger="right-end" side="right" alignment="end">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/popover/customization/positioning/index.md b/static/usage/v6/popover/customization/positioning/index.md
new file mode 100644
index 00000000000..1162f540336
--- /dev/null
+++ b/static/usage/v6/popover/customization/positioning/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="400px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/popover/customization/positioning/demo.html"
+/>
diff --git a/static/usage/popover/customization/positioning/javascript.md b/static/usage/v6/popover/customization/positioning/javascript.md
similarity index 100%
rename from static/usage/popover/customization/positioning/javascript.md
rename to static/usage/v6/popover/customization/positioning/javascript.md
diff --git a/static/usage/popover/customization/positioning/react/main_css.md b/static/usage/v6/popover/customization/positioning/react/main_css.md
similarity index 100%
rename from static/usage/popover/customization/positioning/react/main_css.md
rename to static/usage/v6/popover/customization/positioning/react/main_css.md
diff --git a/static/usage/popover/customization/positioning/react/main_tsx.md b/static/usage/v6/popover/customization/positioning/react/main_tsx.md
similarity index 100%
rename from static/usage/popover/customization/positioning/react/main_tsx.md
rename to static/usage/v6/popover/customization/positioning/react/main_tsx.md
diff --git a/static/usage/popover/customization/positioning/vue.md b/static/usage/v6/popover/customization/positioning/vue.md
similarity index 100%
rename from static/usage/popover/customization/positioning/vue.md
rename to static/usage/v6/popover/customization/positioning/vue.md
diff --git a/static/usage/popover/customization/sizing/angular.md b/static/usage/v6/popover/customization/sizing/angular.md
similarity index 100%
rename from static/usage/popover/customization/sizing/angular.md
rename to static/usage/v6/popover/customization/sizing/angular.md
diff --git a/static/usage/v6/popover/customization/sizing/demo.html b/static/usage/v6/popover/customization/sizing/demo.html
new file mode 100644
index 00000000000..b85d71034f8
--- /dev/null
+++ b/static/usage/v6/popover/customization/sizing/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="auto-trigger">Size=Auto</ion-button>
+        <ion-popover trigger="auto-trigger" size="auto">
+          <ion-content class="ion-padding">Hello!</ion-content>
+        </ion-popover>
+
+        <ion-button id="cover-trigger">Size=Cover</ion-button>
+        <ion-popover trigger="cover-trigger" size="cover">
+          <ion-content class="ion-padding">Hello!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/popover/customization/sizing/index.md b/static/usage/v6/popover/customization/sizing/index.md
new file mode 100644
index 00000000000..7adf62d0847
--- /dev/null
+++ b/static/usage/v6/popover/customization/sizing/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/popover/customization/sizing/demo.html"
+/>
diff --git a/static/usage/popover/customization/sizing/javascript.md b/static/usage/v6/popover/customization/sizing/javascript.md
similarity index 100%
rename from static/usage/popover/customization/sizing/javascript.md
rename to static/usage/v6/popover/customization/sizing/javascript.md
diff --git a/static/usage/popover/customization/sizing/react.md b/static/usage/v6/popover/customization/sizing/react.md
similarity index 100%
rename from static/usage/popover/customization/sizing/react.md
rename to static/usage/v6/popover/customization/sizing/react.md
diff --git a/static/usage/popover/customization/sizing/vue.md b/static/usage/v6/popover/customization/sizing/vue.md
similarity index 100%
rename from static/usage/popover/customization/sizing/vue.md
rename to static/usage/v6/popover/customization/sizing/vue.md
diff --git a/static/usage/popover/customization/styling/angular/example_component_html.md b/static/usage/v6/popover/customization/styling/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/customization/styling/angular/example_component_html.md
rename to static/usage/v6/popover/customization/styling/angular/example_component_html.md
diff --git a/static/usage/popover/customization/styling/angular/global_css.md b/static/usage/v6/popover/customization/styling/angular/global_css.md
similarity index 100%
rename from static/usage/popover/customization/styling/angular/global_css.md
rename to static/usage/v6/popover/customization/styling/angular/global_css.md
diff --git a/static/usage/v6/popover/customization/styling/demo.html b/static/usage/v6/popover/customization/styling/demo.html
new file mode 100644
index 00000000000..6d858b14659
--- /dev/null
+++ b/static/usage/v6/popover/customization/styling/demo.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-popover {
+      --background: rgba(40, 173, 218, 0.6);
+      --backdrop-opacity: 0.6;
+      --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
+      --color: white;
+      --width: 300px;
+    }
+
+    ion-popover ion-content {
+      --background: rgba(40, 173, 218, 0.6);
+    }
+
+    ion-popover::part(backdrop) {
+      background-color: rgb(6, 14, 106);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="trigger-button">Click Me</ion-button>
+        <ion-popover trigger="trigger-button">
+          <ion-content class="ion-padding">Hello Styled World!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/popover/customization/styling/index.md b/static/usage/v6/popover/customization/styling/index.md
new file mode 100644
index 00000000000..f4615883312
--- /dev/null
+++ b/static/usage/v6/popover/customization/styling/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v6/popover/customization/styling/demo.html"
+/>
diff --git a/static/usage/popover/customization/styling/javascript.md b/static/usage/v6/popover/customization/styling/javascript.md
similarity index 100%
rename from static/usage/popover/customization/styling/javascript.md
rename to static/usage/v6/popover/customization/styling/javascript.md
diff --git a/static/usage/popover/customization/styling/react/main_css.md b/static/usage/v6/popover/customization/styling/react/main_css.md
similarity index 100%
rename from static/usage/popover/customization/styling/react/main_css.md
rename to static/usage/v6/popover/customization/styling/react/main_css.md
diff --git a/static/usage/popover/customization/styling/react/main_tsx.md b/static/usage/v6/popover/customization/styling/react/main_tsx.md
similarity index 100%
rename from static/usage/popover/customization/styling/react/main_tsx.md
rename to static/usage/v6/popover/customization/styling/react/main_tsx.md
diff --git a/static/usage/popover/customization/styling/vue.md b/static/usage/v6/popover/customization/styling/vue.md
similarity index 100%
rename from static/usage/popover/customization/styling/vue.md
rename to static/usage/v6/popover/customization/styling/vue.md
diff --git a/static/usage/popover/nested/angular.md b/static/usage/v6/popover/nested/angular.md
similarity index 100%
rename from static/usage/popover/nested/angular.md
rename to static/usage/v6/popover/nested/angular.md
diff --git a/static/usage/v6/popover/nested/demo.html b/static/usage/v6/popover/nested/demo.html
new file mode 100644
index 00000000000..ab52c1d5540
--- /dev/null
+++ b/static/usage/v6/popover/nested/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="popover-button">Open Menu</ion-button>
+        <ion-popover trigger="popover-button" dismiss-on-select="true">
+          <ion-content>
+            <ion-list>
+              <ion-item button="true" detail="false">Option 1</ion-item>
+              <ion-item button="true" detail="false">Option 2</ion-item>
+              <ion-item button="true" id="nested-trigger">More options...</ion-item>
+
+              <ion-popover trigger="nested-trigger" dismiss-on-select="true" side="end">
+                <ion-content>
+                  <ion-list>
+                    <ion-item button="true" detail="false">Nested option</ion-item>
+                  </ion-list>
+                </ion-content>
+              </ion-popover>
+            </ion-list>
+          </ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/popover/nested/index.md b/static/usage/v6/popover/nested/index.md
new file mode 100644
index 00000000000..5a987c633a5
--- /dev/null
+++ b/static/usage/v6/popover/nested/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/v6/popover/nested/demo.html" />
diff --git a/static/usage/popover/nested/javascript.md b/static/usage/v6/popover/nested/javascript.md
similarity index 100%
rename from static/usage/popover/nested/javascript.md
rename to static/usage/v6/popover/nested/javascript.md
diff --git a/static/usage/popover/nested/react.md b/static/usage/v6/popover/nested/react.md
similarity index 100%
rename from static/usage/popover/nested/react.md
rename to static/usage/v6/popover/nested/react.md
diff --git a/static/usage/popover/nested/vue.md b/static/usage/v6/popover/nested/vue.md
similarity index 100%
rename from static/usage/popover/nested/vue.md
rename to static/usage/v6/popover/nested/vue.md
diff --git a/static/usage/popover/performance/mount/angular.md b/static/usage/v6/popover/performance/mount/angular.md
similarity index 100%
rename from static/usage/popover/performance/mount/angular.md
rename to static/usage/v6/popover/performance/mount/angular.md
diff --git a/static/usage/v6/popover/performance/mount/demo.html b/static/usage/v6/popover/performance/mount/demo.html
new file mode 100644
index 00000000000..053883d5e75
--- /dev/null
+++ b/static/usage/v6/popover/performance/mount/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="open-popover">Open Popover</ion-button>
+        <ion-popover keep-contents-mounted="true" trigger="open-popover">
+          <ion-content class="ion-padding">This content was mounted as soon as the popover was created.</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/popover/performance/mount/index.md b/static/usage/v6/popover/performance/mount/index.md
new file mode 100644
index 00000000000..c201dea3154
--- /dev/null
+++ b/static/usage/v6/popover/performance/mount/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="medium"
+  src="usage/v6/popover/performance/mount/demo.html"
+/>
diff --git a/static/usage/popover/performance/mount/javascript.md b/static/usage/v6/popover/performance/mount/javascript.md
similarity index 100%
rename from static/usage/popover/performance/mount/javascript.md
rename to static/usage/v6/popover/performance/mount/javascript.md
diff --git a/static/usage/popover/performance/mount/react.md b/static/usage/v6/popover/performance/mount/react.md
similarity index 100%
rename from static/usage/popover/performance/mount/react.md
rename to static/usage/v6/popover/performance/mount/react.md
diff --git a/static/usage/popover/performance/mount/vue.md b/static/usage/v6/popover/performance/mount/vue.md
similarity index 100%
rename from static/usage/popover/performance/mount/vue.md
rename to static/usage/v6/popover/performance/mount/vue.md
diff --git a/static/usage/popover/presenting/controller/angular/app_module_ts.md b/static/usage/v6/popover/presenting/controller/angular/app_module_ts.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/app_module_ts.md
rename to static/usage/v6/popover/presenting/controller/angular/app_module_ts.md
diff --git a/static/usage/popover/presenting/controller/angular/example_component_html.md b/static/usage/v6/popover/presenting/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/example_component_html.md
rename to static/usage/v6/popover/presenting/controller/angular/example_component_html.md
diff --git a/static/usage/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/example_component_ts.md
rename to static/usage/v6/popover/presenting/controller/angular/example_component_ts.md
diff --git a/static/usage/popover/presenting/controller/angular/popover_component_html.md b/static/usage/v6/popover/presenting/controller/angular/popover_component_html.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/popover_component_html.md
rename to static/usage/v6/popover/presenting/controller/angular/popover_component_html.md
diff --git a/static/usage/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/popover_component_ts.md
rename to static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md
diff --git a/static/usage/v6/popover/presenting/controller/demo.html b/static/usage/v6/popover/presenting/controller/demo.html
new file mode 100644
index 00000000000..0a235d3c41d
--- /dev/null
+++ b/static/usage/v6/popover/presenting/controller/demo.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Click Me</ion-button>
+        <p></p>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const output = document.querySelector('p');
+
+    class PopoverPage extends HTMLElement {
+      constructor() {
+        super();
+      }
+
+      connectedCallback() {
+        this.innerHTML = `<ion-content class="ion-padding">Hello World!</ion-content>`;
+      }
+    }
+
+    customElements.define('popover-page', PopoverPage);
+
+    async function presentPopover(e) {
+      const popover = Object.assign(document.createElement('ion-popover'), {
+        component: 'popover-page',
+        event: e
+      });
+
+      document.body.appendChild(popover);
+      await popover.present();
+
+      const { role } = await popover.onDidDismiss();
+      output.innerText = `Popover dismissed with role: ${role}`;
+    }
+
+    const button = document.querySelector('ion-button');
+    button.addEventListener('click', presentPopover);
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/popover/presenting/controller/index.md b/static/usage/v6/popover/presenting/controller/index.md
new file mode 100644
index 00000000000..868abdc93b9
--- /dev/null
+++ b/static/usage/v6/popover/presenting/controller/index.md
@@ -0,0 +1,37 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_popover from './vue/popover_vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_popover_component_html from './angular/popover_component_html.md';
+import angular_popover_component_ts from './angular/popover_component_ts.md';
+import angular_app_module from './angular/app_module_ts.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/Popover.vue': vue_popover,
+      },
+    },
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/popover.component.html': angular_popover_component_html,
+        'src/app/popover.component.ts': angular_popover_component_ts,
+        'src/app/app.module.ts': angular_app_module,
+      },
+    },
+  }}
+  src="usage/v6/popover/presenting/controller/demo.html"
+/>
diff --git a/static/usage/popover/presenting/controller/javascript.md b/static/usage/v6/popover/presenting/controller/javascript.md
similarity index 100%
rename from static/usage/popover/presenting/controller/javascript.md
rename to static/usage/v6/popover/presenting/controller/javascript.md
diff --git a/static/usage/popover/presenting/controller/react.md b/static/usage/v6/popover/presenting/controller/react.md
similarity index 100%
rename from static/usage/popover/presenting/controller/react.md
rename to static/usage/v6/popover/presenting/controller/react.md
diff --git a/static/usage/popover/presenting/controller/vue/example_vue.md b/static/usage/v6/popover/presenting/controller/vue/example_vue.md
similarity index 100%
rename from static/usage/popover/presenting/controller/vue/example_vue.md
rename to static/usage/v6/popover/presenting/controller/vue/example_vue.md
diff --git a/static/usage/popover/presenting/controller/vue/popover_vue.md b/static/usage/v6/popover/presenting/controller/vue/popover_vue.md
similarity index 100%
rename from static/usage/popover/presenting/controller/vue/popover_vue.md
rename to static/usage/v6/popover/presenting/controller/vue/popover_vue.md
diff --git a/static/usage/popover/presenting/inline-isopen/angular/example_component_html.md b/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/presenting/inline-isopen/angular/example_component_html.md
rename to static/usage/v6/popover/presenting/inline-isopen/angular/example_component_html.md
diff --git a/static/usage/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md
similarity index 100%
rename from static/usage/popover/presenting/inline-isopen/angular/example_component_ts.md
rename to static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md
diff --git a/static/usage/v6/popover/presenting/inline-isopen/demo.html b/static/usage/v6/popover/presenting/inline-isopen/demo.html
new file mode 100644
index 00000000000..4180760c005
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-isopen/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Click Me</ion-button>
+        <ion-popover>
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const button = document.querySelector('ion-button');
+    const popover = document.querySelector('ion-popover');
+
+    button.addEventListener('click', e => {
+      popover.event = e;
+      popover.isOpen = true;
+    });
+
+    popover.addEventListener('didDismiss', () => popover.isOpen = false);
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/popover/presenting/inline-isopen/index.md b/static/usage/v6/popover/presenting/inline-isopen/index.md
new file mode 100644
index 00000000000..3a57a188e15
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-isopen/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/popover/presenting/inline-isopen/demo.html"
+/>
diff --git a/static/usage/popover/presenting/inline-isopen/javascript.md b/static/usage/v6/popover/presenting/inline-isopen/javascript.md
similarity index 100%
rename from static/usage/popover/presenting/inline-isopen/javascript.md
rename to static/usage/v6/popover/presenting/inline-isopen/javascript.md
diff --git a/static/usage/popover/presenting/inline-isopen/react.md b/static/usage/v6/popover/presenting/inline-isopen/react.md
similarity index 100%
rename from static/usage/popover/presenting/inline-isopen/react.md
rename to static/usage/v6/popover/presenting/inline-isopen/react.md
diff --git a/static/usage/popover/presenting/inline-isopen/vue.md b/static/usage/v6/popover/presenting/inline-isopen/vue.md
similarity index 100%
rename from static/usage/popover/presenting/inline-isopen/vue.md
rename to static/usage/v6/popover/presenting/inline-isopen/vue.md
diff --git a/static/usage/popover/presenting/inline-trigger/angular.md b/static/usage/v6/popover/presenting/inline-trigger/angular.md
similarity index 100%
rename from static/usage/popover/presenting/inline-trigger/angular.md
rename to static/usage/v6/popover/presenting/inline-trigger/angular.md
diff --git a/static/usage/v6/popover/presenting/inline-trigger/demo.html b/static/usage/v6/popover/presenting/inline-trigger/demo.html
new file mode 100644
index 00000000000..d1b2020e454
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-trigger/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="click-trigger">Left-Click Me</ion-button>
+        <ion-popover trigger="click-trigger" trigger-action="click">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="context-menu-trigger">Right-Click Me</ion-button>
+        <ion-popover trigger="context-menu-trigger" trigger-action="context-menu">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="hover-trigger">Hover Over Me</ion-button>
+        <ion-popover trigger="hover-trigger" trigger-action="hover">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/popover/presenting/inline-trigger/index.md b/static/usage/v6/popover/presenting/inline-trigger/index.md
new file mode 100644
index 00000000000..d481ddbde3f
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-trigger/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/popover/presenting/inline-trigger/demo.html"
+/>
diff --git a/static/usage/popover/presenting/inline-trigger/javascript.md b/static/usage/v6/popover/presenting/inline-trigger/javascript.md
similarity index 100%
rename from static/usage/popover/presenting/inline-trigger/javascript.md
rename to static/usage/v6/popover/presenting/inline-trigger/javascript.md
diff --git a/static/usage/popover/presenting/inline-trigger/react.md b/static/usage/v6/popover/presenting/inline-trigger/react.md
similarity index 100%
rename from static/usage/popover/presenting/inline-trigger/react.md
rename to static/usage/v6/popover/presenting/inline-trigger/react.md
diff --git a/static/usage/popover/presenting/inline-trigger/vue.md b/static/usage/v6/popover/presenting/inline-trigger/vue.md
similarity index 100%
rename from static/usage/popover/presenting/inline-trigger/vue.md
rename to static/usage/v6/popover/presenting/inline-trigger/vue.md
diff --git a/static/usage/progress-bar/buffer/angular/example_component_html.md b/static/usage/v6/progress-bar/buffer/angular/example_component_html.md
similarity index 100%
rename from static/usage/progress-bar/buffer/angular/example_component_html.md
rename to static/usage/v6/progress-bar/buffer/angular/example_component_html.md
diff --git a/static/usage/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
similarity index 100%
rename from static/usage/progress-bar/buffer/angular/example_component_ts.md
rename to static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
diff --git a/static/usage/v6/progress-bar/buffer/demo.html b/static/usage/v6/progress-bar/buffer/demo.html
new file mode 100644
index 00000000000..023c907ed39
--- /dev/null
+++ b/static/usage/v6/progress-bar/buffer/demo.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+<script>
+  let buffer = 0.06;
+  let progress = 0;
+
+  let progressBar = document.querySelector('ion-progress-bar');
+  progressBar.buffer = buffer;
+
+  setInterval(() => {
+    progressBar.buffer = buffer += 0.06;
+    progressBar.value = progress += 0.06;
+
+    // Reset the progress bar when it reaches 100%
+    // to continuously show the demo
+    if (progress > 1) {
+      setTimeout(() => {
+        progressBar.buffer = buffer = 0.06;
+        progressBar.value = progress = 0;
+      }, 1000);
+    }
+  }, 1000);
+</script>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/buffer/index.md b/static/usage/v6/progress-bar/buffer/index.md
new file mode 100644
index 00000000000..29d9991adcc
--- /dev/null
+++ b/static/usage/v6/progress-bar/buffer/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/progress-bar/buffer/demo.html"
+/>
diff --git a/static/usage/progress-bar/buffer/javascript.md b/static/usage/v6/progress-bar/buffer/javascript.md
similarity index 100%
rename from static/usage/progress-bar/buffer/javascript.md
rename to static/usage/v6/progress-bar/buffer/javascript.md
diff --git a/static/usage/progress-bar/buffer/react.md b/static/usage/v6/progress-bar/buffer/react.md
similarity index 100%
rename from static/usage/progress-bar/buffer/react.md
rename to static/usage/v6/progress-bar/buffer/react.md
diff --git a/static/usage/progress-bar/buffer/vue.md b/static/usage/v6/progress-bar/buffer/vue.md
similarity index 100%
rename from static/usage/progress-bar/buffer/vue.md
rename to static/usage/v6/progress-bar/buffer/vue.md
diff --git a/static/usage/progress-bar/determinate/angular/example_component_html.md b/static/usage/v6/progress-bar/determinate/angular/example_component_html.md
similarity index 100%
rename from static/usage/progress-bar/determinate/angular/example_component_html.md
rename to static/usage/v6/progress-bar/determinate/angular/example_component_html.md
diff --git a/static/usage/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
similarity index 100%
rename from static/usage/progress-bar/determinate/angular/example_component_ts.md
rename to static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
diff --git a/static/usage/v6/progress-bar/determinate/demo.html b/static/usage/v6/progress-bar/determinate/demo.html
new file mode 100644
index 00000000000..2f09a3ad5cd
--- /dev/null
+++ b/static/usage/v6/progress-bar/determinate/demo.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+<script>
+  let progress = 0;
+  let progressBar = document.querySelector('ion-progress-bar');
+
+  setInterval(() => {
+    progressBar.value = progress += 0.01;
+
+    // Reset the progress bar when it reaches 100%
+    // to continuously show the demo
+    if (progress > 1) {
+      setTimeout(() => {
+        progressBar.value = progress = 0;
+      }, 1000);
+    }
+  }, 50);
+</script>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/determinate/index.md b/static/usage/v6/progress-bar/determinate/index.md
new file mode 100644
index 00000000000..d94f1595579
--- /dev/null
+++ b/static/usage/v6/progress-bar/determinate/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/progress-bar/determinate/demo.html"
+/>
diff --git a/static/usage/progress-bar/determinate/javascript.md b/static/usage/v6/progress-bar/determinate/javascript.md
similarity index 100%
rename from static/usage/progress-bar/determinate/javascript.md
rename to static/usage/v6/progress-bar/determinate/javascript.md
diff --git a/static/usage/progress-bar/determinate/react.md b/static/usage/v6/progress-bar/determinate/react.md
similarity index 100%
rename from static/usage/progress-bar/determinate/react.md
rename to static/usage/v6/progress-bar/determinate/react.md
diff --git a/static/usage/progress-bar/determinate/vue.md b/static/usage/v6/progress-bar/determinate/vue.md
similarity index 100%
rename from static/usage/progress-bar/determinate/vue.md
rename to static/usage/v6/progress-bar/determinate/vue.md
diff --git a/static/usage/progress-bar/indeterminate/angular.md b/static/usage/v6/progress-bar/indeterminate/angular.md
similarity index 100%
rename from static/usage/progress-bar/indeterminate/angular.md
rename to static/usage/v6/progress-bar/indeterminate/angular.md
diff --git a/static/usage/v6/progress-bar/indeterminate/demo.html b/static/usage/v6/progress-bar/indeterminate/demo.html
new file mode 100644
index 00000000000..46c9cdd7254
--- /dev/null
+++ b/static/usage/v6/progress-bar/indeterminate/demo.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar type="indeterminate"></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/indeterminate/index.md b/static/usage/v6/progress-bar/indeterminate/index.md
new file mode 100644
index 00000000000..098def69854
--- /dev/null
+++ b/static/usage/v6/progress-bar/indeterminate/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/progress-bar/indeterminate/demo.html" />
diff --git a/static/usage/progress-bar/indeterminate/javascript.md b/static/usage/v6/progress-bar/indeterminate/javascript.md
similarity index 100%
rename from static/usage/progress-bar/indeterminate/javascript.md
rename to static/usage/v6/progress-bar/indeterminate/javascript.md
diff --git a/static/usage/progress-bar/indeterminate/react.md b/static/usage/v6/progress-bar/indeterminate/react.md
similarity index 100%
rename from static/usage/progress-bar/indeterminate/react.md
rename to static/usage/v6/progress-bar/indeterminate/react.md
diff --git a/static/usage/progress-bar/indeterminate/vue.md b/static/usage/v6/progress-bar/indeterminate/vue.md
similarity index 100%
rename from static/usage/progress-bar/indeterminate/vue.md
rename to static/usage/v6/progress-bar/indeterminate/vue.md
diff --git a/static/usage/progress-bar/theming/colors/angular.md b/static/usage/v6/progress-bar/theming/colors/angular.md
similarity index 100%
rename from static/usage/progress-bar/theming/colors/angular.md
rename to static/usage/v6/progress-bar/theming/colors/angular.md
diff --git a/static/usage/v6/progress-bar/theming/colors/demo.html b/static/usage/v6/progress-bar/theming/colors/demo.html
new file mode 100644
index 00000000000..2ecac2e80fa
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/colors/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar type="indeterminate" color="primary"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="secondary"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="tertiary"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="success"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="warning"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="danger"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="light"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="medium"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="dark"></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/theming/colors/index.md b/static/usage/v6/progress-bar/theming/colors/index.md
new file mode 100644
index 00000000000..5f0d2092c55
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/progress-bar/theming/colors/demo.html" />
diff --git a/static/usage/progress-bar/theming/colors/javascript.md b/static/usage/v6/progress-bar/theming/colors/javascript.md
similarity index 100%
rename from static/usage/progress-bar/theming/colors/javascript.md
rename to static/usage/v6/progress-bar/theming/colors/javascript.md
diff --git a/static/usage/progress-bar/theming/colors/react.md b/static/usage/v6/progress-bar/theming/colors/react.md
similarity index 100%
rename from static/usage/progress-bar/theming/colors/react.md
rename to static/usage/v6/progress-bar/theming/colors/react.md
diff --git a/static/usage/progress-bar/theming/colors/vue.md b/static/usage/v6/progress-bar/theming/colors/vue.md
similarity index 100%
rename from static/usage/progress-bar/theming/colors/vue.md
rename to static/usage/v6/progress-bar/theming/colors/vue.md
diff --git a/static/usage/progress-bar/theming/css-properties/angular/example_component_css.md b/static/usage/v6/progress-bar/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/progress-bar/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/v6/progress-bar/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/progress-bar/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/progress-bar/theming/css-properties/demo.html b/static/usage/v6/progress-bar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..5d60e67fbc5
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-properties/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+
+    ion-progress-bar {
+      --background: #f3e895;
+      --progress-background: #09c567;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate"></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/theming/css-properties/index.md b/static/usage/v6/progress-bar/theming/css-properties/index.md
new file mode 100644
index 00000000000..1c4a9cf15da
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/progress-bar/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/progress-bar/theming/css-properties/javascript.md b/static/usage/v6/progress-bar/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-properties/javascript.md
rename to static/usage/v6/progress-bar/theming/css-properties/javascript.md
diff --git a/static/usage/progress-bar/theming/css-properties/react/main_css.md b/static/usage/v6/progress-bar/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-properties/react/main_css.md
rename to static/usage/v6/progress-bar/theming/css-properties/react/main_css.md
diff --git a/static/usage/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/v6/progress-bar/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/progress-bar/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/progress-bar/theming/css-properties/vue.md b/static/usage/v6/progress-bar/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-properties/vue.md
rename to static/usage/v6/progress-bar/theming/css-properties/vue.md
diff --git a/static/usage/progress-bar/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
rename to static/usage/v6/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/progress-bar/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
rename to static/usage/v6/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html b/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..7ccd266e946
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+
+    ion-progress-bar::part(track) {
+      background: #f3e895;
+    }
+
+    ion-progress-bar::part(progress) {
+      background: #09c567;
+    }
+
+    ion-progress-bar::part(stream) {
+      background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate"></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..50fcfab3159
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/progress-bar/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/progress-bar/theming/css-shadow-parts/javascript.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/javascript.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-shadow-parts/javascript.md
rename to static/usage/v6/progress-bar/theming/css-shadow-parts/javascript.md
diff --git a/static/usage/progress-bar/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_css.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-shadow-parts/react/main_css.md
rename to static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_css.md
diff --git a/static/usage/progress-bar/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_tsx.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-shadow-parts/react/main_tsx.md
rename to static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_tsx.md
diff --git a/static/usage/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/vue.md
similarity index 100%
rename from static/usage/progress-bar/theming/css-shadow-parts/vue.md
rename to static/usage/v6/progress-bar/theming/css-shadow-parts/vue.md
diff --git a/static/usage/radio/basic/angular.md b/static/usage/v6/radio/basic/angular.md
similarity index 100%
rename from static/usage/radio/basic/angular.md
rename to static/usage/v6/radio/basic/angular.md
diff --git a/static/usage/v6/radio/basic/demo.html b/static/usage/v6/radio/basic/demo.html
new file mode 100644
index 00000000000..896041e948e
--- /dev/null
+++ b/static/usage/v6/radio/basic/demo.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Radio</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-radio-group value="strawberries">
+            <ion-item>
+              <ion-label>Grapes</ion-label>
+              <ion-radio slot="end" value="grapes"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Strawberries</ion-label>
+              <ion-radio slot="end" value="strawberries"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Pineapple</ion-label>
+              <ion-radio slot="end" value="pineapple"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Cherries (Disabled)</ion-label>
+              <ion-radio slot="end" value="cherries" disabled="true"></ion-radio>
+            </ion-item>
+          </ion-radio-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/radio/basic/index.md b/static/usage/v6/radio/basic/index.md
new file mode 100644
index 00000000000..ef39cf54ae1
--- /dev/null
+++ b/static/usage/v6/radio/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/radio/basic/demo.html" size="250px" />
diff --git a/static/usage/radio/basic/javascript.md b/static/usage/v6/radio/basic/javascript.md
similarity index 100%
rename from static/usage/radio/basic/javascript.md
rename to static/usage/v6/radio/basic/javascript.md
diff --git a/static/usage/radio/basic/react.md b/static/usage/v6/radio/basic/react.md
similarity index 100%
rename from static/usage/radio/basic/react.md
rename to static/usage/v6/radio/basic/react.md
diff --git a/static/usage/radio/basic/vue.md b/static/usage/v6/radio/basic/vue.md
similarity index 100%
rename from static/usage/radio/basic/vue.md
rename to static/usage/v6/radio/basic/vue.md
diff --git a/static/usage/radio/empty-selection/angular.md b/static/usage/v6/radio/empty-selection/angular.md
similarity index 100%
rename from static/usage/radio/empty-selection/angular.md
rename to static/usage/v6/radio/empty-selection/angular.md
diff --git a/static/usage/v6/radio/empty-selection/demo.html b/static/usage/v6/radio/empty-selection/demo.html
new file mode 100644
index 00000000000..29731178d61
--- /dev/null
+++ b/static/usage/v6/radio/empty-selection/demo.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Radio</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-radio-group allow-empty-selection="true" value="turtles">
+            <ion-item>
+              <ion-label>Dogs</ion-label>
+              <ion-radio slot="end" value="dogs"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Cats</ion-label>
+              <ion-radio slot="end" value="cats"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Turtles</ion-label>
+              <ion-radio slot="end" value="turtles"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Fish</ion-label>
+              <ion-radio slot="end" value="fish"></ion-radio>
+            </ion-item>
+          </ion-radio-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/radio/empty-selection/index.md b/static/usage/v6/radio/empty-selection/index.md
new file mode 100644
index 00000000000..2f789c60bee
--- /dev/null
+++ b/static/usage/v6/radio/empty-selection/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/radio/empty-selection/demo.html" size="250px" />
diff --git a/static/usage/radio/empty-selection/javascript.md b/static/usage/v6/radio/empty-selection/javascript.md
similarity index 100%
rename from static/usage/radio/empty-selection/javascript.md
rename to static/usage/v6/radio/empty-selection/javascript.md
diff --git a/static/usage/radio/empty-selection/react.md b/static/usage/v6/radio/empty-selection/react.md
similarity index 100%
rename from static/usage/radio/empty-selection/react.md
rename to static/usage/v6/radio/empty-selection/react.md
diff --git a/static/usage/radio/empty-selection/vue.md b/static/usage/v6/radio/empty-selection/vue.md
similarity index 100%
rename from static/usage/radio/empty-selection/vue.md
rename to static/usage/v6/radio/empty-selection/vue.md
diff --git a/static/usage/radio/theming/colors/angular.md b/static/usage/v6/radio/theming/colors/angular.md
similarity index 100%
rename from static/usage/radio/theming/colors/angular.md
rename to static/usage/v6/radio/theming/colors/angular.md
diff --git a/static/usage/v6/radio/theming/colors/demo.html b/static/usage/v6/radio/theming/colors/demo.html
new file mode 100644
index 00000000000..aa122b5f0ec
--- /dev/null
+++ b/static/usage/v6/radio/theming/colors/demo.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Radio</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-radio-group value="primary">
+          <ion-radio color="primary" value="primary"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="secondary">
+          <ion-radio color="secondary" value="secondary"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="tertiary">
+          <ion-radio color="tertiary" value="tertiary"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="success">
+          <ion-radio color="success" value="success"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="warning">
+          <ion-radio color="warning" value="warning"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="danger">
+          <ion-radio color="danger" value="danger"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="light">
+          <ion-radio color="light" value="light"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="medium">
+          <ion-radio color="medium" value="medium"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="dark">
+          <ion-radio color="dark" value="dark"></ion-radio>
+        </ion-radio-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/radio/theming/colors/index.md b/static/usage/v6/radio/theming/colors/index.md
new file mode 100644
index 00000000000..a8b20257d2e
--- /dev/null
+++ b/static/usage/v6/radio/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/radio/theming/colors/demo.html" size="100px" />
diff --git a/static/usage/radio/theming/colors/javascript.md b/static/usage/v6/radio/theming/colors/javascript.md
similarity index 100%
rename from static/usage/radio/theming/colors/javascript.md
rename to static/usage/v6/radio/theming/colors/javascript.md
diff --git a/static/usage/radio/theming/colors/react.md b/static/usage/v6/radio/theming/colors/react.md
similarity index 100%
rename from static/usage/radio/theming/colors/react.md
rename to static/usage/v6/radio/theming/colors/react.md
diff --git a/static/usage/radio/theming/colors/vue.md b/static/usage/v6/radio/theming/colors/vue.md
similarity index 100%
rename from static/usage/radio/theming/colors/vue.md
rename to static/usage/v6/radio/theming/colors/vue.md
diff --git a/static/usage/radio/theming/css-properties/angular/example_component_css.md b/static/usage/v6/radio/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/radio/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/radio/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/radio/theming/css-properties/angular/example_component_html.md b/static/usage/v6/radio/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/radio/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/radio/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/radio/theming/css-properties/demo.html b/static/usage/v6/radio/theming/css-properties/demo.html
new file mode 100644
index 00000000000..8d2a07e5df6
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-properties/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Radio</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-radio {
+      --border-radius: 4px;
+      --inner-border-radius: 4px;
+
+      --color: #ddd;
+      --color-checked: #6815ec;
+    }
+
+    ion-radio.ios {
+      width: 20px;
+      height: 20px;
+
+      border: 2px solid #ddd;
+      border-radius: 4px;
+    }
+
+    .radio-checked.ios {
+      border-color: #6815ec;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-radio-group value="custom-checked">
+          <ion-radio value="custom"></ion-radio>
+          <ion-radio value="custom-checked"></ion-radio>
+        </ion-radio-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/radio/theming/css-properties/index.md b/static/usage/v6/radio/theming/css-properties/index.md
new file mode 100644
index 00000000000..78ce4589761
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/radio/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/radio/theming/css-properties/javascript.md b/static/usage/v6/radio/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/radio/theming/css-properties/javascript.md
rename to static/usage/v6/radio/theming/css-properties/javascript.md
diff --git a/static/usage/radio/theming/css-properties/react/main_css.md b/static/usage/v6/radio/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/radio/theming/css-properties/react/main_css.md
rename to static/usage/v6/radio/theming/css-properties/react/main_css.md
diff --git a/static/usage/radio/theming/css-properties/react/main_tsx.md b/static/usage/v6/radio/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/radio/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/radio/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/radio/theming/css-properties/vue.md b/static/usage/v6/radio/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/radio/theming/css-properties/vue.md
rename to static/usage/v6/radio/theming/css-properties/vue.md
diff --git a/static/usage/radio/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/radio/theming/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/radio/theming/css-shadow-parts/angular/example_component_css.md
rename to static/usage/v6/radio/theming/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/radio/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/radio/theming/css-shadow-parts/angular/example_component_html.md
similarity index 100%
rename from static/usage/radio/theming/css-shadow-parts/angular/example_component_html.md
rename to static/usage/v6/radio/theming/css-shadow-parts/angular/example_component_html.md
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/demo.html b/static/usage/v6/radio/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..f2bc280fb83
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-shadow-parts/demo.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Radio</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-radio {
+      width: 30px;
+      height: 30px;
+    }
+
+    ion-radio::part(container) {
+      border-radius: 8px;
+      border: 2px solid #ddd;
+    }
+
+    ion-radio::part(mark) {
+      background: none;
+      transition: none;
+      transform: none;
+      border-radius: 0;
+    }
+
+    ion-radio.radio-checked::part(container) {
+      background: #6815ec;
+      border-color: transparent;
+    }
+
+    ion-radio.radio-checked::part(mark) {
+      width: 6px;
+      height: 10px;
+
+      border-width: 0px 2px 2px 0px;
+      border-style: solid;
+      border-color: #fff;
+
+      transform: rotate(45deg);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-radio-group value="custom-checked">
+          <ion-radio value="custom"></ion-radio>
+          <ion-radio value="custom-checked"></ion-radio>
+        </ion-radio-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/index.md b/static/usage/v6/radio/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..f9d30b28015
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/radio/theming/css-shadow-parts/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/radio/theming/css-shadow-parts/javascript.md b/static/usage/v6/radio/theming/css-shadow-parts/javascript.md
similarity index 100%
rename from static/usage/radio/theming/css-shadow-parts/javascript.md
rename to static/usage/v6/radio/theming/css-shadow-parts/javascript.md
diff --git a/static/usage/radio/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/radio/theming/css-shadow-parts/react/main_css.md
similarity index 100%
rename from static/usage/radio/theming/css-shadow-parts/react/main_css.md
rename to static/usage/v6/radio/theming/css-shadow-parts/react/main_css.md
diff --git a/static/usage/radio/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/radio/theming/css-shadow-parts/react/main_tsx.md
similarity index 100%
rename from static/usage/radio/theming/css-shadow-parts/react/main_tsx.md
rename to static/usage/v6/radio/theming/css-shadow-parts/react/main_tsx.md
diff --git a/static/usage/radio/theming/css-shadow-parts/vue.md b/static/usage/v6/radio/theming/css-shadow-parts/vue.md
similarity index 100%
rename from static/usage/radio/theming/css-shadow-parts/vue.md
rename to static/usage/v6/radio/theming/css-shadow-parts/vue.md
diff --git a/static/usage/range/basic/angular.md b/static/usage/v6/range/basic/angular.md
similarity index 100%
rename from static/usage/range/basic/angular.md
rename to static/usage/v6/range/basic/angular.md
diff --git a/static/usage/v6/range/basic/demo.html b/static/usage/v6/range/basic/demo.html
new file mode 100644
index 00000000000..2580a0cda5e
--- /dev/null
+++ b/static/usage/v6/range/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/range/basic/index.md b/static/usage/v6/range/basic/index.md
new file mode 100644
index 00000000000..3c8a5863952
--- /dev/null
+++ b/static/usage/v6/range/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/range/basic/demo.html" />
diff --git a/static/usage/range/basic/javascript.md b/static/usage/v6/range/basic/javascript.md
similarity index 100%
rename from static/usage/range/basic/javascript.md
rename to static/usage/v6/range/basic/javascript.md
diff --git a/static/usage/range/basic/react.md b/static/usage/v6/range/basic/react.md
similarity index 100%
rename from static/usage/range/basic/react.md
rename to static/usage/v6/range/basic/react.md
diff --git a/static/usage/range/basic/vue.md b/static/usage/v6/range/basic/vue.md
similarity index 100%
rename from static/usage/range/basic/vue.md
rename to static/usage/v6/range/basic/vue.md
diff --git a/static/usage/range/dual-knobs/angular.md b/static/usage/v6/range/dual-knobs/angular.md
similarity index 100%
rename from static/usage/range/dual-knobs/angular.md
rename to static/usage/v6/range/dual-knobs/angular.md
diff --git a/static/usage/v6/range/dual-knobs/demo.html b/static/usage/v6/range/dual-knobs/demo.html
new file mode 100644
index 00000000000..2c324f0eb57
--- /dev/null
+++ b/static/usage/v6/range/dual-knobs/demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range dual-knobs="true"></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const range = document.querySelector('ion-range');
+    range.value = {
+      lower: 20,
+      upper: 80
+    };
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/range/dual-knobs/index.md b/static/usage/v6/range/dual-knobs/index.md
new file mode 100644
index 00000000000..ab7b43f4d48
--- /dev/null
+++ b/static/usage/v6/range/dual-knobs/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/range/dual-knobs/demo.html" />
diff --git a/static/usage/range/dual-knobs/javascript.md b/static/usage/v6/range/dual-knobs/javascript.md
similarity index 100%
rename from static/usage/range/dual-knobs/javascript.md
rename to static/usage/v6/range/dual-knobs/javascript.md
diff --git a/static/usage/range/dual-knobs/react.md b/static/usage/v6/range/dual-knobs/react.md
similarity index 100%
rename from static/usage/range/dual-knobs/react.md
rename to static/usage/v6/range/dual-knobs/react.md
diff --git a/static/usage/range/dual-knobs/vue.md b/static/usage/v6/range/dual-knobs/vue.md
similarity index 100%
rename from static/usage/range/dual-knobs/vue.md
rename to static/usage/v6/range/dual-knobs/vue.md
diff --git a/static/usage/range/ion-change-event/angular/example_component_html.md b/static/usage/v6/range/ion-change-event/angular/example_component_html.md
similarity index 100%
rename from static/usage/range/ion-change-event/angular/example_component_html.md
rename to static/usage/v6/range/ion-change-event/angular/example_component_html.md
diff --git a/static/usage/range/ion-change-event/angular/example_component_ts.md b/static/usage/v6/range/ion-change-event/angular/example_component_ts.md
similarity index 100%
rename from static/usage/range/ion-change-event/angular/example_component_ts.md
rename to static/usage/v6/range/ion-change-event/angular/example_component_ts.md
diff --git a/static/usage/v6/range/ion-change-event/demo.html b/static/usage/v6/range/ion-change-event/demo.html
new file mode 100644
index 00000000000..93e35b59ba7
--- /dev/null
+++ b/static/usage/v6/range/ion-change-event/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .demo {
+      max-width: 320px;
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="demo">
+          <ion-range></ion-range>
+          <ion-label>ionChange emitted value: <span id="lastValue"></span></ion-label>
+        </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const range = document.querySelector('ion-range');
+    const lastValue = document.querySelector('#lastValue');
+
+    range.addEventListener('ionChange', ({ detail }) => {
+      lastValue.innerHTML = detail.value;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/range/ion-change-event/index.md b/static/usage/v6/range/ion-change-event/index.md
new file mode 100644
index 00000000000..d14edf576b4
--- /dev/null
+++ b/static/usage/v6/range/ion-change-event/index.md
@@ -0,0 +1,23 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/range/ion-change-event/demo.html"
+/>
diff --git a/static/usage/range/ion-change-event/javascript.md b/static/usage/v6/range/ion-change-event/javascript.md
similarity index 100%
rename from static/usage/range/ion-change-event/javascript.md
rename to static/usage/v6/range/ion-change-event/javascript.md
diff --git a/static/usage/range/ion-change-event/react.md b/static/usage/v6/range/ion-change-event/react.md
similarity index 100%
rename from static/usage/range/ion-change-event/react.md
rename to static/usage/v6/range/ion-change-event/react.md
diff --git a/static/usage/range/ion-change-event/vue.md b/static/usage/v6/range/ion-change-event/vue.md
similarity index 100%
rename from static/usage/range/ion-change-event/vue.md
rename to static/usage/v6/range/ion-change-event/vue.md
diff --git a/static/usage/range/ion-knob-move-event/angular/example_component_html.md b/static/usage/v6/range/ion-knob-move-event/angular/example_component_html.md
similarity index 100%
rename from static/usage/range/ion-knob-move-event/angular/example_component_html.md
rename to static/usage/v6/range/ion-knob-move-event/angular/example_component_html.md
diff --git a/static/usage/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md
similarity index 100%
rename from static/usage/range/ion-knob-move-event/angular/example_component_ts.md
rename to static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md
diff --git a/static/usage/v6/range/ion-knob-move-event/demo.html b/static/usage/v6/range/ion-knob-move-event/demo.html
new file mode 100644
index 00000000000..0522fd9b1ff
--- /dev/null
+++ b/static/usage/v6/range/ion-knob-move-event/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .demo {
+      max-width: 320px;
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="demo">
+          <ion-range></ion-range>
+          <div>
+            <ion-label>ionKnobMoveStart: <span id="moveStart"></span></ion-label>
+          </div>
+          <div>
+            <ion-label>ionKnobMoveEnd: <span id="moveEnd"></span></ion-label>
+          </div>
+        </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const range = document.querySelector('ion-range');
+    const moveStart = document.querySelector('#moveStart');
+    const moveEnd = document.querySelector('#moveEnd');
+
+    range.addEventListener('ionKnobMoveStart', ({ detail }) => {
+      moveStart.innerHTML = detail.value;
+    });
+
+    range.addEventListener('ionKnobMoveEnd', ({ detail }) => {
+      moveEnd.innerHTML = detail.value;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/range/ion-knob-move-event/index.md b/static/usage/v6/range/ion-knob-move-event/index.md
new file mode 100644
index 00000000000..4f615970535
--- /dev/null
+++ b/static/usage/v6/range/ion-knob-move-event/index.md
@@ -0,0 +1,23 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/range/ion-knob-move-event/demo.html"
+/>
diff --git a/static/usage/range/ion-knob-move-event/javascript.md b/static/usage/v6/range/ion-knob-move-event/javascript.md
similarity index 100%
rename from static/usage/range/ion-knob-move-event/javascript.md
rename to static/usage/v6/range/ion-knob-move-event/javascript.md
diff --git a/static/usage/range/ion-knob-move-event/react.md b/static/usage/v6/range/ion-knob-move-event/react.md
similarity index 100%
rename from static/usage/range/ion-knob-move-event/react.md
rename to static/usage/v6/range/ion-knob-move-event/react.md
diff --git a/static/usage/range/ion-knob-move-event/vue.md b/static/usage/v6/range/ion-knob-move-event/vue.md
similarity index 100%
rename from static/usage/range/ion-knob-move-event/vue.md
rename to static/usage/v6/range/ion-knob-move-event/vue.md
diff --git a/static/usage/range/pins/angular/example_component_html.md b/static/usage/v6/range/pins/angular/example_component_html.md
similarity index 100%
rename from static/usage/range/pins/angular/example_component_html.md
rename to static/usage/v6/range/pins/angular/example_component_html.md
diff --git a/static/usage/range/pins/angular/example_component_ts.md b/static/usage/v6/range/pins/angular/example_component_ts.md
similarity index 100%
rename from static/usage/range/pins/angular/example_component_ts.md
rename to static/usage/v6/range/pins/angular/example_component_ts.md
diff --git a/static/usage/v6/range/pins/demo.html b/static/usage/v6/range/pins/demo.html
new file mode 100644
index 00000000000..032a649d14d
--- /dev/null
+++ b/static/usage/v6/range/pins/demo.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range pin="true"></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const range = document.querySelector('ion-range');
+    range.pinFormatter = (value) => {
+      return `${value}%`;
+    };
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/range/pins/index.md b/static/usage/v6/range/pins/index.md
new file mode 100644
index 00000000000..a453df0297e
--- /dev/null
+++ b/static/usage/v6/range/pins/index.md
@@ -0,0 +1,23 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/range/pins/demo.html"
+/>
diff --git a/static/usage/range/pins/javascript.md b/static/usage/v6/range/pins/javascript.md
similarity index 100%
rename from static/usage/range/pins/javascript.md
rename to static/usage/v6/range/pins/javascript.md
diff --git a/static/usage/range/pins/react.md b/static/usage/v6/range/pins/react.md
similarity index 100%
rename from static/usage/range/pins/react.md
rename to static/usage/v6/range/pins/react.md
diff --git a/static/usage/range/pins/vue.md b/static/usage/v6/range/pins/vue.md
similarity index 100%
rename from static/usage/range/pins/vue.md
rename to static/usage/v6/range/pins/vue.md
diff --git a/static/usage/range/slots/angular.md b/static/usage/v6/range/slots/angular.md
similarity index 100%
rename from static/usage/range/slots/angular.md
rename to static/usage/v6/range/slots/angular.md
diff --git a/static/usage/v6/range/slots/demo.html b/static/usage/v6/range/slots/demo.html
new file mode 100644
index 00000000000..a6c24e8da62
--- /dev/null
+++ b/static/usage/v6/range/slots/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range>
+          <ion-icon slot="start" name="snow-outline"></ion-icon>
+          <ion-icon slot="end" name="sunny-outline"></ion-icon>
+        </ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/range/slots/index.md b/static/usage/v6/range/slots/index.md
new file mode 100644
index 00000000000..786745fcf35
--- /dev/null
+++ b/static/usage/v6/range/slots/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/range/slots/demo.html" />
diff --git a/static/usage/range/slots/javascript.md b/static/usage/v6/range/slots/javascript.md
similarity index 100%
rename from static/usage/range/slots/javascript.md
rename to static/usage/v6/range/slots/javascript.md
diff --git a/static/usage/range/slots/react.md b/static/usage/v6/range/slots/react.md
similarity index 100%
rename from static/usage/range/slots/react.md
rename to static/usage/v6/range/slots/react.md
diff --git a/static/usage/range/slots/vue.md b/static/usage/v6/range/slots/vue.md
similarity index 100%
rename from static/usage/range/slots/vue.md
rename to static/usage/v6/range/slots/vue.md
diff --git a/static/usage/range/snapping-ticks/angular.md b/static/usage/v6/range/snapping-ticks/angular.md
similarity index 100%
rename from static/usage/range/snapping-ticks/angular.md
rename to static/usage/v6/range/snapping-ticks/angular.md
diff --git a/static/usage/v6/range/snapping-ticks/demo.html b/static/usage/v6/range/snapping-ticks/demo.html
new file mode 100644
index 00000000000..8b0ada20488
--- /dev/null
+++ b/static/usage/v6/range/snapping-ticks/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range ticks="true" snaps="true" min="0" max="10"></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/range/snapping-ticks/index.md b/static/usage/v6/range/snapping-ticks/index.md
new file mode 100644
index 00000000000..9c701956179
--- /dev/null
+++ b/static/usage/v6/range/snapping-ticks/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/range/snapping-ticks/demo.html" />
diff --git a/static/usage/range/snapping-ticks/javascript.md b/static/usage/v6/range/snapping-ticks/javascript.md
similarity index 100%
rename from static/usage/range/snapping-ticks/javascript.md
rename to static/usage/v6/range/snapping-ticks/javascript.md
diff --git a/static/usage/range/snapping-ticks/react.md b/static/usage/v6/range/snapping-ticks/react.md
similarity index 100%
rename from static/usage/range/snapping-ticks/react.md
rename to static/usage/v6/range/snapping-ticks/react.md
diff --git a/static/usage/range/snapping-ticks/vue.md b/static/usage/v6/range/snapping-ticks/vue.md
similarity index 100%
rename from static/usage/range/snapping-ticks/vue.md
rename to static/usage/v6/range/snapping-ticks/vue.md
diff --git a/static/usage/range/theming/css-properties/angular/example_component_css.md b/static/usage/v6/range/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/range/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/range/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/range/theming/css-properties/angular/example_component_html.md b/static/usage/v6/range/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/range/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/range/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/range/theming/css-properties/demo.html b/static/usage/v6/range/theming/css-properties/demo.html
new file mode 100644
index 00000000000..2bbf61e793b
--- /dev/null
+++ b/static/usage/v6/range/theming/css-properties/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      --bar-background: #a2d2ff;
+      --bar-background-active: #bde0fe;
+      --bar-height: 8px;
+      --bar-border-radius: 8px;
+      --knob-background: #ffc8dd;
+      --knob-size: 40px;
+      --pin-background: #ffafcc;
+      --pin-color: #fff;
+
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range value="50" pin="true"></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/range/theming/css-properties/index.md b/static/usage/v6/range/theming/css-properties/index.md
new file mode 100644
index 00000000000..b85f6df20a1
--- /dev/null
+++ b/static/usage/v6/range/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/range/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/range/theming/css-properties/javascript.md b/static/usage/v6/range/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/range/theming/css-properties/javascript.md
rename to static/usage/v6/range/theming/css-properties/javascript.md
diff --git a/static/usage/range/theming/css-properties/react/main_css.md b/static/usage/v6/range/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/range/theming/css-properties/react/main_css.md
rename to static/usage/v6/range/theming/css-properties/react/main_css.md
diff --git a/static/usage/range/theming/css-properties/react/main_tsx.md b/static/usage/v6/range/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/range/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/range/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/range/theming/css-properties/vue.md b/static/usage/v6/range/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/range/theming/css-properties/vue.md
rename to static/usage/v6/range/theming/css-properties/vue.md
diff --git a/static/usage/range/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/range/theming/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/range/theming/css-shadow-parts/angular/example_component_css.md
rename to static/usage/v6/range/theming/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/range/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/range/theming/css-shadow-parts/angular/example_component_html.md
similarity index 100%
rename from static/usage/range/theming/css-shadow-parts/angular/example_component_html.md
rename to static/usage/v6/range/theming/css-shadow-parts/angular/example_component_html.md
diff --git a/static/usage/v6/range/theming/css-shadow-parts/demo.html b/static/usage/v6/range/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..8469ebda0a8
--- /dev/null
+++ b/static/usage/v6/range/theming/css-shadow-parts/demo.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+
+    ion-range::part(tick) {
+      background: #a2d2ff;
+    }
+
+    ion-range::part(tick-active) {
+      background: #bde0fe;
+    }
+
+    ion-range::part(pin) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      background: #ffafcc;
+      color: #fff;
+
+      border-radius: 50%;
+      transform: scale(1.01);
+
+      top: -20px;
+
+      min-width: 28px;
+      height: 28px;
+      transition: transform 120ms ease, background 120ms ease;
+    }
+
+    ion-range::part(pin)::before {
+      content: none;
+    }
+
+    ion-range::part(knob) {
+      background: #ffc8dd;
+    }
+
+    ion-range::part(bar) {
+      background: #a2d2ff;
+    }
+
+    ion-range::part(bar-active) {
+      background: #bde0fe;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range min="0" max="10" value="5" pin="true" ticks="true" snaps="true"></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/range/theming/css-shadow-parts/index.md b/static/usage/v6/range/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..9ed3c33a790
--- /dev/null
+++ b/static/usage/v6/range/theming/css-shadow-parts/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/range/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/range/theming/css-shadow-parts/javascript.md b/static/usage/v6/range/theming/css-shadow-parts/javascript.md
similarity index 100%
rename from static/usage/range/theming/css-shadow-parts/javascript.md
rename to static/usage/v6/range/theming/css-shadow-parts/javascript.md
diff --git a/static/usage/range/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/range/theming/css-shadow-parts/react/main_css.md
similarity index 100%
rename from static/usage/range/theming/css-shadow-parts/react/main_css.md
rename to static/usage/v6/range/theming/css-shadow-parts/react/main_css.md
diff --git a/static/usage/range/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/range/theming/css-shadow-parts/react/main_tsx.md
similarity index 100%
rename from static/usage/range/theming/css-shadow-parts/react/main_tsx.md
rename to static/usage/v6/range/theming/css-shadow-parts/react/main_tsx.md
diff --git a/static/usage/range/theming/css-shadow-parts/vue.md b/static/usage/v6/range/theming/css-shadow-parts/vue.md
similarity index 100%
rename from static/usage/range/theming/css-shadow-parts/vue.md
rename to static/usage/v6/range/theming/css-shadow-parts/vue.md
diff --git a/static/usage/refresher/advanced/angular/example_component_css.md b/static/usage/v6/refresher/advanced/angular/example_component_css.md
similarity index 100%
rename from static/usage/refresher/advanced/angular/example_component_css.md
rename to static/usage/v6/refresher/advanced/angular/example_component_css.md
diff --git a/static/usage/refresher/advanced/angular/example_component_html.md b/static/usage/v6/refresher/advanced/angular/example_component_html.md
similarity index 100%
rename from static/usage/refresher/advanced/angular/example_component_html.md
rename to static/usage/v6/refresher/advanced/angular/example_component_html.md
diff --git a/static/usage/refresher/advanced/angular/example_component_ts.md b/static/usage/v6/refresher/advanced/angular/example_component_ts.md
similarity index 100%
rename from static/usage/refresher/advanced/angular/example_component_ts.md
rename to static/usage/v6/refresher/advanced/angular/example_component_ts.md
diff --git a/static/usage/v6/refresher/advanced/demo.html b/static/usage/v6/refresher/advanced/demo.html
new file mode 100644
index 00000000000..8f0b2fbbe52
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/demo.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Refresher</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-item {
+      --padding-start: 8px;
+    }
+
+    ion-icon {
+      font-size: 12px;
+      align-self: start;
+      margin: 15px 8px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Pull to Refresh</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-refresher id="refresher" slot="fixed">
+        <ion-refresher-content></ion-refresher-content>
+      </ion-refresher>
+
+      <ion-list id="list"></ion-list>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const refresher = document.getElementById('refresher');
+    const names = [
+      'Burt Bear',
+      'Charlie Cheetah',
+      'Donald Duck',
+      'Eva Eagle',
+      'Ellie Elephant',
+      'Gino Giraffe',
+      'Isabella Iguana',
+      'Karl Kitten',
+      'Lionel Lion',
+      'Molly Mouse',
+      'Paul Puppy',
+      'Rachel Rabbit',
+      'Ted Turtle',
+    ];
+
+    refresher.addEventListener('ionRefresh', () => {
+      setTimeout(() => {
+        addItems(3, true);
+        refresher.complete();
+      }, 2000);
+    });
+
+    const list = document.querySelector('ion-list');
+    addItems(5, false);
+
+    function chooseRandomName() {
+      return names[Math.floor(Math.random() * names.length)];
+    }
+
+    function addItems(count, unread) {
+      for (let i = 0; i < count; i++) {
+        list.insertBefore(createItems(unread), list.firstChild);
+      }
+    }
+
+    function createItems(unread = false) {
+      const name = chooseRandomName();
+      let item = document.createElement('ion-item');
+      item.button = true;
+
+      item.innerHTML += `
+        <ion-icon color="primary" name="${unread ? 'ellipse' : ''}" slot="start"></ion-icon>
+        <ion-label>
+          <h2>${name}</h2>
+          <p>New message from ${name}</p>
+        </ion-label>
+      `;
+
+      return item;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/refresher/advanced/index.md b/static/usage/v6/refresher/advanced/index.md
new file mode 100644
index 00000000000..748023fd227
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/refresher/advanced/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/refresher/advanced/javascript.md b/static/usage/v6/refresher/advanced/javascript.md
similarity index 100%
rename from static/usage/refresher/advanced/javascript.md
rename to static/usage/v6/refresher/advanced/javascript.md
diff --git a/static/usage/refresher/advanced/react/main_css.md b/static/usage/v6/refresher/advanced/react/main_css.md
similarity index 100%
rename from static/usage/refresher/advanced/react/main_css.md
rename to static/usage/v6/refresher/advanced/react/main_css.md
diff --git a/static/usage/refresher/advanced/react/main_tsx.md b/static/usage/v6/refresher/advanced/react/main_tsx.md
similarity index 100%
rename from static/usage/refresher/advanced/react/main_tsx.md
rename to static/usage/v6/refresher/advanced/react/main_tsx.md
diff --git a/static/usage/refresher/advanced/vue.md b/static/usage/v6/refresher/advanced/vue.md
similarity index 100%
rename from static/usage/refresher/advanced/vue.md
rename to static/usage/v6/refresher/advanced/vue.md
diff --git a/static/usage/refresher/basic/angular/example_component_html.md b/static/usage/v6/refresher/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/refresher/basic/angular/example_component_html.md
rename to static/usage/v6/refresher/basic/angular/example_component_html.md
diff --git a/static/usage/refresher/basic/angular/example_component_ts.md b/static/usage/v6/refresher/basic/angular/example_component_ts.md
similarity index 100%
rename from static/usage/refresher/basic/angular/example_component_ts.md
rename to static/usage/v6/refresher/basic/angular/example_component_ts.md
diff --git a/static/usage/v6/refresher/basic/demo.html b/static/usage/v6/refresher/basic/demo.html
new file mode 100644
index 00000000000..9c378cad03e
--- /dev/null
+++ b/static/usage/v6/refresher/basic/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Refresher</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Pull to Refresh</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <ion-refresher id="refresher" slot="fixed">
+        <ion-refresher-content></ion-refresher-content>
+      </ion-refresher>
+
+      <p>Pull this content down to trigger the refresh.</p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const refresher = document.getElementById('refresher');
+
+    refresher.addEventListener('ionRefresh', () => {
+      setTimeout(() => {
+        // Any calls to load data go here
+        refresher.complete();
+      }, 2000);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/refresher/basic/index.md b/static/usage/v6/refresher/basic/index.md
new file mode 100644
index 00000000000..551f36d11ff
--- /dev/null
+++ b/static/usage/v6/refresher/basic/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/refresher/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/refresher/basic/javascript.md b/static/usage/v6/refresher/basic/javascript.md
similarity index 100%
rename from static/usage/refresher/basic/javascript.md
rename to static/usage/v6/refresher/basic/javascript.md
diff --git a/static/usage/refresher/basic/react.md b/static/usage/v6/refresher/basic/react.md
similarity index 100%
rename from static/usage/refresher/basic/react.md
rename to static/usage/v6/refresher/basic/react.md
diff --git a/static/usage/refresher/basic/vue.md b/static/usage/v6/refresher/basic/vue.md
similarity index 100%
rename from static/usage/refresher/basic/vue.md
rename to static/usage/v6/refresher/basic/vue.md
diff --git a/static/usage/refresher/custom-content/angular/example_component_html.md b/static/usage/v6/refresher/custom-content/angular/example_component_html.md
similarity index 100%
rename from static/usage/refresher/custom-content/angular/example_component_html.md
rename to static/usage/v6/refresher/custom-content/angular/example_component_html.md
diff --git a/static/usage/refresher/custom-content/angular/example_component_ts.md b/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
similarity index 100%
rename from static/usage/refresher/custom-content/angular/example_component_ts.md
rename to static/usage/v6/refresher/custom-content/angular/example_component_ts.md
diff --git a/static/usage/v6/refresher/custom-content/demo.html b/static/usage/v6/refresher/custom-content/demo.html
new file mode 100644
index 00000000000..084ad40e10d
--- /dev/null
+++ b/static/usage/v6/refresher/custom-content/demo.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Refresher</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Pull to Refresh</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <ion-refresher id="refresher" slot="fixed">
+        <ion-refresher-content pulling-icon="chevron-down-circle-outline" pulling-text="Pull to refresh"
+          refreshing-spinner="circles" refreshing-text="Refreshing...">
+        </ion-refresher-content>
+      </ion-refresher>
+
+      <p>Pull this content down to trigger the refresh.</p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const refresher = document.getElementById('refresher');
+
+    refresher.addEventListener('ionRefresh', () => {
+      setTimeout(() => {
+        // Any calls to load data go here
+        refresher.complete();
+      }, 2000);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/refresher/custom-content/index.md b/static/usage/v6/refresher/custom-content/index.md
new file mode 100644
index 00000000000..9f9f011336c
--- /dev/null
+++ b/static/usage/v6/refresher/custom-content/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/refresher/custom-content/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/refresher/custom-content/javascript.md b/static/usage/v6/refresher/custom-content/javascript.md
similarity index 100%
rename from static/usage/refresher/custom-content/javascript.md
rename to static/usage/v6/refresher/custom-content/javascript.md
diff --git a/static/usage/refresher/custom-content/react.md b/static/usage/v6/refresher/custom-content/react.md
similarity index 100%
rename from static/usage/refresher/custom-content/react.md
rename to static/usage/v6/refresher/custom-content/react.md
diff --git a/static/usage/refresher/custom-content/vue.md b/static/usage/v6/refresher/custom-content/vue.md
similarity index 100%
rename from static/usage/refresher/custom-content/vue.md
rename to static/usage/v6/refresher/custom-content/vue.md
diff --git a/static/usage/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_css.md
similarity index 100%
rename from static/usage/refresher/custom-scroll-target/angular/example_component_css.md
rename to static/usage/v6/refresher/custom-scroll-target/angular/example_component_css.md
diff --git a/static/usage/refresher/custom-scroll-target/angular/example_component_html.md b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_html.md
similarity index 100%
rename from static/usage/refresher/custom-scroll-target/angular/example_component_html.md
rename to static/usage/v6/refresher/custom-scroll-target/angular/example_component_html.md
diff --git a/static/usage/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md
similarity index 100%
rename from static/usage/refresher/custom-scroll-target/angular/example_component_ts.md
rename to static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md
diff --git a/static/usage/v6/refresher/custom-scroll-target/demo.html b/static/usage/v6/refresher/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..0adad651d65
--- /dev/null
+++ b/static/usage/v6/refresher/custom-scroll-target/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Refresher</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .ion-content-scroll-host {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Pull to Refresh</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content scroll-y="false">
+      <ion-refresher id="refresher" slot="fixed">
+        <ion-refresher-content></ion-refresher-content>
+      </ion-refresher>
+
+      <div class="ion-content-scroll-host ion-padding">
+        <p>Pull this content down to trigger the refresh.</p>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const refresher = document.getElementById('refresher');
+
+    refresher.addEventListener('ionRefresh', () => {
+      setTimeout(() => {
+        // Any calls to load data go here
+        refresher.complete();
+      }, 2000);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/refresher/custom-scroll-target/index.md b/static/usage/v6/refresher/custom-scroll-target/index.md
new file mode 100644
index 00000000000..77b21184550
--- /dev/null
+++ b/static/usage/v6/refresher/custom-scroll-target/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/refresher/custom-scroll-target/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/refresher/custom-scroll-target/javascript.md b/static/usage/v6/refresher/custom-scroll-target/javascript.md
similarity index 100%
rename from static/usage/refresher/custom-scroll-target/javascript.md
rename to static/usage/v6/refresher/custom-scroll-target/javascript.md
diff --git a/static/usage/refresher/custom-scroll-target/react/main_css.md b/static/usage/v6/refresher/custom-scroll-target/react/main_css.md
similarity index 100%
rename from static/usage/refresher/custom-scroll-target/react/main_css.md
rename to static/usage/v6/refresher/custom-scroll-target/react/main_css.md
diff --git a/static/usage/refresher/custom-scroll-target/react/main_tsx.md b/static/usage/v6/refresher/custom-scroll-target/react/main_tsx.md
similarity index 100%
rename from static/usage/refresher/custom-scroll-target/react/main_tsx.md
rename to static/usage/v6/refresher/custom-scroll-target/react/main_tsx.md
diff --git a/static/usage/refresher/custom-scroll-target/vue.md b/static/usage/v6/refresher/custom-scroll-target/vue.md
similarity index 100%
rename from static/usage/refresher/custom-scroll-target/vue.md
rename to static/usage/v6/refresher/custom-scroll-target/vue.md
diff --git a/static/usage/refresher/pull-properties/angular/example_component_html.md b/static/usage/v6/refresher/pull-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/refresher/pull-properties/angular/example_component_html.md
rename to static/usage/v6/refresher/pull-properties/angular/example_component_html.md
diff --git a/static/usage/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
similarity index 100%
rename from static/usage/refresher/pull-properties/angular/example_component_ts.md
rename to static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
diff --git a/static/usage/v6/refresher/pull-properties/demo.html b/static/usage/v6/refresher/pull-properties/demo.html
new file mode 100644
index 00000000000..3d8e940a636
--- /dev/null
+++ b/static/usage/v6/refresher/pull-properties/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Refresher</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Pull to Refresh</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <ion-refresher id="refresher" slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
+        <ion-refresher-content></ion-refresher-content>
+      </ion-refresher>
+
+      <p>Pull this content down to trigger the refresh.</p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const refresher = document.getElementById('refresher');
+
+    refresher.addEventListener('ionRefresh', () => {
+      setTimeout(() => {
+        // Any calls to load data go here
+        refresher.complete();
+      }, 2000);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/refresher/pull-properties/index.md b/static/usage/v6/refresher/pull-properties/index.md
new file mode 100644
index 00000000000..de1272a96d3
--- /dev/null
+++ b/static/usage/v6/refresher/pull-properties/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/refresher/pull-properties/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/refresher/pull-properties/javascript.md b/static/usage/v6/refresher/pull-properties/javascript.md
similarity index 100%
rename from static/usage/refresher/pull-properties/javascript.md
rename to static/usage/v6/refresher/pull-properties/javascript.md
diff --git a/static/usage/refresher/pull-properties/react.md b/static/usage/v6/refresher/pull-properties/react.md
similarity index 100%
rename from static/usage/refresher/pull-properties/react.md
rename to static/usage/v6/refresher/pull-properties/react.md
diff --git a/static/usage/refresher/pull-properties/vue.md b/static/usage/v6/refresher/pull-properties/vue.md
similarity index 100%
rename from static/usage/refresher/pull-properties/vue.md
rename to static/usage/v6/refresher/pull-properties/vue.md
diff --git a/static/usage/reorder/basic/angular/example_component_html.md b/static/usage/v6/reorder/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/reorder/basic/angular/example_component_html.md
rename to static/usage/v6/reorder/basic/angular/example_component_html.md
diff --git a/static/usage/reorder/basic/angular/example_component_ts.md b/static/usage/v6/reorder/basic/angular/example_component_ts.md
similarity index 100%
rename from static/usage/reorder/basic/angular/example_component_ts.md
rename to static/usage/v6/reorder/basic/angular/example_component_ts.md
diff --git a/static/usage/v6/reorder/basic/demo.html b/static/usage/v6/reorder/basic/demo.html
new file mode 100644
index 00000000000..7d721cc2790
--- /dev/null
+++ b/static/usage/v6/reorder/basic/demo.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+          <ion-reorder-group disabled="false">
+            <ion-item>
+              <ion-label>
+                Item 1
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 2
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 3
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 4
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 5
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+          </ion-reorder-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // The `from` and `to` properties contain the index of the item
+      // when the drag started and ended, respectively
+      console.log('Dragged from index', detail.from, 'to', detail.to);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      detail.complete();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/reorder/basic/index.md b/static/usage/v6/reorder/basic/index.md
new file mode 100644
index 00000000000..76f7d2c783a
--- /dev/null
+++ b/static/usage/v6/reorder/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/reorder/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/reorder/basic/javascript.md b/static/usage/v6/reorder/basic/javascript.md
similarity index 100%
rename from static/usage/reorder/basic/javascript.md
rename to static/usage/v6/reorder/basic/javascript.md
diff --git a/static/usage/reorder/basic/react.md b/static/usage/v6/reorder/basic/react.md
similarity index 100%
rename from static/usage/reorder/basic/react.md
rename to static/usage/v6/reorder/basic/react.md
diff --git a/static/usage/reorder/basic/vue.md b/static/usage/v6/reorder/basic/vue.md
similarity index 100%
rename from static/usage/reorder/basic/vue.md
rename to static/usage/v6/reorder/basic/vue.md
diff --git a/static/usage/reorder/custom-icon/angular/example_component_html.md b/static/usage/v6/reorder/custom-icon/angular/example_component_html.md
similarity index 100%
rename from static/usage/reorder/custom-icon/angular/example_component_html.md
rename to static/usage/v6/reorder/custom-icon/angular/example_component_html.md
diff --git a/static/usage/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
similarity index 100%
rename from static/usage/reorder/custom-icon/angular/example_component_ts.md
rename to static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
diff --git a/static/usage/v6/reorder/custom-icon/demo.html b/static/usage/v6/reorder/custom-icon/demo.html
new file mode 100644
index 00000000000..1d9ad3dd39e
--- /dev/null
+++ b/static/usage/v6/reorder/custom-icon/demo.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+          <ion-reorder-group disabled="false">
+            <ion-item>
+              <ion-label>
+                Item 1
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 2
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 3
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 4
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 5
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+          </ion-reorder-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // The `from` and `to` properties contain the index of the item
+      // when the drag started and ended, respectively
+      console.log('Dragged from index', detail.from, 'to', detail.to);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      detail.complete();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/reorder/custom-icon/index.md b/static/usage/v6/reorder/custom-icon/index.md
new file mode 100644
index 00000000000..d946399ba25
--- /dev/null
+++ b/static/usage/v6/reorder/custom-icon/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/reorder/custom-icon/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/reorder/custom-icon/javascript.md b/static/usage/v6/reorder/custom-icon/javascript.md
similarity index 100%
rename from static/usage/reorder/custom-icon/javascript.md
rename to static/usage/v6/reorder/custom-icon/javascript.md
diff --git a/static/usage/reorder/custom-icon/react.md b/static/usage/v6/reorder/custom-icon/react.md
similarity index 100%
rename from static/usage/reorder/custom-icon/react.md
rename to static/usage/v6/reorder/custom-icon/react.md
diff --git a/static/usage/reorder/custom-icon/vue.md b/static/usage/v6/reorder/custom-icon/vue.md
similarity index 100%
rename from static/usage/reorder/custom-icon/vue.md
rename to static/usage/v6/reorder/custom-icon/vue.md
diff --git a/static/usage/reorder/custom-scroll-target/angular/example_component_css.md b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_css.md
similarity index 100%
rename from static/usage/reorder/custom-scroll-target/angular/example_component_css.md
rename to static/usage/v6/reorder/custom-scroll-target/angular/example_component_css.md
diff --git a/static/usage/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_html.md
similarity index 100%
rename from static/usage/reorder/custom-scroll-target/angular/example_component_html.md
rename to static/usage/v6/reorder/custom-scroll-target/angular/example_component_html.md
diff --git a/static/usage/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md
similarity index 100%
rename from static/usage/reorder/custom-scroll-target/angular/example_component_ts.md
rename to static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md
diff --git a/static/usage/v6/reorder/custom-scroll-target/demo.html b/static/usage/v6/reorder/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..8a94ae5d8e6
--- /dev/null
+++ b/static/usage/v6/reorder/custom-scroll-target/demo.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+
+    .ion-content-scroll-host {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content scroll-y="false">
+      <div class="container">
+        <div class="ion-content-scroll-host">
+          <ion-list>
+            <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+            <ion-reorder-group disabled="false">
+              <ion-item>
+                <ion-label>
+                  Item 1
+                </ion-label>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>
+                  Item 2
+                </ion-label>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>
+                  Item 3
+                </ion-label>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>
+                  Item 4
+                </ion-label>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>
+                  Item 5
+                </ion-label>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+            </ion-reorder-group>
+          </ion-list>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // The `from` and `to` properties contain the index of the item
+      // when the drag started and ended, respectively
+      console.log('Dragged from index', detail.from, 'to', detail.to);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      detail.complete();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/reorder/custom-scroll-target/index.md b/static/usage/v6/reorder/custom-scroll-target/index.md
new file mode 100644
index 00000000000..46fb210234b
--- /dev/null
+++ b/static/usage/v6/reorder/custom-scroll-target/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/reorder/custom-scroll-target/demo.html"
+  size="300px"
+  includeIonContent={false}
+/>
diff --git a/static/usage/reorder/custom-scroll-target/javascript.md b/static/usage/v6/reorder/custom-scroll-target/javascript.md
similarity index 100%
rename from static/usage/reorder/custom-scroll-target/javascript.md
rename to static/usage/v6/reorder/custom-scroll-target/javascript.md
diff --git a/static/usage/reorder/custom-scroll-target/react/main_css.md b/static/usage/v6/reorder/custom-scroll-target/react/main_css.md
similarity index 100%
rename from static/usage/reorder/custom-scroll-target/react/main_css.md
rename to static/usage/v6/reorder/custom-scroll-target/react/main_css.md
diff --git a/static/usage/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/v6/reorder/custom-scroll-target/react/main_tsx.md
similarity index 100%
rename from static/usage/reorder/custom-scroll-target/react/main_tsx.md
rename to static/usage/v6/reorder/custom-scroll-target/react/main_tsx.md
diff --git a/static/usage/reorder/custom-scroll-target/vue.md b/static/usage/v6/reorder/custom-scroll-target/vue.md
similarity index 100%
rename from static/usage/reorder/custom-scroll-target/vue.md
rename to static/usage/v6/reorder/custom-scroll-target/vue.md
diff --git a/static/usage/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v6/reorder/toggling-disabled/angular/example_component_html.md
similarity index 100%
rename from static/usage/reorder/toggling-disabled/angular/example_component_html.md
rename to static/usage/v6/reorder/toggling-disabled/angular/example_component_html.md
diff --git a/static/usage/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
similarity index 100%
rename from static/usage/reorder/toggling-disabled/angular/example_component_ts.md
rename to static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
diff --git a/static/usage/v6/reorder/toggling-disabled/demo.html b/static/usage/v6/reorder/toggling-disabled/demo.html
new file mode 100644
index 00000000000..1eb8cba120b
--- /dev/null
+++ b/static/usage/v6/reorder/toggling-disabled/demo.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-reorder-group>
+            <ion-item>
+              <ion-label>
+                Item 1
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 2
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 3
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 4
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 5
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+          </ion-reorder-group>
+        </ion-list>
+
+        <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+        <ion-button onClick="toggleReorder()">
+          Toggle Reorder
+        </ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // The `from` and `to` properties contain the index of the item
+      // when the drag started and ended, respectively
+      console.log('Dragged from index', detail.from, 'to', detail.to);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      detail.complete();
+    });
+
+    function toggleReorder() {
+      reorderGroup.disabled = !reorderGroup.disabled;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/reorder/toggling-disabled/index.md b/static/usage/v6/reorder/toggling-disabled/index.md
new file mode 100644
index 00000000000..461db158d64
--- /dev/null
+++ b/static/usage/v6/reorder/toggling-disabled/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/reorder/toggling-disabled/demo.html"
+  size="350px"
+/>
diff --git a/static/usage/reorder/toggling-disabled/javascript.md b/static/usage/v6/reorder/toggling-disabled/javascript.md
similarity index 100%
rename from static/usage/reorder/toggling-disabled/javascript.md
rename to static/usage/v6/reorder/toggling-disabled/javascript.md
diff --git a/static/usage/reorder/toggling-disabled/react.md b/static/usage/v6/reorder/toggling-disabled/react.md
similarity index 100%
rename from static/usage/reorder/toggling-disabled/react.md
rename to static/usage/v6/reorder/toggling-disabled/react.md
diff --git a/static/usage/reorder/toggling-disabled/vue.md b/static/usage/v6/reorder/toggling-disabled/vue.md
similarity index 100%
rename from static/usage/reorder/toggling-disabled/vue.md
rename to static/usage/v6/reorder/toggling-disabled/vue.md
diff --git a/static/usage/reorder/updating-data/angular/example_component_html.md b/static/usage/v6/reorder/updating-data/angular/example_component_html.md
similarity index 100%
rename from static/usage/reorder/updating-data/angular/example_component_html.md
rename to static/usage/v6/reorder/updating-data/angular/example_component_html.md
diff --git a/static/usage/reorder/updating-data/angular/example_component_ts.md b/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
similarity index 100%
rename from static/usage/reorder/updating-data/angular/example_component_ts.md
rename to static/usage/v6/reorder/updating-data/angular/example_component_ts.md
diff --git a/static/usage/v6/reorder/updating-data/demo.html b/static/usage/v6/reorder/updating-data/demo.html
new file mode 100644
index 00000000000..bf7d175f937
--- /dev/null
+++ b/static/usage/v6/reorder/updating-data/demo.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+          <ion-reorder-group disabled="false"></ion-reorder-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    let items = [1, 2, 3, 4, 5];
+    reorderItems(items);
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // Before complete is called with the items they will remain in the
+      // order before the drag
+      console.log('Before complete', items);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. Update the items variable to the
+      // new order of items
+      items = detail.complete(items);
+
+      // Reorder the items in the DOM
+      reorderItems(items);
+
+      // After complete is called the items will be in the new order
+      console.log('After complete', items);
+    });
+
+    function reorderItems(items) {
+      reorderGroup.replaceChildren();
+
+      let reordered = '';
+
+      for (let i = 0; i < items.length; i++) {
+        reordered += `
+          <ion-item>
+            <ion-label>
+              Item ${items[i]}
+            </ion-label>
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>
+        `;
+      }
+
+      reorderGroup.innerHTML = reordered;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/reorder/updating-data/index.md b/static/usage/v6/reorder/updating-data/index.md
new file mode 100644
index 00000000000..7311c655001
--- /dev/null
+++ b/static/usage/v6/reorder/updating-data/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/reorder/updating-data/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/reorder/updating-data/javascript.md b/static/usage/v6/reorder/updating-data/javascript.md
similarity index 100%
rename from static/usage/reorder/updating-data/javascript.md
rename to static/usage/v6/reorder/updating-data/javascript.md
diff --git a/static/usage/reorder/updating-data/react.md b/static/usage/v6/reorder/updating-data/react.md
similarity index 100%
rename from static/usage/reorder/updating-data/react.md
rename to static/usage/v6/reorder/updating-data/react.md
diff --git a/static/usage/reorder/updating-data/vue.md b/static/usage/v6/reorder/updating-data/vue.md
similarity index 100%
rename from static/usage/reorder/updating-data/vue.md
rename to static/usage/v6/reorder/updating-data/vue.md
diff --git a/static/usage/reorder/wrapper/angular/example_component_html.md b/static/usage/v6/reorder/wrapper/angular/example_component_html.md
similarity index 100%
rename from static/usage/reorder/wrapper/angular/example_component_html.md
rename to static/usage/v6/reorder/wrapper/angular/example_component_html.md
diff --git a/static/usage/reorder/wrapper/angular/example_component_ts.md b/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
similarity index 100%
rename from static/usage/reorder/wrapper/angular/example_component_ts.md
rename to static/usage/v6/reorder/wrapper/angular/example_component_ts.md
diff --git a/static/usage/v6/reorder/wrapper/demo.html b/static/usage/v6/reorder/wrapper/demo.html
new file mode 100644
index 00000000000..6bf8b66760b
--- /dev/null
+++ b/static/usage/v6/reorder/wrapper/demo.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+          <ion-reorder-group disabled="false">
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 1
+                </ion-label>
+              </ion-item>
+            </ion-reorder>
+
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 2
+                </ion-label>
+              </ion-item>
+            </ion-reorder>
+
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 3
+                </ion-label>
+              </ion-item>
+            </ion-reorder>
+
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 4
+                </ion-label>
+              </ion-item>
+            </ion-reorder>
+
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 5
+                </ion-label>
+              </ion-item>
+            </ion-reorder>
+          </ion-reorder-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // The `from` and `to` properties contain the index of the item
+      // when the drag started and ended, respectively
+      console.log('Dragged from index', detail.from, 'to', detail.to);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      detail.complete();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/reorder/wrapper/index.md b/static/usage/v6/reorder/wrapper/index.md
new file mode 100644
index 00000000000..12b42e73c48
--- /dev/null
+++ b/static/usage/v6/reorder/wrapper/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/reorder/wrapper/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/reorder/wrapper/javascript.md b/static/usage/v6/reorder/wrapper/javascript.md
similarity index 100%
rename from static/usage/reorder/wrapper/javascript.md
rename to static/usage/v6/reorder/wrapper/javascript.md
diff --git a/static/usage/reorder/wrapper/react.md b/static/usage/v6/reorder/wrapper/react.md
similarity index 100%
rename from static/usage/reorder/wrapper/react.md
rename to static/usage/v6/reorder/wrapper/react.md
diff --git a/static/usage/reorder/wrapper/vue.md b/static/usage/v6/reorder/wrapper/vue.md
similarity index 100%
rename from static/usage/reorder/wrapper/vue.md
rename to static/usage/v6/reorder/wrapper/vue.md
diff --git a/static/usage/ripple-effect/basic/angular/example_component_css.md b/static/usage/v6/ripple-effect/basic/angular/example_component_css.md
similarity index 100%
rename from static/usage/ripple-effect/basic/angular/example_component_css.md
rename to static/usage/v6/ripple-effect/basic/angular/example_component_css.md
diff --git a/static/usage/ripple-effect/basic/angular/example_component_html.md b/static/usage/v6/ripple-effect/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/ripple-effect/basic/angular/example_component_html.md
rename to static/usage/v6/ripple-effect/basic/angular/example_component_html.md
diff --git a/static/usage/v6/ripple-effect/basic/demo.html b/static/usage/v6/ripple-effect/basic/demo.html
new file mode 100644
index 00000000000..fd593291421
--- /dev/null
+++ b/static/usage/v6/ripple-effect/basic/demo.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ripple Effect</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .wrapper {
+      display: flex;
+      flex-wrap: wrap;
+
+      align-items: center;
+      justify-content: space-between;
+      text-align: center;
+
+      height: 300px;
+      width: 300px;
+
+      margin: 0 auto;
+    }
+
+    b {
+      width: 100%;
+    }
+
+    .ripple-parent {
+      position: relative;
+      overflow: hidden;
+
+      border: 1px solid #ddd;
+    }
+
+    .rectangle {
+      width: 300px;
+      height: 150px;
+    }
+
+    .rounded-rectangle {
+      width: 185px;
+      height: 65px;
+      border-radius: 8px;
+    }
+
+    .circle {
+      width: 90px;
+      height: 90px;
+      border-radius: 50%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="wrapper">
+          <b>Click on a shape to see the ripple</b>
+
+          <div class="ion-activatable ripple-parent rectangle">
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <div class="ion-activatable ripple-parent rounded-rectangle">
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <div class="ion-activatable ripple-parent circle">
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/ripple-effect/basic/index.md b/static/usage/v6/ripple-effect/basic/index.md
new file mode 100644
index 00000000000..3958e27a96f
--- /dev/null
+++ b/static/usage/v6/ripple-effect/basic/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/ripple-effect/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/ripple-effect/basic/javascript.md b/static/usage/v6/ripple-effect/basic/javascript.md
similarity index 100%
rename from static/usage/ripple-effect/basic/javascript.md
rename to static/usage/v6/ripple-effect/basic/javascript.md
diff --git a/static/usage/ripple-effect/basic/react/main_css.md b/static/usage/v6/ripple-effect/basic/react/main_css.md
similarity index 100%
rename from static/usage/ripple-effect/basic/react/main_css.md
rename to static/usage/v6/ripple-effect/basic/react/main_css.md
diff --git a/static/usage/ripple-effect/basic/react/main_tsx.md b/static/usage/v6/ripple-effect/basic/react/main_tsx.md
similarity index 100%
rename from static/usage/ripple-effect/basic/react/main_tsx.md
rename to static/usage/v6/ripple-effect/basic/react/main_tsx.md
diff --git a/static/usage/ripple-effect/basic/vue.md b/static/usage/v6/ripple-effect/basic/vue.md
similarity index 100%
rename from static/usage/ripple-effect/basic/vue.md
rename to static/usage/v6/ripple-effect/basic/vue.md
diff --git a/static/usage/ripple-effect/customizing/angular/example_component_css.md b/static/usage/v6/ripple-effect/customizing/angular/example_component_css.md
similarity index 100%
rename from static/usage/ripple-effect/customizing/angular/example_component_css.md
rename to static/usage/v6/ripple-effect/customizing/angular/example_component_css.md
diff --git a/static/usage/ripple-effect/customizing/angular/example_component_html.md b/static/usage/v6/ripple-effect/customizing/angular/example_component_html.md
similarity index 100%
rename from static/usage/ripple-effect/customizing/angular/example_component_html.md
rename to static/usage/v6/ripple-effect/customizing/angular/example_component_html.md
diff --git a/static/usage/v6/ripple-effect/customizing/demo.html b/static/usage/v6/ripple-effect/customizing/demo.html
new file mode 100644
index 00000000000..6ce7f376ed1
--- /dev/null
+++ b/static/usage/v6/ripple-effect/customizing/demo.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ripple Effect</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .wrapper {
+      display: flex;
+      flex-wrap: wrap;
+
+      align-items: center;
+      justify-content: space-between;
+      text-align: center;
+
+      height: 170px;
+      width: 400px;
+
+      margin: 0 auto;
+    }
+
+    b {
+      width: 100%;
+    }
+
+    .ripple-parent {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      position: relative;
+      overflow: hidden;
+
+      border: 1px solid #ddd;
+
+      user-select: none;
+
+      width: 100%;
+      height: 50px;
+      border-radius: 8px;
+    }
+
+    .custom-parent {
+      color: #de1e7e;
+    }
+
+    .custom-ripple {
+      color: #501ace;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="wrapper">
+          <b>Click on a shape to see the ripple</b>
+
+          <div class="ion-activatable ripple-parent custom-parent">
+            Custom Parent Color
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <div class="ion-activatable ripple-parent">
+            Custom Ripple Color
+            <ion-ripple-effect class="custom-ripple"></ion-ripple-effect>
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/ripple-effect/customizing/index.md b/static/usage/v6/ripple-effect/customizing/index.md
new file mode 100644
index 00000000000..8a5b6b3ac15
--- /dev/null
+++ b/static/usage/v6/ripple-effect/customizing/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/ripple-effect/customizing/demo.html"
+  size="175px"
+/>
diff --git a/static/usage/ripple-effect/customizing/javascript.md b/static/usage/v6/ripple-effect/customizing/javascript.md
similarity index 100%
rename from static/usage/ripple-effect/customizing/javascript.md
rename to static/usage/v6/ripple-effect/customizing/javascript.md
diff --git a/static/usage/ripple-effect/customizing/react/main_css.md b/static/usage/v6/ripple-effect/customizing/react/main_css.md
similarity index 100%
rename from static/usage/ripple-effect/customizing/react/main_css.md
rename to static/usage/v6/ripple-effect/customizing/react/main_css.md
diff --git a/static/usage/ripple-effect/customizing/react/main_tsx.md b/static/usage/v6/ripple-effect/customizing/react/main_tsx.md
similarity index 100%
rename from static/usage/ripple-effect/customizing/react/main_tsx.md
rename to static/usage/v6/ripple-effect/customizing/react/main_tsx.md
diff --git a/static/usage/ripple-effect/customizing/vue.md b/static/usage/v6/ripple-effect/customizing/vue.md
similarity index 100%
rename from static/usage/ripple-effect/customizing/vue.md
rename to static/usage/v6/ripple-effect/customizing/vue.md
diff --git a/static/usage/ripple-effect/type/angular/example_component_css.md b/static/usage/v6/ripple-effect/type/angular/example_component_css.md
similarity index 100%
rename from static/usage/ripple-effect/type/angular/example_component_css.md
rename to static/usage/v6/ripple-effect/type/angular/example_component_css.md
diff --git a/static/usage/ripple-effect/type/angular/example_component_html.md b/static/usage/v6/ripple-effect/type/angular/example_component_html.md
similarity index 100%
rename from static/usage/ripple-effect/type/angular/example_component_html.md
rename to static/usage/v6/ripple-effect/type/angular/example_component_html.md
diff --git a/static/usage/v6/ripple-effect/type/demo.html b/static/usage/v6/ripple-effect/type/demo.html
new file mode 100644
index 00000000000..cfaa115fac9
--- /dev/null
+++ b/static/usage/v6/ripple-effect/type/demo.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ripple Effect</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .wrapper {
+      display: flex;
+      flex-wrap: wrap;
+
+      align-items: center;
+      justify-content: space-between;
+      text-align: center;
+
+      height: 170px;
+      width: 400px;
+
+      margin: 0 auto;
+    }
+
+    b {
+      width: 100%;
+    }
+
+    .ripple-parent {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      position: relative;
+      overflow: hidden;
+
+      border: 1px solid #ddd;
+
+      user-select: none;
+    }
+
+    .rounded-rectangle {
+      width: 250px;
+      height: 75px;
+      border-radius: 8px;
+    }
+
+    .circle {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="wrapper">
+          <b>Click on a shape to see the ripple</b>
+
+          <div class="ion-activatable ripple-parent rounded-rectangle">
+            Bounded
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <div class="ion-activatable ripple-parent circle">
+            Unbounded
+            <ion-ripple-effect type="unbounded"></ion-ripple-effect>
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/ripple-effect/type/index.md b/static/usage/v6/ripple-effect/type/index.md
new file mode 100644
index 00000000000..cf2d9f32720
--- /dev/null
+++ b/static/usage/v6/ripple-effect/type/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/ripple-effect/type/demo.html"
+  size="175px"
+/>
diff --git a/static/usage/ripple-effect/type/javascript.md b/static/usage/v6/ripple-effect/type/javascript.md
similarity index 100%
rename from static/usage/ripple-effect/type/javascript.md
rename to static/usage/v6/ripple-effect/type/javascript.md
diff --git a/static/usage/ripple-effect/type/react/main_css.md b/static/usage/v6/ripple-effect/type/react/main_css.md
similarity index 100%
rename from static/usage/ripple-effect/type/react/main_css.md
rename to static/usage/v6/ripple-effect/type/react/main_css.md
diff --git a/static/usage/ripple-effect/type/react/main_tsx.md b/static/usage/v6/ripple-effect/type/react/main_tsx.md
similarity index 100%
rename from static/usage/ripple-effect/type/react/main_tsx.md
rename to static/usage/v6/ripple-effect/type/react/main_tsx.md
diff --git a/static/usage/ripple-effect/type/vue.md b/static/usage/v6/ripple-effect/type/vue.md
similarity index 100%
rename from static/usage/ripple-effect/type/vue.md
rename to static/usage/v6/ripple-effect/type/vue.md
diff --git a/static/usage/searchbar/basic/angular.md b/static/usage/v6/searchbar/basic/angular.md
similarity index 100%
rename from static/usage/searchbar/basic/angular.md
rename to static/usage/v6/searchbar/basic/angular.md
diff --git a/static/usage/v6/searchbar/basic/demo.html b/static/usage/v6/searchbar/basic/demo.html
new file mode 100644
index 00000000000..e4d6f94b532
--- /dev/null
+++ b/static/usage/v6/searchbar/basic/demo.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar></ion-searchbar>
+        <ion-searchbar placeholder="Custom Placeholder"></ion-searchbar>
+        <ion-searchbar disabled="true" placeholder="Disabled"></ion-searchbar>
+        <ion-searchbar value="Value"></ion-searchbar>
+        <ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/basic/index.md b/static/usage/v6/searchbar/basic/index.md
new file mode 100644
index 00000000000..ae771b76c6e
--- /dev/null
+++ b/static/usage/v6/searchbar/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/basic/demo.html" size="300px" />
diff --git a/static/usage/searchbar/basic/javascript.md b/static/usage/v6/searchbar/basic/javascript.md
similarity index 100%
rename from static/usage/searchbar/basic/javascript.md
rename to static/usage/v6/searchbar/basic/javascript.md
diff --git a/static/usage/searchbar/basic/react.md b/static/usage/v6/searchbar/basic/react.md
similarity index 100%
rename from static/usage/searchbar/basic/react.md
rename to static/usage/v6/searchbar/basic/react.md
diff --git a/static/usage/searchbar/basic/vue.md b/static/usage/v6/searchbar/basic/vue.md
similarity index 100%
rename from static/usage/searchbar/basic/vue.md
rename to static/usage/v6/searchbar/basic/vue.md
diff --git a/static/usage/searchbar/cancel-button/angular.md b/static/usage/v6/searchbar/cancel-button/angular.md
similarity index 100%
rename from static/usage/searchbar/cancel-button/angular.md
rename to static/usage/v6/searchbar/cancel-button/angular.md
diff --git a/static/usage/v6/searchbar/cancel-button/demo.html b/static/usage/v6/searchbar/cancel-button/demo.html
new file mode 100644
index 00000000000..ebfef12609b
--- /dev/null
+++ b/static/usage/v6/searchbar/cancel-button/demo.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar show-cancel-button="focus" placeholder="Show on Focus"></ion-searchbar>
+        <ion-searchbar show-cancel-button="always" placeholder="Always Show"></ion-searchbar>
+        <ion-searchbar show-cancel-button="never" placeholder="Never Show"></ion-searchbar>
+        <ion-searchbar show-cancel-button="always" cancel-button-text="Custom Cancel" cancel-button-icon="trash"
+          placeholder="Custom Cancel Button"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/cancel-button/index.md b/static/usage/v6/searchbar/cancel-button/index.md
new file mode 100644
index 00000000000..c00d5e7b908
--- /dev/null
+++ b/static/usage/v6/searchbar/cancel-button/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/cancel-button/demo.html" size="250px" />
diff --git a/static/usage/searchbar/cancel-button/javascript.md b/static/usage/v6/searchbar/cancel-button/javascript.md
similarity index 100%
rename from static/usage/searchbar/cancel-button/javascript.md
rename to static/usage/v6/searchbar/cancel-button/javascript.md
diff --git a/static/usage/searchbar/cancel-button/react.md b/static/usage/v6/searchbar/cancel-button/react.md
similarity index 100%
rename from static/usage/searchbar/cancel-button/react.md
rename to static/usage/v6/searchbar/cancel-button/react.md
diff --git a/static/usage/searchbar/cancel-button/vue.md b/static/usage/v6/searchbar/cancel-button/vue.md
similarity index 100%
rename from static/usage/searchbar/cancel-button/vue.md
rename to static/usage/v6/searchbar/cancel-button/vue.md
diff --git a/static/usage/searchbar/clear-button/angular.md b/static/usage/v6/searchbar/clear-button/angular.md
similarity index 100%
rename from static/usage/searchbar/clear-button/angular.md
rename to static/usage/v6/searchbar/clear-button/angular.md
diff --git a/static/usage/v6/searchbar/clear-button/demo.html b/static/usage/v6/searchbar/clear-button/demo.html
new file mode 100644
index 00000000000..e85b497b349
--- /dev/null
+++ b/static/usage/v6/searchbar/clear-button/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar show-clear-button="focus" value="Show on Focus"></ion-searchbar>
+        <ion-searchbar show-clear-button="always" value="Always Show"></ion-searchbar>
+        <ion-searchbar show-clear-button="never" value="Never Show"></ion-searchbar>
+        <ion-searchbar show-clear-button="always" clear-icon="trash-bin" value="Custom Clear Icon"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/clear-button/index.md b/static/usage/v6/searchbar/clear-button/index.md
new file mode 100644
index 00000000000..1341421c264
--- /dev/null
+++ b/static/usage/v6/searchbar/clear-button/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/clear-button/demo.html" size="250px" />
diff --git a/static/usage/searchbar/clear-button/javascript.md b/static/usage/v6/searchbar/clear-button/javascript.md
similarity index 100%
rename from static/usage/searchbar/clear-button/javascript.md
rename to static/usage/v6/searchbar/clear-button/javascript.md
diff --git a/static/usage/searchbar/clear-button/react.md b/static/usage/v6/searchbar/clear-button/react.md
similarity index 100%
rename from static/usage/searchbar/clear-button/react.md
rename to static/usage/v6/searchbar/clear-button/react.md
diff --git a/static/usage/searchbar/clear-button/vue.md b/static/usage/v6/searchbar/clear-button/vue.md
similarity index 100%
rename from static/usage/searchbar/clear-button/vue.md
rename to static/usage/v6/searchbar/clear-button/vue.md
diff --git a/static/usage/searchbar/debounce/angular/example_component_html.md b/static/usage/v6/searchbar/debounce/angular/example_component_html.md
similarity index 100%
rename from static/usage/searchbar/debounce/angular/example_component_html.md
rename to static/usage/v6/searchbar/debounce/angular/example_component_html.md
diff --git a/static/usage/searchbar/debounce/angular/example_component_ts.md b/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
similarity index 100%
rename from static/usage/searchbar/debounce/angular/example_component_ts.md
rename to static/usage/v6/searchbar/debounce/angular/example_component_ts.md
diff --git a/static/usage/v6/searchbar/debounce/demo.html b/static/usage/v6/searchbar/debounce/demo.html
new file mode 100644
index 00000000000..ac43a663b20
--- /dev/null
+++ b/static/usage/v6/searchbar/debounce/demo.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar debounce="1000"></ion-searchbar>
+        <ion-list></ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+<script>
+  const searchbar = document.querySelector('ion-searchbar');
+  const list = document.querySelector('ion-list');
+
+  const data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+  let results = [...data];
+  filterItems(results);
+
+  searchbar.addEventListener('ionChange', handleChange);
+
+  function handleChange(event) {
+    const query = event.target.value.toLowerCase();
+    results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
+    filterItems(results);
+  }
+
+  function filterItems(results) {
+    list.replaceChildren();
+
+    let items = '';
+
+    for (let i = 0; i < results.length; i++) {
+      items += `
+        <ion-item>
+          <ion-label>${results[i]}</ion-label>
+        </ion-item>
+      `;
+    }
+
+    list.innerHTML = items;
+  }
+</script>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/debounce/index.md b/static/usage/v6/searchbar/debounce/index.md
new file mode 100644
index 00000000000..c674ac98016
--- /dev/null
+++ b/static/usage/v6/searchbar/debounce/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/searchbar/debounce/demo.html"
+  size="large"
+/>
diff --git a/static/usage/searchbar/debounce/javascript.md b/static/usage/v6/searchbar/debounce/javascript.md
similarity index 100%
rename from static/usage/searchbar/debounce/javascript.md
rename to static/usage/v6/searchbar/debounce/javascript.md
diff --git a/static/usage/searchbar/debounce/react.md b/static/usage/v6/searchbar/debounce/react.md
similarity index 100%
rename from static/usage/searchbar/debounce/react.md
rename to static/usage/v6/searchbar/debounce/react.md
diff --git a/static/usage/searchbar/debounce/vue.md b/static/usage/v6/searchbar/debounce/vue.md
similarity index 100%
rename from static/usage/searchbar/debounce/vue.md
rename to static/usage/v6/searchbar/debounce/vue.md
diff --git a/static/usage/searchbar/search-icon/angular.md b/static/usage/v6/searchbar/search-icon/angular.md
similarity index 100%
rename from static/usage/searchbar/search-icon/angular.md
rename to static/usage/v6/searchbar/search-icon/angular.md
diff --git a/static/usage/v6/searchbar/search-icon/demo.html b/static/usage/v6/searchbar/search-icon/demo.html
new file mode 100644
index 00000000000..33e2793d25d
--- /dev/null
+++ b/static/usage/v6/searchbar/search-icon/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar></ion-searchbar>
+        <ion-searchbar search-icon="search-circle" placeholder="Custom Search Icon"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/search-icon/index.md b/static/usage/v6/searchbar/search-icon/index.md
new file mode 100644
index 00000000000..3dccfc29464
--- /dev/null
+++ b/static/usage/v6/searchbar/search-icon/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/search-icon/demo.html" />
diff --git a/static/usage/searchbar/search-icon/javascript.md b/static/usage/v6/searchbar/search-icon/javascript.md
similarity index 100%
rename from static/usage/searchbar/search-icon/javascript.md
rename to static/usage/v6/searchbar/search-icon/javascript.md
diff --git a/static/usage/searchbar/search-icon/react.md b/static/usage/v6/searchbar/search-icon/react.md
similarity index 100%
rename from static/usage/searchbar/search-icon/react.md
rename to static/usage/v6/searchbar/search-icon/react.md
diff --git a/static/usage/searchbar/search-icon/vue.md b/static/usage/v6/searchbar/search-icon/vue.md
similarity index 100%
rename from static/usage/searchbar/search-icon/vue.md
rename to static/usage/v6/searchbar/search-icon/vue.md
diff --git a/static/usage/searchbar/theming/colors/angular.md b/static/usage/v6/searchbar/theming/colors/angular.md
similarity index 100%
rename from static/usage/searchbar/theming/colors/angular.md
rename to static/usage/v6/searchbar/theming/colors/angular.md
diff --git a/static/usage/v6/searchbar/theming/colors/demo.html b/static/usage/v6/searchbar/theming/colors/demo.html
new file mode 100644
index 00000000000..5701010c08b
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/colors/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar placeholder="Default"></ion-searchbar>
+        <ion-searchbar color="primary" placeholder="Primary"></ion-searchbar>
+        <ion-searchbar color="secondary" placeholder="Secondary"></ion-searchbar>
+        <ion-searchbar color="tertiary" placeholder="Tertiary"></ion-searchbar>
+        <ion-searchbar color="success" placeholder="Success"></ion-searchbar>
+        <ion-searchbar color="warning" placeholder="Warning"></ion-searchbar>
+        <ion-searchbar color="danger" placeholder="Danger"></ion-searchbar>
+        <ion-searchbar color="light" placeholder="Light"></ion-searchbar>
+        <ion-searchbar color="medium" placeholder="Medium"></ion-searchbar>
+        <ion-searchbar color="dark" placeholder="Dark"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/theming/colors/index.md b/static/usage/v6/searchbar/theming/colors/index.md
new file mode 100644
index 00000000000..99500b6e111
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/theming/colors/demo.html" size="large" />
diff --git a/static/usage/searchbar/theming/colors/javascript.md b/static/usage/v6/searchbar/theming/colors/javascript.md
similarity index 100%
rename from static/usage/searchbar/theming/colors/javascript.md
rename to static/usage/v6/searchbar/theming/colors/javascript.md
diff --git a/static/usage/searchbar/theming/colors/react.md b/static/usage/v6/searchbar/theming/colors/react.md
similarity index 100%
rename from static/usage/searchbar/theming/colors/react.md
rename to static/usage/v6/searchbar/theming/colors/react.md
diff --git a/static/usage/searchbar/theming/colors/vue.md b/static/usage/v6/searchbar/theming/colors/vue.md
similarity index 100%
rename from static/usage/searchbar/theming/colors/vue.md
rename to static/usage/v6/searchbar/theming/colors/vue.md
diff --git a/static/usage/searchbar/theming/css-properties/angular/example_component_css.md b/static/usage/v6/searchbar/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/searchbar/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/searchbar/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/searchbar/theming/css-properties/angular/example_component_html.md b/static/usage/v6/searchbar/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/searchbar/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/searchbar/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/searchbar/theming/css-properties/demo.html b/static/usage/v6/searchbar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..bd168970198
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/css-properties/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+
+    ion-searchbar.custom {
+      --background: #19422d;
+      --color: #fff;
+      --placeholder-color: #fff;
+      --icon-color: #fff;
+      --clear-button-color: #fff;
+
+      --border-radius: 4px;
+    }
+
+    ion-searchbar.ios.custom {
+      --cancel-button-color: #19422d;
+    }
+
+    ion-searchbar.md.custom {
+      --cancel-button-color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar show-cancel-button="focus" class="custom"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/theming/css-properties/index.md b/static/usage/v6/searchbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..0f86b4f2c2b
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/searchbar/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/searchbar/theming/css-properties/javascript.md b/static/usage/v6/searchbar/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/searchbar/theming/css-properties/javascript.md
rename to static/usage/v6/searchbar/theming/css-properties/javascript.md
diff --git a/static/usage/searchbar/theming/css-properties/react/main_css.md b/static/usage/v6/searchbar/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/searchbar/theming/css-properties/react/main_css.md
rename to static/usage/v6/searchbar/theming/css-properties/react/main_css.md
diff --git a/static/usage/searchbar/theming/css-properties/react/main_tsx.md b/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/searchbar/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/searchbar/theming/css-properties/vue.md b/static/usage/v6/searchbar/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/searchbar/theming/css-properties/vue.md
rename to static/usage/v6/searchbar/theming/css-properties/vue.md
diff --git a/static/usage/segment-button/basic/angular.md b/static/usage/v6/segment-button/basic/angular.md
similarity index 100%
rename from static/usage/segment-button/basic/angular.md
rename to static/usage/v6/segment-button/basic/angular.md
diff --git a/static/usage/v6/segment-button/basic/demo.html b/static/usage/v6/segment-button/basic/demo.html
new file mode 100644
index 00000000000..280022dbc91
--- /dev/null
+++ b/static/usage/v6/segment-button/basic/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+
+      max-width: 400px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="buttons">
+          <ion-segment-button value="default">
+            <ion-label>Default</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="buttons">
+            <ion-label>Button</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="buttons">
+          <ion-segment-button value="disabled" disabled="true">
+            <ion-label>Disabled</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="buttons">
+            <ion-label>Button</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/segment-button/basic/index.md b/static/usage/v6/segment-button/basic/index.md
new file mode 100644
index 00000000000..ecc96441dbc
--- /dev/null
+++ b/static/usage/v6/segment-button/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/segment-button/basic/demo.html" />
diff --git a/static/usage/segment-button/basic/javascript.md b/static/usage/v6/segment-button/basic/javascript.md
similarity index 100%
rename from static/usage/segment-button/basic/javascript.md
rename to static/usage/v6/segment-button/basic/javascript.md
diff --git a/static/usage/segment-button/basic/react.md b/static/usage/v6/segment-button/basic/react.md
similarity index 100%
rename from static/usage/segment-button/basic/react.md
rename to static/usage/v6/segment-button/basic/react.md
diff --git a/static/usage/segment-button/basic/vue.md b/static/usage/v6/segment-button/basic/vue.md
similarity index 100%
rename from static/usage/segment-button/basic/vue.md
rename to static/usage/v6/segment-button/basic/vue.md
diff --git a/static/usage/segment-button/layout/angular.md b/static/usage/v6/segment-button/layout/angular.md
similarity index 100%
rename from static/usage/segment-button/layout/angular.md
rename to static/usage/v6/segment-button/layout/angular.md
diff --git a/static/usage/v6/segment-button/layout/demo.html b/static/usage/v6/segment-button/layout/demo.html
new file mode 100644
index 00000000000..83bd89fd250
--- /dev/null
+++ b/static/usage/v6/segment-button/layout/demo.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <Viewport="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+
+      max-width: 400px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="heart">
+          <ion-segment-button value="call">
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart">
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin">
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="heart">
+          <ion-segment-button value="call">
+            <ion-label>Call</ion-label>
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart">
+            <ion-label>Heart</ion-label>
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin">
+            <ion-label>Pin</ion-label>
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="heart">
+          <ion-segment-button value="call" layout="icon-bottom">
+            <ion-label>Call</ion-label>
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart" layout="icon-bottom">
+            <ion-label>Heart</ion-label>
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin" layout="icon-bottom">
+            <ion-label>Pin</ion-label>
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="heart">
+          <ion-segment-button value="call" layout="icon-start">
+            <ion-label>Call</ion-label>
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart" layout="icon-start">
+            <ion-label>Heart</ion-label>
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin" layout="icon-start">
+            <ion-label>Pin</ion-label>
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="heart">
+          <ion-segment-button value="call" layout="icon-end">
+            <ion-label>Call</ion-label>
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart" layout="icon-end">
+            <ion-label>Heart</ion-label>
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin" layout="icon-end">
+            <ion-label>Pin</ion-label>
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/segment-button/layout/index.md b/static/usage/v6/segment-button/layout/index.md
new file mode 100644
index 00000000000..2764e5f39bd
--- /dev/null
+++ b/static/usage/v6/segment-button/layout/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/segment-button/layout/demo.html" size="medium" />
diff --git a/static/usage/segment-button/layout/javascript.md b/static/usage/v6/segment-button/layout/javascript.md
similarity index 100%
rename from static/usage/segment-button/layout/javascript.md
rename to static/usage/v6/segment-button/layout/javascript.md
diff --git a/static/usage/segment-button/layout/react.md b/static/usage/v6/segment-button/layout/react.md
similarity index 100%
rename from static/usage/segment-button/layout/react.md
rename to static/usage/v6/segment-button/layout/react.md
diff --git a/static/usage/segment-button/layout/vue.md b/static/usage/v6/segment-button/layout/vue.md
similarity index 100%
rename from static/usage/segment-button/layout/vue.md
rename to static/usage/v6/segment-button/layout/vue.md
diff --git a/static/usage/segment-button/theming/css-properties/angular/example_component_css.md b/static/usage/v6/segment-button/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/segment-button/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/segment-button/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/segment-button/theming/css-properties/angular/example_component_html.md b/static/usage/v6/segment-button/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/segment-button/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/segment-button/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/segment-button/theming/css-properties/demo.html b/static/usage/v6/segment-button/theming/css-properties/demo.html
new file mode 100644
index 00000000000..144ecaa5639
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-properties/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    ion-segment-button {
+      --indicator-color: #08a391;
+    }
+
+    /* Material Design styles */
+    ion-segment-button.md {
+      --color: #000;
+      --color-checked: #08a391;
+      --indicator-height: 4px;
+    }
+
+    /* iOS styles */
+    ion-segment-button.ios {
+      --color: #08a391;
+      --color-checked: #fff;
+      --border-radius: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="custom">
+          <ion-segment-button value="custom">
+            <ion-label>Custom</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="buttons">
+            <ion-label>Buttons</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/segment-button/theming/css-properties/index.md b/static/usage/v6/segment-button/theming/css-properties/index.md
new file mode 100644
index 00000000000..e5d344492c4
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/segment-button/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/segment-button/theming/css-properties/javascript.md b/static/usage/v6/segment-button/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/segment-button/theming/css-properties/javascript.md
rename to static/usage/v6/segment-button/theming/css-properties/javascript.md
diff --git a/static/usage/segment-button/theming/css-properties/react/main_css.md b/static/usage/v6/segment-button/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/segment-button/theming/css-properties/react/main_css.md
rename to static/usage/v6/segment-button/theming/css-properties/react/main_css.md
diff --git a/static/usage/segment-button/theming/css-properties/react/main_tsx.md b/static/usage/v6/segment-button/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/segment-button/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/segment-button/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/segment-button/theming/css-properties/vue.md b/static/usage/v6/segment-button/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/segment-button/theming/css-properties/vue.md
rename to static/usage/v6/segment-button/theming/css-properties/vue.md
diff --git a/static/usage/segment-button/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/segment-button/theming/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/segment-button/theming/css-shadow-parts/angular/example_component_css.md
rename to static/usage/v6/segment-button/theming/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/segment-button/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/segment-button/theming/css-shadow-parts/angular/example_component_html.md
similarity index 100%
rename from static/usage/segment-button/theming/css-shadow-parts/angular/example_component_html.md
rename to static/usage/v6/segment-button/theming/css-shadow-parts/angular/example_component_html.md
diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html b/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..c81886b5b20
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    ion-segment-button::part(indicator-background) {
+      background: #08a391;
+    }
+
+    /* Material Design styles */
+    ion-segment-button.md::part(native) {
+      color: #000;
+    }
+
+    .segment-button-checked.md::part(native) {
+      color: #08a391;
+    }
+
+    ion-segment-button.md::part(indicator-background) {
+      height: 4px;
+    }
+
+    /* iOS styles */
+    ion-segment-button.ios::part(native) {
+      color: #08a391;
+    }
+
+    .segment-button-checked.ios::part(native) {
+      color: #fff;
+    }
+
+    ion-segment-button.ios::part(indicator-background) {
+      border-radius: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="custom">
+          <ion-segment-button value="custom">
+            <ion-label>Custom</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="buttons">
+            <ion-label>Buttons</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/index.md b/static/usage/v6/segment-button/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..1bdbf9bbe01
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/segment-button/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/segment-button/theming/css-shadow-parts/javascript.md b/static/usage/v6/segment-button/theming/css-shadow-parts/javascript.md
similarity index 100%
rename from static/usage/segment-button/theming/css-shadow-parts/javascript.md
rename to static/usage/v6/segment-button/theming/css-shadow-parts/javascript.md
diff --git a/static/usage/segment-button/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/segment-button/theming/css-shadow-parts/react/main_css.md
similarity index 100%
rename from static/usage/segment-button/theming/css-shadow-parts/react/main_css.md
rename to static/usage/v6/segment-button/theming/css-shadow-parts/react/main_css.md
diff --git a/static/usage/segment-button/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/segment-button/theming/css-shadow-parts/react/main_tsx.md
similarity index 100%
rename from static/usage/segment-button/theming/css-shadow-parts/react/main_tsx.md
rename to static/usage/v6/segment-button/theming/css-shadow-parts/react/main_tsx.md
diff --git a/static/usage/segment-button/theming/css-shadow-parts/vue.md b/static/usage/v6/segment-button/theming/css-shadow-parts/vue.md
similarity index 100%
rename from static/usage/segment-button/theming/css-shadow-parts/vue.md
rename to static/usage/v6/segment-button/theming/css-shadow-parts/vue.md
diff --git a/static/usage/segment/basic/angular.md b/static/usage/v6/segment/basic/angular.md
similarity index 100%
rename from static/usage/segment/basic/angular.md
rename to static/usage/v6/segment/basic/angular.md
diff --git a/static/usage/v6/segment/basic/demo.html b/static/usage/v6/segment/basic/demo.html
new file mode 100644
index 00000000000..886c2aafef7
--- /dev/null
+++ b/static/usage/v6/segment/basic/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+
+      max-width: 400px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="default">
+          <ion-segment-button value="default">
+            <ion-label>Default</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment disabled value="disabled">
+          <ion-segment-button value="disabled">
+            <ion-label>Disabled</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/segment/basic/index.md b/static/usage/v6/segment/basic/index.md
new file mode 100644
index 00000000000..7e333956461
--- /dev/null
+++ b/static/usage/v6/segment/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/segment/basic/demo.html" />
diff --git a/static/usage/segment/basic/javascript.md b/static/usage/v6/segment/basic/javascript.md
similarity index 100%
rename from static/usage/segment/basic/javascript.md
rename to static/usage/v6/segment/basic/javascript.md
diff --git a/static/usage/segment/basic/react.md b/static/usage/v6/segment/basic/react.md
similarity index 100%
rename from static/usage/segment/basic/react.md
rename to static/usage/v6/segment/basic/react.md
diff --git a/static/usage/segment/basic/vue.md b/static/usage/v6/segment/basic/vue.md
similarity index 100%
rename from static/usage/segment/basic/vue.md
rename to static/usage/v6/segment/basic/vue.md
diff --git a/static/usage/segment/scrollable/angular.md b/static/usage/v6/segment/scrollable/angular.md
similarity index 100%
rename from static/usage/segment/scrollable/angular.md
rename to static/usage/v6/segment/scrollable/angular.md
diff --git a/static/usage/v6/segment/scrollable/demo.html b/static/usage/v6/segment/scrollable/demo.html
new file mode 100644
index 00000000000..b8f90118667
--- /dev/null
+++ b/static/usage/v6/segment/scrollable/demo.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: grid;
+    }
+
+    ion-segment {
+      width: 400px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment scrollable value="heart">
+          <ion-segment-button value="home">
+            <ion-icon name="home"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart">
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin">
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="star">
+            <ion-icon name="star"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="call">
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="globe">
+            <ion-icon name="globe"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="basket">
+            <ion-icon name="basket"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="barbell">
+            <ion-icon name="barbell"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="trash">
+            <ion-icon name="trash"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="person">
+            <ion-icon name="person"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/segment/scrollable/index.md b/static/usage/v6/segment/scrollable/index.md
new file mode 100644
index 00000000000..7f7e45f94a7
--- /dev/null
+++ b/static/usage/v6/segment/scrollable/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/segment/scrollable/demo.html" size="100px" />
diff --git a/static/usage/segment/scrollable/javascript.md b/static/usage/v6/segment/scrollable/javascript.md
similarity index 100%
rename from static/usage/segment/scrollable/javascript.md
rename to static/usage/v6/segment/scrollable/javascript.md
diff --git a/static/usage/segment/scrollable/react.md b/static/usage/v6/segment/scrollable/react.md
similarity index 100%
rename from static/usage/segment/scrollable/react.md
rename to static/usage/v6/segment/scrollable/react.md
diff --git a/static/usage/segment/scrollable/vue.md b/static/usage/v6/segment/scrollable/vue.md
similarity index 100%
rename from static/usage/segment/scrollable/vue.md
rename to static/usage/v6/segment/scrollable/vue.md
diff --git a/static/usage/segment/theming/colors/angular.md b/static/usage/v6/segment/theming/colors/angular.md
similarity index 100%
rename from static/usage/segment/theming/colors/angular.md
rename to static/usage/v6/segment/theming/colors/angular.md
diff --git a/static/usage/v6/segment/theming/colors/demo.html b/static/usage/v6/segment/theming/colors/demo.html
new file mode 100644
index 00000000000..0f7579af2cd
--- /dev/null
+++ b/static/usage/v6/segment/theming/colors/demo.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+
+      max-width: 400px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="default">
+          <ion-segment-button value="default">
+            <ion-label>Default</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="primary" value="primary">
+          <ion-segment-button value="primary">
+            <ion-label>Primary</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="secondary" value="secondary">
+          <ion-segment-button value="secondary">
+            <ion-label>Secondary</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="tertiary" value="tertiary">
+          <ion-segment-button value="tertiary">
+            <ion-label>Tertiary</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="success" value="success">
+          <ion-segment-button value="success">
+            <ion-label>Success</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="warning" value="warning">
+          <ion-segment-button value="warning">
+            <ion-label>Warning</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="danger" value="danger">
+          <ion-segment-button value="danger">
+            <ion-label>Danger</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="light" value="light">
+          <ion-segment-button value="light">
+            <ion-label>Light</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="medium" value="medium">
+          <ion-segment-button value="medium">
+            <ion-label>Medium</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="dark" value="dark">
+          <ion-segment-button value="dark">
+            <ion-label>Dark</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/segment/theming/colors/index.md b/static/usage/v6/segment/theming/colors/index.md
new file mode 100644
index 00000000000..268e4516c4c
--- /dev/null
+++ b/static/usage/v6/segment/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/segment/theming/colors/demo.html" size="large" />
diff --git a/static/usage/segment/theming/colors/javascript.md b/static/usage/v6/segment/theming/colors/javascript.md
similarity index 100%
rename from static/usage/segment/theming/colors/javascript.md
rename to static/usage/v6/segment/theming/colors/javascript.md
diff --git a/static/usage/segment/theming/colors/react.md b/static/usage/v6/segment/theming/colors/react.md
similarity index 100%
rename from static/usage/segment/theming/colors/react.md
rename to static/usage/v6/segment/theming/colors/react.md
diff --git a/static/usage/segment/theming/colors/vue.md b/static/usage/v6/segment/theming/colors/vue.md
similarity index 100%
rename from static/usage/segment/theming/colors/vue.md
rename to static/usage/v6/segment/theming/colors/vue.md
diff --git a/static/usage/segment/theming/css-properties/angular/example_component_css.md b/static/usage/v6/segment/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/segment/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/segment/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/segment/theming/css-properties/angular/example_component_html.md b/static/usage/v6/segment/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/segment/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/segment/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/segment/theming/css-properties/demo.html b/static/usage/v6/segment/theming/css-properties/demo.html
new file mode 100644
index 00000000000..d6d92fbd835
--- /dev/null
+++ b/static/usage/v6/segment/theming/css-properties/demo.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Note</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    ion-segment {
+      --background: #54dc98;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="custom">
+          <ion-segment-button value="custom">
+            <ion-label>Custom</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/segment/theming/css-properties/index.md b/static/usage/v6/segment/theming/css-properties/index.md
new file mode 100644
index 00000000000..2e18d975045
--- /dev/null
+++ b/static/usage/v6/segment/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/segment/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/segment/theming/css-properties/javascript.md b/static/usage/v6/segment/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/segment/theming/css-properties/javascript.md
rename to static/usage/v6/segment/theming/css-properties/javascript.md
diff --git a/static/usage/segment/theming/css-properties/react/main_css.md b/static/usage/v6/segment/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/segment/theming/css-properties/react/main_css.md
rename to static/usage/v6/segment/theming/css-properties/react/main_css.md
diff --git a/static/usage/segment/theming/css-properties/react/main_tsx.md b/static/usage/v6/segment/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/segment/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/segment/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/segment/theming/css-properties/vue.md b/static/usage/v6/segment/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/segment/theming/css-properties/vue.md
rename to static/usage/v6/segment/theming/css-properties/vue.md
diff --git a/static/usage/select/basic/multiple-selection/angular.md b/static/usage/v6/select/basic/multiple-selection/angular.md
similarity index 100%
rename from static/usage/select/basic/multiple-selection/angular.md
rename to static/usage/v6/select/basic/multiple-selection/angular.md
diff --git a/static/usage/v6/select/basic/multiple-selection/demo.html b/static/usage/v6/select/basic/multiple-selection/demo.html
new file mode 100644
index 00000000000..9847cfa382b
--- /dev/null
+++ b/static/usage/v6/select/basic/multiple-selection/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Multiple Selection</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select placeholder="Select all fruits that apply" multiple="true">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/select/basic/multiple-selection/index.md b/static/usage/v6/select/basic/multiple-selection/index.md
new file mode 100644
index 00000000000..17ce6401317
--- /dev/null
+++ b/static/usage/v6/select/basic/multiple-selection/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/select/basic/multiple-selection/demo.html"
+/>
diff --git a/static/usage/select/basic/multiple-selection/javascript.md b/static/usage/v6/select/basic/multiple-selection/javascript.md
similarity index 100%
rename from static/usage/select/basic/multiple-selection/javascript.md
rename to static/usage/v6/select/basic/multiple-selection/javascript.md
diff --git a/static/usage/select/basic/multiple-selection/react.md b/static/usage/v6/select/basic/multiple-selection/react.md
similarity index 100%
rename from static/usage/select/basic/multiple-selection/react.md
rename to static/usage/v6/select/basic/multiple-selection/react.md
diff --git a/static/usage/select/basic/multiple-selection/vue.md b/static/usage/v6/select/basic/multiple-selection/vue.md
similarity index 100%
rename from static/usage/select/basic/multiple-selection/vue.md
rename to static/usage/v6/select/basic/multiple-selection/vue.md
diff --git a/static/usage/select/basic/responding-to-interaction/angular/example_component_html.md b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/basic/responding-to-interaction/angular/example_component_html.md
rename to static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md
diff --git a/static/usage/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md
similarity index 100%
rename from static/usage/select/basic/responding-to-interaction/angular/example_component_ts.md
rename to static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md
diff --git a/static/usage/v6/select/basic/responding-to-interaction/demo.html b/static/usage/v6/select/basic/responding-to-interaction/demo.html
new file mode 100644
index 00000000000..dbea5d3b8df
--- /dev/null
+++ b/static/usage/v6/select/basic/responding-to-interaction/demo.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Responding to Interaction</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    #log {
+      height: 250px;
+      width: 300px;
+
+      overflow: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div>
+          <ion-list>
+            <ion-item>
+              <ion-select placeholder="Select fruit">
+                <ion-select-option value="apples">Apples</ion-select-option>
+                <ion-select-option value="oranges">Oranges</ion-select-option>
+                <ion-select-option value="bananas">Bananas</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+
+          <div id="log" class="ion-padding"></div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const select = document.querySelector('ion-select');
+    const log = document.querySelector('#log');
+
+    select.addEventListener('ionChange', e => {
+      log.insertAdjacentHTML('afterbegin', `<p>ionChange fired with value: ${e.detail.value}</p>`);
+    });
+
+    select.addEventListener('ionCancel', () => {
+      log.insertAdjacentHTML('afterbegin', '<p>ionCancel fired</p>');
+    });
+
+    select.addEventListener('ionDismiss', () => {
+      log.insertAdjacentHTML('afterbegin', '<p>ionDismiss fired</p>');
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/select/basic/responding-to-interaction/index.md b/static/usage/v6/select/basic/responding-to-interaction/index.md
new file mode 100644
index 00000000000..bb8790eb2a1
--- /dev/null
+++ b/static/usage/v6/select/basic/responding-to-interaction/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/select/basic/responding-to-interaction/demo.html"
+/>
diff --git a/static/usage/select/basic/responding-to-interaction/javascript.md b/static/usage/v6/select/basic/responding-to-interaction/javascript.md
similarity index 100%
rename from static/usage/select/basic/responding-to-interaction/javascript.md
rename to static/usage/v6/select/basic/responding-to-interaction/javascript.md
diff --git a/static/usage/select/basic/responding-to-interaction/react.md b/static/usage/v6/select/basic/responding-to-interaction/react.md
similarity index 100%
rename from static/usage/select/basic/responding-to-interaction/react.md
rename to static/usage/v6/select/basic/responding-to-interaction/react.md
diff --git a/static/usage/select/basic/responding-to-interaction/vue.md b/static/usage/v6/select/basic/responding-to-interaction/vue.md
similarity index 100%
rename from static/usage/select/basic/responding-to-interaction/vue.md
rename to static/usage/v6/select/basic/responding-to-interaction/vue.md
diff --git a/static/usage/select/basic/single-selection/angular.md b/static/usage/v6/select/basic/single-selection/angular.md
similarity index 100%
rename from static/usage/select/basic/single-selection/angular.md
rename to static/usage/v6/select/basic/single-selection/angular.md
diff --git a/static/usage/v6/select/basic/single-selection/demo.html b/static/usage/v6/select/basic/single-selection/demo.html
new file mode 100644
index 00000000000..a8fb4f13e0a
--- /dev/null
+++ b/static/usage/v6/select/basic/single-selection/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Single Selection</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select placeholder="Select fruit">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/select/basic/single-selection/index.md b/static/usage/v6/select/basic/single-selection/index.md
new file mode 100644
index 00000000000..6f72ef51461
--- /dev/null
+++ b/static/usage/v6/select/basic/single-selection/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/select/basic/single-selection/demo.html"
+/>
diff --git a/static/usage/select/basic/single-selection/javascript.md b/static/usage/v6/select/basic/single-selection/javascript.md
similarity index 100%
rename from static/usage/select/basic/single-selection/javascript.md
rename to static/usage/v6/select/basic/single-selection/javascript.md
diff --git a/static/usage/select/basic/single-selection/react.md b/static/usage/v6/select/basic/single-selection/react.md
similarity index 100%
rename from static/usage/select/basic/single-selection/react.md
rename to static/usage/v6/select/basic/single-selection/react.md
diff --git a/static/usage/select/basic/single-selection/vue.md b/static/usage/v6/select/basic/single-selection/vue.md
similarity index 100%
rename from static/usage/select/basic/single-selection/vue.md
rename to static/usage/v6/select/basic/single-selection/vue.md
diff --git a/static/usage/select/customization/button-text/angular.md b/static/usage/v6/select/customization/button-text/angular.md
similarity index 100%
rename from static/usage/select/customization/button-text/angular.md
rename to static/usage/v6/select/customization/button-text/angular.md
diff --git a/static/usage/v6/select/customization/button-text/demo.html b/static/usage/v6/select/customization/button-text/demo.html
new file mode 100644
index 00000000000..1eb72b8dda5
--- /dev/null
+++ b/static/usage/v6/select/customization/button-text/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Button Text</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Alert Interface</ion-label>
+            <ion-select placeholder="Select fruit" ok-text="Choose Fruit" cancel-text="Cancel Choice">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-label>Action Sheet Interface</ion-label>
+            <ion-select interface="action-sheet" placeholder="Select fruit" cancel-text="Cancel Choice">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/select/customization/button-text/index.md b/static/usage/v6/select/customization/button-text/index.md
new file mode 100644
index 00000000000..55f07c1545f
--- /dev/null
+++ b/static/usage/v6/select/customization/button-text/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="350px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/select/customization/button-text/demo.html"
+/>
diff --git a/static/usage/select/customization/button-text/javascript.md b/static/usage/v6/select/customization/button-text/javascript.md
similarity index 100%
rename from static/usage/select/customization/button-text/javascript.md
rename to static/usage/v6/select/customization/button-text/javascript.md
diff --git a/static/usage/select/customization/button-text/react.md b/static/usage/v6/select/customization/button-text/react.md
similarity index 100%
rename from static/usage/select/customization/button-text/react.md
rename to static/usage/v6/select/customization/button-text/react.md
diff --git a/static/usage/select/customization/button-text/vue.md b/static/usage/v6/select/customization/button-text/vue.md
similarity index 100%
rename from static/usage/select/customization/button-text/vue.md
rename to static/usage/v6/select/customization/button-text/vue.md
diff --git a/static/usage/select/customization/interface-options/angular/example_component_html.md b/static/usage/v6/select/customization/interface-options/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/customization/interface-options/angular/example_component_html.md
rename to static/usage/v6/select/customization/interface-options/angular/example_component_html.md
diff --git a/static/usage/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md
similarity index 100%
rename from static/usage/select/customization/interface-options/angular/example_component_ts.md
rename to static/usage/v6/select/customization/interface-options/angular/example_component_ts.md
diff --git a/static/usage/v6/select/customization/interface-options/demo.html b/static/usage/v6/select/customization/interface-options/demo.html
new file mode 100644
index 00000000000..8cff7c7bbf0
--- /dev/null
+++ b/static/usage/v6/select/customization/interface-options/demo.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Interface Options</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container>ion-list {
+      min-width: 400px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Alert</ion-label>
+            <ion-select id="customAlertSelect" interface="alert" placeholder="Select One">
+              <ion-select-option value="bacon">Bacon</ion-select-option>
+              <ion-select-option value="onions">Onions</ion-select-option>
+              <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Popover</ion-label>
+            <ion-select id="customPopoverSelect" interface="popover" placeholder="Select One">
+              <ion-select-option value="brown">Brown</ion-select-option>
+              <ion-select-option value="blonde">Blonde</ion-select-option>
+              <ion-select-option value="red">Red</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Action Sheet</ion-label>
+            <ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
+              <ion-select-option value="red">Red</ion-select-option>
+              <ion-select-option value="green">Green</ion-select-option>
+              <ion-select-option value="blue">Blue</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const customAlertSelect = document.getElementById('customAlertSelect');
+    const customAlertOptions = {
+      header: 'Pizza Toppings',
+      subHeader: 'Select your favorite topping',
+      message: 'Choose only one',
+      translucent: true
+    };
+    customAlertSelect.interfaceOptions = customAlertOptions;
+
+    const customPopoverSelect = document.getElementById('customPopoverSelect');
+    const customPopoverOptions = {
+      header: 'Hair Color',
+      subHeader: 'Select your hair color',
+      message: 'Only select your dominant hair color'
+    };
+    customPopoverSelect.interfaceOptions = customPopoverOptions;
+
+    const customActionSheetSelect = document.getElementById('customActionSheetSelect');
+    const customActionSheetOptions = {
+      header: 'Colors',
+      subHeader: 'Select your favorite color'
+    };
+    customActionSheetSelect.interfaceOptions = customActionSheetOptions;
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/select/customization/interface-options/index.md b/static/usage/v6/select/customization/interface-options/index.md
new file mode 100644
index 00000000000..9649137159c
--- /dev/null
+++ b/static/usage/v6/select/customization/interface-options/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="large"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/select/customization/interface-options/demo.html"
+/>
diff --git a/static/usage/select/customization/interface-options/javascript.md b/static/usage/v6/select/customization/interface-options/javascript.md
similarity index 100%
rename from static/usage/select/customization/interface-options/javascript.md
rename to static/usage/v6/select/customization/interface-options/javascript.md
diff --git a/static/usage/select/customization/interface-options/react.md b/static/usage/v6/select/customization/interface-options/react.md
similarity index 100%
rename from static/usage/select/customization/interface-options/react.md
rename to static/usage/v6/select/customization/interface-options/react.md
diff --git a/static/usage/select/customization/interface-options/vue.md b/static/usage/v6/select/customization/interface-options/vue.md
similarity index 100%
rename from static/usage/select/customization/interface-options/vue.md
rename to static/usage/v6/select/customization/interface-options/vue.md
diff --git a/static/usage/select/customization/styling-select/angular/example_component_css.md b/static/usage/v6/select/customization/styling-select/angular/example_component_css.md
similarity index 100%
rename from static/usage/select/customization/styling-select/angular/example_component_css.md
rename to static/usage/v6/select/customization/styling-select/angular/example_component_css.md
diff --git a/static/usage/select/customization/styling-select/angular/example_component_html.md b/static/usage/v6/select/customization/styling-select/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/customization/styling-select/angular/example_component_html.md
rename to static/usage/v6/select/customization/styling-select/angular/example_component_html.md
diff --git a/static/usage/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md
similarity index 100%
rename from static/usage/select/customization/styling-select/angular/example_component_ts.md
rename to static/usage/v6/select/customization/styling-select/angular/example_component_ts.md
diff --git a/static/usage/v6/select/customization/styling-select/demo.html b/static/usage/v6/select/customization/styling-select/demo.html
new file mode 100644
index 00000000000..429beab68c4
--- /dev/null
+++ b/static/usage/v6/select/customization/styling-select/demo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Styling the Select</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-select {
+      --placeholder-color: #971e49;
+      --placeholder-opacity: 1;
+      width: 100%;
+      justify-content: center;
+    }
+
+    ion-select::part(placeholder),
+    ion-select::part(text) {
+      flex: 0 0 auto;
+    }
+
+    ion-select::part(placeholder)::first-letter {
+      font-size: 24px;
+      font-weight: 500;
+    }
+
+    ion-select::part(text) {
+      color: #545ca7;
+    }
+
+    ion-select::part(icon) {
+      color: #971e49;
+      opacity: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select placeholder="Select fruit">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/select/customization/styling-select/index.md b/static/usage/v6/select/customization/styling-select/index.md
new file mode 100644
index 00000000000..9ee413b42b3
--- /dev/null
+++ b/static/usage/v6/select/customization/styling-select/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/select/customization/styling-select/demo.html"
+/>
diff --git a/static/usage/select/customization/styling-select/javascript.md b/static/usage/v6/select/customization/styling-select/javascript.md
similarity index 100%
rename from static/usage/select/customization/styling-select/javascript.md
rename to static/usage/v6/select/customization/styling-select/javascript.md
diff --git a/static/usage/select/customization/styling-select/react/main_css.md b/static/usage/v6/select/customization/styling-select/react/main_css.md
similarity index 100%
rename from static/usage/select/customization/styling-select/react/main_css.md
rename to static/usage/v6/select/customization/styling-select/react/main_css.md
diff --git a/static/usage/select/customization/styling-select/react/main_tsx.md b/static/usage/v6/select/customization/styling-select/react/main_tsx.md
similarity index 100%
rename from static/usage/select/customization/styling-select/react/main_tsx.md
rename to static/usage/v6/select/customization/styling-select/react/main_tsx.md
diff --git a/static/usage/select/customization/styling-select/vue.md b/static/usage/v6/select/customization/styling-select/vue.md
similarity index 100%
rename from static/usage/select/customization/styling-select/vue.md
rename to static/usage/v6/select/customization/styling-select/vue.md
diff --git a/static/usage/select/interfaces/action-sheet/angular.md b/static/usage/v6/select/interfaces/action-sheet/angular.md
similarity index 100%
rename from static/usage/select/interfaces/action-sheet/angular.md
rename to static/usage/v6/select/interfaces/action-sheet/angular.md
diff --git a/static/usage/v6/select/interfaces/action-sheet/demo.html b/static/usage/v6/select/interfaces/action-sheet/demo.html
new file mode 100644
index 00000000000..bd1dd427e85
--- /dev/null
+++ b/static/usage/v6/select/interfaces/action-sheet/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Action Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select interface="action-sheet" placeholder="Select fruit">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/select/interfaces/action-sheet/index.md b/static/usage/v6/select/interfaces/action-sheet/index.md
new file mode 100644
index 00000000000..96274b7068e
--- /dev/null
+++ b/static/usage/v6/select/interfaces/action-sheet/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/select/interfaces/action-sheet/demo.html"
+/>
diff --git a/static/usage/select/interfaces/action-sheet/javascript.md b/static/usage/v6/select/interfaces/action-sheet/javascript.md
similarity index 100%
rename from static/usage/select/interfaces/action-sheet/javascript.md
rename to static/usage/v6/select/interfaces/action-sheet/javascript.md
diff --git a/static/usage/select/interfaces/action-sheet/react.md b/static/usage/v6/select/interfaces/action-sheet/react.md
similarity index 100%
rename from static/usage/select/interfaces/action-sheet/react.md
rename to static/usage/v6/select/interfaces/action-sheet/react.md
diff --git a/static/usage/select/interfaces/action-sheet/vue.md b/static/usage/v6/select/interfaces/action-sheet/vue.md
similarity index 100%
rename from static/usage/select/interfaces/action-sheet/vue.md
rename to static/usage/v6/select/interfaces/action-sheet/vue.md
diff --git a/static/usage/select/interfaces/popover/angular.md b/static/usage/v6/select/interfaces/popover/angular.md
similarity index 100%
rename from static/usage/select/interfaces/popover/angular.md
rename to static/usage/v6/select/interfaces/popover/angular.md
diff --git a/static/usage/v6/select/interfaces/popover/demo.html b/static/usage/v6/select/interfaces/popover/demo.html
new file mode 100644
index 00000000000..9656b8e303d
--- /dev/null
+++ b/static/usage/v6/select/interfaces/popover/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select interface="popover" placeholder="Select fruit">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/select/interfaces/popover/index.md b/static/usage/v6/select/interfaces/popover/index.md
new file mode 100644
index 00000000000..57d63aa5633
--- /dev/null
+++ b/static/usage/v6/select/interfaces/popover/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="400px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/select/interfaces/popover/demo.html"
+/>
diff --git a/static/usage/select/interfaces/popover/javascript.md b/static/usage/v6/select/interfaces/popover/javascript.md
similarity index 100%
rename from static/usage/select/interfaces/popover/javascript.md
rename to static/usage/v6/select/interfaces/popover/javascript.md
diff --git a/static/usage/select/interfaces/popover/react.md b/static/usage/v6/select/interfaces/popover/react.md
similarity index 100%
rename from static/usage/select/interfaces/popover/react.md
rename to static/usage/v6/select/interfaces/popover/react.md
diff --git a/static/usage/select/interfaces/popover/vue.md b/static/usage/v6/select/interfaces/popover/vue.md
similarity index 100%
rename from static/usage/select/interfaces/popover/vue.md
rename to static/usage/v6/select/interfaces/popover/vue.md
diff --git a/static/usage/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/objects-as-values/multiple-selection/angular/example_component_html.md
rename to static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_html.md
diff --git a/static/usage/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md
similarity index 100%
rename from static/usage/select/objects-as-values/multiple-selection/angular/example_component_ts.md
rename to static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/demo.html b/static/usage/v6/select/objects-as-values/multiple-selection/demo.html
new file mode 100644
index 00000000000..2c3dc70038b
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/demo.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Object Values and Multiple Selection</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container>ion-list {
+      width: 70%;
+    }
+
+    ion-text {
+      white-space: normal;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select placeholder="Select food" multiple="true"></ion-select>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label>
+              Current value:
+              <ion-text></ion-text>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const foods = [
+      {
+        id: 1,
+        name: "Apples",
+        type: "fruit"
+      },
+      {
+        id: 2,
+        name: "Carrots",
+        type: "vegetable"
+      },
+      {
+        id: 3,
+        name: "Cupcakes",
+        type: "dessert"
+      }
+    ];
+
+    const compareWithFn = (o1, o2) => {
+      if (!o1 || !o2) {
+        return o1 === o2;
+      }
+
+      if (Array.isArray(o2)) {
+        return o2.some((o) => o.id === o1.id);
+      }
+
+      return o1.id === o2.id;
+    };
+
+    const selectEl = document.querySelector('ion-select');
+    selectEl.compareWith = compareWithFn;
+
+    foods.forEach((option, i) => {
+      const selectOption = document.createElement('ion-select-option');
+      selectOption.value = option;
+      selectOption.textContent = option.name;
+      selectEl.appendChild(selectOption);
+    });
+
+    const valueLabel = document.querySelector('ion-text');
+    selectEl.addEventListener('ionChange', () => {
+      valueLabel.innerHTML = JSON.stringify(selectEl.value);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/index.md b/static/usage/v6/select/objects-as-values/multiple-selection/index.md
new file mode 100644
index 00000000000..88e711472a3
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/select/objects-as-values/multiple-selection/demo.html"
+/>
diff --git a/static/usage/select/objects-as-values/multiple-selection/javascript.md b/static/usage/v6/select/objects-as-values/multiple-selection/javascript.md
similarity index 100%
rename from static/usage/select/objects-as-values/multiple-selection/javascript.md
rename to static/usage/v6/select/objects-as-values/multiple-selection/javascript.md
diff --git a/static/usage/select/objects-as-values/multiple-selection/react.md b/static/usage/v6/select/objects-as-values/multiple-selection/react.md
similarity index 100%
rename from static/usage/select/objects-as-values/multiple-selection/react.md
rename to static/usage/v6/select/objects-as-values/multiple-selection/react.md
diff --git a/static/usage/select/objects-as-values/multiple-selection/vue.md b/static/usage/v6/select/objects-as-values/multiple-selection/vue.md
similarity index 100%
rename from static/usage/select/objects-as-values/multiple-selection/vue.md
rename to static/usage/v6/select/objects-as-values/multiple-selection/vue.md
diff --git a/static/usage/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/objects-as-values/using-comparewith/angular/example_component_html.md
rename to static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_html.md
diff --git a/static/usage/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md
similarity index 100%
rename from static/usage/select/objects-as-values/using-comparewith/angular/example_component_ts.md
rename to static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/demo.html b/static/usage/v6/select/objects-as-values/using-comparewith/demo.html
new file mode 100644
index 00000000000..ca59d32afb2
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/demo.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Using compareWith</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container>ion-list {
+      width: 70%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select placeholder="Select food"></ion-select>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label>
+              Current value:
+              <ion-text></ion-text>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const foods = [
+      {
+        id: 1,
+        name: "Apples",
+        type: "fruit"
+      },
+      {
+        id: 2,
+        name: "Carrots",
+        type: "vegetable"
+      },
+      {
+        id: 3,
+        name: "Cupcakes",
+        type: "dessert"
+      }
+    ];
+
+    const compareWithFn = (o1, o2) => {
+      return o1 && o2 ? o1.id === o2.id : o1 === o2;
+    };
+
+    const selectEl = document.querySelector('ion-select');
+    selectEl.compareWith = compareWithFn;
+
+    foods.forEach((option, i) => {
+      const selectOption = document.createElement('ion-select-option');
+      selectOption.value = option;
+      selectOption.textContent = option.name;
+      selectEl.appendChild(selectOption);
+    });
+
+    const valueLabel = document.querySelector('ion-text');
+    selectEl.addEventListener('ionChange', () => {
+      valueLabel.innerHTML = JSON.stringify(selectEl.value);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/index.md b/static/usage/v6/select/objects-as-values/using-comparewith/index.md
new file mode 100644
index 00000000000..20f14d19051
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/select/objects-as-values/using-comparewith/demo.html"
+/>
diff --git a/static/usage/select/objects-as-values/using-comparewith/javascript.md b/static/usage/v6/select/objects-as-values/using-comparewith/javascript.md
similarity index 100%
rename from static/usage/select/objects-as-values/using-comparewith/javascript.md
rename to static/usage/v6/select/objects-as-values/using-comparewith/javascript.md
diff --git a/static/usage/select/objects-as-values/using-comparewith/react.md b/static/usage/v6/select/objects-as-values/using-comparewith/react.md
similarity index 100%
rename from static/usage/select/objects-as-values/using-comparewith/react.md
rename to static/usage/v6/select/objects-as-values/using-comparewith/react.md
diff --git a/static/usage/select/objects-as-values/using-comparewith/vue.md b/static/usage/v6/select/objects-as-values/using-comparewith/vue.md
similarity index 100%
rename from static/usage/select/objects-as-values/using-comparewith/vue.md
rename to static/usage/v6/select/objects-as-values/using-comparewith/vue.md
diff --git a/static/usage/skeleton-text/basic/angular/example_component_html.md b/static/usage/v6/skeleton-text/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/skeleton-text/basic/angular/example_component_html.md
rename to static/usage/v6/skeleton-text/basic/angular/example_component_html.md
diff --git a/static/usage/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
similarity index 100%
rename from static/usage/skeleton-text/basic/angular/example_component_ts.md
rename to static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
diff --git a/static/usage/v6/skeleton-text/basic/demo.html b/static/usage/v6/skeleton-text/basic/demo.html
new file mode 100644
index 00000000000..a1cbc3f4f12
--- /dev/null
+++ b/static/usage/v6/skeleton-text/basic/demo.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 300px;
+    }
+
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list></ion-list><br />
+        <ion-button onclick="toggle()">Toggle</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const list = document.querySelector('ion-list');
+    let loaded = false;
+    const toggle = () => {
+      if (loaded) {
+        setSkeletonText();
+      } else {
+        setContent();
+      }
+
+      loaded = !loaded;
+    }
+
+    const setSkeletonText = () => {
+      list.innerHTML = `
+          <ion-list-header>
+            <ion-skeleton-text animated="true" style="width: 80px"></ion-skeleton-text>
+          </ion-list-header>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <ion-skeleton-text animated="true"></ion-skeleton-text>
+            </ion-thumbnail>
+            <ion-label>
+              <h3>
+                <ion-skeleton-text animated="true" style="width: 80%;"></ion-skeleton-text>
+              </h3>
+              <p>
+                <ion-skeleton-text animated="true" style="width: 60%;"></ion-skeleton-text>
+              </p>
+              <p>
+                <ion-skeleton-text animated="true" style="width: 30%;"></ion-skeleton-text>
+              </p>
+            </ion-label>
+          </ion-item>
+        `;
+    }
+
+    const setContent = () => {
+      list.innerHTML = `
+          <ion-list-header>Albums</ion-list-header>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <ion-icon style="width: 100%; height: 100%" name="musical-notes"></ion-icon>
+            </ion-thumbnail>
+            <ion-label>
+              <h3>Abbey Road</h3>
+              <p>The Beatles</p>
+              <p>1969</p>
+            </ion-label>
+          </ion-item>
+        `;
+    }
+
+    setSkeletonText();
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/skeleton-text/basic/index.md b/static/usage/v6/skeleton-text/basic/index.md
new file mode 100644
index 00000000000..a018bee692b
--- /dev/null
+++ b/static/usage/v6/skeleton-text/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/skeleton-text/basic/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/skeleton-text/basic/javascript.md b/static/usage/v6/skeleton-text/basic/javascript.md
similarity index 100%
rename from static/usage/skeleton-text/basic/javascript.md
rename to static/usage/v6/skeleton-text/basic/javascript.md
diff --git a/static/usage/skeleton-text/basic/react.md b/static/usage/v6/skeleton-text/basic/react.md
similarity index 100%
rename from static/usage/skeleton-text/basic/react.md
rename to static/usage/v6/skeleton-text/basic/react.md
diff --git a/static/usage/skeleton-text/basic/vue.md b/static/usage/v6/skeleton-text/basic/vue.md
similarity index 100%
rename from static/usage/skeleton-text/basic/vue.md
rename to static/usage/v6/skeleton-text/basic/vue.md
diff --git a/static/usage/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/skeleton-text/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/skeleton-text/theming/css-properties/angular/example_component_html.md b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/skeleton-text/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/demo.html b/static/usage/v6/skeleton-text/theming/css-properties/demo.html
new file mode 100644
index 00000000000..6a84c2b7943
--- /dev/null
+++ b/static/usage/v6/skeleton-text/theming/css-properties/demo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 300px;
+    }
+
+    .container {
+      flex-direction: column;
+    }
+
+    ion-skeleton-text {
+      --border-radius: 9999px;
+      --background: rgba(188, 0, 255, 0.065);
+      --background-rgb: 188, 0, 255;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-list-header>
+            <ion-skeleton-text animated="true" style="width: 80px"></ion-skeleton-text>
+          </ion-list-header>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <ion-skeleton-text animated="true"></ion-skeleton-text>
+            </ion-thumbnail>
+            <ion-label>
+              <h3>
+                <ion-skeleton-text animated="true" style="width: 80%;"></ion-skeleton-text>
+              </h3>
+              <p>
+                <ion-skeleton-text animated="true" style="width: 60%;"></ion-skeleton-text>
+              </p>
+              <p>
+                <ion-skeleton-text animated="true" style="width: 30%;"></ion-skeleton-text>
+              </p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/index.md b/static/usage/v6/skeleton-text/theming/css-properties/index.md
new file mode 100644
index 00000000000..699559e1649
--- /dev/null
+++ b/static/usage/v6/skeleton-text/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/skeleton-text/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/skeleton-text/theming/css-properties/javascript.md b/static/usage/v6/skeleton-text/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/skeleton-text/theming/css-properties/javascript.md
rename to static/usage/v6/skeleton-text/theming/css-properties/javascript.md
diff --git a/static/usage/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/skeleton-text/theming/css-properties/react/main_css.md
rename to static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md
diff --git a/static/usage/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/skeleton-text/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/skeleton-text/theming/css-properties/vue.md b/static/usage/v6/skeleton-text/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/skeleton-text/theming/css-properties/vue.md
rename to static/usage/v6/skeleton-text/theming/css-properties/vue.md
diff --git a/static/usage/spinner/basic/angular.md b/static/usage/v6/spinner/basic/angular.md
similarity index 100%
rename from static/usage/spinner/basic/angular.md
rename to static/usage/v6/spinner/basic/angular.md
diff --git a/static/usage/v6/spinner/basic/demo.html b/static/usage/v6/spinner/basic/demo.html
new file mode 100644
index 00000000000..cf495c8bd07
--- /dev/null
+++ b/static/usage/v6/spinner/basic/demo.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spinner</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Default</ion-label>
+          <ion-spinner></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Dots</ion-label>
+          <ion-spinner name="dots"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Lines</ion-label>
+          <ion-spinner name="lines"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Lines Small</ion-label>
+          <ion-spinner name="lines-small"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Lines Sharp</ion-label>
+          <ion-spinner name="lines-sharp"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Lines Sharp Small</ion-label>
+          <ion-spinner name="lines-sharp-small"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Bubbles</ion-label>
+          <ion-spinner name="bubbles"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Circles</ion-label>
+          <ion-spinner name="circles"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Circular</ion-label>
+          <ion-spinner name="circular"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Crescent</ion-label>
+          <ion-spinner name="crescent"></ion-spinner>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/spinner/basic/index.md b/static/usage/v6/spinner/basic/index.md
new file mode 100644
index 00000000000..123fc60c553
--- /dev/null
+++ b/static/usage/v6/spinner/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/spinner/basic/demo.html" size="500px" />
diff --git a/static/usage/spinner/basic/javascript.md b/static/usage/v6/spinner/basic/javascript.md
similarity index 100%
rename from static/usage/spinner/basic/javascript.md
rename to static/usage/v6/spinner/basic/javascript.md
diff --git a/static/usage/spinner/basic/react.md b/static/usage/v6/spinner/basic/react.md
similarity index 100%
rename from static/usage/spinner/basic/react.md
rename to static/usage/v6/spinner/basic/react.md
diff --git a/static/usage/spinner/basic/vue.md b/static/usage/v6/spinner/basic/vue.md
similarity index 100%
rename from static/usage/spinner/basic/vue.md
rename to static/usage/v6/spinner/basic/vue.md
diff --git a/static/usage/spinner/theming/colors/angular.md b/static/usage/v6/spinner/theming/colors/angular.md
similarity index 100%
rename from static/usage/spinner/theming/colors/angular.md
rename to static/usage/v6/spinner/theming/colors/angular.md
diff --git a/static/usage/v6/spinner/theming/colors/demo.html b/static/usage/v6/spinner/theming/colors/demo.html
new file mode 100644
index 00000000000..387a56e38d4
--- /dev/null
+++ b/static/usage/v6/spinner/theming/colors/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spinner</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-spinner></ion-spinner>
+        <ion-spinner color="primary"></ion-spinner>
+        <ion-spinner color="secondary"></ion-spinner>
+        <ion-spinner color="tertiary"></ion-spinner>
+        <ion-spinner color="success"></ion-spinner>
+        <ion-spinner color="warning"></ion-spinner>
+        <ion-spinner color="danger"></ion-spinner>
+        <ion-spinner color="light"></ion-spinner>
+        <ion-spinner color="medium"></ion-spinner>
+        <ion-spinner color="dark"></ion-spinner>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/spinner/theming/colors/index.md b/static/usage/v6/spinner/theming/colors/index.md
new file mode 100644
index 00000000000..c8c2337257b
--- /dev/null
+++ b/static/usage/v6/spinner/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/spinner/theming/colors/demo.html" size="100px" />
diff --git a/static/usage/spinner/theming/colors/javascript.md b/static/usage/v6/spinner/theming/colors/javascript.md
similarity index 100%
rename from static/usage/spinner/theming/colors/javascript.md
rename to static/usage/v6/spinner/theming/colors/javascript.md
diff --git a/static/usage/spinner/theming/colors/react.md b/static/usage/v6/spinner/theming/colors/react.md
similarity index 100%
rename from static/usage/spinner/theming/colors/react.md
rename to static/usage/v6/spinner/theming/colors/react.md
diff --git a/static/usage/spinner/theming/colors/vue.md b/static/usage/v6/spinner/theming/colors/vue.md
similarity index 100%
rename from static/usage/spinner/theming/colors/vue.md
rename to static/usage/v6/spinner/theming/colors/vue.md
diff --git a/static/usage/spinner/theming/css-properties/angular/example_component_css.md b/static/usage/v6/spinner/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/spinner/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/spinner/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/spinner/theming/css-properties/angular/example_component_html.md b/static/usage/v6/spinner/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/spinner/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/spinner/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/spinner/theming/css-properties/demo.html b/static/usage/v6/spinner/theming/css-properties/demo.html
new file mode 100644
index 00000000000..6c369bd71fd
--- /dev/null
+++ b/static/usage/v6/spinner/theming/css-properties/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spinner</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-spinner {
+      --color: #54dc98;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-spinner></ion-spinner>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/spinner/theming/css-properties/index.md b/static/usage/v6/spinner/theming/css-properties/index.md
new file mode 100644
index 00000000000..647bccd452a
--- /dev/null
+++ b/static/usage/v6/spinner/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/spinner/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/spinner/theming/css-properties/javascript.md b/static/usage/v6/spinner/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/spinner/theming/css-properties/javascript.md
rename to static/usage/v6/spinner/theming/css-properties/javascript.md
diff --git a/static/usage/spinner/theming/css-properties/react.md b/static/usage/v6/spinner/theming/css-properties/react.md
similarity index 100%
rename from static/usage/spinner/theming/css-properties/react.md
rename to static/usage/v6/spinner/theming/css-properties/react.md
diff --git a/static/usage/spinner/theming/css-properties/react/main_css.md b/static/usage/v6/spinner/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/spinner/theming/css-properties/react/main_css.md
rename to static/usage/v6/spinner/theming/css-properties/react/main_css.md
diff --git a/static/usage/spinner/theming/css-properties/react/main_tsx.md b/static/usage/v6/spinner/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/spinner/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/spinner/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/spinner/theming/css-properties/vue.md b/static/usage/v6/spinner/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/spinner/theming/css-properties/vue.md
rename to static/usage/v6/spinner/theming/css-properties/vue.md
diff --git a/static/usage/split-pane/basic/angular.md b/static/usage/v6/split-pane/basic/angular.md
similarity index 100%
rename from static/usage/split-pane/basic/angular.md
rename to static/usage/v6/split-pane/basic/angular.md
diff --git a/static/usage/v6/split-pane/basic/demo.html b/static/usage/v6/split-pane/basic/demo.html
new file mode 100644
index 00000000000..c514ebd1dbc
--- /dev/null
+++ b/static/usage/v6/split-pane/basic/demo.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spinner</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-split-pane when="xs" content-id="main">
+      <ion-menu content-id="main">
+        <ion-header>
+          <ion-toolbar color="tertiary">
+            <ion-title>Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          Menu Content
+        </ion-content>
+      </ion-menu>
+
+      <div class="ion-page" id="main">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Main View</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          Main View Content
+        </ion-content>
+      </div>
+    </ion-split-pane>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/split-pane/basic/index.md b/static/usage/v6/split-pane/basic/index.md
new file mode 100644
index 00000000000..3b389f6f910
--- /dev/null
+++ b/static/usage/v6/split-pane/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/split-pane/basic/demo.html" size="500px" />
diff --git a/static/usage/split-pane/basic/javascript.md b/static/usage/v6/split-pane/basic/javascript.md
similarity index 100%
rename from static/usage/split-pane/basic/javascript.md
rename to static/usage/v6/split-pane/basic/javascript.md
diff --git a/static/usage/split-pane/basic/react.md b/static/usage/v6/split-pane/basic/react.md
similarity index 100%
rename from static/usage/split-pane/basic/react.md
rename to static/usage/v6/split-pane/basic/react.md
diff --git a/static/usage/split-pane/basic/vue.md b/static/usage/v6/split-pane/basic/vue.md
similarity index 100%
rename from static/usage/split-pane/basic/vue.md
rename to static/usage/v6/split-pane/basic/vue.md
diff --git a/static/usage/split-pane/theming/css-properties/angular/example_component_css.md b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/split-pane/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/split-pane/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/split-pane/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/split-pane/theming/css-properties/demo.html b/static/usage/v6/split-pane/theming/css-properties/demo.html
new file mode 100644
index 00000000000..83353796a32
--- /dev/null
+++ b/static/usage/v6/split-pane/theming/css-properties/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spinner</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-split-pane {
+      --side-width: 350px;
+      --side-max-width: 350px;
+
+      --border: 1px dashed #b3baff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-split-pane when="xs" content-id="main">
+      <ion-menu content-id="main">
+        <ion-header>
+          <ion-toolbar color="tertiary">
+            <ion-title>Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          Menu Content is 350px wide and has a blue dashed border
+        </ion-content>
+      </ion-menu>
+
+      <div class="ion-page" id="main">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Main View</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          Main View Content
+        </ion-content>
+      </div>
+    </ion-split-pane>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/split-pane/theming/css-properties/index.md b/static/usage/v6/split-pane/theming/css-properties/index.md
new file mode 100644
index 00000000000..606294ff0f1
--- /dev/null
+++ b/static/usage/v6/split-pane/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/split-pane/theming/css-properties/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/split-pane/theming/css-properties/javascript.md b/static/usage/v6/split-pane/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/split-pane/theming/css-properties/javascript.md
rename to static/usage/v6/split-pane/theming/css-properties/javascript.md
diff --git a/static/usage/split-pane/theming/css-properties/react/main_css.md b/static/usage/v6/split-pane/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/split-pane/theming/css-properties/react/main_css.md
rename to static/usage/v6/split-pane/theming/css-properties/react/main_css.md
diff --git a/static/usage/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/split-pane/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/split-pane/theming/css-properties/vue.md b/static/usage/v6/split-pane/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/split-pane/theming/css-properties/vue.md
rename to static/usage/v6/split-pane/theming/css-properties/vue.md
diff --git a/static/usage/text/basic/angular.md b/static/usage/v6/text/basic/angular.md
similarity index 100%
rename from static/usage/text/basic/angular.md
rename to static/usage/v6/text/basic/angular.md
diff --git a/static/usage/v6/text/basic/demo.html b/static/usage/v6/text/basic/demo.html
new file mode 100644
index 00000000000..7dda6c901cb
--- /dev/null
+++ b/static/usage/v6/text/basic/demo.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Text</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-wrap: wrap;
+    }
+
+    h1,
+    h2,
+    h3 {
+      margin: 0;
+    }
+
+    p {
+      width: 80%;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-text color="primary">
+          <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+        </ion-text>
+
+        <ion-text color="secondary">
+          <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+        </ion-text>
+
+        <ion-text color="tertiary">
+          <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+        </ion-text>
+
+        <p>
+          <ion-text color="warning">
+            <ion-icon name="warning"></ion-icon>
+          </ion-text>
+          I saw a werewolf with a Chinese menu in his hand.
+          Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
+          He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+          Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
+        </p>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/text/basic/index.md b/static/usage/v6/text/basic/index.md
new file mode 100644
index 00000000000..e54442bcb2d
--- /dev/null
+++ b/static/usage/v6/text/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/text/basic/demo.html" />
diff --git a/static/usage/text/basic/javascript.md b/static/usage/v6/text/basic/javascript.md
similarity index 100%
rename from static/usage/text/basic/javascript.md
rename to static/usage/v6/text/basic/javascript.md
diff --git a/static/usage/text/basic/react.md b/static/usage/v6/text/basic/react.md
similarity index 100%
rename from static/usage/text/basic/react.md
rename to static/usage/v6/text/basic/react.md
diff --git a/static/usage/text/basic/vue.md b/static/usage/v6/text/basic/vue.md
similarity index 100%
rename from static/usage/text/basic/vue.md
rename to static/usage/v6/text/basic/vue.md
diff --git a/static/usage/textarea/autogrow/angular.md b/static/usage/v6/textarea/autogrow/angular.md
similarity index 100%
rename from static/usage/textarea/autogrow/angular.md
rename to static/usage/v6/textarea/autogrow/angular.md
diff --git a/static/usage/v6/textarea/autogrow/demo.html b/static/usage/v6/textarea/autogrow/demo.html
new file mode 100644
index 00000000000..07434619b22
--- /dev/null
+++ b/static/usage/v6/textarea/autogrow/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Textarea - Autogrow</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      padding: 0 40px;
+    }
+
+    ion-item {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-textarea placeholder="Type something here" auto-grow="true"
+            value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus sem, auctor accumsan egestas sed, venenatis at ex. Nam consequat ex odio, suscipit rhoncus orci dictum eget. Aenean sit amet ligula varius felis facilisis lacinia nec volutpat nulla. Duis ullamcorper sit amet turpis sed blandit. Integer pretium massa eu faucibus interdum.">
+          </ion-textarea>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/textarea/autogrow/index.md b/static/usage/v6/textarea/autogrow/index.md
new file mode 100644
index 00000000000..c4f40666a42
--- /dev/null
+++ b/static/usage/v6/textarea/autogrow/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground size="small" code={{ javascript, react, vue, angular }} src="usage/v6/textarea/autogrow/demo.html" />
diff --git a/static/usage/textarea/autogrow/javascript.md b/static/usage/v6/textarea/autogrow/javascript.md
similarity index 100%
rename from static/usage/textarea/autogrow/javascript.md
rename to static/usage/v6/textarea/autogrow/javascript.md
diff --git a/static/usage/textarea/autogrow/react.md b/static/usage/v6/textarea/autogrow/react.md
similarity index 100%
rename from static/usage/textarea/autogrow/react.md
rename to static/usage/v6/textarea/autogrow/react.md
diff --git a/static/usage/textarea/autogrow/vue.md b/static/usage/v6/textarea/autogrow/vue.md
similarity index 100%
rename from static/usage/textarea/autogrow/vue.md
rename to static/usage/v6/textarea/autogrow/vue.md
diff --git a/static/usage/textarea/basic/angular.md b/static/usage/v6/textarea/basic/angular.md
similarity index 100%
rename from static/usage/textarea/basic/angular.md
rename to static/usage/v6/textarea/basic/angular.md
diff --git a/static/usage/v6/textarea/basic/demo.html b/static/usage/v6/textarea/basic/demo.html
new file mode 100644
index 00000000000..54d2bee2efb
--- /dev/null
+++ b/static/usage/v6/textarea/basic/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Textarea - Basic Usage</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: calc(100% - 20px);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Regular textarea</ion-label>
+            <ion-textarea placeholder="Type something here"></ion-textarea>
+          </ion-item>
+          <ion-item>
+            <ion-label>Readonly textarea</ion-label>
+            <ion-textarea readonly="true" placeholder="Can't edit this"></ion-textarea>
+          </ion-item>
+          <ion-item>
+            <ion-label>Disabled textarea</ion-label>
+            <ion-textarea disabled="true" placeholder="Can't type here"></ion-textarea>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/textarea/basic/index.md b/static/usage/v6/textarea/basic/index.md
new file mode 100644
index 00000000000..102465599b8
--- /dev/null
+++ b/static/usage/v6/textarea/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground size="250px" code={{ javascript, react, vue, angular }} src="usage/v6/textarea/basic/demo.html" />
diff --git a/static/usage/textarea/basic/javascript.md b/static/usage/v6/textarea/basic/javascript.md
similarity index 100%
rename from static/usage/textarea/basic/javascript.md
rename to static/usage/v6/textarea/basic/javascript.md
diff --git a/static/usage/textarea/basic/react.md b/static/usage/v6/textarea/basic/react.md
similarity index 100%
rename from static/usage/textarea/basic/react.md
rename to static/usage/v6/textarea/basic/react.md
diff --git a/static/usage/textarea/basic/vue.md b/static/usage/v6/textarea/basic/vue.md
similarity index 100%
rename from static/usage/textarea/basic/vue.md
rename to static/usage/v6/textarea/basic/vue.md
diff --git a/static/usage/textarea/clear-on-edit/angular.md b/static/usage/v6/textarea/clear-on-edit/angular.md
similarity index 100%
rename from static/usage/textarea/clear-on-edit/angular.md
rename to static/usage/v6/textarea/clear-on-edit/angular.md
diff --git a/static/usage/v6/textarea/clear-on-edit/demo.html b/static/usage/v6/textarea/clear-on-edit/demo.html
new file mode 100644
index 00000000000..253bc7a2bc9
--- /dev/null
+++ b/static/usage/v6/textarea/clear-on-edit/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Textarea - Clear on Edit</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      padding: 0 40px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-textarea placeholder="Enter text, leave the textarea, come back, and type to clear" clear-on-edit="true">
+        </ion-textarea>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/textarea/clear-on-edit/index.md b/static/usage/v6/textarea/clear-on-edit/index.md
new file mode 100644
index 00000000000..a6f9da7f7df
--- /dev/null
+++ b/static/usage/v6/textarea/clear-on-edit/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground size="xsmall" code={{ javascript, react, vue, angular }} src="usage/v6/textarea/clear-on-edit/demo.html" />
diff --git a/static/usage/textarea/clear-on-edit/javascript.md b/static/usage/v6/textarea/clear-on-edit/javascript.md
similarity index 100%
rename from static/usage/textarea/clear-on-edit/javascript.md
rename to static/usage/v6/textarea/clear-on-edit/javascript.md
diff --git a/static/usage/textarea/clear-on-edit/react.md b/static/usage/v6/textarea/clear-on-edit/react.md
similarity index 100%
rename from static/usage/textarea/clear-on-edit/react.md
rename to static/usage/v6/textarea/clear-on-edit/react.md
diff --git a/static/usage/textarea/clear-on-edit/vue.md b/static/usage/v6/textarea/clear-on-edit/vue.md
similarity index 100%
rename from static/usage/textarea/clear-on-edit/vue.md
rename to static/usage/v6/textarea/clear-on-edit/vue.md
diff --git a/static/usage/textarea/theming/angular/example_component_css.md b/static/usage/v6/textarea/theming/angular/example_component_css.md
similarity index 100%
rename from static/usage/textarea/theming/angular/example_component_css.md
rename to static/usage/v6/textarea/theming/angular/example_component_css.md
diff --git a/static/usage/textarea/theming/angular/example_component_html.md b/static/usage/v6/textarea/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/textarea/theming/angular/example_component_html.md
rename to static/usage/v6/textarea/theming/angular/example_component_html.md
diff --git a/static/usage/v6/textarea/theming/demo.html b/static/usage/v6/textarea/theming/demo.html
new file mode 100644
index 00000000000..556000b9591
--- /dev/null
+++ b/static/usage/v6/textarea/theming/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Textarea - Theming</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .container {
+      padding: 0 40px;
+    }
+
+    ion-textarea.custom-textarea {
+      --background: #373737;
+      --color: #fff;
+      --padding-end: 10px;
+      --padding-start: 10px;
+      --placeholder-color: #ddd;
+      --placeholder-opacity: 0.8;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-textarea class="custom-textarea" placeholder="Type something here"></ion-textarea>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/textarea/theming/index.md b/static/usage/v6/textarea/theming/index.md
new file mode 100644
index 00000000000..a0a2e12b661
--- /dev/null
+++ b/static/usage/v6/textarea/theming/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  size="xsmall"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/textarea/theming/demo.html"
+/>
diff --git a/static/usage/textarea/theming/javascript.md b/static/usage/v6/textarea/theming/javascript.md
similarity index 100%
rename from static/usage/textarea/theming/javascript.md
rename to static/usage/v6/textarea/theming/javascript.md
diff --git a/static/usage/textarea/theming/react/main_css.md b/static/usage/v6/textarea/theming/react/main_css.md
similarity index 100%
rename from static/usage/textarea/theming/react/main_css.md
rename to static/usage/v6/textarea/theming/react/main_css.md
diff --git a/static/usage/textarea/theming/react/main_tsx.md b/static/usage/v6/textarea/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/textarea/theming/react/main_tsx.md
rename to static/usage/v6/textarea/theming/react/main_tsx.md
diff --git a/static/usage/textarea/theming/vue.md b/static/usage/v6/textarea/theming/vue.md
similarity index 100%
rename from static/usage/textarea/theming/vue.md
rename to static/usage/v6/textarea/theming/vue.md
diff --git a/static/usage/thumbnail/basic/angular.md b/static/usage/v6/thumbnail/basic/angular.md
similarity index 100%
rename from static/usage/thumbnail/basic/angular.md
rename to static/usage/v6/thumbnail/basic/angular.md
diff --git a/static/usage/v6/thumbnail/basic/demo.html b/static/usage/v6/thumbnail/basic/demo.html
new file mode 100644
index 00000000000..e3aabdff4c2
--- /dev/null
+++ b/static/usage/v6/thumbnail/basic/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Thumbnail</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-thumbnail>
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/thumbnail/basic/index.md b/static/usage/v6/thumbnail/basic/index.md
new file mode 100644
index 00000000000..2d616020ba8
--- /dev/null
+++ b/static/usage/v6/thumbnail/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/thumbnail/basic/demo.html" />
diff --git a/static/usage/thumbnail/basic/javascript.md b/static/usage/v6/thumbnail/basic/javascript.md
similarity index 100%
rename from static/usage/thumbnail/basic/javascript.md
rename to static/usage/v6/thumbnail/basic/javascript.md
diff --git a/static/usage/thumbnail/basic/react.md b/static/usage/v6/thumbnail/basic/react.md
similarity index 100%
rename from static/usage/thumbnail/basic/react.md
rename to static/usage/v6/thumbnail/basic/react.md
diff --git a/static/usage/thumbnail/basic/vue.md b/static/usage/v6/thumbnail/basic/vue.md
similarity index 100%
rename from static/usage/thumbnail/basic/vue.md
rename to static/usage/v6/thumbnail/basic/vue.md
diff --git a/static/usage/thumbnail/item/angular.md b/static/usage/v6/thumbnail/item/angular.md
similarity index 100%
rename from static/usage/thumbnail/item/angular.md
rename to static/usage/v6/thumbnail/item/angular.md
diff --git a/static/usage/v6/thumbnail/item/demo.html b/static/usage/v6/thumbnail/item/demo.html
new file mode 100644
index 00000000000..3e8c739fd73
--- /dev/null
+++ b/static/usage/v6/thumbnail/item/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Thumbnail</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+          </ion-thumbnail>
+          <ion-label>Item Thumbnail</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/thumbnail/item/index.md b/static/usage/v6/thumbnail/item/index.md
new file mode 100644
index 00000000000..bd9b1ced946
--- /dev/null
+++ b/static/usage/v6/thumbnail/item/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/thumbnail/item/demo.html" />
diff --git a/static/usage/thumbnail/item/javascript.md b/static/usage/v6/thumbnail/item/javascript.md
similarity index 100%
rename from static/usage/thumbnail/item/javascript.md
rename to static/usage/v6/thumbnail/item/javascript.md
diff --git a/static/usage/thumbnail/item/react.md b/static/usage/v6/thumbnail/item/react.md
similarity index 100%
rename from static/usage/thumbnail/item/react.md
rename to static/usage/v6/thumbnail/item/react.md
diff --git a/static/usage/thumbnail/item/vue.md b/static/usage/v6/thumbnail/item/vue.md
similarity index 100%
rename from static/usage/thumbnail/item/vue.md
rename to static/usage/v6/thumbnail/item/vue.md
diff --git a/static/usage/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/thumbnail/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/thumbnail/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/thumbnail/theming/css-properties/demo.html b/static/usage/v6/thumbnail/theming/css-properties/demo.html
new file mode 100644
index 00000000000..1abdceda339
--- /dev/null
+++ b/static/usage/v6/thumbnail/theming/css-properties/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Thumbnail</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-thumbnail {
+      --size: 140px;
+      --border-radius: 14px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-thumbnail>
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/thumbnail/theming/css-properties/index.md b/static/usage/v6/thumbnail/theming/css-properties/index.md
new file mode 100644
index 00000000000..11823306607
--- /dev/null
+++ b/static/usage/v6/thumbnail/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/thumbnail/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/thumbnail/theming/css-properties/javascript.md b/static/usage/v6/thumbnail/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/thumbnail/theming/css-properties/javascript.md
rename to static/usage/v6/thumbnail/theming/css-properties/javascript.md
diff --git a/static/usage/thumbnail/theming/css-properties/react/main_css.md b/static/usage/v6/thumbnail/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/thumbnail/theming/css-properties/react/main_css.md
rename to static/usage/v6/thumbnail/theming/css-properties/react/main_css.md
diff --git a/static/usage/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/thumbnail/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/thumbnail/theming/css-properties/vue.md b/static/usage/v6/thumbnail/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/thumbnail/theming/css-properties/vue.md
rename to static/usage/v6/thumbnail/theming/css-properties/vue.md
diff --git a/static/usage/title/basic/angular.md b/static/usage/v6/title/basic/angular.md
similarity index 100%
rename from static/usage/title/basic/angular.md
rename to static/usage/v6/title/basic/angular.md
diff --git a/static/usage/v6/title/basic/demo.html b/static/usage/v6/title/basic/demo.html
new file mode 100644
index 00000000000..13b1b317ce0
--- /dev/null
+++ b/static/usage/v6/title/basic/demo.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Title</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Title</ion-title>
+      </ion-toolbar>
+    </ion-header>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/title/basic/index.md b/static/usage/v6/title/basic/index.md
new file mode 100644
index 00000000000..e4c3b2dbdfb
--- /dev/null
+++ b/static/usage/v6/title/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/title/basic/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/title/basic/javascript.md b/static/usage/v6/title/basic/javascript.md
similarity index 100%
rename from static/usage/title/basic/javascript.md
rename to static/usage/v6/title/basic/javascript.md
diff --git a/static/usage/title/basic/react.md b/static/usage/v6/title/basic/react.md
similarity index 100%
rename from static/usage/title/basic/react.md
rename to static/usage/v6/title/basic/react.md
diff --git a/static/usage/title/basic/vue.md b/static/usage/v6/title/basic/vue.md
similarity index 100%
rename from static/usage/title/basic/vue.md
rename to static/usage/v6/title/basic/vue.md
diff --git a/static/usage/title/collapsible-large-title/basic/angular.md b/static/usage/v6/title/collapsible-large-title/basic/angular.md
similarity index 100%
rename from static/usage/title/collapsible-large-title/basic/angular.md
rename to static/usage/v6/title/collapsible-large-title/basic/angular.md
diff --git a/static/usage/v6/title/collapsible-large-title/basic/demo.html b/static/usage/v6/title/collapsible-large-title/basic/demo.html
new file mode 100644
index 00000000000..e67c7bd3a33
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/basic/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Title</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-title>Title</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Title</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <div class="ion-padding">
+        Scroll the list to see the title collapse.
+      </div>
+
+      <ion-list>
+        <ion-item>Item 1</ion-item>
+        <ion-item>Item 2</ion-item>
+        <ion-item>Item 3</ion-item>
+        <ion-item>Item 4</ion-item>
+        <ion-item>Item 5</ion-item>
+        <ion-item>Item 6</ion-item>
+        <ion-item>Item 7</ion-item>
+        <ion-item>Item 8</ion-item>
+        <ion-item>Item 9</ion-item>
+        <ion-item>Item 10</ion-item>
+        <ion-item>Item 11</ion-item>
+        <ion-item>Item 12</ion-item>
+        <ion-item>Item 13</ion-item>
+        <ion-item>Item 14</ion-item>
+        <ion-item>Item 15</ion-item>
+        <ion-item>Item 16</ion-item>
+        <ion-item>Item 17</ion-item>
+        <ion-item>Item 18</ion-item>
+        <ion-item>Item 19</ion-item>
+        <ion-item>Item 20</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/title/collapsible-large-title/basic/index.md b/static/usage/v6/title/collapsible-large-title/basic/index.md
new file mode 100644
index 00000000000..18dc86dd256
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/basic/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  mode="ios"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/title/collapsible-large-title/basic/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/title/collapsible-large-title/basic/javascript.md b/static/usage/v6/title/collapsible-large-title/basic/javascript.md
similarity index 100%
rename from static/usage/title/collapsible-large-title/basic/javascript.md
rename to static/usage/v6/title/collapsible-large-title/basic/javascript.md
diff --git a/static/usage/title/collapsible-large-title/basic/react.md b/static/usage/v6/title/collapsible-large-title/basic/react.md
similarity index 100%
rename from static/usage/title/collapsible-large-title/basic/react.md
rename to static/usage/v6/title/collapsible-large-title/basic/react.md
diff --git a/static/usage/title/collapsible-large-title/basic/vue.md b/static/usage/v6/title/collapsible-large-title/basic/vue.md
similarity index 100%
rename from static/usage/title/collapsible-large-title/basic/vue.md
rename to static/usage/v6/title/collapsible-large-title/basic/vue.md
diff --git a/static/usage/title/collapsible-large-title/buttons/angular.md b/static/usage/v6/title/collapsible-large-title/buttons/angular.md
similarity index 100%
rename from static/usage/title/collapsible-large-title/buttons/angular.md
rename to static/usage/v6/title/collapsible-large-title/buttons/angular.md
diff --git a/static/usage/v6/title/collapsible-large-title/buttons/demo.html b/static/usage/v6/title/collapsible-large-title/buttons/demo.html
new file mode 100644
index 00000000000..ecf88cf5305
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/buttons/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Title</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-title>Title</ion-title>
+        <ion-buttons collapse="true" slot="end">
+          <ion-button>Button</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Title</ion-title>
+          <ion-buttons collapse="true" slot="end">
+            <ion-button>Button</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <div class="ion-padding">
+        Scroll the list to see the title & buttons collapse.
+      </div>
+
+      <ion-list>
+        <ion-item>Item 1</ion-item>
+        <ion-item>Item 2</ion-item>
+        <ion-item>Item 3</ion-item>
+        <ion-item>Item 4</ion-item>
+        <ion-item>Item 5</ion-item>
+        <ion-item>Item 6</ion-item>
+        <ion-item>Item 7</ion-item>
+        <ion-item>Item 8</ion-item>
+        <ion-item>Item 9</ion-item>
+        <ion-item>Item 10</ion-item>
+        <ion-item>Item 11</ion-item>
+        <ion-item>Item 12</ion-item>
+        <ion-item>Item 13</ion-item>
+        <ion-item>Item 14</ion-item>
+        <ion-item>Item 15</ion-item>
+        <ion-item>Item 16</ion-item>
+        <ion-item>Item 17</ion-item>
+        <ion-item>Item 18</ion-item>
+        <ion-item>Item 19</ion-item>
+        <ion-item>Item 20</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/title/collapsible-large-title/buttons/index.md b/static/usage/v6/title/collapsible-large-title/buttons/index.md
new file mode 100644
index 00000000000..723de799c4c
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/buttons/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  mode="ios"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/title/collapsible-large-title/buttons/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/title/collapsible-large-title/buttons/javascript.md b/static/usage/v6/title/collapsible-large-title/buttons/javascript.md
similarity index 100%
rename from static/usage/title/collapsible-large-title/buttons/javascript.md
rename to static/usage/v6/title/collapsible-large-title/buttons/javascript.md
diff --git a/static/usage/title/collapsible-large-title/buttons/react.md b/static/usage/v6/title/collapsible-large-title/buttons/react.md
similarity index 100%
rename from static/usage/title/collapsible-large-title/buttons/react.md
rename to static/usage/v6/title/collapsible-large-title/buttons/react.md
diff --git a/static/usage/title/collapsible-large-title/buttons/vue.md b/static/usage/v6/title/collapsible-large-title/buttons/vue.md
similarity index 100%
rename from static/usage/title/collapsible-large-title/buttons/vue.md
rename to static/usage/v6/title/collapsible-large-title/buttons/vue.md
diff --git a/static/usage/title/theming/css-properties/angular/example_component_html.md b/static/usage/v6/title/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/title/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/title/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/title/theming/css-properties/angular/global_css.md b/static/usage/v6/title/theming/css-properties/angular/global_css.md
similarity index 100%
rename from static/usage/title/theming/css-properties/angular/global_css.md
rename to static/usage/v6/title/theming/css-properties/angular/global_css.md
diff --git a/static/usage/v6/title/theming/css-properties/demo.html b/static/usage/v6/title/theming/css-properties/demo.html
new file mode 100644
index 00000000000..202131c46ac
--- /dev/null
+++ b/static/usage/v6/title/theming/css-properties/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Title</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-title.title-large {
+      color: #C897D8;
+      font-size: 30px;
+    }
+
+    ion-title {
+      --color: #000;
+    }
+
+    ion-toolbar {
+      --background: #C897D8;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-title>Title</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Title</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-list>
+        <ion-item>Item 1</ion-item>
+        <ion-item>Item 2</ion-item>
+        <ion-item>Item 3</ion-item>
+        <ion-item>Item 4</ion-item>
+        <ion-item>Item 5</ion-item>
+        <ion-item>Item 6</ion-item>
+        <ion-item>Item 7</ion-item>
+        <ion-item>Item 8</ion-item>
+        <ion-item>Item 9</ion-item>
+        <ion-item>Item 10</ion-item>
+        <ion-item>Item 11</ion-item>
+        <ion-item>Item 12</ion-item>
+        <ion-item>Item 13</ion-item>
+        <ion-item>Item 14</ion-item>
+        <ion-item>Item 15</ion-item>
+        <ion-item>Item 16</ion-item>
+        <ion-item>Item 17</ion-item>
+        <ion-item>Item 18</ion-item>
+        <ion-item>Item 19</ion-item>
+        <ion-item>Item 20</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/title/theming/css-properties/index.md b/static/usage/v6/title/theming/css-properties/index.md
new file mode 100644
index 00000000000..148a0bd5d9e
--- /dev/null
+++ b/static/usage/v6/title/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/global.css': angular_global_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/title/theming/css-properties/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/title/theming/css-properties/javascript.md b/static/usage/v6/title/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/title/theming/css-properties/javascript.md
rename to static/usage/v6/title/theming/css-properties/javascript.md
diff --git a/static/usage/title/theming/css-properties/react/main_css.md b/static/usage/v6/title/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/title/theming/css-properties/react/main_css.md
rename to static/usage/v6/title/theming/css-properties/react/main_css.md
diff --git a/static/usage/title/theming/css-properties/react/main_tsx.md b/static/usage/v6/title/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/title/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/title/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/title/theming/css-properties/vue.md b/static/usage/v6/title/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/title/theming/css-properties/vue.md
rename to static/usage/v6/title/theming/css-properties/vue.md
diff --git a/static/usage/toast/buttons/angular/example_component_html.md b/static/usage/v6/toast/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/toast/buttons/angular/example_component_html.md
rename to static/usage/v6/toast/buttons/angular/example_component_html.md
diff --git a/static/usage/toast/buttons/angular/example_component_ts.md b/static/usage/v6/toast/buttons/angular/example_component_ts.md
similarity index 100%
rename from static/usage/toast/buttons/angular/example_component_ts.md
rename to static/usage/v6/toast/buttons/angular/example_component_ts.md
diff --git a/static/usage/v6/toast/buttons/demo.html b/static/usage/v6/toast/buttons/demo.html
new file mode 100644
index 00000000000..261a6e53cc7
--- /dev/null
+++ b/static/usage/v6/toast/buttons/demo.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    .container p {
+      margin-bottom: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentToast()">Click Me</ion-button>
+        <p id="handlerResult"></p>
+        <p id="roleResult"></p>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
+  <script>
+    const handlerOutput = document.querySelector('#handlerResult');
+    const roleOutput = document.querySelector('#roleResult');
+
+    async function presentToast() {
+      const toast = await toastController.create({
+        message: 'Hello World!',
+        duration: 3000,
+        buttons: [
+          {
+            text: 'More Info',
+            role: 'info',
+            handler: () => { handlerOutput.innerText = 'More Info clicked'; }
+          },
+          {
+            text: 'Dismiss',
+            role: 'cancel',
+            handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
+          }
+        ]
+      });
+
+      await toast.present();
+
+      const { role } = await toast.onDidDismiss();
+      roleOutput.innerText = `Dismissed with role: ${role}`;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toast/buttons/index.md b/static/usage/v6/toast/buttons/index.md
new file mode 100644
index 00000000000..436ac3e16b7
--- /dev/null
+++ b/static/usage/v6/toast/buttons/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/toast/buttons/demo.html"
+/>
diff --git a/static/usage/toast/buttons/javascript.md b/static/usage/v6/toast/buttons/javascript.md
similarity index 100%
rename from static/usage/toast/buttons/javascript.md
rename to static/usage/v6/toast/buttons/javascript.md
diff --git a/static/usage/toast/buttons/react.md b/static/usage/v6/toast/buttons/react.md
similarity index 100%
rename from static/usage/toast/buttons/react.md
rename to static/usage/v6/toast/buttons/react.md
diff --git a/static/usage/toast/buttons/vue.md b/static/usage/v6/toast/buttons/vue.md
similarity index 100%
rename from static/usage/toast/buttons/vue.md
rename to static/usage/v6/toast/buttons/vue.md
diff --git a/static/usage/toast/icon/angular/example_component_html.md b/static/usage/v6/toast/icon/angular/example_component_html.md
similarity index 100%
rename from static/usage/toast/icon/angular/example_component_html.md
rename to static/usage/v6/toast/icon/angular/example_component_html.md
diff --git a/static/usage/toast/icon/angular/example_component_ts.md b/static/usage/v6/toast/icon/angular/example_component_ts.md
similarity index 100%
rename from static/usage/toast/icon/angular/example_component_ts.md
rename to static/usage/v6/toast/icon/angular/example_component_ts.md
diff --git a/static/usage/v6/toast/icon/demo.html b/static/usage/v6/toast/icon/demo.html
new file mode 100644
index 00000000000..efecadbf937
--- /dev/null
+++ b/static/usage/v6/toast/icon/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentToast()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
+  <script>
+    async function presentToast() {
+      const toast = await this.toastController.create({
+        message: 'Hello World!',
+        duration: 1500,
+        icon: 'globe'
+      });
+
+      await toast.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toast/icon/index.md b/static/usage/v6/toast/icon/index.md
new file mode 100644
index 00000000000..55fe84650eb
--- /dev/null
+++ b/static/usage/v6/toast/icon/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/toast/icon/demo.html"
+/>
diff --git a/static/usage/toast/icon/javascript.md b/static/usage/v6/toast/icon/javascript.md
similarity index 100%
rename from static/usage/toast/icon/javascript.md
rename to static/usage/v6/toast/icon/javascript.md
diff --git a/static/usage/toast/icon/react.md b/static/usage/v6/toast/icon/react.md
similarity index 100%
rename from static/usage/toast/icon/react.md
rename to static/usage/v6/toast/icon/react.md
diff --git a/static/usage/toast/icon/vue.md b/static/usage/v6/toast/icon/vue.md
similarity index 100%
rename from static/usage/toast/icon/vue.md
rename to static/usage/v6/toast/icon/vue.md
diff --git a/static/usage/toast/presenting/controller/angular/example_component_html.md b/static/usage/v6/toast/presenting/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/toast/presenting/controller/angular/example_component_html.md
rename to static/usage/v6/toast/presenting/controller/angular/example_component_html.md
diff --git a/static/usage/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
similarity index 100%
rename from static/usage/toast/presenting/controller/angular/example_component_ts.md
rename to static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
diff --git a/static/usage/v6/toast/presenting/controller/demo.html b/static/usage/v6/toast/presenting/controller/demo.html
new file mode 100644
index 00000000000..24cc1fcb8d0
--- /dev/null
+++ b/static/usage/v6/toast/presenting/controller/demo.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="container">
+        <ion-button expand="block" onclick="presentToast('top')">Present Toast At the Top</ion-button>
+        <ion-button expand="block" onclick="presentToast('middle')">Present Toast At the Middle</ion-button>
+        <ion-button expand="block" onclick="presentToast('bottom')">Present Toast At the Bottom</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
+  <script>
+    async function presentToast(position) {
+      const toast = await this.toastController.create({
+        message: 'Hello World!',
+        duration: 1500,
+        position: position
+      });
+
+      await toast.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toast/presenting/controller/index.md b/static/usage/v6/toast/presenting/controller/index.md
new file mode 100644
index 00000000000..82ba56fdde3
--- /dev/null
+++ b/static/usage/v6/toast/presenting/controller/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/toast/presenting/controller/demo.html"
+/>
diff --git a/static/usage/toast/presenting/controller/javascript.md b/static/usage/v6/toast/presenting/controller/javascript.md
similarity index 100%
rename from static/usage/toast/presenting/controller/javascript.md
rename to static/usage/v6/toast/presenting/controller/javascript.md
diff --git a/static/usage/toast/presenting/controller/react.md b/static/usage/v6/toast/presenting/controller/react.md
similarity index 100%
rename from static/usage/toast/presenting/controller/react.md
rename to static/usage/v6/toast/presenting/controller/react.md
diff --git a/static/usage/toast/presenting/controller/vue.md b/static/usage/v6/toast/presenting/controller/vue.md
similarity index 100%
rename from static/usage/toast/presenting/controller/vue.md
rename to static/usage/v6/toast/presenting/controller/vue.md
diff --git a/static/usage/toast/theming/angular/example_component_html.md b/static/usage/v6/toast/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/toast/theming/angular/example_component_html.md
rename to static/usage/v6/toast/theming/angular/example_component_html.md
diff --git a/static/usage/toast/theming/angular/example_component_ts.md b/static/usage/v6/toast/theming/angular/example_component_ts.md
similarity index 100%
rename from static/usage/toast/theming/angular/example_component_ts.md
rename to static/usage/v6/toast/theming/angular/example_component_ts.md
diff --git a/static/usage/toast/theming/angular/global_css.md b/static/usage/v6/toast/theming/angular/global_css.md
similarity index 100%
rename from static/usage/toast/theming/angular/global_css.md
rename to static/usage/v6/toast/theming/angular/global_css.md
diff --git a/static/usage/v6/toast/theming/demo.html b/static/usage/v6/toast/theming/demo.html
new file mode 100644
index 00000000000..cdbffb5541c
--- /dev/null
+++ b/static/usage/v6/toast/theming/demo.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-toast.custom-toast {
+      --background: #F4F4FA;
+      --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+      --color: #4b4a50;
+    }
+
+    ion-toast.custom-toast::part(message) {
+      font-style: italic;
+    }
+
+    ion-toast.custom-toast::part(button) {
+      border-left: 1px solid #d2d2d2;
+      color: #030207;
+      font-size: 15px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentToast()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
+  <script>
+    async function presentToast() {
+      const toast = await this.toastController.create({
+        message: 'Hello Styled World!',
+        duration: 3000,
+        cssClass: 'custom-toast',
+        buttons: [
+          {
+            text: 'Dismiss',
+            role: 'cancel'
+          }
+        ],
+      });
+
+      await toast.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toast/theming/index.md b/static/usage/v6/toast/theming/index.md
new file mode 100644
index 00000000000..0d6efeba58e
--- /dev/null
+++ b/static/usage/v6/toast/theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v6/toast/theming/demo.html"
+/>
diff --git a/static/usage/toast/theming/javascript.md b/static/usage/v6/toast/theming/javascript.md
similarity index 100%
rename from static/usage/toast/theming/javascript.md
rename to static/usage/v6/toast/theming/javascript.md
diff --git a/static/usage/toast/theming/react/main_css.md b/static/usage/v6/toast/theming/react/main_css.md
similarity index 100%
rename from static/usage/toast/theming/react/main_css.md
rename to static/usage/v6/toast/theming/react/main_css.md
diff --git a/static/usage/toast/theming/react/main_tsx.md b/static/usage/v6/toast/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/toast/theming/react/main_tsx.md
rename to static/usage/v6/toast/theming/react/main_tsx.md
diff --git a/static/usage/toast/theming/vue.md b/static/usage/v6/toast/theming/vue.md
similarity index 100%
rename from static/usage/toast/theming/vue.md
rename to static/usage/v6/toast/theming/vue.md
diff --git a/static/usage/toggle/basic/angular.md b/static/usage/v6/toggle/basic/angular.md
similarity index 100%
rename from static/usage/toggle/basic/angular.md
rename to static/usage/v6/toggle/basic/angular.md
diff --git a/static/usage/v6/toggle/basic/demo.html b/static/usage/v6/toggle/basic/demo.html
new file mode 100644
index 00000000000..5e45931c3b4
--- /dev/null
+++ b/static/usage/v6/toggle/basic/demo.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toggle</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Default Toggle</ion-label>
+            <ion-toggle slot="end"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Checked Toggle</ion-label>
+            <ion-toggle slot="end" checked="true"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Disabled Toggle</ion-label>
+            <ion-toggle slot="end" disabled="true"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Disabled Checked Toggle</ion-label>
+            <ion-toggle slot="end" checked="true" disabled="true"></ion-toggle>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toggle/basic/index.md b/static/usage/v6/toggle/basic/index.md
new file mode 100644
index 00000000000..0d6975540e7
--- /dev/null
+++ b/static/usage/v6/toggle/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/toggle/basic/demo.html" size="250px" />
diff --git a/static/usage/toggle/basic/javascript.md b/static/usage/v6/toggle/basic/javascript.md
similarity index 100%
rename from static/usage/toggle/basic/javascript.md
rename to static/usage/v6/toggle/basic/javascript.md
diff --git a/static/usage/toggle/basic/react.md b/static/usage/v6/toggle/basic/react.md
similarity index 100%
rename from static/usage/toggle/basic/react.md
rename to static/usage/v6/toggle/basic/react.md
diff --git a/static/usage/toggle/basic/vue.md b/static/usage/v6/toggle/basic/vue.md
similarity index 100%
rename from static/usage/toggle/basic/vue.md
rename to static/usage/v6/toggle/basic/vue.md
diff --git a/static/usage/toggle/on-off/angular.md b/static/usage/v6/toggle/on-off/angular.md
similarity index 100%
rename from static/usage/toggle/on-off/angular.md
rename to static/usage/v6/toggle/on-off/angular.md
diff --git a/static/usage/v6/toggle/on-off/demo.html b/static/usage/v6/toggle/on-off/demo.html
new file mode 100644
index 00000000000..7622a018101
--- /dev/null
+++ b/static/usage/v6/toggle/on-off/demo.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toggle</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toggle enable-on-off-labels="true"></ion-toggle>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toggle/on-off/index.md b/static/usage/v6/toggle/on-off/index.md
new file mode 100644
index 00000000000..a3a005e883f
--- /dev/null
+++ b/static/usage/v6/toggle/on-off/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/toggle/on-off/demo.html" />
diff --git a/static/usage/toggle/on-off/javascript.md b/static/usage/v6/toggle/on-off/javascript.md
similarity index 100%
rename from static/usage/toggle/on-off/javascript.md
rename to static/usage/v6/toggle/on-off/javascript.md
diff --git a/static/usage/toggle/on-off/react.md b/static/usage/v6/toggle/on-off/react.md
similarity index 100%
rename from static/usage/toggle/on-off/react.md
rename to static/usage/v6/toggle/on-off/react.md
diff --git a/static/usage/toggle/on-off/vue.md b/static/usage/v6/toggle/on-off/vue.md
similarity index 100%
rename from static/usage/toggle/on-off/vue.md
rename to static/usage/v6/toggle/on-off/vue.md
diff --git a/static/usage/toggle/theming/colors/angular.md b/static/usage/v6/toggle/theming/colors/angular.md
similarity index 100%
rename from static/usage/toggle/theming/colors/angular.md
rename to static/usage/v6/toggle/theming/colors/angular.md
diff --git a/static/usage/v6/toggle/theming/colors/demo.html b/static/usage/v6/toggle/theming/colors/demo.html
new file mode 100644
index 00000000000..e2e115e84bf
--- /dev/null
+++ b/static/usage/v6/toggle/theming/colors/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toggle</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toggle color="primary" checked="true"></ion-toggle>
+        <ion-toggle color="secondary" checked="true"></ion-toggle>
+        <ion-toggle color="tertiary" checked="true"></ion-toggle>
+        <ion-toggle color="success" checked="true"></ion-toggle>
+        <ion-toggle color="warning" checked="true"></ion-toggle>
+        <ion-toggle color="danger" checked="true"></ion-toggle>
+        <ion-toggle color="light" checked="true"></ion-toggle>
+        <ion-toggle color="medium" checked="true"></ion-toggle>
+        <ion-toggle color="dark" checked="true"></ion-toggle>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toggle/theming/colors/index.md b/static/usage/v6/toggle/theming/colors/index.md
new file mode 100644
index 00000000000..4229ac88a7a
--- /dev/null
+++ b/static/usage/v6/toggle/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/toggle/theming/colors/demo.html" />
diff --git a/static/usage/toggle/theming/colors/javascript.md b/static/usage/v6/toggle/theming/colors/javascript.md
similarity index 100%
rename from static/usage/toggle/theming/colors/javascript.md
rename to static/usage/v6/toggle/theming/colors/javascript.md
diff --git a/static/usage/toggle/theming/colors/react.md b/static/usage/v6/toggle/theming/colors/react.md
similarity index 100%
rename from static/usage/toggle/theming/colors/react.md
rename to static/usage/v6/toggle/theming/colors/react.md
diff --git a/static/usage/toggle/theming/colors/vue.md b/static/usage/v6/toggle/theming/colors/vue.md
similarity index 100%
rename from static/usage/toggle/theming/colors/vue.md
rename to static/usage/v6/toggle/theming/colors/vue.md
diff --git a/static/usage/toggle/theming/css-properties/angular/example_component_css.md b/static/usage/v6/toggle/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/toggle/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/toggle/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/toggle/theming/css-properties/angular/example_component_html.md b/static/usage/v6/toggle/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/toggle/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/toggle/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/toggle/theming/css-properties/demo.html b/static/usage/v6/toggle/theming/css-properties/demo.html
new file mode 100644
index 00000000000..b357ff59b4a
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-properties/demo.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-toggle {
+      height: 10px;
+      width: 65px;
+
+      padding: 12px;
+
+      --background: #ddd;
+      --background-checked: #ddd;
+
+      --handle-background: #eb7769;
+      --handle-background-checked: #95c34e;
+
+      --handle-width: 25px;
+      --handle-height: 27px;
+      --handle-max-height: auto;
+      --handle-spacing: 6px;
+
+      --handle-border-radius: 4px;
+      --handle-box-shadow: none;
+
+      /* Required for iOS handle to overflow the height of the track */
+      overflow: visible;
+      contain: none;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toggle></ion-toggle>
+        <ion-toggle checked="true"></ion-toggle>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toggle/theming/css-properties/index.md b/static/usage/v6/toggle/theming/css-properties/index.md
new file mode 100644
index 00000000000..9342c5eba77
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/toggle/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/toggle/theming/css-properties/javascript.md b/static/usage/v6/toggle/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/toggle/theming/css-properties/javascript.md
rename to static/usage/v6/toggle/theming/css-properties/javascript.md
diff --git a/static/usage/toggle/theming/css-properties/react/main_css.md b/static/usage/v6/toggle/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/toggle/theming/css-properties/react/main_css.md
rename to static/usage/v6/toggle/theming/css-properties/react/main_css.md
diff --git a/static/usage/toggle/theming/css-properties/react/main_tsx.md b/static/usage/v6/toggle/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/toggle/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/toggle/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/toggle/theming/css-properties/vue.md b/static/usage/v6/toggle/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/toggle/theming/css-properties/vue.md
rename to static/usage/v6/toggle/theming/css-properties/vue.md
diff --git a/static/usage/toggle/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/toggle/theming/css-shadow-parts/angular/example_component_css.md
rename to static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/toggle/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_html.md
similarity index 100%
rename from static/usage/toggle/theming/css-shadow-parts/angular/example_component_html.md
rename to static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_html.md
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/demo.html b/static/usage/v6/toggle/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..5647327547a
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-toggle {
+      height: 10px;
+      width: 65px;
+
+      padding: 12px;
+
+      --handle-width: 25px;
+      --handle-height: 27px;
+      --handle-max-height: auto;
+      --handle-spacing: 6px;
+
+      /* Required for iOS handle to overflow the height of the track */
+      overflow: visible;
+      contain: none;
+    }
+
+    ion-toggle::part(track),
+    ion-toggle.toggle-checked::part(track) {
+      background: #ddd;
+    }
+
+    ion-toggle::part(handle) {
+      background: #eb7769;
+
+      border-radius: 4px;
+      box-shadow: none;
+    }
+
+    ion-toggle.toggle-checked::part(handle) {
+      background: #95c34e;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toggle></ion-toggle>
+        <ion-toggle checked="true"></ion-toggle>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/index.md b/static/usage/v6/toggle/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..2b7ab7d590f
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v6/toggle/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/toggle/theming/css-shadow-parts/javascript.md b/static/usage/v6/toggle/theming/css-shadow-parts/javascript.md
similarity index 100%
rename from static/usage/toggle/theming/css-shadow-parts/javascript.md
rename to static/usage/v6/toggle/theming/css-shadow-parts/javascript.md
diff --git a/static/usage/toggle/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/toggle/theming/css-shadow-parts/react/main_css.md
similarity index 100%
rename from static/usage/toggle/theming/css-shadow-parts/react/main_css.md
rename to static/usage/v6/toggle/theming/css-shadow-parts/react/main_css.md
diff --git a/static/usage/toggle/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/toggle/theming/css-shadow-parts/react/main_tsx.md
similarity index 100%
rename from static/usage/toggle/theming/css-shadow-parts/react/main_tsx.md
rename to static/usage/v6/toggle/theming/css-shadow-parts/react/main_tsx.md
diff --git a/static/usage/toggle/theming/css-shadow-parts/vue.md b/static/usage/v6/toggle/theming/css-shadow-parts/vue.md
similarity index 100%
rename from static/usage/toggle/theming/css-shadow-parts/vue.md
rename to static/usage/v6/toggle/theming/css-shadow-parts/vue.md
diff --git a/static/usage/toolbar/basic/angular.md b/static/usage/v6/toolbar/basic/angular.md
similarity index 100%
rename from static/usage/toolbar/basic/angular.md
rename to static/usage/v6/toolbar/basic/angular.md
diff --git a/static/usage/v6/toolbar/basic/demo.html b/static/usage/v6/toolbar/basic/demo.html
new file mode 100644
index 00000000000..bc598f63d22
--- /dev/null
+++ b/static/usage/v6/toolbar/basic/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Header Toolbar</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-footer>
+      <ion-toolbar>
+        <ion-title>Footer Toolbar</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/basic/index.md b/static/usage/v6/toolbar/basic/index.md
new file mode 100644
index 00000000000..582ec8c8532
--- /dev/null
+++ b/static/usage/v6/toolbar/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/toolbar/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/toolbar/basic/javascript.md b/static/usage/v6/toolbar/basic/javascript.md
similarity index 100%
rename from static/usage/toolbar/basic/javascript.md
rename to static/usage/v6/toolbar/basic/javascript.md
diff --git a/static/usage/toolbar/basic/react.md b/static/usage/v6/toolbar/basic/react.md
similarity index 100%
rename from static/usage/toolbar/basic/react.md
rename to static/usage/v6/toolbar/basic/react.md
diff --git a/static/usage/toolbar/basic/vue.md b/static/usage/v6/toolbar/basic/vue.md
similarity index 100%
rename from static/usage/toolbar/basic/vue.md
rename to static/usage/v6/toolbar/basic/vue.md
diff --git a/static/usage/toolbar/buttons/angular.md b/static/usage/v6/toolbar/buttons/angular.md
similarity index 100%
rename from static/usage/toolbar/buttons/angular.md
rename to static/usage/v6/toolbar/buttons/angular.md
diff --git a/static/usage/v6/toolbar/buttons/demo.html b/static/usage/v6/toolbar/buttons/demo.html
new file mode 100644
index 00000000000..55941b2c348
--- /dev/null
+++ b/static/usage/v6/toolbar/buttons/demo.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button>
+              Start
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Start / End Buttons</ion-title>
+          <ion-buttons slot="end">
+            <ion-button>
+              End
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button>
+              Secondary
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button>
+              Primary
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Primary / Secondary Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button>
+              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Icon Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="solid">
+              <ion-icon slot="start" name="person-circle"></ion-icon>
+              Contact
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button fill="solid">
+              Help
+              <ion-icon slot="end" name="help-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Solid Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="outline">
+              <ion-icon slot="start" name="star"></ion-icon>
+              Star
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button fill="outline">
+              Edit
+              <ion-icon slot="end" name="create"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Outline Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="#"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Back Button</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+          </ion-buttons>
+          <ion-title>Menu Button</ion-title>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/buttons/index.md b/static/usage/v6/toolbar/buttons/index.md
new file mode 100644
index 00000000000..29c741b1bc8
--- /dev/null
+++ b/static/usage/v6/toolbar/buttons/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/toolbar/buttons/demo.html" size="500px" />
diff --git a/static/usage/toolbar/buttons/javascript.md b/static/usage/v6/toolbar/buttons/javascript.md
similarity index 100%
rename from static/usage/toolbar/buttons/javascript.md
rename to static/usage/v6/toolbar/buttons/javascript.md
diff --git a/static/usage/toolbar/buttons/react.md b/static/usage/v6/toolbar/buttons/react.md
similarity index 100%
rename from static/usage/toolbar/buttons/react.md
rename to static/usage/v6/toolbar/buttons/react.md
diff --git a/static/usage/toolbar/buttons/vue.md b/static/usage/v6/toolbar/buttons/vue.md
similarity index 100%
rename from static/usage/toolbar/buttons/vue.md
rename to static/usage/v6/toolbar/buttons/vue.md
diff --git a/static/usage/toolbar/progress-bars/angular.md b/static/usage/v6/toolbar/progress-bars/angular.md
similarity index 100%
rename from static/usage/toolbar/progress-bars/angular.md
rename to static/usage/v6/toolbar/progress-bars/angular.md
diff --git a/static/usage/v6/toolbar/progress-bars/demo.html b/static/usage/v6/toolbar/progress-bars/demo.html
new file mode 100644
index 00000000000..58ddadffe72
--- /dev/null
+++ b/static/usage/v6/toolbar/progress-bars/demo.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toolbar</ion-title>
+        <ion-progress-bar type="indeterminate"></ion-progress-bar>
+      </ion-toolbar>
+    </ion-header>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/progress-bars/index.md b/static/usage/v6/toolbar/progress-bars/index.md
new file mode 100644
index 00000000000..5af902934c1
--- /dev/null
+++ b/static/usage/v6/toolbar/progress-bars/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/toolbar/progress-bars/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/toolbar/progress-bars/javascript.md b/static/usage/v6/toolbar/progress-bars/javascript.md
similarity index 100%
rename from static/usage/toolbar/progress-bars/javascript.md
rename to static/usage/v6/toolbar/progress-bars/javascript.md
diff --git a/static/usage/toolbar/progress-bars/react.md b/static/usage/v6/toolbar/progress-bars/react.md
similarity index 100%
rename from static/usage/toolbar/progress-bars/react.md
rename to static/usage/v6/toolbar/progress-bars/react.md
diff --git a/static/usage/toolbar/progress-bars/vue.md b/static/usage/v6/toolbar/progress-bars/vue.md
similarity index 100%
rename from static/usage/toolbar/progress-bars/vue.md
rename to static/usage/v6/toolbar/progress-bars/vue.md
diff --git a/static/usage/toolbar/searchbars/angular.md b/static/usage/v6/toolbar/searchbars/angular.md
similarity index 100%
rename from static/usage/toolbar/searchbars/angular.md
rename to static/usage/v6/toolbar/searchbars/angular.md
diff --git a/static/usage/v6/toolbar/searchbars/demo.html b/static/usage/v6/toolbar/searchbars/demo.html
new file mode 100644
index 00000000000..a75cf4e6483
--- /dev/null
+++ b/static/usage/v6/toolbar/searchbars/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toolbar</ion-title>
+      </ion-toolbar>
+      <ion-toolbar>
+        <ion-searchbar></ion-searchbar>
+      </ion-toolbar>
+    </ion-header>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/searchbars/index.md b/static/usage/v6/toolbar/searchbars/index.md
new file mode 100644
index 00000000000..6593e3f9c07
--- /dev/null
+++ b/static/usage/v6/toolbar/searchbars/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/toolbar/searchbars/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/toolbar/searchbars/javascript.md b/static/usage/v6/toolbar/searchbars/javascript.md
similarity index 100%
rename from static/usage/toolbar/searchbars/javascript.md
rename to static/usage/v6/toolbar/searchbars/javascript.md
diff --git a/static/usage/toolbar/searchbars/react.md b/static/usage/v6/toolbar/searchbars/react.md
similarity index 100%
rename from static/usage/toolbar/searchbars/react.md
rename to static/usage/v6/toolbar/searchbars/react.md
diff --git a/static/usage/toolbar/searchbars/vue.md b/static/usage/v6/toolbar/searchbars/vue.md
similarity index 100%
rename from static/usage/toolbar/searchbars/vue.md
rename to static/usage/v6/toolbar/searchbars/vue.md
diff --git a/static/usage/toolbar/segments/angular.md b/static/usage/v6/toolbar/segments/angular.md
similarity index 100%
rename from static/usage/toolbar/segments/angular.md
rename to static/usage/v6/toolbar/segments/angular.md
diff --git a/static/usage/v6/toolbar/segments/demo.html b/static/usage/v6/toolbar/segments/demo.html
new file mode 100644
index 00000000000..8eb5e3cff7b
--- /dev/null
+++ b/static/usage/v6/toolbar/segments/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-segment value="all">
+          <ion-segment-button value="all">
+            All
+          </ion-segment-button>
+          <ion-segment-button value="favorites">
+            Favorites
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+    </ion-header>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/segments/index.md b/static/usage/v6/toolbar/segments/index.md
new file mode 100644
index 00000000000..2f660e05d3f
--- /dev/null
+++ b/static/usage/v6/toolbar/segments/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/toolbar/segments/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/toolbar/segments/javascript.md b/static/usage/v6/toolbar/segments/javascript.md
similarity index 100%
rename from static/usage/toolbar/segments/javascript.md
rename to static/usage/v6/toolbar/segments/javascript.md
diff --git a/static/usage/toolbar/segments/react.md b/static/usage/v6/toolbar/segments/react.md
similarity index 100%
rename from static/usage/toolbar/segments/react.md
rename to static/usage/v6/toolbar/segments/react.md
diff --git a/static/usage/toolbar/segments/vue.md b/static/usage/v6/toolbar/segments/vue.md
similarity index 100%
rename from static/usage/toolbar/segments/vue.md
rename to static/usage/v6/toolbar/segments/vue.md
diff --git a/static/usage/toolbar/theming/colors/angular.md b/static/usage/v6/toolbar/theming/colors/angular.md
similarity index 100%
rename from static/usage/toolbar/theming/colors/angular.md
rename to static/usage/v6/toolbar/theming/colors/angular.md
diff --git a/static/usage/v6/toolbar/theming/colors/demo.html b/static/usage/v6/toolbar/theming/colors/demo.html
new file mode 100644
index 00000000000..f8c44dcd8e2
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/colors/demo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-title>Default Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="primary">
+          <ion-title>Primary Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="secondary">
+          <ion-title>Secondary Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="tertiary">
+          <ion-title>Tertiary Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="success">
+          <ion-title>Success Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="warning">
+          <ion-title>Warning Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="danger">
+          <ion-title>Danger Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="light">
+          <ion-title>Light Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="medium">
+          <ion-title>Medium Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="dark">
+          <ion-title>Dark Toolbar</ion-title>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/theming/colors/index.md b/static/usage/v6/toolbar/theming/colors/index.md
new file mode 100644
index 00000000000..f9a44fe6cc5
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/v6/toolbar/theming/colors/demo.html" size="large" />
diff --git a/static/usage/toolbar/theming/colors/javascript.md b/static/usage/v6/toolbar/theming/colors/javascript.md
similarity index 100%
rename from static/usage/toolbar/theming/colors/javascript.md
rename to static/usage/v6/toolbar/theming/colors/javascript.md
diff --git a/static/usage/toolbar/theming/colors/react.md b/static/usage/v6/toolbar/theming/colors/react.md
similarity index 100%
rename from static/usage/toolbar/theming/colors/react.md
rename to static/usage/v6/toolbar/theming/colors/react.md
diff --git a/static/usage/toolbar/theming/colors/vue.md b/static/usage/v6/toolbar/theming/colors/vue.md
similarity index 100%
rename from static/usage/toolbar/theming/colors/vue.md
rename to static/usage/v6/toolbar/theming/colors/vue.md
diff --git a/static/usage/toolbar/theming/css-properties/angular/example_component_css.md b/static/usage/v6/toolbar/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/toolbar/theming/css-properties/angular/example_component_css.md
rename to static/usage/v6/toolbar/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/toolbar/theming/css-properties/angular/example_component_html.md b/static/usage/v6/toolbar/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/toolbar/theming/css-properties/angular/example_component_html.md
rename to static/usage/v6/toolbar/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/v6/toolbar/theming/css-properties/demo.html b/static/usage/v6/toolbar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..dca3fea437d
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/css-properties/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+
+    ion-toolbar {
+      --background: #19422d;
+      --color: white;
+
+      --border-color: #f24aec;
+      --border-width: 4px 0;
+      --border-style: double;
+
+      --min-height: 80px;
+      --padding-top: 20px;
+      --padding-bottom: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-title>Custom Toolbar</ion-title>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/theming/css-properties/index.md b/static/usage/v6/toolbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..b67029ee5de
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v6/toolbar/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/toolbar/theming/css-properties/javascript.md b/static/usage/v6/toolbar/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/toolbar/theming/css-properties/javascript.md
rename to static/usage/v6/toolbar/theming/css-properties/javascript.md
diff --git a/static/usage/toolbar/theming/css-properties/react/main_css.md b/static/usage/v6/toolbar/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/toolbar/theming/css-properties/react/main_css.md
rename to static/usage/v6/toolbar/theming/css-properties/react/main_css.md
diff --git a/static/usage/toolbar/theming/css-properties/react/main_tsx.md b/static/usage/v6/toolbar/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/toolbar/theming/css-properties/react/main_tsx.md
rename to static/usage/v6/toolbar/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/toolbar/theming/css-properties/vue.md b/static/usage/v6/toolbar/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/toolbar/theming/css-properties/vue.md
rename to static/usage/v6/toolbar/theming/css-properties/vue.md
diff --git a/static/usage/v7/accordion/accessibility/animations/angular.md b/static/usage/v7/accordion/accessibility/animations/angular.md
new file mode 100644
index 00000000000..ced314d2657
--- /dev/null
+++ b/static/usage/v7/accordion/accessibility/animations/angular.md
@@ -0,0 +1,22 @@
+```html
+<ion-accordion-group [animated]="false">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/accessibility/animations/demo.html b/static/usage/v7/accordion/accessibility/animations/demo.html
new file mode 100644
index 00000000000..6ce674bb64b
--- /dev/null
+++ b/static/usage/v7/accordion/accessibility/animations/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group animated="false">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/accessibility/animations/index.md b/static/usage/v7/accordion/accessibility/animations/index.md
new file mode 100644
index 00000000000..867276f88f2
--- /dev/null
+++ b/static/usage/v7/accordion/accessibility/animations/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/accordion/accessibility/animations/demo.html"
+/>
diff --git a/static/usage/v7/accordion/accessibility/animations/javascript.md b/static/usage/v7/accordion/accessibility/animations/javascript.md
new file mode 100644
index 00000000000..1500ccf60c4
--- /dev/null
+++ b/static/usage/v7/accordion/accessibility/animations/javascript.md
@@ -0,0 +1,28 @@
+```html
+  <ion-accordion-group animated="false">
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        First Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Second Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Third Content
+      </div>
+    </ion-accordion>
+  </ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/accessibility/animations/react.md b/static/usage/v7/accordion/accessibility/animations/react.md
new file mode 100644
index 00000000000..0bf5878865b
--- /dev/null
+++ b/static/usage/v7/accordion/accessibility/animations/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+  return (
+    <IonAccordionGroup animated={false}>
+      <IonAccordion value="first">
+        <IonItem slot="header" color="light">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second">
+        <IonItem slot="header" color="light">
+          <IonLabel>Second Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third">
+        <IonItem slot="header" color="light">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/accessibility/animations/vue.md b/static/usage/v7/accordion/accessibility/animations/vue.md
new file mode 100644
index 00000000000..05847edab7b
--- /dev/null
+++ b/static/usage/v7/accordion/accessibility/animations/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-accordion-group :animated="false">
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">First Content</div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Second Content</div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Third Content</div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+  export default defineComponent({
+    components: {
+      IonAccordion,
+      IonAccordionGroup,
+      IonItem,
+      IonLabel,
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/basic/angular.md b/static/usage/v7/accordion/basic/angular.md
new file mode 100644
index 00000000000..085d138de20
--- /dev/null
+++ b/static/usage/v7/accordion/basic/angular.md
@@ -0,0 +1,28 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/basic/demo.html b/static/usage/v7/accordion/basic/demo.html
new file mode 100644
index 00000000000..ae833b5f61d
--- /dev/null
+++ b/static/usage/v7/accordion/basic/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/basic/index.md b/static/usage/v7/accordion/basic/index.md
new file mode 100644
index 00000000000..36bb76371e2
--- /dev/null
+++ b/static/usage/v7/accordion/basic/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/accordion/basic/demo.html"
+  size="210px"
+/>
diff --git a/static/usage/v7/accordion/basic/javascript.md b/static/usage/v7/accordion/basic/javascript.md
new file mode 100644
index 00000000000..085d138de20
--- /dev/null
+++ b/static/usage/v7/accordion/basic/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/basic/react.md b/static/usage/v7/accordion/basic/react.md
new file mode 100644
index 00000000000..7c140853638
--- /dev/null
+++ b/static/usage/v7/accordion/basic/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { 
+  IonAccordion, 
+  IonAccordionGroup,
+  IonItem, 
+  IonLabel
+} from '@ionic/react';
+function Example() {
+  return (
+    <IonAccordionGroup>
+      <IonAccordion value="first">
+        <IonItem slot="header" color="light">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second">
+        <IonItem slot="header" color="light">
+          <IonLabel>Second Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third">
+        <IonItem slot="header" color="light">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/basic/vue.md b/static/usage/v7/accordion/basic/vue.md
new file mode 100644
index 00000000000..f11e704e83a
--- /dev/null
+++ b/static/usage/v7/accordion/basic/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <ion-accordion-group>
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        First Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Second Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Third Content
+      </div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import {
+    IonAccordion, 
+    IonAccordionGroup,
+    IonItem, 
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonAccordion, 
+      IonAccordionGroup,
+      IonItem, 
+      IonLabel
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_css.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
new file mode 100644
index 00000000000..21189b83ce7
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
@@ -0,0 +1,24 @@
+```css
+ion-accordion {
+  margin: 0 auto;
+}
+
+ion-accordion.accordion-expanding,
+ion-accordion.accordion-expanded {
+  width: calc(100% - 32px);
+
+  margin: 16px auto;
+}
+
+ion-accordion.accordion-collapsing ion-item[slot="header"],
+ion-accordion.accordion-collapsed ion-item[slot="header"] {
+  --background: var(--ion-color-light);
+  --color: var(--ion-color-light-contrast);
+}
+
+ion-accordion.accordion-expanding ion-item[slot="header"],
+ion-accordion.accordion-expanded ion-item[slot="header"] {
+  --background: var(--ion-color-primary);
+  --color: var(--ion-color-primary-contrast);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_html.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
new file mode 100644
index 00000000000..c0da98e5ee8
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
@@ -0,0 +1,28 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first">
+    <ion-item slot="header">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
new file mode 100644
index 00000000000..4db53a836a9
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
new file mode 100644
index 00000000000..2e78783b984
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-accordion {
+      margin: 0 auto;
+    }
+
+    ion-accordion.accordion-expanding,
+    ion-accordion.accordion-expanded {
+      width: calc(100% - 32px);
+
+      margin: 16px auto;
+    }
+
+    ion-accordion.accordion-collapsing ion-item[slot="header"],
+    ion-accordion.accordion-collapsed ion-item[slot="header"] {
+      --background: var(--ion-color-light);
+      --color: var(--ion-color-light-contrast);
+    }
+
+    ion-accordion.accordion-expanding ion-item[slot="header"],
+    ion-accordion.accordion-expanded ion-item[slot="header"] {
+      --background: var(--ion-color-primary);
+      --color: var(--ion-color-primary-contrast);
+    }
+
+    .container {
+      width: 300px;
+      margin: 0 auto;
+    }
+
+    ion-accordion-group {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md
new file mode 100644
index 00000000000..e6d3f91d001
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  size="250px"
+  src="usage/v7/accordion/customization/advanced-expansion-styles/demo.html"
+/>
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/javascript.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/javascript.md
new file mode 100644
index 00000000000..863d92d374f
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/javascript.md
@@ -0,0 +1,53 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first">
+    <ion-item slot="header">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+
+<style>
+  ion-accordion {
+    margin: 0 auto;
+  }
+
+  ion-accordion.accordion-expanding,
+  ion-accordion.accordion-expanded {
+    width: calc(100% - 32px);
+
+    margin: 16px auto;
+  }
+
+  ion-accordion.accordion-collapsing ion-item[slot="header"],
+  ion-accordion.accordion-collapsed ion-item[slot="header"] {
+    --background: var(--ion-color-light);
+    --color: var(--ion-color-light-contrast);
+  }
+
+  ion-accordion.accordion-expanding ion-item[slot="header"],
+  ion-accordion.accordion-expanded ion-item[slot="header"] {
+    --background: var(--ion-color-primary);
+    --color: var(--ion-color-primary-contrast);
+  }
+</style>
+```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_css.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_css.md
new file mode 100644
index 00000000000..21189b83ce7
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_css.md
@@ -0,0 +1,24 @@
+```css
+ion-accordion {
+  margin: 0 auto;
+}
+
+ion-accordion.accordion-expanding,
+ion-accordion.accordion-expanded {
+  width: calc(100% - 32px);
+
+  margin: 16px auto;
+}
+
+ion-accordion.accordion-collapsing ion-item[slot="header"],
+ion-accordion.accordion-collapsed ion-item[slot="header"] {
+  --background: var(--ion-color-light);
+  --color: var(--ion-color-light-contrast);
+}
+
+ion-accordion.accordion-expanding ion-item[slot="header"],
+ion-accordion.accordion-expanded ion-item[slot="header"] {
+  --background: var(--ion-color-primary);
+  --color: var(--ion-color-primary-contrast);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_tsx.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_tsx.md
new file mode 100644
index 00000000000..01cd873445d
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_tsx.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonAccordionGroup>
+      <IonAccordion value="first">
+        <IonItem slot="header" color="light">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second">
+        <IonItem slot="header" color="light">
+          <IonLabel>Second Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third">
+        <IonItem slot="header" color="light">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
new file mode 100644
index 00000000000..738797ba44f
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
@@ -0,0 +1,74 @@
+```html
+<template>
+  <ion-accordion-group>
+    <ion-accordion value="first">
+      <ion-item slot="header">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        First Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Second Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Third Content
+      </div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import {
+    IonAccordion, 
+    IonAccordionGroup,
+    IonItem, 
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonAccordion, 
+      IonAccordionGroup,
+      IonItem, 
+      IonLabel
+    },
+  });
+</script>
+
+<style scoped>
+  ion-accordion {
+    margin: 0 auto;
+  }
+
+  ion-accordion.accordion-expanding,
+  ion-accordion.accordion-expanded {
+    width: calc(100% - 32px);
+  
+    margin: 16px auto;
+  }
+  
+  ion-accordion.accordion-collapsing ion-item[slot="header"],
+  ion-accordion.accordion-collapsed ion-item[slot="header"] {
+    --background: var(--ion-color-light);
+    --color: var(--ion-color-light-contrast);
+  }
+  
+  ion-accordion.accordion-expanding ion-item[slot="header"],
+  ion-accordion.accordion-expanded ion-item[slot="header"] {
+    --background: var(--ion-color-primary);
+    --color: var(--ion-color-primary-contrast);
+  }
+</style>
+```
diff --git a/static/usage/v7/accordion/customization/expansion-styles/angular.md b/static/usage/v7/accordion/customization/expansion-styles/angular.md
new file mode 100644
index 00000000000..39a3f97b6be
--- /dev/null
+++ b/static/usage/v7/accordion/customization/expansion-styles/angular.md
@@ -0,0 +1,28 @@
+```html
+<ion-accordion-group expand="inset">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/customization/expansion-styles/demo.html b/static/usage/v7/accordion/customization/expansion-styles/demo.html
new file mode 100644
index 00000000000..f445c54ac11
--- /dev/null
+++ b/static/usage/v7/accordion/customization/expansion-styles/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group expand="inset">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/expansion-styles/index.md b/static/usage/v7/accordion/customization/expansion-styles/index.md
new file mode 100644
index 00000000000..cf8e04356b0
--- /dev/null
+++ b/static/usage/v7/accordion/customization/expansion-styles/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="250px"
+  src="usage/v7/accordion/customization/expansion-styles/demo.html"
+/>
diff --git a/static/usage/v7/accordion/customization/expansion-styles/javascript.md b/static/usage/v7/accordion/customization/expansion-styles/javascript.md
new file mode 100644
index 00000000000..39a3f97b6be
--- /dev/null
+++ b/static/usage/v7/accordion/customization/expansion-styles/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-accordion-group expand="inset">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/customization/expansion-styles/react.md b/static/usage/v7/accordion/customization/expansion-styles/react.md
new file mode 100644
index 00000000000..1067c80acb7
--- /dev/null
+++ b/static/usage/v7/accordion/customization/expansion-styles/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { 
+  IonAccordion, 
+  IonAccordionGroup,
+  IonItem, 
+  IonLabel
+} from '@ionic/react';
+function Example() {
+  return (
+    <IonAccordionGroup expand="inset">
+      <IonAccordion value="first">
+        <IonItem slot="header" color="light">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second">
+        <IonItem slot="header" color="light">
+          <IonLabel>Second Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third">
+        <IonItem slot="header" color="light">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/customization/expansion-styles/vue.md b/static/usage/v7/accordion/customization/expansion-styles/vue.md
new file mode 100644
index 00000000000..a6bcdcbde5e
--- /dev/null
+++ b/static/usage/v7/accordion/customization/expansion-styles/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <ion-accordion-group expand="inset">
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        First Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Second Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Third Content
+      </div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import {
+    IonAccordion, 
+    IonAccordionGroup,
+    IonItem, 
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonAccordion, 
+      IonAccordionGroup,
+      IonItem, 
+      IonLabel
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/customization/icons/angular.md b/static/usage/v7/accordion/customization/icons/angular.md
new file mode 100644
index 00000000000..2899aeacac6
--- /dev/null
+++ b/static/usage/v7/accordion/customization/icons/angular.md
@@ -0,0 +1,22 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first" toggleIcon="caret-down-circle" toggleIconSlot="start">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second" toggleIcon="caret-down-circle" toggleIconSlot="start">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third" toggleIcon="caret-down-circle" toggleIconSlot="start">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/customization/icons/demo.html b/static/usage/v7/accordion/customization/icons/demo.html
new file mode 100644
index 00000000000..b4f7385876a
--- /dev/null
+++ b/static/usage/v7/accordion/customization/icons/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first" toggle-icon="caret-down-circle" toggle-icon-slot="start">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second" toggle-icon="caret-down-circle" toggle-icon-slot="start">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third" toggle-icon="caret-down-circle" toggle-icon-slot="start">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/icons/index.md b/static/usage/v7/accordion/customization/icons/index.md
new file mode 100644
index 00000000000..604cd78eb46
--- /dev/null
+++ b/static/usage/v7/accordion/customization/icons/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="250px"
+  src="usage/v7/accordion/customization/icons/demo.html"
+/>
diff --git a/static/usage/v7/accordion/customization/icons/javascript.md b/static/usage/v7/accordion/customization/icons/javascript.md
new file mode 100644
index 00000000000..7d937e511de
--- /dev/null
+++ b/static/usage/v7/accordion/customization/icons/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first" toggle-icon="caret-down-circle" toggle-icon-slot="start">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second" toggle-icon="caret-down-circle" toggle-icon-slot="start">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third" toggle-icon="caret-down-circle" toggle-icon-slot="start">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/customization/icons/react.md b/static/usage/v7/accordion/customization/icons/react.md
new file mode 100644
index 00000000000..cca6fbf0af1
--- /dev/null
+++ b/static/usage/v7/accordion/customization/icons/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { 
+  IonAccordion, 
+  IonAccordionGroup,
+  IonItem, 
+  IonLabel
+} from '@ionic/react';
+import { caretDownCircle } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <IonAccordionGroup>
+      <IonAccordion value="first" toggleIcon={caretDownCircle} toggleIconSlot="start">
+        <IonItem slot="header" color="light">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second" toggleIcon={caretDownCircle} toggleIconSlot="start">
+        <IonItem slot="header" color="light">
+          <IonLabel>Second Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third" toggleIcon={caretDownCircle} toggleIconSlot="start">
+        <IonItem slot="header" color="light">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/customization/icons/vue.md b/static/usage/v7/accordion/customization/icons/vue.md
new file mode 100644
index 00000000000..760bab7520b
--- /dev/null
+++ b/static/usage/v7/accordion/customization/icons/vue.md
@@ -0,0 +1,53 @@
+```html
+<template>
+  <ion-accordion-group>
+    <ion-accordion value="first" :toggle-icon="caretDownCircle" toggle-icon-slot="start">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        First Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="second" :toggle-icon="caretDownCircle" toggle-icon-slot="start">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Second Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="third" :toggle-icon="caretDownCircle" toggle-icon-slot="start">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Third Content
+      </div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import {
+    IonAccordion, 
+    IonAccordionGroup,
+    IonItem, 
+    IonLabel
+  } from '@ionic/vue';
+  import { caretDownCircle } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonAccordion, 
+      IonAccordionGroup,
+      IonItem, 
+      IonLabel
+    },
+    setup() {
+      return { caretDownCircle }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/customization/theming/angular/example_component_html.md b/static/usage/v7/accordion/customization/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..9af8534259c
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/angular/example_component_html.md
@@ -0,0 +1,28 @@
+```html
+<ion-accordion-group expand="inset">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="rose">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="rose">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="rose">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/customization/theming/angular/global_css.md b/static/usage/v7/accordion/customization/theming/angular/global_css.md
new file mode 100644
index 00000000000..6054219017a
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/angular/global_css.md
@@ -0,0 +1,23 @@
+```css
+:root {
+  --ion-color-rose: #fecdd3;
+  --ion-color-rose-rgb: 254,205,211;
+  --ion-color-rose-contrast: #000000;
+  --ion-color-rose-contrast-rgb: 0,0,0;
+  --ion-color-rose-shade: #e0b4ba;
+  --ion-color-rose-tint: #fed2d7;
+}
+
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+div[slot="content"] {
+  background: rgba(var(--ion-color-rose-rgb), 0.25)
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/theming/demo.html b/static/usage/v7/accordion/customization/theming/demo.html
new file mode 100644
index 00000000000..9b771545a49
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/demo.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    :root {
+      --ion-color-rose: #fecdd3;
+      --ion-color-rose-rgb: 254, 205, 211;
+      --ion-color-rose-contrast: #000000;
+      --ion-color-rose-contrast-rgb: 0, 0, 0;
+      --ion-color-rose-shade: #e0b4ba;
+      --ion-color-rose-tint: #fed2d7;
+    }
+
+    .ion-color-rose {
+      --ion-color-base: var(--ion-color-rose);
+      --ion-color-base-rgb: var(--ion-color-rose-rgb);
+      --ion-color-contrast: var(--ion-color-rose-contrast);
+      --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+      --ion-color-shade: var(--ion-color-rose-shade);
+      --ion-color-tint: var(--ion-color-rose-tint);
+    }
+
+    div[slot="content"] {
+      background: rgba(var(--ion-color-rose-rgb), 0.25)
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group expand="inset">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="rose">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="rose">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="rose">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/theming/index.md b/static/usage/v7/accordion/customization/theming/index.md
new file mode 100644
index 00000000000..5d57f883cfa
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  size="250px"
+  src="usage/v7/accordion/customization/theming/demo.html"
+/>
diff --git a/static/usage/v7/accordion/customization/theming/javascript.md b/static/usage/v7/accordion/customization/theming/javascript.md
new file mode 100644
index 00000000000..d35f6dbb6b9
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/javascript.md
@@ -0,0 +1,52 @@
+```html
+<ion-accordion-group expand="inset">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="rose">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="rose">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="rose">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+
+<style>
+  :root {
+    --ion-color-rose: #fecdd3;
+    --ion-color-rose-rgb: 254,205,211;
+    --ion-color-rose-contrast: #000000;
+    --ion-color-rose-contrast-rgb: 0,0,0;
+    --ion-color-rose-shade: #e0b4ba;
+    --ion-color-rose-tint: #fed2d7;
+  }
+  
+  .ion-color-rose {
+    --ion-color-base: var(--ion-color-rose);
+    --ion-color-base-rgb: var(--ion-color-rose-rgb);
+    --ion-color-contrast: var(--ion-color-rose-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+    --ion-color-shade: var(--ion-color-rose-shade);
+    --ion-color-tint: var(--ion-color-rose-tint);
+  }
+  
+  div[slot="content"] {
+    background: rgba(var(--ion-color-rose-rgb), 0.25)
+  }
+</style>
+```
diff --git a/static/usage/v7/accordion/customization/theming/react/main_css.md b/static/usage/v7/accordion/customization/theming/react/main_css.md
new file mode 100644
index 00000000000..6054219017a
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/react/main_css.md
@@ -0,0 +1,23 @@
+```css
+:root {
+  --ion-color-rose: #fecdd3;
+  --ion-color-rose-rgb: 254,205,211;
+  --ion-color-rose-contrast: #000000;
+  --ion-color-rose-contrast-rgb: 0,0,0;
+  --ion-color-rose-shade: #e0b4ba;
+  --ion-color-rose-tint: #fed2d7;
+}
+
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+div[slot="content"] {
+  background: rgba(var(--ion-color-rose-rgb), 0.25)
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/theming/react/main_tsx.md b/static/usage/v7/accordion/customization/theming/react/main_tsx.md
new file mode 100644
index 00000000000..348576ae0fe
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/react/main_tsx.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { 
+  IonAccordion, 
+  IonAccordionGroup,
+  IonItem, 
+  IonLabel
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonAccordionGroup expand="inset">
+      <IonAccordion value="first">
+        <IonItem slot="header" color="rose">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second">
+        <IonItem slot="header" color="rose">
+          <IonLabel>Second Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third">
+        <IonItem slot="header" color="rose">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/customization/theming/vue.md b/static/usage/v7/accordion/customization/theming/vue.md
new file mode 100644
index 00000000000..cf55542e739
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/vue.md
@@ -0,0 +1,77 @@
+```html
+<template>
+  <ion-accordion-group expand="inset">
+    <ion-accordion value="first">
+      <ion-item slot="header" color="rose">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        First Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header" color="rose">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Second Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="rose">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Third Content
+      </div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import {
+    IonAccordion, 
+    IonAccordionGroup,
+    IonItem, 
+    IonLabel
+  } from '@ionic/vue';
+  import { caretDownCircle } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonAccordion, 
+      IonAccordionGroup,
+      IonItem, 
+      IonLabel
+    },
+    setup() {
+      return { caretDownCircle }
+    }
+  });
+</script>
+
+<style>
+  :root {
+    --ion-color-rose: #fecdd3;
+    --ion-color-rose-rgb: 254,205,211;
+    --ion-color-rose-contrast: #000000;
+    --ion-color-rose-contrast-rgb: 0,0,0;
+    --ion-color-rose-shade: #e0b4ba;
+    --ion-color-rose-tint: #fed2d7;
+  }
+  
+  .ion-color-rose {
+    --ion-color-base: var(--ion-color-rose);
+    --ion-color-base-rgb: var(--ion-color-rose-rgb);
+    --ion-color-contrast: var(--ion-color-rose-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+    --ion-color-shade: var(--ion-color-rose-shade);
+    --ion-color-tint: var(--ion-color-rose-tint);
+  }
+  
+  div[slot="content"] {
+    background: rgba(var(--ion-color-rose-rgb), 0.25)
+  }
+</style>
+```
diff --git a/static/usage/v7/accordion/disable-group/angular.md b/static/usage/v7/accordion/disable-group/angular.md
new file mode 100644
index 00000000000..5c4cf3b51b3
--- /dev/null
+++ b/static/usage/v7/accordion/disable-group/angular.md
@@ -0,0 +1,22 @@
+```html
+<ion-accordion-group [disabled]="true">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/disable-group/demo.html b/static/usage/v7/accordion/disable-group/demo.html
new file mode 100644
index 00000000000..bbe38628365
--- /dev/null
+++ b/static/usage/v7/accordion/disable-group/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group disabled="true">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/disable-group/index.md b/static/usage/v7/accordion/disable-group/index.md
new file mode 100644
index 00000000000..204508c6b3c
--- /dev/null
+++ b/static/usage/v7/accordion/disable-group/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/accordion/disable-group/demo.html"
+/>
diff --git a/static/usage/v7/accordion/disable-group/javascript.md b/static/usage/v7/accordion/disable-group/javascript.md
new file mode 100644
index 00000000000..163641a544c
--- /dev/null
+++ b/static/usage/v7/accordion/disable-group/javascript.md
@@ -0,0 +1,22 @@
+```html
+<ion-accordion-group disabled="true">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/disable-group/react.md b/static/usage/v7/accordion/disable-group/react.md
new file mode 100644
index 00000000000..b2ff09b5fe4
--- /dev/null
+++ b/static/usage/v7/accordion/disable-group/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+  return (
+    <IonAccordionGroup disabled={true}>
+      <IonAccordion value="first">
+        <IonItem slot="header" color="light">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second">
+        <IonItem slot="header" color="light">
+          <IonLabel>Second Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third">
+        <IonItem slot="header" color="light">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/disable-group/vue.md b/static/usage/v7/accordion/disable-group/vue.md
new file mode 100644
index 00000000000..6c9e3567845
--- /dev/null
+++ b/static/usage/v7/accordion/disable-group/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-accordion-group :disabled="true">
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">First Content</div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Second Content</div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Third Content</div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+  export default defineComponent({
+    components: {
+      IonAccordion,
+      IonAccordionGroup,
+      IonItem,
+      IonLabel,
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/disable/group/angular.md b/static/usage/v7/accordion/disable/group/angular.md
new file mode 100644
index 00000000000..5c4cf3b51b3
--- /dev/null
+++ b/static/usage/v7/accordion/disable/group/angular.md
@@ -0,0 +1,22 @@
+```html
+<ion-accordion-group [disabled]="true">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/disable/group/demo.html b/static/usage/v7/accordion/disable/group/demo.html
new file mode 100644
index 00000000000..357470c9cb2
--- /dev/null
+++ b/static/usage/v7/accordion/disable/group/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group disabled="true">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/disable/group/index.md b/static/usage/v7/accordion/disable/group/index.md
new file mode 100644
index 00000000000..c564a2d16bd
--- /dev/null
+++ b/static/usage/v7/accordion/disable/group/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/accordion/disable/group/demo.html"
+/>
diff --git a/static/usage/v7/accordion/disable/group/javascript.md b/static/usage/v7/accordion/disable/group/javascript.md
new file mode 100644
index 00000000000..163641a544c
--- /dev/null
+++ b/static/usage/v7/accordion/disable/group/javascript.md
@@ -0,0 +1,22 @@
+```html
+<ion-accordion-group disabled="true">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/disable/group/react.md b/static/usage/v7/accordion/disable/group/react.md
new file mode 100644
index 00000000000..b2ff09b5fe4
--- /dev/null
+++ b/static/usage/v7/accordion/disable/group/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+  return (
+    <IonAccordionGroup disabled={true}>
+      <IonAccordion value="first">
+        <IonItem slot="header" color="light">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second">
+        <IonItem slot="header" color="light">
+          <IonLabel>Second Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third">
+        <IonItem slot="header" color="light">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/disable/group/vue.md b/static/usage/v7/accordion/disable/group/vue.md
new file mode 100644
index 00000000000..6c9e3567845
--- /dev/null
+++ b/static/usage/v7/accordion/disable/group/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-accordion-group :disabled="true">
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">First Content</div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Second Content</div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Third Content</div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+  export default defineComponent({
+    components: {
+      IonAccordion,
+      IonAccordionGroup,
+      IonItem,
+      IonLabel,
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/disable/individual/angular.md b/static/usage/v7/accordion/disable/individual/angular.md
new file mode 100644
index 00000000000..56ac780e987
--- /dev/null
+++ b/static/usage/v7/accordion/disable/individual/angular.md
@@ -0,0 +1,22 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second" [disabled]="true">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion (Disabled)</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/disable/individual/demo.html b/static/usage/v7/accordion/disable/individual/demo.html
new file mode 100644
index 00000000000..33d7caf6f65
--- /dev/null
+++ b/static/usage/v7/accordion/disable/individual/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second" disabled="true">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion (Disabled)</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/disable/individual/index.md b/static/usage/v7/accordion/disable/individual/index.md
new file mode 100644
index 00000000000..28172bca32b
--- /dev/null
+++ b/static/usage/v7/accordion/disable/individual/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="210px"
+  src="usage/v7/accordion/disable/individual/demo.html"
+/>
diff --git a/static/usage/v7/accordion/disable/individual/javascript.md b/static/usage/v7/accordion/disable/individual/javascript.md
new file mode 100644
index 00000000000..df5f207512a
--- /dev/null
+++ b/static/usage/v7/accordion/disable/individual/javascript.md
@@ -0,0 +1,22 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second" disabled="true">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion (Disabled)</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/disable/individual/react.md b/static/usage/v7/accordion/disable/individual/react.md
new file mode 100644
index 00000000000..e133354999a
--- /dev/null
+++ b/static/usage/v7/accordion/disable/individual/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+  return (
+    <IonAccordionGroup>
+      <IonAccordion value="first">
+        <IonItem slot="header" color="light">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second" disabled={true}>
+        <IonItem slot="header" color="light">
+          <IonLabel>Second Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third">
+        <IonItem slot="header" color="light">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/disable/individual/vue.md b/static/usage/v7/accordion/disable/individual/vue.md
new file mode 100644
index 00000000000..dc26bc3b11f
--- /dev/null
+++ b/static/usage/v7/accordion/disable/individual/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-accordion-group>
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">First Content</div>
+    </ion-accordion>
+    <ion-accordion value="second" :disabled="true">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Second Content</div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Third Content</div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+  export default defineComponent({
+    components: {
+      IonAccordion,
+      IonAccordionGroup,
+      IonItem,
+      IonLabel,
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/listen-changes/angular/example_component_html.md b/static/usage/v7/accordion/listen-changes/angular/example_component_html.md
new file mode 100644
index 00000000000..a70ad5e3be6
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+<ion-accordion-group (ionChange)="accordionGroupChange($event)">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+
+<p #listenerOut></p>
+```
diff --git a/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
new file mode 100644
index 00000000000..c14734aba72
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component, ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild('listenerOut', { static: true }) listenerOut: ElementRef;
+  private values: string[] = ['first', 'second', 'third'];
+
+  accordionGroupChange = (ev: any) => {
+    const nativeEl = this.listenerOut.nativeElement;
+    if (!nativeEl) {
+      return;
+    }
+
+    const collapsedItems = this.values.filter((value) => value !== ev.detail.value);
+    const selectedValue = ev.detail.value;
+
+    nativeEl.innerText = `
+      Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
+      Collapsed: ${collapsedItems.join(', ')}
+    `;
+  };
+}
+```
diff --git a/static/usage/v7/accordion/listen-changes/demo.html b/static/usage/v7/accordion/listen-changes/demo.html
new file mode 100644
index 00000000000..986aba59eb6
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/demo.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+
+        <p class="listener-out">
+        </p>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const accordionGroup = document.querySelector('ion-accordion-group');
+    const listenerOut = document.querySelector('.listener-out');
+    const values = ['first', 'second', 'third'];
+
+    accordionGroup.addEventListener('ionChange', (ev) => {
+      const collapsedItems = values.filter(value => value !== ev.detail.value);
+      const selectedValue = ev.detail.value;
+
+      listenerOut.innerText = `
+          Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
+          Collapsed: ${collapsedItems.join(', ')}
+        `
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/listen-changes/index.md b/static/usage/v7/accordion/listen-changes/index.md
new file mode 100644
index 00000000000..a10dd609b4f
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  size="320px"
+  src="usage/v7/accordion/listen-changes/demo.html"
+/>
diff --git a/static/usage/v7/accordion/listen-changes/javascript.md b/static/usage/v7/accordion/listen-changes/javascript.md
new file mode 100644
index 00000000000..e7085ca86eb
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/javascript.md
@@ -0,0 +1,40 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+
+<p class="listener-out"></p>
+
+<script>
+  const accordionGroup = document.querySelector('ion-accordion-group');
+  const listenerOut = document.querySelector('.listener-out');
+  const values = ['first', 'second', 'third'];
+
+  accordionGroup.addEventListener('ionChange', (ev) => {
+    const collapsedItems = values.filter((value) => value !== ev.detail.value);
+    const selectedValue = ev.detail.value;
+
+    listenerOut.innerText = `
+      Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
+      Collapsed: ${collapsedItems.join(', ')}
+    `;
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/listen-changes/react.md b/static/usage/v7/accordion/listen-changes/react.md
new file mode 100644
index 00000000000..eb76312b62a
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/react.md
@@ -0,0 +1,55 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react';
+function Example() {
+  const listenerOut = useRef<null | HTMLParagraphElement>(null);
+  const values = ['first', 'second', 'third'];
+  const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
+    const nativeEl = listenerOut.current;
+    if (!nativeEl) {
+      return;
+    }
+
+    const collapsedItems = values.filter((value) => value !== ev.detail.value);
+    const selectedValue = ev.detail.value;
+
+    nativeEl.innerText = `
+      Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
+      Collapsed: ${collapsedItems.join(', ')}
+    `;
+  };
+
+  return (
+    <>
+      <IonAccordionGroup onIonChange={accordionGroupChange}>
+        <IonAccordion value="first">
+          <IonItem slot="header" color="light">
+            <IonLabel>First Accordion</IonLabel>
+          </IonItem>
+          <div className="ion-padding" slot="content">
+            First Content
+          </div>
+        </IonAccordion>
+        <IonAccordion value="second">
+          <IonItem slot="header" color="light">
+            <IonLabel>Second Accordion</IonLabel>
+          </IonItem>
+          <div className="ion-padding" slot="content">
+            Second Content
+          </div>
+        </IonAccordion>
+        <IonAccordion value="third">
+          <IonItem slot="header" color="light">
+            <IonLabel>Third Accordion</IonLabel>
+          </IonItem>
+          <div className="ion-padding" slot="content">
+            Third Content
+          </div>
+        </IonAccordion>
+      </IonAccordionGroup>
+      <p ref={listenerOut}></p>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/listen-changes/vue.md b/static/usage/v7/accordion/listen-changes/vue.md
new file mode 100644
index 00000000000..0086a788ac0
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/vue.md
@@ -0,0 +1,58 @@
+```html
+<template>
+  <ion-accordion-group @ionChange="accordionGroupChange($event)">
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">First Content</div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Second Content</div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Third Content</div>
+    </ion-accordion>
+  </ion-accordion-group>
+
+  <p ref="listenerOut"></p>
+</template>
+
+<script lang="ts">
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonAccordion,
+      IonAccordionGroup,
+      IonItem,
+      IonLabel,
+    },
+    setup() {
+      const listenerOut = ref(null);
+      const values = ['first', 'second', 'third'];
+      const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
+        if (!listenerOut.value) {
+          return;
+        }
+
+        const collapsedItems = values.filter((value) => value !== ev.detail.value);
+        const selectedValue = ev.detail.value;
+
+        listenerOut.value.innerText = `
+          Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
+          Collapsed: ${collapsedItems.join(', ')}
+        `;
+      };
+      return { listenerOut, accordionGroupChange };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/multiple/angular.md b/static/usage/v7/accordion/multiple/angular.md
new file mode 100644
index 00000000000..238f000c458
--- /dev/null
+++ b/static/usage/v7/accordion/multiple/angular.md
@@ -0,0 +1,22 @@
+```html
+<ion-accordion-group [multiple]="true" [value]="['first', 'third']">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/multiple/demo.html b/static/usage/v7/accordion/multiple/demo.html
new file mode 100644
index 00000000000..d7dbbfae658
--- /dev/null
+++ b/static/usage/v7/accordion/multiple/demo.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group multiple="true">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const accordionGroup = document.querySelector('ion-accordion-group');
+    accordionGroup.value = ['first', 'third'];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/multiple/index.md b/static/usage/v7/accordion/multiple/index.md
new file mode 100644
index 00000000000..868eaaa7c16
--- /dev/null
+++ b/static/usage/v7/accordion/multiple/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="320px"
+  src="usage/v7/accordion/multiple/demo.html"
+/>
diff --git a/static/usage/v7/accordion/multiple/javascript.md b/static/usage/v7/accordion/multiple/javascript.md
new file mode 100644
index 00000000000..6948ed4e9cc
--- /dev/null
+++ b/static/usage/v7/accordion/multiple/javascript.md
@@ -0,0 +1,27 @@
+```html
+<ion-accordion-group multiple="true">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+
+<script>
+  const accordionGroup = document.querySelector('ion-accordion-group');
+  accordionGroup.value = ['first', 'third'];
+</script>
+```
diff --git a/static/usage/v7/accordion/multiple/react.md b/static/usage/v7/accordion/multiple/react.md
new file mode 100644
index 00000000000..2bdbb0b365a
--- /dev/null
+++ b/static/usage/v7/accordion/multiple/react.md
@@ -0,0 +1,45 @@
+```tsx
+import React, { useRef, useEffect } from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+  const accordionGroup = useRef<null | HTMLIonAccordionGroupElement>(null);
+
+  useEffect(() => {
+    if (!accordionGroup.current) {
+      return;
+    }
+
+    accordionGroup.current.value = ['first', 'third'];
+  }, []);
+
+  return (
+    <IonAccordionGroup ref={accordionGroup} multiple={true}>
+      <IonAccordion value="first">
+        <IonItem slot="header" color="light">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second">
+        <IonItem slot="header" color="light">
+          <IonLabel>Second Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third">
+        <IonItem slot="header" color="light">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/multiple/vue.md b/static/usage/v7/accordion/multiple/vue.md
new file mode 100644
index 00000000000..dcf86fbd7d4
--- /dev/null
+++ b/static/usage/v7/accordion/multiple/vue.md
@@ -0,0 +1,38 @@
+```html
+<template>
+  <ion-accordion-group :multiple="true" :value="['first', 'third']">
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">First Content</div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Second Content</div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Third Content</div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonAccordion,
+      IonAccordionGroup,
+      IonItem,
+      IonLabel,
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/readonly/group/angular.md b/static/usage/v7/accordion/readonly/group/angular.md
new file mode 100644
index 00000000000..99c084f8064
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/group/angular.md
@@ -0,0 +1,28 @@
+```html
+<ion-accordion-group [readonly]="true">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/readonly/group/demo.html b/static/usage/v7/accordion/readonly/group/demo.html
new file mode 100644
index 00000000000..7b67c1ce83c
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/group/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group readonly="true">
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/readonly/group/index.md b/static/usage/v7/accordion/readonly/group/index.md
new file mode 100644
index 00000000000..78689ede73f
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/group/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="210px"
+  src="usage/v7/accordion/readonly/group/demo.html"
+/>
diff --git a/static/usage/v7/accordion/readonly/group/javascript.md b/static/usage/v7/accordion/readonly/group/javascript.md
new file mode 100644
index 00000000000..27f216fb4f9
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/group/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-accordion-group readonly="true">
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/readonly/group/react.md b/static/usage/v7/accordion/readonly/group/react.md
new file mode 100644
index 00000000000..5383b732d96
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/group/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { 
+  IonAccordion, 
+  IonAccordionGroup,
+  IonItem, 
+  IonLabel
+} from '@ionic/react';
+function Example() {
+  return (
+    <IonAccordionGroup readonly={true}>
+      <IonAccordion value="first">
+        <IonItem slot="header" color="light">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second">
+        <IonItem slot="header" color="light">
+          <IonLabel>Second Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third">
+        <IonItem slot="header" color="light">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/readonly/group/vue.md b/static/usage/v7/accordion/readonly/group/vue.md
new file mode 100644
index 00000000000..aa6a662a802
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/group/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <ion-accordion-group :readonly="true">
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        First Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Second Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Third Content
+      </div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import {
+    IonAccordion, 
+    IonAccordionGroup,
+    IonItem, 
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonAccordion, 
+      IonAccordionGroup,
+      IonItem, 
+      IonLabel
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/readonly/individual/angular.md b/static/usage/v7/accordion/readonly/individual/angular.md
new file mode 100644
index 00000000000..7f9f8f5bb2e
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/individual/angular.md
@@ -0,0 +1,28 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second" [readonly]="true">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion (Readonly)</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/readonly/individual/demo.html b/static/usage/v7/accordion/readonly/individual/demo.html
new file mode 100644
index 00000000000..65b7efbc355
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/individual/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second" readonly="true">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion (Readonly)</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/readonly/individual/index.md b/static/usage/v7/accordion/readonly/individual/index.md
new file mode 100644
index 00000000000..c7efd45b803
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/individual/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/accordion/readonly/individual/demo.html"
+/>
diff --git a/static/usage/v7/accordion/readonly/individual/javascript.md b/static/usage/v7/accordion/readonly/individual/javascript.md
new file mode 100644
index 00000000000..eec083da61a
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/individual/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      First Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="second" readonly="true">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion (Readonly)</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Second Content
+    </div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      Third Content
+    </div>
+  </ion-accordion>
+</ion-accordion-group>
+```
diff --git a/static/usage/v7/accordion/readonly/individual/react.md b/static/usage/v7/accordion/readonly/individual/react.md
new file mode 100644
index 00000000000..7e94d274b32
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/individual/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { 
+  IonAccordion, 
+  IonAccordionGroup,
+  IonItem, 
+  IonLabel
+} from '@ionic/react';
+function Example() {
+  return (
+    <IonAccordionGroup>
+      <IonAccordion value="first">
+        <IonItem slot="header" color="light">
+          <IonLabel>First Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          First Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="second" readonly={true}>
+        <IonItem slot="header" color="light">
+          <IonLabel>Second Accordion (Readonly)</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Second Content
+        </div>
+      </IonAccordion>
+      <IonAccordion value="third">
+        <IonItem slot="header" color="light">
+          <IonLabel>Third Accordion</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          Third Content
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/readonly/individual/vue.md b/static/usage/v7/accordion/readonly/individual/vue.md
new file mode 100644
index 00000000000..2e02ebd3679
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/individual/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <ion-accordion-group>
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        First Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="second" :readonly="true">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion (Readonly)</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Second Content
+      </div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        Third Content
+      </div>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script lang="ts">
+  import {
+    IonAccordion, 
+    IonAccordionGroup,
+    IonItem, 
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonAccordion, 
+      IonAccordionGroup,
+      IonItem, 
+      IonLabel
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/accordion/toggle/angular/example_component_html.md b/static/usage/v7/accordion/toggle/angular/example_component_html.md
new file mode 100644
index 00000000000..6af0af8516a
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+<ion-accordion-group #accordionGroup>
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+
+<ion-button (click)="toggleAccordion()">Toggle Second Accordion</ion-button>
+```
diff --git a/static/usage/v7/accordion/toggle/angular/example_component_ts.md b/static/usage/v7/accordion/toggle/angular/example_component_ts.md
new file mode 100644
index 00000000000..bdcac1d862f
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonAccordionGroup } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup;
+
+  toggleAccordion = () => {
+    const nativeEl = this.accordionGroup;
+    if (nativeEl.value === 'second') {
+      nativeEl.value = undefined;
+    } else {
+      nativeEl.value = 'second';
+    }
+  };
+}
+```
diff --git a/static/usage/v7/accordion/toggle/demo.html b/static/usage/v7/accordion/toggle/demo.html
new file mode 100644
index 00000000000..d230e1e35e0
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-accordion-group>
+          <ion-accordion value="first">
+            <ion-item slot="header" color="light">
+              <ion-label>First Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              First Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header" color="light">
+              <ion-label>Second Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Second Content
+            </div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header" color="light">
+              <ion-label>Third Accordion</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              Third Content
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+
+        <br />
+
+        <ion-button size="block" onclick="toggleSecondAccordion()">Toggle Second Accordion</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const accordionGroup = document.querySelector('ion-accordion-group');
+    const toggleSecondAccordion = () => {
+      if (accordionGroup.value === 'second') {
+        accordionGroup.value = undefined;
+      } else {
+        accordionGroup.value = 'second'
+      }
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/accordion/toggle/index.md b/static/usage/v7/accordion/toggle/index.md
new file mode 100644
index 00000000000..8f488dbb4b5
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  size="medium"
+  src="usage/v7/accordion/toggle/demo.html"
+/>
diff --git a/static/usage/v7/accordion/toggle/javascript.md b/static/usage/v7/accordion/toggle/javascript.md
new file mode 100644
index 00000000000..058e4e468d6
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/javascript.md
@@ -0,0 +1,35 @@
+```html
+<ion-accordion-group>
+  <ion-accordion value="first">
+    <ion-item slot="header" color="light">
+      <ion-label>First Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">First Content</div>
+  </ion-accordion>
+  <ion-accordion value="second">
+    <ion-item slot="header" color="light">
+      <ion-label>Second Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Second Content</div>
+  </ion-accordion>
+  <ion-accordion value="third">
+    <ion-item slot="header" color="light">
+      <ion-label>Third Accordion</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">Third Content</div>
+  </ion-accordion>
+</ion-accordion-group>
+
+<ion-button onclick="toggleAccordion()">Toggle Second Accordion</ion-button>
+
+<script>
+  const accordionGroup = document.querySelector('ion-accordion-group');
+  var toggleAccordion = () => {
+    if (accordionGroup.value === 'second') {
+      accordionGroup.value = undefined;
+    } else {
+      accordionGroup.value = 'second';
+    }
+  };
+</script>
+```
diff --git a/static/usage/v7/accordion/toggle/react.md b/static/usage/v7/accordion/toggle/react.md
new file mode 100644
index 00000000000..8d20c6bb18e
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/react.md
@@ -0,0 +1,51 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+  const accordionGroup = useRef<null | HTMLIonAccordionGroupElement>(null);
+  const toggleAccordion = () => {
+    if (!accordionGroup.current) {
+      return;
+    }
+    const nativeEl = accordionGroup.current;
+
+    if (nativeEl.value === 'second') {
+      nativeEl.value = undefined;
+    } else {
+      nativeEl.value = 'second';
+    }
+  };
+  return (
+    <>
+      <IonAccordionGroup ref={accordionGroup}>
+        <IonAccordion value="first">
+          <IonItem slot="header" color="light">
+            <IonLabel>First Accordion</IonLabel>
+          </IonItem>
+          <div className="ion-padding" slot="content">
+            First Content
+          </div>
+        </IonAccordion>
+        <IonAccordion value="second">
+          <IonItem slot="header" color="light">
+            <IonLabel>Second Accordion</IonLabel>
+          </IonItem>
+          <div className="ion-padding" slot="content">
+            Second Content
+          </div>
+        </IonAccordion>
+        <IonAccordion value="third">
+          <IonItem slot="header" color="light">
+            <IonLabel>Third Accordion</IonLabel>
+          </IonItem>
+          <div className="ion-padding" slot="content">
+            Third Content
+          </div>
+        </IonAccordion>
+      </IonAccordionGroup>
+      <IonButton onClick={toggleAccordion}>Toggle Second Accordion</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/toggle/vue.md b/static/usage/v7/accordion/toggle/vue.md
new file mode 100644
index 00000000000..c9fa11c0e9c
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/vue.md
@@ -0,0 +1,58 @@
+```html
+<template>
+  <ion-accordion-group ref="accordionGroup">
+    <ion-accordion value="first">
+      <ion-item slot="header" color="light">
+        <ion-label>First Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">First Content</div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header" color="light">
+        <ion-label>Second Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Second Content</div>
+    </ion-accordion>
+    <ion-accordion value="third">
+      <ion-item slot="header" color="light">
+        <ion-label>Third Accordion</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">Third Content</div>
+    </ion-accordion>
+  </ion-accordion-group>
+
+  <ion-button @click="toggleAccordion()">Toggle Second Accordion</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonAccordion,
+      IonAccordionGroup,
+      IonButton,
+      IonItem,
+      IonLabel,
+    },
+    setup() {
+      const accordionGroup = ref(null);
+      const toggleAccordion = () => {
+        if (!accordionGroup.value) {
+          return;
+        }
+        const nativeEl = accordionGroup.value.$el;
+
+        if (nativeEl.value === 'second') {
+          nativeEl.value = undefined;
+        } else {
+          nativeEl.value = 'second';
+        }
+      };
+
+      return { accordionGroup, toggleAccordion };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/action-sheet/basic/angular/example_component_css.md b/static/usage/v7/action-sheet/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..5058c1b3377
--- /dev/null
+++ b/static/usage/v7/action-sheet/basic/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+}
+
+code {
+  white-space: pre-wrap;
+}
+```
diff --git a/static/usage/v7/action-sheet/basic/angular/example_component_html.md b/static/usage/v7/action-sheet/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..0169d776c0f
--- /dev/null
+++ b/static/usage/v7/action-sheet/basic/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+<div class="container">
+  <ion-button (click)="presentActionSheet()">Open</ion-button>
+  <code *ngIf="result"> {{ result }} </code>
+</div>
+```
diff --git a/static/usage/v7/action-sheet/basic/angular/example_component_ts.md b/static/usage/v7/action-sheet/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..3961dc7ff5e
--- /dev/null
+++ b/static/usage/v7/action-sheet/basic/angular/example_component_ts.md
@@ -0,0 +1,50 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ActionSheetController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+  result: string;
+
+  constructor(private actionSheetCtrl: ActionSheetController) {}
+
+  async presentActionSheet() {
+    const actionSheet = await this.actionSheetCtrl.create({
+      header: 'Example header',
+      subHeader: 'Example subheader',
+      buttons: [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ],
+    });
+
+    await actionSheet.present();
+
+    const result = await actionSheet.onDidDismiss();
+    this.result = JSON.stringify(result, null, 2);
+  }
+}
+```
diff --git a/static/usage/v7/action-sheet/basic/demo.html b/static/usage/v7/action-sheet/basic/demo.html
new file mode 100644
index 00000000000..b41118e24ab
--- /dev/null
+++ b/static/usage/v7/action-sheet/basic/demo.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Action Sheet</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    code {
+      white-space: pre-wrap;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentActionSheet()">Open</ion-button>
+        <code id="action"></code>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const action = document.getElementById('action');
+
+    async function presentActionSheet() {
+      const actionSheet = document.createElement('ion-action-sheet');
+      actionSheet.header = 'Example header';
+      actionSheet.subHeader = 'Example subheader';
+      actionSheet.buttons = [{
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete'
+        }
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share'
+        }
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel'
+        }
+      }];
+
+      document.body.appendChild(actionSheet);
+      await actionSheet.present();
+
+      const result = await actionSheet.onDidDismiss();
+      action.innerText = JSON.stringify(result, null, 2);
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/action-sheet/basic/index.md b/static/usage/v7/action-sheet/basic/index.md
new file mode 100644
index 00000000000..63c3f006c80
--- /dev/null
+++ b/static/usage/v7/action-sheet/basic/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/action-sheet/basic/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/action-sheet/basic/javascript.md b/static/usage/v7/action-sheet/basic/javascript.md
new file mode 100644
index 00000000000..ec0dbca6eb3
--- /dev/null
+++ b/static/usage/v7/action-sheet/basic/javascript.md
@@ -0,0 +1,58 @@
+```html
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  code {
+    white-space: pre-wrap;
+  }
+</style>
+
+<div class="container">
+  <ion-button onclick="presentActionSheet()">Open</ion-button>
+  <code id="action"></code>
+</div>
+
+<script>
+  const action = document.getElementById('action');
+
+  async function presentActionSheet() {
+    const actionSheet = document.createElement('ion-action-sheet');
+    actionSheet.header = 'Example header';
+    actionSheet.subHeader = 'Example subheader';
+    actionSheet.buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete',
+        },
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share',
+        },
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel',
+        },
+      },
+    ];
+
+    document.body.appendChild(actionSheet);
+    await actionSheet.present();
+
+    const result = await actionSheet.onDidDismiss();
+    action.innerText = JSON.stringify(result, null, 2);
+  }
+</script>
+```
diff --git a/static/usage/v7/action-sheet/basic/react/main_css.md b/static/usage/v7/action-sheet/basic/react/main_css.md
new file mode 100644
index 00000000000..5058c1b3377
--- /dev/null
+++ b/static/usage/v7/action-sheet/basic/react/main_css.md
@@ -0,0 +1,13 @@
+```css
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+}
+
+code {
+  white-space: pre-wrap;
+}
+```
diff --git a/static/usage/v7/action-sheet/basic/react/main_tsx.md b/static/usage/v7/action-sheet/basic/react/main_tsx.md
new file mode 100644
index 00000000000..c24b2e00076
--- /dev/null
+++ b/static/usage/v7/action-sheet/basic/react/main_tsx.md
@@ -0,0 +1,52 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, useIonActionSheet } from '@ionic/react';
+import type { OverlayEventDetail } from '@ionic/core';
+
+import './main.css';
+
+function Example() {
+  const [present] = useIonActionSheet();
+  const [result, setResult] = useState<OverlayEventDetail>();
+
+  return (
+    <div className="container">
+      <IonButton
+        onClick={() =>
+          present({
+            header: 'Example header',
+            subHeader: 'Example subheader',
+            buttons: [
+              {
+                text: 'Delete',
+                role: 'destructive',
+                data: {
+                  action: 'delete',
+                },
+              },
+              {
+                text: 'Share',
+                data: {
+                  action: 'share',
+                },
+              },
+              {
+                text: 'Cancel',
+                role: 'cancel',
+                data: {
+                  action: 'cancel',
+                },
+              },
+            ],
+            onDidDismiss: ({ detail }) => setResult(detail),
+          })
+        }
+      >
+        Open
+      </IonButton>
+      {result && <code>{JSON.stringify(result, null, 2)}</code>}
+    </div>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/basic/vue.md b/static/usage/v7/action-sheet/basic/vue.md
new file mode 100644
index 00000000000..fa29fa1de89
--- /dev/null
+++ b/static/usage/v7/action-sheet/basic/vue.md
@@ -0,0 +1,73 @@
+```html
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  code {
+    white-space: pre-wrap;
+  }
+</style>
+
+<template>
+  <div class="container">
+    <ion-button @click="presentActionSheet">Open</ion-button>
+    <code>{{ result }}</code>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  import { IonButton, actionSheetController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    setup() {
+      const result = ref('');
+
+      const presentActionSheet = async () => {
+        const actionSheet = await actionSheetController.create({
+          header: 'Example header',
+          subHeader: 'Example subheader',
+          buttons: [
+            {
+              text: 'Delete',
+              role: 'destructive',
+              data: {
+                action: 'delete',
+              },
+            },
+            {
+              text: 'Share',
+              data: {
+                action: 'share',
+              },
+            },
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              data: {
+                action: 'cancel',
+              },
+            },
+          ],
+        });
+
+        await actionSheet.present();
+
+        const res = await actionSheet.onDidDismiss();
+        result.value = JSON.stringify(res, null, 2);
+      };
+
+      return {
+        result,
+        presentActionSheet,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_html.md b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..2cc044fbee1
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentActionSheet()">Open</ion-button>
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..d8f200f27ee
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ActionSheetController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+  constructor(private actionSheetCtrl: ActionSheetController) {}
+
+  async presentActionSheet() {
+    const actionSheet = await this.actionSheetCtrl.create({
+      header: 'Example header',
+      subHeader: 'Example subheader',
+      cssClass: 'my-custom-class',
+      buttons: [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ],
+    });
+
+    actionSheet.present();
+  }
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/angular/global_css.md b/static/usage/v7/action-sheet/theming/css-properties/angular/global_css.md
new file mode 100644
index 00000000000..2d9e22b3163
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/angular/global_css.md
@@ -0,0 +1,12 @@
+```css
+/* Note: These styles should be located in your global stylesheet */
+ion-action-sheet.my-custom-class {
+  --background: #f58840;
+  --backdrop-opacity: 0.6;
+  --button-background-selected: #e97223;
+  --button-color: #000000;
+  --color: #fff;
+  /* role: "destructive" button iOS styling override */
+  --ion-color-danger: #000000;
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/demo.html b/static/usage/v7/action-sheet/theming/css-properties/demo.html
new file mode 100644
index 00000000000..86df5261230
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/demo.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Action Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-action-sheet.my-custom-class {
+      --background: #F58840;
+      --backdrop-opacity: 0.6;
+      --button-background-selected: #e97223;
+      --button-color: #000000;
+      --color: #fff;
+      /* role: "destructive" button iOS styling override */
+      --ion-color-danger: #000000;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentActionSheet()">Open</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    async function presentActionSheet() {
+      const actionSheet = document.createElement('ion-action-sheet');
+      actionSheet.cssClass = 'my-custom-class';
+      actionSheet.header = 'Example header';
+      actionSheet.subHeader = 'Example subheader';
+      actionSheet.buttons = [{
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete'
+        }
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share'
+        }
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel'
+        }
+      }];
+
+      document.body.appendChild(actionSheet);
+      await actionSheet.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/action-sheet/theming/css-properties/index.md b/static/usage/v7/action-sheet/theming/css-properties/index.md
new file mode 100644
index 00000000000..37faf47f9f9
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v7/action-sheet/theming/css-properties/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/action-sheet/theming/css-properties/javascript.md b/static/usage/v7/action-sheet/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f7b87dca8b9
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/javascript.md
@@ -0,0 +1,49 @@
+```html
+<style>
+  ion-action-sheet.my-custom-class {
+    --background: #f58840;
+    --backdrop-opacity: 0.6;
+    --button-background-selected: #e97223;
+    --button-color: #000000;
+    --color: #fff;
+    /* role: "destructive" button iOS styling override */
+    --ion-color-danger: #000000;
+  }
+</style>
+
+<ion-button onclick="presentActionSheet()">Open</ion-button>
+
+<script>
+  async function presentActionSheet() {
+    const actionSheet = document.createElement('ion-action-sheet');
+    actionSheet.cssClass = 'my-custom-class';
+    actionSheet.header = 'Example header';
+    actionSheet.subHeader = 'Example subheader';
+    actionSheet.buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete',
+        },
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share',
+        },
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel',
+        },
+      },
+    ];
+
+    document.body.appendChild(actionSheet);
+    await actionSheet.present();
+  }
+</script>
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/react/main_css.md b/static/usage/v7/action-sheet/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..63809ed75c7
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-action-sheet.my-custom-class {
+  --background: #f58840;
+  --backdrop-opacity: 0.6;
+  --button-background-selected: #e97223;
+  --button-color: #000000;
+  --color: #fff;
+  /* role: "destructive" button iOS styling override */
+  --ion-color-danger: #000000;
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md b/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..bfcc13c92ea
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonActionSheet } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const [present] = useIonActionSheet();
+
+  return (
+    <IonButton
+      onClick={() =>
+        present({
+          header: 'Example header',
+          subHeader: 'Example subheader',
+          cssClass: 'my-custom-class',
+          buttons: [
+            {
+              text: 'Delete',
+              role: 'destructive',
+              data: {
+                action: 'delete',
+              },
+            },
+            {
+              text: 'Share',
+              data: {
+                action: 'share',
+              },
+            },
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              data: {
+                action: 'cancel',
+              },
+            },
+          ],
+        })
+      }
+    >
+      Open
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/vue.md b/static/usage/v7/action-sheet/theming/css-properties/vue.md
new file mode 100644
index 00000000000..c2a422e14ac
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/vue.md
@@ -0,0 +1,60 @@
+```html
+<style>
+  ion-action-sheet.my-custom-class {
+    --background: #f58840;
+    --backdrop-opacity: 0.6;
+    --button-background-selected: #e97223;
+    --button-color: #000000;
+    --color: #fff;
+    /* role: "destructive" button iOS styling override */
+    --ion-color-danger: #000000;
+  }
+</style>
+
+<template>
+  <ion-button @click="presentActionSheet">Open</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, actionSheetController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    setup() {
+      const presentActionSheet = async () => {
+        const actionSheet = await actionSheetController.create({
+          header: 'Example header',
+          subHeader: 'Example subheader',
+          cssClass: 'my-custom-class',
+          buttons: [
+            {
+              text: 'Delete',
+              role: 'destructive',
+              data: {
+                action: 'delete',
+              },
+            },
+            {
+              text: 'Share',
+              data: {
+                action: 'share',
+              },
+            },
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              data: {
+                action: 'cancel',
+              },
+            },
+          ],
+        });
+
+        actionSheet.present();
+      };
+
+      return { presentActionSheet };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/angular/example_component_html.md b/static/usage/v7/action-sheet/theming/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..2cc044fbee1
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentActionSheet()">Open</ion-button>
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md
new file mode 100644
index 00000000000..d8f200f27ee
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ActionSheetController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+  constructor(private actionSheetCtrl: ActionSheetController) {}
+
+  async presentActionSheet() {
+    const actionSheet = await this.actionSheetCtrl.create({
+      header: 'Example header',
+      subHeader: 'Example subheader',
+      cssClass: 'my-custom-class',
+      buttons: [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ],
+    });
+
+    actionSheet.present();
+  }
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/angular/global_css.md b/static/usage/v7/action-sheet/theming/styling/angular/global_css.md
new file mode 100644
index 00000000000..46999a97921
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/angular/global_css.md
@@ -0,0 +1,29 @@
+```css
+/* Note: These styles should be located in your global stylesheet */
+ion-action-sheet.my-custom-class .action-sheet-group {
+  background: #f58840;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-title {
+  color: #fff;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+  background: #e97223;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-button,
+ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
+  color: #000000;
+}
+
+@media (any-hover: hover) {
+  ion-action-sheet.my-custom-class .action-sheet-button:hover {
+    color: #000000;
+  }
+}
+
+ion-action-sheet.my-custom-class ion-backdrop {
+  opacity: 0.6;
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/demo.html b/static/usage/v7/action-sheet/theming/styling/demo.html
new file mode 100644
index 00000000000..df397d1220f
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/demo.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Action Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-action-sheet.my-custom-class .action-sheet-group {
+      background: #F58840;
+    }
+
+    ion-action-sheet.my-custom-class .action-sheet-title {
+      color: #fff;
+    }
+
+    ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+      background: #e97223;
+    }
+
+    ion-action-sheet.my-custom-class .action-sheet-button,
+    ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
+      color: #000000;
+    }
+
+    @media (any-hover: hover) {
+      ion-action-sheet.my-custom-class .action-sheet-button:hover {
+        color: #000000;
+      }
+    }
+
+    ion-action-sheet.my-custom-class ion-backdrop {
+      opacity: 0.6;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentActionSheet()">Open</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    async function presentActionSheet() {
+      const actionSheet = document.createElement('ion-action-sheet');
+      actionSheet.cssClass = 'my-custom-class';
+      actionSheet.header = 'Example header';
+      actionSheet.subHeader = 'Example subheader';
+      actionSheet.buttons = [{
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete'
+        }
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share'
+        }
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel'
+        }
+      }];
+
+      document.body.appendChild(actionSheet);
+      await actionSheet.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/action-sheet/theming/styling/index.md b/static/usage/v7/action-sheet/theming/styling/index.md
new file mode 100644
index 00000000000..67a346b3318
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v7/action-sheet/theming/styling/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/action-sheet/theming/styling/javascript.md b/static/usage/v7/action-sheet/theming/styling/javascript.md
new file mode 100644
index 00000000000..c74b95b41f7
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/javascript.md
@@ -0,0 +1,66 @@
+```html
+<style>
+  ion-action-sheet.my-custom-class .action-sheet-group {
+    background: #f58840;
+  }
+
+  ion-action-sheet.my-custom-class .action-sheet-title {
+    color: #fff;
+  }
+
+  ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+    background: #e97223;
+  }
+
+  ion-action-sheet.my-custom-class .action-sheet-button,
+  ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
+    color: #000000;
+  }
+
+  @media (any-hover: hover) {
+    ion-action-sheet.my-custom-class .action-sheet-button:hover {
+      color: #000000;
+    }
+  }
+
+  ion-action-sheet.my-custom-class ion-backdrop {
+    opacity: 0.6;
+  }
+</style>
+
+<ion-button onclick="presentActionSheet()">Open</ion-button>
+
+<script>
+  async function presentActionSheet() {
+    const actionSheet = document.createElement('ion-action-sheet');
+    actionSheet.cssClass = 'my-custom-class';
+    actionSheet.header = 'Example header';
+    actionSheet.subHeader = 'Example subheader';
+    actionSheet.buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete',
+        },
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share',
+        },
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel',
+        },
+      },
+    ];
+
+    document.body.appendChild(actionSheet);
+    await actionSheet.present();
+  }
+</script>
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/react/main_css.md b/static/usage/v7/action-sheet/theming/styling/react/main_css.md
new file mode 100644
index 00000000000..cff22cfd41e
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/react/main_css.md
@@ -0,0 +1,28 @@
+```css
+ion-action-sheet.my-custom-class .action-sheet-group {
+  background: #f58840;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-title {
+  color: #fff;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+  background: #e97223;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-button,
+ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
+  color: #000000;
+}
+
+@media (any-hover: hover) {
+  ion-action-sheet.my-custom-class .action-sheet-button:hover {
+    color: #000000;
+  }
+}
+
+ion-action-sheet.my-custom-class ion-backdrop {
+  opacity: 0.6;
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md
new file mode 100644
index 00000000000..bfcc13c92ea
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonActionSheet } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const [present] = useIonActionSheet();
+
+  return (
+    <IonButton
+      onClick={() =>
+        present({
+          header: 'Example header',
+          subHeader: 'Example subheader',
+          cssClass: 'my-custom-class',
+          buttons: [
+            {
+              text: 'Delete',
+              role: 'destructive',
+              data: {
+                action: 'delete',
+              },
+            },
+            {
+              text: 'Share',
+              data: {
+                action: 'share',
+              },
+            },
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              data: {
+                action: 'cancel',
+              },
+            },
+          ],
+        })
+      }
+    >
+      Open
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/vue.md b/static/usage/v7/action-sheet/theming/styling/vue.md
new file mode 100644
index 00000000000..d0b199ba480
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/vue.md
@@ -0,0 +1,76 @@
+```html
+<style>
+  ion-action-sheet.my-custom-class .action-sheet-group {
+    background: #f58840;
+  }
+
+  ion-action-sheet.my-custom-class .action-sheet-title {
+    color: #fff;
+  }
+
+  ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+    background: #e97223;
+  }
+
+  ion-action-sheet.my-custom-class .action-sheet-button,
+  ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
+    color: #000000;
+  }
+
+  @media (any-hover: hover) {
+    ion-action-sheet.my-custom-class .action-sheet-button:hover {
+      color: #000000;
+    }
+  }
+
+  ion-action-sheet.my-custom-class ion-backdrop {
+    opacity: 0.6;
+  }
+</style>
+
+<template>
+  <ion-button @click="presentActionSheet">Open</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, actionSheetController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    setup() {
+      const presentActionSheet = async () => {
+        const actionSheet = await actionSheetController.create({
+          header: 'Example header',
+          subHeader: 'Example subheader',
+          cssClass: 'my-custom-class',
+          buttons: [
+            {
+              text: 'Delete',
+              role: 'destructive',
+              data: {
+                action: 'delete',
+              },
+            },
+            {
+              text: 'Share',
+              data: {
+                action: 'share',
+              },
+            },
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              data: {
+                action: 'cancel',
+              },
+            },
+          ],
+        });
+        actionSheet.present();
+      };
+
+      return { presentActionSheet };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/alert/buttons/angular/example_component_html.md b/static/usage/v7/alert/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..5cddcd596ed
--- /dev/null
+++ b/static/usage/v7/alert/buttons/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-button (click)="presentAlert()">Click Me</ion-button>
+<p>{{ handlerMessage }}</p>
+<p>{{ roleMessage }}</p>
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/buttons/angular/example_component_ts.md b/static/usage/v7/alert/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..f4a7b4e9a18
--- /dev/null
+++ b/static/usage/v7/alert/buttons/angular/example_component_ts.md
@@ -0,0 +1,42 @@
+```ts
+import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  handlerMessage = '';
+  roleMessage = '';
+
+  constructor(private alertController: AlertController) {}
+
+  async presentAlert() {
+    const alert = await this.alertController.create({
+      header: 'Alert!',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            this.handlerMessage = 'Alert canceled';
+          },
+        },
+        {
+          text: 'OK',
+          role: 'confirm',
+          handler: () => {
+            this.handlerMessage = 'Alert confirmed';
+          },
+        },
+      ],
+    });
+
+    await alert.present();
+
+    const { role } = await alert.onDidDismiss();
+    this.roleMessage = `Dismissed with role: ${role}`;
+  }
+}
+```
diff --git a/static/usage/v7/alert/buttons/demo.html b/static/usage/v7/alert/buttons/demo.html
new file mode 100644
index 00000000000..bd5f4eb4367
--- /dev/null
+++ b/static/usage/v7/alert/buttons/demo.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Alert</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    .container p {
+      margin-bottom: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentAlert()">Click Me</ion-button>
+        <p id="handlerResult"></p>
+        <p id="roleResult"></p>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const handlerOutput = document.querySelector('#handlerResult');
+    const roleOutput = document.querySelector('#roleResult');
+
+    async function presentAlert() {
+      const alert = document.createElement('ion-alert');
+      alert.header = 'Alert!';
+      alert.buttons = [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => { handlerOutput.innerText = 'Alert canceled'; }
+        },
+        {
+          text: 'OK',
+          role: 'confirm',
+          handler: () => { handlerOutput.innerText = 'Alert confirmed'; }
+        }
+      ];
+
+      document.body.appendChild(alert);
+      await alert.present();
+
+      const { role } = await alert.onDidDismiss();
+      roleOutput.innerText = `Dismissed with role: ${role}`;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/alert/buttons/index.md b/static/usage/v7/alert/buttons/index.md
new file mode 100644
index 00000000000..0da89f1f7bd
--- /dev/null
+++ b/static/usage/v7/alert/buttons/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/alert/buttons/demo.html"
+/>
diff --git a/static/usage/v7/alert/buttons/javascript.md b/static/usage/v7/alert/buttons/javascript.md
new file mode 100644
index 00000000000..9550a72ca43
--- /dev/null
+++ b/static/usage/v7/alert/buttons/javascript.md
@@ -0,0 +1,33 @@
+```html
+<ion-button onclick="presentAlert()">Click Me</ion-button>
+<p id="handlerResult"></p>
+<p id="roleResult"></p>
+
+<script>
+  const handlerOutput = document.querySelector('#handlerResult');
+  const roleOutput = document.querySelector('#roleResult');
+
+  async function presentAlert() {
+    const alert = document.createElement('ion-alert');
+    alert.header = 'Alert!';
+    alert.buttons = [
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        handler: () => { handlerOutput.innerText = 'Alert canceled'; }
+      },
+      {
+        text: 'OK',
+        role: 'confirm',
+        handler: () => { handlerOutput.innerText = 'Alert confirmed'; }
+      }
+    ];
+
+    document.body.appendChild(alert);
+    await alert.present();
+
+    const { role } = await alert.onDidDismiss();
+    roleOutput.innerText = `Dismissed with role: ${role}`;
+  }
+</script>
+```
diff --git a/static/usage/v7/alert/buttons/react.md b/static/usage/v7/alert/buttons/react.md
new file mode 100644
index 00000000000..da6138b71c5
--- /dev/null
+++ b/static/usage/v7/alert/buttons/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, useIonAlert } from '@ionic/react';
+
+function Example() {
+  const [presentAlert] = useIonAlert();
+  const [handlerMessage, setHandlerMessage] = useState('');
+  const [roleMessage, setRoleMessage] = useState('');
+
+  return (
+    <>
+      <IonButton
+        onClick={() =>
+          presentAlert({
+            header: 'Alert!',
+            buttons: [
+              {
+                text: 'Cancel',
+                role: 'cancel',
+                handler: () => {
+                  setHandlerMessage('Alert canceled');
+                },
+              },
+              {
+                text: 'OK',
+                role: 'confirm',
+                handler: () => {
+                  setHandlerMessage('Alert confirmed');
+                },
+              },
+            ],
+            onDidDismiss: (e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`),
+          })
+        }
+      >
+        Click Me
+      </IonButton>
+      <p>{handlerMessage}</p>
+      <p>{roleMessage}</p>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md
new file mode 100644
index 00000000000..0e22b47e911
--- /dev/null
+++ b/static/usage/v7/alert/buttons/vue.md
@@ -0,0 +1,53 @@
+```html
+<template>
+  <ion-button @click="presentAlert">Click Me</ion-button>
+  <p>{{ handlerMessage }}</p>
+  <p>{{ roleMessage }}</p>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  import { IonButton, alertController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    setup() {
+      const handlerMessage = ref('');
+      const roleMessage = ref('');
+
+      const presentAlert = async () => {
+        const alert = await alertController.create({
+          header: 'Alert!',
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              handler: () => {
+                handlerMessage.value = 'Alert canceled';
+              },
+            },
+            {
+              text: 'OK',
+              role: 'confirm',
+              handler: () => {
+                handlerMessage.value = 'Alert confirmed';
+              },
+            },
+          ],
+        });
+
+        await alert.present();
+
+        const { role } = await alert.onDidDismiss();
+        roleMessage.value = `Dismissed with role: ${role}`;
+      };
+
+      return {
+        handlerMessage,
+        roleMessage,
+        presentAlert,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/alert/customization/angular/example_component_html.md b/static/usage/v7/alert/customization/angular/example_component_html.md
new file mode 100644
index 00000000000..183dd98719d
--- /dev/null
+++ b/static/usage/v7/alert/customization/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentAlert()">Click Me</ion-button>
+```
diff --git a/static/usage/v7/alert/customization/angular/example_component_ts.md b/static/usage/v7/alert/customization/angular/example_component_ts.md
new file mode 100644
index 00000000000..9606aeb72f4
--- /dev/null
+++ b/static/usage/v7/alert/customization/angular/example_component_ts.md
@@ -0,0 +1,31 @@
+```ts
+import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private alertController: AlertController) {}
+
+  async presentAlert() {
+    const alert = await this.alertController.create({
+      header: 'Are you sure?',
+      cssClass: 'custom-alert',
+      buttons: [
+        {
+          text: 'No',
+          cssClass: 'alert-button-cancel',
+        },
+        {
+          text: 'Yes',
+          cssClass: 'alert-button-confirm',
+        },
+      ],
+    });
+
+    await alert.present();
+  }
+}
+```
diff --git a/static/usage/v7/alert/customization/angular/global_css.md b/static/usage/v7/alert/customization/angular/global_css.md
new file mode 100644
index 00000000000..c4d1f859c34
--- /dev/null
+++ b/static/usage/v7/alert/customization/angular/global_css.md
@@ -0,0 +1,33 @@
+```css
+ion-alert.custom-alert {
+  --backdrop-opacity: 0.7;
+}
+
+.custom-alert .alert-button-group {
+  padding: 8px;
+}
+
+button.alert-button.alert-button-confirm {
+  background-color: var(--ion-color-success);
+  color: var(--ion-color-success-contrast);
+}
+
+.md button.alert-button.alert-button-confirm {
+  border-radius: 4px;
+}
+
+.ios .custom-alert button.alert-button {
+  border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+}
+
+.ios button.alert-button.alert-button-cancel {
+  border-right: 0;
+  border-bottom-left-radius: 13px;
+  border-top-left-radius: 13px;
+}
+
+.ios button.alert-button.alert-button-confirm {
+  border-bottom-right-radius: 13px;
+  border-top-right-radius: 13px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/customization/demo.html b/static/usage/v7/alert/customization/demo.html
new file mode 100644
index 00000000000..a17881c7825
--- /dev/null
+++ b/static/usage/v7/alert/customization/demo.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Alert</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-alert.custom-alert {
+      --backdrop-opacity: 0.7;
+    }
+
+    .custom-alert .alert-button-group {
+      padding: 8px;
+    }
+
+    button.alert-button.alert-button-confirm {
+      background-color: var(--ion-color-success);
+      color: var(--ion-color-success-contrast);
+    }
+
+    .md button.alert-button.alert-button-confirm {
+      border-radius: 4px;
+    }
+
+    .ios .custom-alert button.alert-button {
+      border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+    }
+
+    .ios button.alert-button.alert-button-cancel {
+      border-right: 0;
+      border-bottom-left-radius: 13px;
+      border-top-left-radius: 13px;
+    }
+
+    .ios button.alert-button.alert-button-confirm {
+      border-bottom-right-radius: 13px;
+      border-top-right-radius: 13px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentAlert()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    async function presentAlert() {
+      const alert = document.createElement('ion-alert');
+      alert.header = 'Are you sure?';
+      alert.cssClass = 'custom-alert';
+      alert.buttons = [
+        {
+          text: 'No',
+          cssClass: 'alert-button-cancel'
+        },
+        {
+          text: 'Yes',
+          cssClass: 'alert-button-confirm'
+        }
+      ];
+
+      document.body.appendChild(alert);
+      await alert.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/alert/customization/index.md b/static/usage/v7/alert/customization/index.md
new file mode 100644
index 00000000000..59bc30dd589
--- /dev/null
+++ b/static/usage/v7/alert/customization/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v7/alert/customization/demo.html"
+/>
diff --git a/static/usage/v7/alert/customization/javascript.md b/static/usage/v7/alert/customization/javascript.md
new file mode 100644
index 00000000000..f6280b08e3d
--- /dev/null
+++ b/static/usage/v7/alert/customization/javascript.md
@@ -0,0 +1,58 @@
+```html
+<ion-button onclick="presentAlert()">Click Me</ion-button>
+
+<script>
+  async function presentAlert() {
+    const alert = document.createElement('ion-alert');
+    alert.header = 'Are you sure?';
+    alert.cssClass = 'custom-alert';
+    alert.buttons = [
+      {
+        text: 'No',
+        cssClass: 'alert-button-cancel'
+      },
+      {
+        text: 'Yes',
+        cssClass: 'alert-button-confirm'
+      }
+    ];
+
+    document.body.appendChild(alert);
+    await alert.present();
+  }
+</script>
+
+<style>
+  ion-alert.custom-alert {
+    --backdrop-opacity: 0.7;
+  }
+
+  .custom-alert .alert-button-group {
+    padding: 8px;
+  }
+
+  button.alert-button.alert-button-confirm {
+    background-color: var(--ion-color-success);
+    color: var(--ion-color-success-contrast);
+  }
+
+  .md button.alert-button.alert-button-confirm {
+    border-radius: 4px;
+  }
+
+  .ios .custom-alert button.alert-button {
+    border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+  }
+
+  .ios button.alert-button.alert-button-cancel {
+    border-right: 0;
+    border-bottom-left-radius: 13px;
+    border-top-left-radius: 13px;
+  }
+
+  .ios button.alert-button.alert-button-confirm {
+    border-bottom-right-radius: 13px;
+    border-top-right-radius: 13px;
+  }
+</style>
+```
diff --git a/static/usage/v7/alert/customization/react/main_css.md b/static/usage/v7/alert/customization/react/main_css.md
new file mode 100644
index 00000000000..c4d1f859c34
--- /dev/null
+++ b/static/usage/v7/alert/customization/react/main_css.md
@@ -0,0 +1,33 @@
+```css
+ion-alert.custom-alert {
+  --backdrop-opacity: 0.7;
+}
+
+.custom-alert .alert-button-group {
+  padding: 8px;
+}
+
+button.alert-button.alert-button-confirm {
+  background-color: var(--ion-color-success);
+  color: var(--ion-color-success-contrast);
+}
+
+.md button.alert-button.alert-button-confirm {
+  border-radius: 4px;
+}
+
+.ios .custom-alert button.alert-button {
+  border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+}
+
+.ios button.alert-button.alert-button-cancel {
+  border-right: 0;
+  border-bottom-left-radius: 13px;
+  border-top-left-radius: 13px;
+}
+
+.ios button.alert-button.alert-button-confirm {
+  border-bottom-right-radius: 13px;
+  border-top-right-radius: 13px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/customization/react/main_tsx.md b/static/usage/v7/alert/customization/react/main_tsx.md
new file mode 100644
index 00000000000..7a04d967cea
--- /dev/null
+++ b/static/usage/v7/alert/customization/react/main_tsx.md
@@ -0,0 +1,34 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonAlert } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const [presentAlert] = useIonAlert();
+
+  return (
+    <IonButton
+      onClick={() =>
+        presentAlert({
+          header: 'Are you sure?',
+          cssClass: 'custom-alert',
+          buttons: [
+            {
+              text: 'No',
+              cssClass: 'alert-button-cancel',
+            },
+            {
+              text: 'Yes',
+              cssClass: 'alert-button-confirm',
+            },
+          ],
+        })
+      }
+    >
+      Click Me
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/customization/vue.md b/static/usage/v7/alert/customization/vue.md
new file mode 100644
index 00000000000..bf3ae0d5edf
--- /dev/null
+++ b/static/usage/v7/alert/customization/vue.md
@@ -0,0 +1,69 @@
+```html
+<template>
+  <ion-button @click="presentAlert">Click Me</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, alertController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    setup() {
+      const presentAlert = async () => {
+        const alert = await alertController.create({
+          header: 'Are you sure?',
+          cssClass: 'custom-alert',
+          buttons: [
+            {
+              text: 'No',
+              cssClass: 'alert-button-cancel',
+            },
+            {
+              text: 'Yes',
+              cssClass: 'alert-button-confirm',
+            },
+          ],
+        });
+
+        await alert.present();
+      };
+
+      return { presentAlert };
+    },
+  };
+</script>
+
+<style>
+  ion-alert.custom-alert {
+    --backdrop-opacity: 0.7;
+  }
+
+  .custom-alert .alert-button-group {
+    padding: 8px;
+  }
+
+  button.alert-button.alert-button-confirm {
+    background-color: var(--ion-color-success);
+    color: var(--ion-color-success-contrast);
+  }
+
+  .md button.alert-button.alert-button-confirm {
+    border-radius: 4px;
+  }
+
+  .ios .custom-alert button.alert-button {
+    border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
+  }
+
+  .ios button.alert-button.alert-button-cancel {
+    border-right: 0;
+    border-bottom-left-radius: 13px;
+    border-top-left-radius: 13px;
+  }
+
+  .ios button.alert-button.alert-button-confirm {
+    border-bottom-right-radius: 13px;
+    border-top-right-radius: 13px;
+  }
+</style>
+```
diff --git a/static/usage/v7/alert/inputs/radios/angular/example_component_html.md b/static/usage/v7/alert/inputs/radios/angular/example_component_html.md
new file mode 100644
index 00000000000..e484d6c912d
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentAlert()">Click Me</ion-button>
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md
new file mode 100644
index 00000000000..78b305a0f59
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md
@@ -0,0 +1,38 @@
+```ts
+import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private alertController: AlertController) {}
+
+  async presentAlert() {
+    const alert = await this.alertController.create({
+      header: 'Select your favorite color',
+      buttons: ['OK'],
+      inputs: [
+        {
+          label: 'Red',
+          type: 'radio',
+          value: 'red',
+        },
+        {
+          label: 'Blue',
+          type: 'radio',
+          value: 'blue',
+        },
+        {
+          label: 'Green',
+          type: 'radio',
+          value: 'green',
+        },
+      ],
+    });
+
+    await alert.present();
+  }
+}
+```
diff --git a/static/usage/v7/alert/inputs/radios/demo.html b/static/usage/v7/alert/inputs/radios/demo.html
new file mode 100644
index 00000000000..5f5ebb0e8b9
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/demo.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Alert</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentAlert()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    async function presentAlert() {
+      const alert = document.createElement('ion-alert');
+      alert.header = 'Select your favorite color';
+      alert.buttons = ['OK'];
+      alert.inputs = [
+        {
+          label: 'Red',
+          type: 'radio',
+          value: 'red'
+        },
+        {
+          label: 'Blue',
+          type: 'radio',
+          value: 'blue'
+        },
+        {
+          label: 'Green',
+          type: 'radio',
+          value: 'green'
+        }
+      ];
+
+      document.body.appendChild(alert);
+      await alert.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/alert/inputs/radios/index.md b/static/usage/v7/alert/inputs/radios/index.md
new file mode 100644
index 00000000000..8ec9fc1bddd
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/alert/inputs/radios/demo.html"
+/>
diff --git a/static/usage/v7/alert/inputs/radios/javascript.md b/static/usage/v7/alert/inputs/radios/javascript.md
new file mode 100644
index 00000000000..341bdf8b1eb
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/javascript.md
@@ -0,0 +1,31 @@
+```html
+<ion-button onclick="presentAlert()">Click Me</ion-button>
+
+<script>
+  async function presentAlert() {
+    const alert = document.createElement('ion-alert');
+    alert.header = 'Select your favorite color';
+    alert.buttons = ['OK'];
+    alert.inputs = [
+      {
+        label: 'Red',
+        type: 'radio',
+        value: 'red'
+      },
+      {
+        label: 'Blue',
+        type: 'radio',
+        value: 'blue'
+      },
+      {
+        label: 'Green',
+        type: 'radio',
+        value: 'green'
+      }
+    ];
+
+    document.body.appendChild(alert);
+    await alert.present();
+  }
+</script>
+```
diff --git a/static/usage/v7/alert/inputs/radios/react.md b/static/usage/v7/alert/inputs/radios/react.md
new file mode 100644
index 00000000000..475135e63b1
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonAlert } from '@ionic/react';
+
+function Example() {
+  const [presentAlert] = useIonAlert();
+
+  return (
+    <IonButton
+      onClick={() =>
+        presentAlert({
+          header: 'Select your favorite color',
+          buttons: ['OK'],
+          inputs: [
+            {
+              label: 'Red',
+              type: 'radio',
+              value: 'red',
+            },
+            {
+              label: 'Blue',
+              type: 'radio',
+              value: 'blue',
+            },
+            {
+              label: 'Green',
+              type: 'radio',
+              value: 'green',
+            },
+          ],
+        })
+      }
+    >
+      Click Me
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/inputs/radios/vue.md b/static/usage/v7/alert/inputs/radios/vue.md
new file mode 100644
index 00000000000..2122acba635
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/vue.md
@@ -0,0 +1,42 @@
+```html
+<template>
+  <ion-button @click="presentAlert">Click Me</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, alertController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    setup() {
+      const presentAlert = async () => {
+        const alert = await alertController.create({
+          header: 'Select your favorite color',
+          buttons: ['OK'],
+          inputs: [
+            {
+              label: 'Red',
+              type: 'radio',
+              value: 'red',
+            },
+            {
+              label: 'Blue',
+              type: 'radio',
+              value: 'blue',
+            },
+            {
+              label: 'Green',
+              type: 'radio',
+              value: 'green',
+            },
+          ],
+        });
+
+        await alert.present();
+      };
+
+      return { presentAlert };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md
new file mode 100644
index 00000000000..e484d6c912d
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentAlert()">Click Me</ion-button>
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md
new file mode 100644
index 00000000000..2c4f2ab04d2
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md
@@ -0,0 +1,42 @@
+```ts
+import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private alertController: AlertController) {}
+
+  async presentAlert() {
+    const alert = await this.alertController.create({
+      header: 'Please enter your info',
+      buttons: ['OK'],
+      inputs: [
+        {
+          placeholder: 'Name',
+        },
+        {
+          placeholder: 'Nickname (max 8 characters)',
+          attributes: {
+            maxlength: 8,
+          },
+        },
+        {
+          type: 'number',
+          placeholder: 'Age',
+          min: 1,
+          max: 100,
+        },
+        {
+          type: 'textarea',
+          placeholder: 'A little about yourself',
+        },
+      ],
+    });
+
+    await alert.present();
+  }
+}
+```
diff --git a/static/usage/v7/alert/inputs/text-inputs/demo.html b/static/usage/v7/alert/inputs/text-inputs/demo.html
new file mode 100644
index 00000000000..d2badb8c851
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Alert</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentAlert()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    async function presentAlert() {
+      const alert = document.createElement('ion-alert');
+      alert.header = 'Please enter your info';
+      alert.buttons = ['OK'];
+      alert.inputs = [
+        {
+          placeholder: 'Name'
+        },
+        {
+          placeholder: 'Nickname (max 8 characters)',
+          attributes: {
+            maxlength: 8
+          }
+        },
+        {
+          type: 'number',
+          placeholder: 'Age',
+          min: 1,
+          max: 100
+        },
+        {
+          type: 'textarea',
+          placeholder: 'A little about yourself'
+        }
+      ];
+
+      document.body.appendChild(alert);
+      await alert.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/alert/inputs/text-inputs/index.md b/static/usage/v7/alert/inputs/text-inputs/index.md
new file mode 100644
index 00000000000..6c56317816e
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="450px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/alert/inputs/text-inputs/demo.html"
+/>
diff --git a/static/usage/v7/alert/inputs/text-inputs/javascript.md b/static/usage/v7/alert/inputs/text-inputs/javascript.md
new file mode 100644
index 00000000000..84f96bf5f8d
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/javascript.md
@@ -0,0 +1,35 @@
+```html
+<ion-button onclick="presentAlert()">Click Me</ion-button>
+
+<script>
+  async function presentAlert() {
+    const alert = document.createElement('ion-alert');
+    alert.header = 'Please enter your info';
+    alert.buttons = ['OK'];
+    alert.inputs = [
+      {
+        placeholder: 'Name'
+      },
+      {
+        placeholder: 'Nickname (max 8 characters)',
+        attributes: {
+          maxlength: 8
+        }
+      },
+      {
+        type: 'number',
+        placeholder: 'Age',
+        min: 1,
+        max: 100
+      },
+      {
+        type: 'textarea',
+        placeholder: 'A little about yourself'
+      }
+    ];
+
+    document.body.appendChild(alert);
+    await alert.present();
+  }
+</script>
+```
diff --git a/static/usage/v7/alert/inputs/text-inputs/react.md b/static/usage/v7/alert/inputs/text-inputs/react.md
new file mode 100644
index 00000000000..e496935f690
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonAlert } from '@ionic/react';
+
+function Example() {
+  const [presentAlert] = useIonAlert();
+
+  return (
+    <IonButton
+      onClick={() =>
+        presentAlert({
+          header: 'Please enter your info',
+          buttons: ['OK'],
+          inputs: [
+            {
+              placeholder: 'Name',
+            },
+            {
+              placeholder: 'Nickname (max 8 characters)',
+              attributes: {
+                maxlength: 8,
+              },
+            },
+            {
+              type: 'number',
+              placeholder: 'Age',
+              min: 1,
+              max: 100,
+            },
+            {
+              type: 'textarea',
+              placeholder: 'A little about yourself',
+            },
+          ],
+        })
+      }
+    >
+      Click Me
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/inputs/text-inputs/vue.md b/static/usage/v7/alert/inputs/text-inputs/vue.md
new file mode 100644
index 00000000000..32edc59e311
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <ion-button @click="presentAlert">Click Me</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, alertController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    setup() {
+      const presentAlert = async () => {
+        const alert = await alertController.create({
+          header: 'Please enter your info',
+          buttons: ['OK'],
+          inputs: [
+            {
+              placeholder: 'Name',
+            },
+            {
+              placeholder: 'Nickname (max 8 characters)',
+              attributes: {
+                maxlength: 8,
+              },
+            },
+            {
+              type: 'number',
+              placeholder: 'Age',
+              min: 1,
+              max: 100,
+            },
+            {
+              type: 'textarea',
+              placeholder: 'A little about yourself',
+            },
+          ],
+        });
+
+        await alert.present();
+      };
+
+      return { presentAlert };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/alert/presenting/controller/angular/example_component_html.md b/static/usage/v7/alert/presenting/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..e484d6c912d
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentAlert()">Click Me</ion-button>
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..32583600432
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private alertController: AlertController) {}
+
+  async presentAlert() {
+    const alert = await this.alertController.create({
+      header: 'Alert',
+      subHeader: 'Important message',
+      message: 'This is an alert!',
+      buttons: ['OK'],
+    });
+
+    await alert.present();
+  }
+}
+```
diff --git a/static/usage/v7/alert/presenting/controller/demo.html b/static/usage/v7/alert/presenting/controller/demo.html
new file mode 100644
index 00000000000..fed8c84f369
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Alert</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentAlert()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    async function presentAlert() {
+      const alert = document.createElement('ion-alert');
+      alert.header = 'Alert';
+      alert.subHeader = 'Important message';
+      alert.message = 'This is an alert!';
+      alert.buttons = ['OK'];
+
+      document.body.appendChild(alert);
+      await alert.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/controller/index.md b/static/usage/v7/alert/presenting/controller/index.md
new file mode 100644
index 00000000000..5a01edce2a0
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/alert/presenting/controller/demo.html"
+/>
diff --git a/static/usage/v7/alert/presenting/controller/javascript.md b/static/usage/v7/alert/presenting/controller/javascript.md
new file mode 100644
index 00000000000..b9159bf2fde
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/javascript.md
@@ -0,0 +1,16 @@
+```html
+<ion-button onclick="presentAlert()">Click Me</ion-button>
+
+<script>
+  async function presentAlert() {
+    const alert = document.createElement('ion-alert');
+    alert.header = 'Alert';
+    alert.subHeader = 'Important message';
+    alert.message = 'This is an alert!';
+    alert.buttons = ['OK'];
+
+    document.body.appendChild(alert);
+    await alert.present();
+  }
+</script>
+```
diff --git a/static/usage/v7/alert/presenting/controller/react.md b/static/usage/v7/alert/presenting/controller/react.md
new file mode 100644
index 00000000000..4e59124b155
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonAlert } from '@ionic/react';
+
+function Example() {
+  const [presentAlert] = useIonAlert();
+
+  return (
+    <IonButton
+      onClick={() =>
+        presentAlert({
+          header: 'Alert',
+          subHeader: 'Important message',
+          message: 'This is an alert!',
+          buttons: ['OK'],
+        })
+      }
+    >
+      Click Me
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/presenting/controller/vue.md b/static/usage/v7/alert/presenting/controller/vue.md
new file mode 100644
index 00000000000..6ec781a6bf2
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-button @click="presentAlert">Click Me</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, alertController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    setup() {
+      const presentAlert = async () => {
+        const alert = await alertController.create({
+          header: 'Alert',
+          subHeader: 'Important message',
+          message: 'This is an alert!',
+          buttons: ['OK'],
+        });
+
+        await alert.present();
+      };
+
+      return { presentAlert };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/avatar/basic/angular.md b/static/usage/v7/avatar/basic/angular.md
new file mode 100644
index 00000000000..a74cea822be
--- /dev/null
+++ b/static/usage/v7/avatar/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-avatar>
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+</ion-avatar>
+```
diff --git a/static/usage/v7/avatar/basic/demo.html b/static/usage/v7/avatar/basic/demo.html
new file mode 100644
index 00000000000..46fbedfd2d3
--- /dev/null
+++ b/static/usage/v7/avatar/basic/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-avatar>
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </ion-avatar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/avatar/basic/index.md b/static/usage/v7/avatar/basic/index.md
new file mode 100644
index 00000000000..8c51fa21d00
--- /dev/null
+++ b/static/usage/v7/avatar/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/avatar/basic/demo.html" />
diff --git a/static/usage/v7/avatar/basic/javascript.md b/static/usage/v7/avatar/basic/javascript.md
new file mode 100644
index 00000000000..a74cea822be
--- /dev/null
+++ b/static/usage/v7/avatar/basic/javascript.md
@@ -0,0 +1,5 @@
+```html
+<ion-avatar>
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+</ion-avatar>
+```
diff --git a/static/usage/v7/avatar/basic/react.md b/static/usage/v7/avatar/basic/react.md
new file mode 100644
index 00000000000..9fe5dafb88f
--- /dev/null
+++ b/static/usage/v7/avatar/basic/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonAvatar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonAvatar>
+        <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+      </IonAvatar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/avatar/basic/vue.md b/static/usage/v7/avatar/basic/vue.md
new file mode 100644
index 00000000000..5136ca90400
--- /dev/null
+++ b/static/usage/v7/avatar/basic/vue.md
@@ -0,0 +1,16 @@
+```html
+<template>
+  <ion-avatar>
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+  </ion-avatar>
+</template>
+
+<script lang="ts">
+  import { IonAvatar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonAvatar },
+  });
+</script>
+```
diff --git a/static/usage/v7/avatar/chip/angular.md b/static/usage/v7/avatar/chip/angular.md
new file mode 100644
index 00000000000..6fa2d82aa0b
--- /dev/null
+++ b/static/usage/v7/avatar/chip/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-chip>
+  <ion-avatar>
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+  </ion-avatar>
+  <ion-label>Chip Avatar</ion-label>
+</ion-chip>
+```
diff --git a/static/usage/v7/avatar/chip/demo.html b/static/usage/v7/avatar/chip/demo.html
new file mode 100644
index 00000000000..d06475bb40f
--- /dev/null
+++ b/static/usage/v7/avatar/chip/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-chip>
+          <ion-avatar>
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>Chip Avatar</ion-label>
+        </ion-chip>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/avatar/chip/index.md b/static/usage/v7/avatar/chip/index.md
new file mode 100644
index 00000000000..d3a7fc0f6a9
--- /dev/null
+++ b/static/usage/v7/avatar/chip/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/avatar/chip/demo.html" />
diff --git a/static/usage/v7/avatar/chip/javascript.md b/static/usage/v7/avatar/chip/javascript.md
new file mode 100644
index 00000000000..6fa2d82aa0b
--- /dev/null
+++ b/static/usage/v7/avatar/chip/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-chip>
+  <ion-avatar>
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+  </ion-avatar>
+  <ion-label>Chip Avatar</ion-label>
+</ion-chip>
+```
diff --git a/static/usage/v7/avatar/chip/react.md b/static/usage/v7/avatar/chip/react.md
new file mode 100644
index 00000000000..69bd5dbb4fb
--- /dev/null
+++ b/static/usage/v7/avatar/chip/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonAvatar, IonChip, IonLabel } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonChip>
+        <IonAvatar>
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </IonAvatar>
+        <IonLabel>Chip Avatar</IonLabel>
+      </IonChip>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/avatar/chip/vue.md b/static/usage/v7/avatar/chip/vue.md
new file mode 100644
index 00000000000..8ded7586040
--- /dev/null
+++ b/static/usage/v7/avatar/chip/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-chip>
+    <ion-avatar>
+      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+    </ion-avatar>
+    <ion-label>Chip Avatar</ion-label>
+  </ion-chip>
+</template>
+
+<script lang="ts">
+  import { IonAvatar, IonChip, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonAvatar, IonChip, IonLabel }
+  });
+</script>
+```
diff --git a/static/usage/v7/avatar/item/angular.md b/static/usage/v7/avatar/item/angular.md
new file mode 100644
index 00000000000..5bf15fbc737
--- /dev/null
+++ b/static/usage/v7/avatar/item/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-item>
+  <ion-avatar slot="start">
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+  </ion-avatar>
+  <ion-label>Item Avatar</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/avatar/item/demo.html b/static/usage/v7/avatar/item/demo.html
new file mode 100644
index 00000000000..d51279cdb34
--- /dev/null
+++ b/static/usage/v7/avatar/item/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-avatar slot="start">
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>Item Avatar</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/avatar/item/index.md b/static/usage/v7/avatar/item/index.md
new file mode 100644
index 00000000000..52814ca5af0
--- /dev/null
+++ b/static/usage/v7/avatar/item/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/avatar/item/demo.html" />
diff --git a/static/usage/v7/avatar/item/javascript.md b/static/usage/v7/avatar/item/javascript.md
new file mode 100644
index 00000000000..5bf15fbc737
--- /dev/null
+++ b/static/usage/v7/avatar/item/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-item>
+  <ion-avatar slot="start">
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+  </ion-avatar>
+  <ion-label>Item Avatar</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/avatar/item/react.md b/static/usage/v7/avatar/item/react.md
new file mode 100644
index 00000000000..71b562a5d7b
--- /dev/null
+++ b/static/usage/v7/avatar/item/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonAvatar, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonAvatar slot="start">
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </IonAvatar>
+        <IonLabel>Item Avatar</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/avatar/item/vue.md b/static/usage/v7/avatar/item/vue.md
new file mode 100644
index 00000000000..315af034426
--- /dev/null
+++ b/static/usage/v7/avatar/item/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-item>
+    <ion-avatar slot="start">
+      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+    </ion-avatar>
+    <ion-label>Item Avatar</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonAvatar, IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonAvatar, IonItem, IonLabel }
+  });
+</script>
+```
diff --git a/static/usage/v7/avatar/theming/css-properties/angular/example_component_css.md b/static/usage/v7/avatar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..5a97e1fc6ae
--- /dev/null
+++ b/static/usage/v7/avatar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-avatar {
+  --border-radius: 4px;
+}
+```
diff --git a/static/usage/v7/avatar/theming/css-properties/angular/example_component_html.md b/static/usage/v7/avatar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..a74cea822be
--- /dev/null
+++ b/static/usage/v7/avatar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-avatar>
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+</ion-avatar>
+```
diff --git a/static/usage/v7/avatar/theming/css-properties/demo.html b/static/usage/v7/avatar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..3419617edfa
--- /dev/null
+++ b/static/usage/v7/avatar/theming/css-properties/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-avatar {
+      --border-radius: 4px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-avatar slot="start">
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </ion-avatar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/avatar/theming/css-properties/index.md b/static/usage/v7/avatar/theming/css-properties/index.md
new file mode 100644
index 00000000000..38bc99f7e8a
--- /dev/null
+++ b/static/usage/v7/avatar/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/avatar/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/avatar/theming/css-properties/javascript.md b/static/usage/v7/avatar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f866e15762d
--- /dev/null
+++ b/static/usage/v7/avatar/theming/css-properties/javascript.md
@@ -0,0 +1,11 @@
+```html
+<style>
+  ion-avatar {
+    --border-radius: 4px;
+  }
+</style>
+
+<ion-avatar>
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+</ion-avatar>
+```
diff --git a/static/usage/v7/avatar/theming/css-properties/react/main_css.md b/static/usage/v7/avatar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..5a97e1fc6ae
--- /dev/null
+++ b/static/usage/v7/avatar/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-avatar {
+  --border-radius: 4px;
+}
+```
diff --git a/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..f04d7f8fbe3
--- /dev/null
+++ b/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,18 @@
+
+```tsx
+import React from 'react';
+import { IonAvatar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonAvatar>
+        <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+      </IonAvatar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/avatar/theming/css-properties/vue.md b/static/usage/v7/avatar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..affb7ccdecb
--- /dev/null
+++ b/static/usage/v7/avatar/theming/css-properties/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-avatar>
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+  </ion-avatar>
+</template>
+
+<script lang="ts">
+  import { IonAvatar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonAvatar }
+  });
+</script>
+
+<style scoped>
+  ion-avatar {
+    --border-radius: 4px;
+  }
+</style>
+```
diff --git a/static/usage/v7/backdrop/basic/angular.md b/static/usage/v7/backdrop/basic/angular.md
new file mode 100644
index 00000000000..c98b5316ebb
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/angular.md
@@ -0,0 +1,17 @@
+```html
+<ion-backdrop [visible]="true"></ion-backdrop>
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Backdrop</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-item>
+      <ion-checkbox slot="start"></ion-checkbox>
+      <ion-label>Checkbox</ion-label>
+    </ion-item>
+    <ion-button expand="block">Button</ion-button>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/backdrop/basic/demo.html b/static/usage/v7/backdrop/basic/demo.html
new file mode 100644
index 00000000000..ed5a79768e8
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/demo.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Backdrop</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-backdrop visible="true"></ion-backdrop>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Backdrop</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-item>
+          <ion-checkbox slot="start"></ion-checkbox>
+          <ion-label>Checkbox</ion-label>
+        </ion-item>
+        <ion-button expand="block">Button</ion-button>
+      </ion-content>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/backdrop/basic/index.md b/static/usage/v7/backdrop/basic/index.md
new file mode 100644
index 00000000000..adf0b9d8d5e
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/backdrop/basic/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/backdrop/basic/javascript.md b/static/usage/v7/backdrop/basic/javascript.md
new file mode 100644
index 00000000000..1a9d09c2da3
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-backdrop visible="true"></ion-backdrop>
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Backdrop</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-item>
+      <ion-checkbox slot="start"></ion-checkbox>
+      <ion-label>Checkbox</ion-label>
+    </ion-item>
+    <ion-button expand="block">Button</ion-button>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/backdrop/basic/react.md b/static/usage/v7/backdrop/basic/react.md
new file mode 100644
index 00000000000..9d6529c0cac
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import {
+  IonBackdrop,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonItem,
+  IonCheckbox,
+  IonLabel,
+  IonButton,
+} from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonBackdrop visible={true}></IonBackdrop>
+      <div className="ion-page">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Backdrop</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          <IonItem>
+            <IonCheckbox slot="start"></IonCheckbox>
+            <IonLabel>Checkbox</IonLabel>
+          </IonItem>
+          <IonButton expand="block">Button</IonButton>
+        </IonContent>
+      </div>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/backdrop/basic/vue.md b/static/usage/v7/backdrop/basic/vue.md
new file mode 100644
index 00000000000..a42da95a2e8
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-backdrop :visible="true"></ion-backdrop>
+  <div class="ion-page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Backdrop</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-item>
+        <ion-checkbox slot="start"></ion-checkbox>
+        <ion-label>Checkbox</ion-label>
+      </ion-item>
+      <ion-button expand="block">Button</ion-button>
+    </ion-content>
+  </div>
+</template>
+<script lang="ts">
+  import {
+    IonBackdrop,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonItem,
+    IonCheckbox,
+    IonLabel,
+    IonButton,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCheckbox, IonLabel, IonButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/backdrop/styling/angular/example_component_css.md b/static/usage/v7/backdrop/styling/angular/example_component_css.md
new file mode 100644
index 00000000000..01a079a9d8c
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/angular/example_component_css.md
@@ -0,0 +1,21 @@
+```css
+ion-backdrop {
+  opacity: 0.9;
+  background: var(--ion-color-primary);
+}
+
+#box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ion-background-color, #fff);
+  width: 90%;
+  height: 100px;
+  border-radius: 10px;
+}
+```
diff --git a/static/usage/v7/backdrop/styling/angular/example_component_html.md b/static/usage/v7/backdrop/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..3c951690078
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+<ion-backdrop [visible]="true"></ion-backdrop>
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Backdrop</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+      perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+      expedita vero!
+    </p>
+  </ion-content>
+</div>
+<div id="box">
+  <ion-checkbox color="light"></ion-checkbox>
+  <ion-button class="ion-margin-start" color="light">Clickable</ion-button>
+</div>
+```
diff --git a/static/usage/v7/backdrop/styling/demo.html b/static/usage/v7/backdrop/styling/demo.html
new file mode 100644
index 00000000000..8b28987c937
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/demo.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Backdrop</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-backdrop {
+      opacity: 0.9;
+      background: var(--ion-color-primary);
+    }
+
+    #box {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateY(-50%) translateX(-50%);
+      z-index: 100;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--ion-background-color, #fff);
+      width: 90%;
+      height: 100px;
+      border-radius: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-backdrop visible="true"></ion-backdrop>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Backdrop</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+          perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+          expedita vero!</p>
+      </ion-content>
+    </div>
+    <div id="box">
+      <ion-checkbox color="light"></ion-checkbox>
+      <ion-button class="ion-margin-start" color="light">Clickable</ion-button>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/backdrop/styling/index.md b/static/usage/v7/backdrop/styling/index.md
new file mode 100644
index 00000000000..a7861a18ed7
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/backdrop/styling/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/backdrop/styling/javascript.md b/static/usage/v7/backdrop/styling/javascript.md
new file mode 100644
index 00000000000..6c30f0c5c90
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/javascript.md
@@ -0,0 +1,43 @@
+```html
+<style>
+  ion-backdrop {
+    opacity: 0.9;
+    background: var(--ion-color-primary);
+  }
+
+  #box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--ion-background-color, #fff);
+    width: 90%;
+    height: 100px;
+    border-radius: 10px;
+  }
+</style>
+
+<ion-backdrop visible="true"></ion-backdrop>
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Backdrop</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+      perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+      expedita vero!
+    </p>
+  </ion-content>
+</div>
+<div id="box">
+  <ion-checkbox color="light"></ion-checkbox>
+  <ion-button class="ion-margin-start" color="light">Clickable</ion-button>
+</div>
+```
diff --git a/static/usage/v7/backdrop/styling/react/main_css.md b/static/usage/v7/backdrop/styling/react/main_css.md
new file mode 100644
index 00000000000..01a079a9d8c
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/react/main_css.md
@@ -0,0 +1,21 @@
+```css
+ion-backdrop {
+  opacity: 0.9;
+  background: var(--ion-color-primary);
+}
+
+#box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ion-background-color, #fff);
+  width: 90%;
+  height: 100px;
+  border-radius: 10px;
+}
+```
diff --git a/static/usage/v7/backdrop/styling/react/main_tsx.md b/static/usage/v7/backdrop/styling/react/main_tsx.md
new file mode 100644
index 00000000000..978b47ce750
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/react/main_tsx.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonCheckbox, IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonBackdrop visible={true}></IonBackdrop>
+      <div className="ion-page">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Backdrop</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+            perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum,
+            provident expedita vero!
+          </p>
+        </IonContent>
+      </div>
+      <div id="box">
+        <IonCheckbox color="light"></IonCheckbox>
+        <IonButton class="ion-margin-start" color="light">
+          Clickable
+        </IonButton>
+      </div>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/backdrop/styling/vue.md b/static/usage/v7/backdrop/styling/vue.md
new file mode 100644
index 00000000000..7e884eb2fb4
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/vue.md
@@ -0,0 +1,53 @@
+```html
+<style>
+  ion-backdrop {
+    opacity: 0.9;
+    background: var(--ion-color-primary);
+  }
+
+  #box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--ion-background-color, #fff);
+    width: 90%;
+    height: 100px;
+    border-radius: 10px;
+  }
+</style>
+
+<template>
+  <ion-backdrop :visible="true"></ion-backdrop>
+  <div class="ion-page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Backdrop</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+        perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+        expedita vero!
+      </p>
+    </ion-content>
+  </div>
+  <div id="box">
+    <ion-checkbox color="light"></ion-checkbox>
+    <ion-button class="ion-margin-start" color="light">Clickable</ion-button>
+  </div>
+</template>
+<script lang="ts">
+  import { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonCheckbox, IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonCheckbox, IonButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/badge/basic/angular.md b/static/usage/v7/badge/basic/angular.md
new file mode 100644
index 00000000000..9f8de1ff7eb
--- /dev/null
+++ b/static/usage/v7/badge/basic/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-badge slot="start">11</ion-badge>
+    <ion-label>Badge in start slot</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-badge slot="end">22</ion-badge>
+    <ion-label>Badge in end slot</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/badge/basic/demo.html b/static/usage/v7/badge/basic/demo.html
new file mode 100644
index 00000000000..a560f74b87b
--- /dev/null
+++ b/static/usage/v7/badge/basic/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Badge</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 250px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-badge slot="start">11</ion-badge>
+            <ion-label>Badge in start slot</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-badge slot="end">22</ion-badge>
+            <ion-label>Badge in end slot</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/badge/basic/index.md b/static/usage/v7/badge/basic/index.md
new file mode 100644
index 00000000000..843c4a046cf
--- /dev/null
+++ b/static/usage/v7/badge/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/badge/basic/demo.html" />
diff --git a/static/usage/v7/badge/basic/javascript.md b/static/usage/v7/badge/basic/javascript.md
new file mode 100644
index 00000000000..9f8de1ff7eb
--- /dev/null
+++ b/static/usage/v7/badge/basic/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-badge slot="start">11</ion-badge>
+    <ion-label>Badge in start slot</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-badge slot="end">22</ion-badge>
+    <ion-label>Badge in end slot</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/badge/basic/react.md b/static/usage/v7/badge/basic/react.md
new file mode 100644
index 00000000000..4d569dbbd02
--- /dev/null
+++ b/static/usage/v7/badge/basic/react.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react';
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonBadge slot="start">11</IonBadge>
+        <IonLabel>Badge in start slot</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonBadge slot="end">22</IonBadge>
+        <IonLabel>Badge in end slot</IonLabel>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/badge/basic/vue.md b/static/usage/v7/badge/basic/vue.md
new file mode 100644
index 00000000000..e02b9c552e3
--- /dev/null
+++ b/static/usage/v7/badge/basic/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-badge slot="start">11</ion-badge>
+      <ion-label>Badge in start slot</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-badge slot="end">22</ion-badge>
+      <ion-label>Badge in end slot</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBadge, IonItem, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/badge/theming/colors/angular.md b/static/usage/v7/badge/theming/colors/angular.md
new file mode 100644
index 00000000000..bad750b1bfc
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/angular.md
@@ -0,0 +1,28 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Followers</ion-label>
+    <ion-badge color="primary">22k</ion-badge>
+  </ion-item>
+  <ion-item>
+    <ion-label>Likes</ion-label>
+    <ion-badge color="secondary">118k</ion-badge>
+  </ion-item>
+  <ion-item>
+    <ion-label>Stars</ion-label>
+    <ion-badge color="tertiary">34k</ion-badge>
+  </ion-item>
+  <ion-item>
+    <ion-label>Completed</ion-label>
+    <ion-badge color="success">80</ion-badge>
+  </ion-item>
+  <ion-item>
+    <ion-label>Warnings</ion-label>
+    <ion-badge color="warning">70</ion-badge>
+  </ion-item>
+  <ion-item>
+    <ion-label>Notifications</ion-label>
+    <ion-badge color="danger">1000</ion-badge>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/badge/theming/colors/demo.html b/static/usage/v7/badge/theming/colors/demo.html
new file mode 100644
index 00000000000..a81103de32b
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Badge</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 250px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Followers</ion-label>
+            <ion-badge color="primary">22k</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Likes</ion-label>
+            <ion-badge color="secondary">118k</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Stars</ion-label>
+            <ion-badge color="tertiary">34k</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Completed</ion-label>
+            <ion-badge color="success">80</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Warnings</ion-label>
+            <ion-badge color="warning">70</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Notifications</ion-label>
+            <ion-badge color="danger">1000</ion-badge>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/badge/theming/colors/index.md b/static/usage/v7/badge/theming/colors/index.md
new file mode 100644
index 00000000000..1b640d0675b
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/badge/theming/colors/demo.html"
+/>
diff --git a/static/usage/v7/badge/theming/colors/javascript.md b/static/usage/v7/badge/theming/colors/javascript.md
new file mode 100644
index 00000000000..bad750b1bfc
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Followers</ion-label>
+    <ion-badge color="primary">22k</ion-badge>
+  </ion-item>
+  <ion-item>
+    <ion-label>Likes</ion-label>
+    <ion-badge color="secondary">118k</ion-badge>
+  </ion-item>
+  <ion-item>
+    <ion-label>Stars</ion-label>
+    <ion-badge color="tertiary">34k</ion-badge>
+  </ion-item>
+  <ion-item>
+    <ion-label>Completed</ion-label>
+    <ion-badge color="success">80</ion-badge>
+  </ion-item>
+  <ion-item>
+    <ion-label>Warnings</ion-label>
+    <ion-badge color="warning">70</ion-badge>
+  </ion-item>
+  <ion-item>
+    <ion-label>Notifications</ion-label>
+    <ion-badge color="danger">1000</ion-badge>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/badge/theming/colors/react.md b/static/usage/v7/badge/theming/colors/react.md
new file mode 100644
index 00000000000..ad53c54274a
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react';
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonLabel>Followers</IonLabel>
+        <IonBadge color="primary">22k</IonBadge>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Likes</IonLabel>
+        <IonBadge color="secondary">118k</IonBadge>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Stars</IonLabel>
+        <IonBadge color="tertiary">34k</IonBadge>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Completed</IonLabel>
+        <IonBadge color="success">80</IonBadge>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Warnings</IonLabel>
+        <IonBadge color="warning">70</IonBadge>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Notifications</IonLabel>
+        <IonBadge color="danger">1000</IonBadge>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/badge/theming/colors/vue.md b/static/usage/v7/badge/theming/colors/vue.md
new file mode 100644
index 00000000000..77e5c1a9e97
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/vue.md
@@ -0,0 +1,39 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>Followers</ion-label>
+      <ion-badge color="primary">22k</ion-badge>
+    </ion-item>
+    <ion-item>
+      <ion-label>Likes</ion-label>
+      <ion-badge color="secondary">118k</ion-badge>
+    </ion-item>
+    <ion-item>
+      <ion-label>Stars</ion-label>
+      <ion-badge color="tertiary">34k</ion-badge>
+    </ion-item>
+    <ion-item>
+      <ion-label>Completed</ion-label>
+      <ion-badge color="success">80</ion-badge>
+    </ion-item>
+    <ion-item>
+      <ion-label>Warnings</ion-label>
+      <ion-badge color="warning">70</ion-badge>
+    </ion-item>
+    <ion-item>
+      <ion-label>Notifications</ion-label>
+      <ion-badge color="danger">1000</ion-badge>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBadge, IonItem, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..950e96b4e80
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-badge {
+  --background: purple;
+  --color: white;
+  --padding-end: 20px;
+  --padding-start: 20px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/badge/theming/css-properties/angular/example_component_html.md b/static/usage/v7/badge/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..92df32f60de
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Badges styled</ion-label>
+    <ion-badge>1</ion-badge>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/badge/theming/css-properties/demo.html b/static/usage/v7/badge/theming/css-properties/demo.html
new file mode 100644
index 00000000000..f942c2d83e6
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/demo.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Styling the Select</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 250px;
+    }
+
+    ion-badge {
+      --background: purple;
+      --color: white;
+      --padding-end: 20px;
+      --padding-start: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Badges styled</ion-label>
+            <ion-badge>1</ion-badge>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/badge/theming/css-properties/index.md b/static/usage/v7/badge/theming/css-properties/index.md
new file mode 100644
index 00000000000..3fdf7e333a1
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/badge/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/badge/theming/css-properties/javascript.md b/static/usage/v7/badge/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..6dedc97ba4d
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Badges styled</ion-label>
+    <ion-badge>1</ion-badge>
+  </ion-item>
+</ion-list>
+
+<style>
+  ion-badge {
+    --background: purple;
+    --color: white;
+    --padding-end: 20px;
+    --padding-start: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/badge/theming/css-properties/react/main_css.md b/static/usage/v7/badge/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..950e96b4e80
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-badge {
+  --background: purple;
+  --color: white;
+  --padding-end: 20px;
+  --padding-start: 20px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/badge/theming/css-properties/react/main_tsx.md b/static/usage/v7/badge/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..fea8b34191e
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonLabel>Badges styled</IonLabel>
+        <IonBadge>1</IonBadge>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/badge/theming/css-properties/vue.md b/static/usage/v7/badge/theming/css-properties/vue.md
new file mode 100644
index 00000000000..08a5d88d81e
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>Badges styled</ion-label>
+      <ion-badge>1</ion-badge>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBadge, IonItem, IonLabel, IonList },
+  });
+</script>
+
+<style>
+  ion-badge {
+    --background: purple;
+    --color: white;
+    --padding-end: 20px;
+    --padding-start: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/breadcrumbs/basic/angular.md b/static/usage/v7/breadcrumbs/basic/angular.md
new file mode 100644
index 00000000000..9683fbe6792
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/basic/demo.html b/static/usage/v7/breadcrumbs/basic/demo.html
new file mode 100644
index 00000000000..f230752bad0
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/basic/index.md b/static/usage/v7/breadcrumbs/basic/index.md
new file mode 100644
index 00000000000..0159e5aa44f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/breadcrumbs/basic/demo.html" />
diff --git a/static/usage/v7/breadcrumbs/basic/javascript.md b/static/usage/v7/breadcrumbs/basic/javascript.md
new file mode 100644
index 00000000000..9683fbe6792
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/basic/react.md b/static/usage/v7/breadcrumbs/basic/react.md
new file mode 100644
index 00000000000..602a5174490
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+  return (
+    <IonBreadcrumbs>
+      <IonBreadcrumb href="#home">Home</IonBreadcrumb>
+      <IonBreadcrumb href="#electronics">Electronics</IonBreadcrumb>
+      <IonBreadcrumb href="#cameras">Cameras</IonBreadcrumb>
+      <IonBreadcrumb href="#film">Film</IonBreadcrumb>
+    </IonBreadcrumbs>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/basic/vue.md b/static/usage/v7/breadcrumbs/basic/vue.md
new file mode 100644
index 00000000000..f665b4cb686
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-breadcrumbs>
+    <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+    <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  </ion-breadcrumbs>
+</template>
+
+<script lang="ts">
+  import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBreadcrumb, IonBreadcrumbs },
+  });
+</script>
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md
new file mode 100644
index 00000000000..76a545d6a8e
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-breadcrumbs [maxItems]="maxBreadcrumbs" (ionCollapsedClick)="expandBreadcrumbs()">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+```
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
new file mode 100644
index 00000000000..8ae69af72a5
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
@@ -0,0 +1,15 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  maxBreadcrumbs = 4;
+
+  expandBreadcrumbs() {
+    this.maxBreadcrumbs = undefined;
+  }
+}
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html
new file mode 100644
index 00000000000..a6977cb29bf
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs max-items="4">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const breadcrumbs = document.querySelector('ion-breadcrumbs');
+
+    breadcrumbs.addEventListener('ionCollapsedClick', () => {
+      breadcrumbs.maxItems = undefined;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md
new file mode 100644
index 00000000000..c6f75cb1155
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html"
+/>
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/javascript.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/javascript.md
new file mode 100644
index 00000000000..6e720c27d3c
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-breadcrumbs max-items="4">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+
+<script>
+  const breadcrumbs = document.querySelector('ion-breadcrumbs');
+
+  breadcrumbs.addEventListener('ionCollapsedClick', () => {
+    breadcrumbs.maxItems = undefined;
+  });
+</script>
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/react.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/react.md
new file mode 100644
index 00000000000..b4933d4cf8f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React, { useState } from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+
+function Example() {
+  const [maxBreadcrumbs, setMaxBreadcrumbs] = useState<number | undefined>(4);
+
+  return (
+    <IonBreadcrumbs maxItems={maxBreadcrumbs} onIonCollapsedClick={() => setMaxBreadcrumbs(undefined)}>
+      <IonBreadcrumb href="#home">Home</IonBreadcrumb>
+      <IonBreadcrumb href="#electronics">Electronics</IonBreadcrumb>
+      <IonBreadcrumb href="#photography">Photography</IonBreadcrumb>
+      <IonBreadcrumb href="#cameras">Cameras</IonBreadcrumb>
+      <IonBreadcrumb href="#film">Film</IonBreadcrumb>
+      <IonBreadcrumb href="#35mm">35 mm</IonBreadcrumb>
+    </IonBreadcrumbs>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
new file mode 100644
index 00000000000..f88b8a6e322
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-breadcrumbs :max-items="maxBreadcrumbs" @ionCollapsedClick="expandBreadcrumbs()">
+    <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+    <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+    <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+    <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+  </ion-breadcrumbs>
+</template>
+
+<script lang="ts">
+  import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBreadcrumb, IonBreadcrumbs },
+    data() {
+      return {
+        maxBreadcrumbs: 4
+      }
+    },
+    methods: {
+      expandBreadcrumbs() {
+        this.maxBreadcrumbs = undefined;
+      }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular.md
new file mode 100644
index 00000000000..d7571e2ebce
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular.md
@@ -0,0 +1,41 @@
+```html
+<div>Before Collapse = 2</div>
+<ion-breadcrumbs [maxItems]="4" [itemsBeforeCollapse]="2">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+
+<div class="ion-margin-top">Before Collapse = 0</div>
+<ion-breadcrumbs [maxItems]="4" [itemsBeforeCollapse]="0">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+
+<div class="ion-margin-top">After Collapse = 2</div>
+<ion-breadcrumbs [maxItems]="4" [itemsAfterCollapse]="2">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+
+<div class="ion-margin-top">Before Collapse = 2, After Collapse = 2</div>
+<ion-breadcrumbs [maxItems]="4" [itemsBeforeCollapse]="2" [itemsAfterCollapse]="2">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html
new file mode 100644
index 00000000000..96d8ae72cd0
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div>Before Collapse = 2</div>
+        <ion-breadcrumbs max-items="4" items-before-collapse="2">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <div class="ion-margin-top">Before Collapse = 0</div>
+        <ion-breadcrumbs max-items="4" items-before-collapse="0">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <div class="ion-margin-top">After Collapse = 2</div>
+        <ion-breadcrumbs max-items="4" items-after-collapse="2">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <div class="ion-margin-top">Before Collapse = 2, After Collapse = 2</div>
+        <ion-breadcrumbs max-items="4" items-before-collapse="2" items-after-collapse="2">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md
new file mode 100644
index 00000000000..3df433d1891
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html"
+/>
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/javascript.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/javascript.md
new file mode 100644
index 00000000000..11648ff8762
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/javascript.md
@@ -0,0 +1,41 @@
+```html
+<div>Before Collapse = 2</div>
+<ion-breadcrumbs max-items="4" items-before-collapse="2">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+
+<div class="ion-margin-top">Before Collapse = 0</div>
+<ion-breadcrumbs max-items="4" items-before-collapse="0">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+
+<div class="ion-margin-top">After Collapse = 2</div>
+<ion-breadcrumbs max-items="4" items-after-collapse="2">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+
+<div class="ion-margin-top">Before Collapse = 2, After Collapse = 2</div>
+<ion-breadcrumbs max-items="4" items-before-collapse="2" items-after-collapse="2">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/react.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/react.md
new file mode 100644
index 00000000000..e54c8676f4e
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/react.md
@@ -0,0 +1,50 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <div>Before Collapse = 2</div>
+      <IonBreadcrumbs maxItems={4} itemsBeforeCollapse={2}>
+        <IonBreadcrumb href="#home">Home</IonBreadcrumb>
+        <IonBreadcrumb href="#electronics">Electronics</IonBreadcrumb>
+        <IonBreadcrumb href="#photography">Photography</IonBreadcrumb>
+        <IonBreadcrumb href="#cameras">Cameras</IonBreadcrumb>
+        <IonBreadcrumb href="#film">Film</IonBreadcrumb>
+        <IonBreadcrumb href="#35mm">35 mm</IonBreadcrumb>
+      </IonBreadcrumbs>
+
+      <div className="ion-margin-top">Before Collapse = 0</div>
+      <IonBreadcrumbs maxItems={4} itemsBeforeCollapse={0}>
+        <IonBreadcrumb href="#home">Home</IonBreadcrumb>
+        <IonBreadcrumb href="#electronics">Electronics</IonBreadcrumb>
+        <IonBreadcrumb href="#photography">Photography</IonBreadcrumb>
+        <IonBreadcrumb href="#cameras">Cameras</IonBreadcrumb>
+        <IonBreadcrumb href="#film">Film</IonBreadcrumb>
+        <IonBreadcrumb href="#35mm">35 mm</IonBreadcrumb>
+      </IonBreadcrumbs>
+
+      <div className="ion-margin-top">After Collapse = 2</div>
+      <IonBreadcrumbs maxItems={4} itemsAfterCollapse={2}>
+        <IonBreadcrumb href="#home">Home</IonBreadcrumb>
+        <IonBreadcrumb href="#electronics">Electronics</IonBreadcrumb>
+        <IonBreadcrumb href="#photography">Photography</IonBreadcrumb>
+        <IonBreadcrumb href="#cameras">Cameras</IonBreadcrumb>
+        <IonBreadcrumb href="#film">Film</IonBreadcrumb>
+        <IonBreadcrumb href="#35mm">35 mm</IonBreadcrumb>
+      </IonBreadcrumbs>
+
+      <div className="ion-margin-top">Before Collapse = 2, After Collapse = 2</div>
+      <IonBreadcrumbs maxItems={4} itemsBeforeCollapse={2} itemsAfterCollapse={2}>
+        <IonBreadcrumb href="#home">Home</IonBreadcrumb>
+        <IonBreadcrumb href="#electronics">Electronics</IonBreadcrumb>
+        <IonBreadcrumb href="#photography">Photography</IonBreadcrumb>
+        <IonBreadcrumb href="#cameras">Cameras</IonBreadcrumb>
+        <IonBreadcrumb href="#film">Film</IonBreadcrumb>
+        <IonBreadcrumb href="#35mm">35 mm</IonBreadcrumb>
+      </IonBreadcrumbs>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md
new file mode 100644
index 00000000000..61dbebde1d7
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md
@@ -0,0 +1,52 @@
+```html
+<template>
+  <div>Before Collapse = 2</div>
+  <ion-breadcrumbs :max-items="4" :items-before-collapse="2">
+    <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+    <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+    <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+    <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+  </ion-breadcrumbs>
+
+  <div class="ion-margin-top">Before Collapse = 0</div>
+  <ion-breadcrumbs :max-items="4" :items-before-collapse="0">
+    <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+    <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+    <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+    <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+  </ion-breadcrumbs>
+
+  <div class="ion-margin-top">After Collapse = 2</div>
+  <ion-breadcrumbs :max-items="4" :items-after-collapse="2">
+    <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+    <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+    <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+    <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+  </ion-breadcrumbs>
+
+  <div class="ion-margin-top">Before Collapse = 2, After Collapse = 2</div>
+  <ion-breadcrumbs :max-items="4" :items-before-collapse="2" :items-after-collapse="2">
+    <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+    <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+    <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+    <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+  </ion-breadcrumbs>
+</template>
+
+<script lang="ts">
+  import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBreadcrumb, IonBreadcrumbs },
+  });
+</script>
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular.md
new file mode 100644
index 00000000000..e77f5ec2d16
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular.md
@@ -0,0 +1,10 @@
+```html
+<ion-breadcrumbs [maxItems]="4">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html
new file mode 100644
index 00000000000..6b2ac36c51c
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs max-items="4">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md
new file mode 100644
index 00000000000..48e8a4ed82f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/breadcrumbs/collapsing-items/max-items/demo.html"
+/>
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/javascript.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/javascript.md
new file mode 100644
index 00000000000..a5529d20b23
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/javascript.md
@@ -0,0 +1,10 @@
+```html
+<ion-breadcrumbs max-items="4">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/react.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/react.md
new file mode 100644
index 00000000000..c92c6a41ffe
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+  return (
+    <IonBreadcrumbs maxItems={4}>
+      <IonBreadcrumb href="#home">Home</IonBreadcrumb>
+      <IonBreadcrumb href="#electronics">Electronics</IonBreadcrumb>
+      <IonBreadcrumb href="#photography">Photography</IonBreadcrumb>
+      <IonBreadcrumb href="#cameras">Cameras</IonBreadcrumb>
+      <IonBreadcrumb href="#film">Film</IonBreadcrumb>
+      <IonBreadcrumb href="#35mm">35 mm</IonBreadcrumb>
+    </IonBreadcrumbs>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md
new file mode 100644
index 00000000000..a9804c52f33
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-breadcrumbs :max-items="4">
+    <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+    <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+    <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+    <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+  </ion-breadcrumbs>
+</template>
+
+<script lang="ts">
+  import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBreadcrumb, IonBreadcrumbs },
+  });
+</script>
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
new file mode 100644
index 00000000000..2c5ee51a9b7
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+<ion-breadcrumbs [maxItems]="4" (ionCollapsedClick)="presentPopover($event)">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+<ion-popover #popover [isOpen]="isOpen" (didDismiss)="isOpen = false">
+  <ng-template>
+    <ion-content>
+      <ion-list>
+        <ion-item
+          *ngFor="let breadcrumb of collapsedBreadcrumbs; last as isLast"
+          [href]="breadcrumb.href"
+          [lines]="isLast ? 'none' : null"
+        >
+          <ion-label>{{ breadcrumb.textContent }}</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ng-template>
+</ion-popover>
+```
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
new file mode 100644
index 00000000000..aabfb29a821
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild('popover') popover;
+
+  isOpen = false;
+  collapsedBreadcrumbs: HTMLIonBreadcrumbElement[] = [];
+
+  async presentPopover(e: Event) {
+    this.collapsedBreadcrumbs = (e as CustomEvent).detail.collapsedBreadcrumbs;
+    this.popover.event = e;
+    this.isOpen = true;
+  }
+}
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html
new file mode 100644
index 00000000000..fdeba83b336
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs max-items="4">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+        </ion-breadcrumbs>
+        <ion-popover>
+          <ion-content>
+            <ion-list></ion-list>
+          </ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const breadcrumbs = document.querySelector('ion-breadcrumbs');
+    const popover = document.querySelector('ion-popover');
+    const popoverList = document.querySelector('ion-popover ion-list');
+
+    breadcrumbs.addEventListener('ionCollapsedClick', e => {
+      let listHTML = ``;
+      e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => {
+        listHTML += `
+          <ion-item
+            ${i === e.detail.collapsedBreadcrumbs.length - 1 ? `lines="none"` : ""}
+            href="${breadcrumb.href}"
+          >
+            <ion-label>${breadcrumb.textContent}</ion-label>
+          </ion-item>
+        `;
+      });
+
+      popoverList.innerHTML = listHTML;
+      popover.event = e;
+      popover.isOpen = true;
+    });
+
+    popover.addEventListener('didDismiss', () => popover.isOpen = false);
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md
new file mode 100644
index 00000000000..2e2ca803c4a
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="500px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html"
+/>
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md
new file mode 100644
index 00000000000..007fb9a4a1e
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md
@@ -0,0 +1,41 @@
+```html
+<ion-breadcrumbs max-items="4">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+</ion-breadcrumbs>
+<ion-popover>
+  <ion-content>
+    <ion-list></ion-list>
+  </ion-content>
+</ion-popover>
+
+<script>
+  const breadcrumbs = document.querySelector('ion-breadcrumbs');
+  const popover = document.querySelector('ion-popover');
+  const popoverList = document.querySelector('ion-popover ion-list');
+
+  breadcrumbs.addEventListener('ionCollapsedClick', e => {
+    let listHTML = ``;
+    e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => {
+      listHTML += `
+        <ion-item
+          ${i === e.detail.collapsedBreadcrumbs.length - 1 ? `lines="none"` : ""}
+          href="${breadcrumb.href}"
+        >
+          <ion-label>${breadcrumb.textContent}</ion-label>
+        </ion-item>
+      `;
+    });
+
+    popoverList.innerHTML = listHTML;
+    popover.event = e;
+    popover.isOpen = true;
+  });
+
+  popover.addEventListener('didDismiss', () => popover.isOpen = false);
+</script>
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md
new file mode 100644
index 00000000000..72cc6520e3c
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/react';
+
+function Example() {
+  const popover = useRef<HTMLIonPopoverElement>(null);
+  const [collapsedBreadcrumbs, setCollapsedBreadcrumbs] = useState<HTMLIonBreadcrumbElement[]>([]);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  const openPopover = (e: Event) => {
+    setCollapsedBreadcrumbs((e as CustomEvent).detail.collapsedBreadcrumbs);
+    popover.current!.event = e;
+    setPopoverOpen(true);
+  };
+
+  return (
+    <>
+      <IonBreadcrumbs maxItems={4} onIonCollapsedClick={openPopover}>
+        <IonBreadcrumb href="#home">Home</IonBreadcrumb>
+        <IonBreadcrumb href="#electronics">Electronics</IonBreadcrumb>
+        <IonBreadcrumb href="#photography">Photography</IonBreadcrumb>
+        <IonBreadcrumb href="#cameras">Cameras</IonBreadcrumb>
+        <IonBreadcrumb href="#film">Film</IonBreadcrumb>
+        <IonBreadcrumb href="#35mm">35 mm</IonBreadcrumb>
+      </IonBreadcrumbs>
+      <IonPopover ref={popover} isOpen={popoverOpen} onDidDismiss={() => setPopoverOpen(false)}>
+        <IonContent>
+          <IonList>
+            {collapsedBreadcrumbs.map((breadcrumb, i) => (
+              <IonItem
+                href={breadcrumb.href}
+                lines={i === collapsedBreadcrumbs.length - 1 ? "none" : undefined}
+              >
+                <IonLabel>{breadcrumb.textContent}</IonLabel>
+              </IonItem>
+            ))}
+          </IonList>
+        </IonContent>
+      </IonPopover>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
new file mode 100644
index 00000000000..318f64f8547
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
@@ -0,0 +1,48 @@
+```html
+<template>
+  <ion-breadcrumbs :max-items="4" @ionCollapsedClick="presentPopover($event)">
+    <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+    <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+    <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+    <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
+  </ion-breadcrumbs>
+  <ion-popover :is-open="popoverOpen" :event="event" @didDismiss="popoverOpen = false">
+    <ion-content>
+      <ion-list>
+        <ion-item
+          v-for="(breadcrumb, i) in collapsedBreadcrumbs"
+          :href="breadcrumb.href"
+          :lines="i === collapsedBreadcrumbs.length - 1 ? 'none' : undefined"
+        >
+          <ion-label>{{ breadcrumb.textContent }}</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-popover>
+</template>
+
+<script lang="ts">
+import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/vue';
+import Popover from './Popover.vue';
+
+export default {
+  components: { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover },
+  data() {
+    return {
+      popoverOpen: false,
+      collapsedBreadcrumbs: [],
+      event: null
+    }
+  },
+  methods: {
+    presentPopover(e: Event) {
+      this.collapsedBreadcrumbs = (e as CustomEvent).detail.collapsedBreadcrumbs;
+      this.event = e;
+      this.popoverOpen = true;
+    }
+  },
+}
+</script>
+```
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/angular.md b/static/usage/v7/breadcrumbs/icons/custom-separators/angular.md
new file mode 100644
index 00000000000..e6f7fee4653
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/angular.md
@@ -0,0 +1,20 @@
+```html
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">
+    Home
+    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">
+    Electronics
+    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">
+    Cameras
+    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#film">
+    Film
+    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+  </ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html b/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html
new file mode 100644
index 00000000000..a6db3ad12c6
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#home">
+            Home
+            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            Cameras
+            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            Film
+            <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/index.md b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md
new file mode 100644
index 00000000000..4b42e7b7e40
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/breadcrumbs/icons/custom-separators/demo.html"
+/>
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/javascript.md b/static/usage/v7/breadcrumbs/icons/custom-separators/javascript.md
new file mode 100644
index 00000000000..e6f7fee4653
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/javascript.md
@@ -0,0 +1,20 @@
+```html
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">
+    Home
+    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">
+    Electronics
+    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">
+    Cameras
+    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#film">
+    Film
+    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
+  </ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/react.md b/static/usage/v7/breadcrumbs/icons/custom-separators/react.md
new file mode 100644
index 00000000000..de824d91cf5
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/react';
+import { arrowForwardCircle } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <IonBreadcrumbs>
+      <IonBreadcrumb href="#home">
+        Home
+        <IonIcon slot="separator" icon={arrowForwardCircle}></IonIcon>
+      </IonBreadcrumb>
+      <IonBreadcrumb href="#electronics">
+        Electronics
+        <IonIcon slot="separator" icon={arrowForwardCircle}></IonIcon>
+      </IonBreadcrumb>
+      <IonBreadcrumb href="#cameras">
+        Cameras
+        <IonIcon slot="separator" icon={arrowForwardCircle}></IonIcon>
+      </IonBreadcrumb>
+      <IonBreadcrumb href="#film">
+        Film
+        <IonIcon slot="separator" icon={arrowForwardCircle}></IonIcon>
+      </IonBreadcrumb>
+    </IonBreadcrumbs>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
new file mode 100644
index 00000000000..f836a85455f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
@@ -0,0 +1,35 @@
+```html
+<template>
+  <ion-breadcrumbs>
+    <ion-breadcrumb href="#home">
+      Home
+      <ion-icon slot="separator" :icon="arrowForwardCircle"></ion-icon>
+    </ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">
+      Electronics
+      <ion-icon slot="separator" :icon="arrowForwardCircle"></ion-icon>
+    </ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">
+      Cameras
+      <ion-icon slot="separator" :icon="arrowForwardCircle"></ion-icon>
+    </ion-breadcrumb>
+    <ion-breadcrumb href="#film">
+      Film
+      <ion-icon slot="separator" :icon="arrowForwardCircle"></ion-icon>
+    </ion-breadcrumb>
+  </ion-breadcrumbs>
+</template>
+
+<script lang="ts">
+  import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { arrowForwardCircle } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: { IonBreadcrumb, IonBreadcrumbs, IonIcon },
+    setup() {
+      return { arrowForwardCircle };
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/angular.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/angular.md
new file mode 100644
index 00000000000..a31d718242d
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/angular.md
@@ -0,0 +1,41 @@
+```html
+<ion-label>Icons at Start</ion-label>
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">
+    <ion-icon slot="start" name="home"></ion-icon>
+    Home
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">
+    <ion-icon slot="start" name="flash"></ion-icon>
+    Electronics
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">
+    <ion-icon slot="start" name="camera"></ion-icon>
+    Cameras
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#film">
+    <ion-icon slot="start" name="film"></ion-icon>
+    Film
+  </ion-breadcrumb>
+</ion-breadcrumbs>
+
+<ion-label class="ion-margin-top">Icons at End</ion-label>
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">
+    Home
+    <ion-icon slot="end" name="home"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">
+    Electronics
+    <ion-icon slot="end" name="flash"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">
+    Cameras
+    <ion-icon slot="end" name="camera"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#film">
+    Film
+    <ion-icon slot="end" name="film"></ion-icon>
+  </ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html
new file mode 100644
index 00000000000..1a1a9adbe3f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-label>Icons at Start</ion-label>
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#home">
+            <ion-icon slot="start" name="home"></ion-icon>
+            Home
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            <ion-icon slot="start" name="flash"></ion-icon>
+            Electronics
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            <ion-icon slot="start" name="camera"></ion-icon>
+            Cameras
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            <ion-icon slot="start" name="film"></ion-icon>
+            Film
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <ion-label class="ion-margin-top">Icons at End</ion-label>
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#home">
+            Home
+            <ion-icon slot="end" name="home"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+            <ion-icon slot="end" name="flash"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            Cameras
+            <ion-icon slot="end" name="camera"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            Film
+            <ion-icon slot="end" name="film"></ion-icon>
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md
new file mode 100644
index 00000000000..387f0c12e55
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/breadcrumbs/icons/icons-on-items/demo.html"
+/>
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript.md
new file mode 100644
index 00000000000..a31d718242d
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript.md
@@ -0,0 +1,41 @@
+```html
+<ion-label>Icons at Start</ion-label>
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">
+    <ion-icon slot="start" name="home"></ion-icon>
+    Home
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">
+    <ion-icon slot="start" name="flash"></ion-icon>
+    Electronics
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">
+    <ion-icon slot="start" name="camera"></ion-icon>
+    Cameras
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#film">
+    <ion-icon slot="start" name="film"></ion-icon>
+    Film
+  </ion-breadcrumb>
+</ion-breadcrumbs>
+
+<ion-label class="ion-margin-top">Icons at End</ion-label>
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">
+    Home
+    <ion-icon slot="end" name="home"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">
+    Electronics
+    <ion-icon slot="end" name="flash"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">
+    Cameras
+    <ion-icon slot="end" name="camera"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#film">
+    Film
+    <ion-icon slot="end" name="film"></ion-icon>
+  </ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/react.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/react.md
new file mode 100644
index 00000000000..e042ff5aa05
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/react';
+import { camera, film, flash, home } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonLabel>Icons at Start</IonLabel>
+      <IonBreadcrumbs>
+        <IonBreadcrumb href="#home">
+          <IonIcon slot="start" icon={home}></IonIcon>
+          Home
+        </IonBreadcrumb>
+        <IonBreadcrumb href="#electronics">
+          <IonIcon slot="start" icon={flash}></IonIcon>
+          Electronics
+        </IonBreadcrumb>
+        <IonBreadcrumb href="#cameras">
+          <IonIcon slot="start" icon={camera}></IonIcon>
+          Cameras
+        </IonBreadcrumb>
+        <IonBreadcrumb href="#film">
+          <IonIcon slot="start" icon={film}></IonIcon>
+          Film
+        </IonBreadcrumb>
+      </IonBreadcrumbs>
+
+      <IonLabel class="ion-margin-top">Icons at End</IonLabel>
+      <IonBreadcrumbs>
+        <IonBreadcrumb href="#home">
+          Home
+          <IonIcon slot="end" icon={home}></IonIcon>
+        </IonBreadcrumb>
+        <IonBreadcrumb href="#electronics">
+          Electronics
+          <IonIcon slot="end" icon={flash}></IonIcon>
+        </IonBreadcrumb>
+        <IonBreadcrumb href="#cameras">
+          Cameras
+          <IonIcon slot="end" icon={camera}></IonIcon>
+        </IonBreadcrumb>
+        <IonBreadcrumb href="#film">
+          Film
+          <IonIcon slot="end" icon={film}></IonIcon>
+        </IonBreadcrumb>
+      </IonBreadcrumbs>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md
new file mode 100644
index 00000000000..2e1634143f6
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md
@@ -0,0 +1,56 @@
+```html
+<template>
+  <ion-label>Icons at Start</ion-label>
+  <ion-breadcrumbs>
+    <ion-breadcrumb href="#home">
+      <ion-icon slot="start" :icon="home"></ion-icon>
+      Home
+    </ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">
+      <ion-icon slot="start" :icon="flash"></ion-icon>
+      Electronics
+    </ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">
+      <ion-icon slot="start" :icon="camera"></ion-icon>
+      Cameras
+    </ion-breadcrumb>
+    <ion-breadcrumb href="#film">
+      <ion-icon slot="start" :icon="film"></ion-icon>
+      Film
+    </ion-breadcrumb>
+  </ion-breadcrumbs>
+
+  <ion-label class="ion-margin-top">Icons at End</ion-label>
+  <ion-breadcrumbs>
+    <ion-breadcrumb href="#home">
+      Home
+      <ion-icon slot="end" :icon="home"></ion-icon>
+    </ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">
+      Electronics
+      <ion-icon slot="end" :icon="flash"></ion-icon>
+    </ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">
+      Cameras
+      <ion-icon slot="end" :icon="camera"></ion-icon>
+    </ion-breadcrumb>
+    <ion-breadcrumb href="#film">
+      Film
+      <ion-icon slot="end" :icon="film"></ion-icon>
+    </ion-breadcrumb>
+  </ion-breadcrumbs>
+</template>
+
+<script lang="ts">
+  import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { camera, film, flash, home } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel },
+    setup() {
+      return { camera, film, flash, home };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/breadcrumbs/theming/colors/angular.md b/static/usage/v7/breadcrumbs/theming/colors/angular.md
new file mode 100644
index 00000000000..610c4af5c89
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-breadcrumbs color="primary">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/theming/colors/demo.html b/static/usage/v7/breadcrumbs/theming/colors/demo.html
new file mode 100644
index 00000000000..3746b4ad79d
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs color="primary">
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/theming/colors/index.md b/static/usage/v7/breadcrumbs/theming/colors/index.md
new file mode 100644
index 00000000000..c100fffe65d
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/breadcrumbs/theming/colors/demo.html"
+/>
diff --git a/static/usage/v7/breadcrumbs/theming/colors/javascript.md b/static/usage/v7/breadcrumbs/theming/colors/javascript.md
new file mode 100644
index 00000000000..610c4af5c89
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-breadcrumbs color="primary">
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/theming/colors/react.md b/static/usage/v7/breadcrumbs/theming/colors/react.md
new file mode 100644
index 00000000000..22cae85dd8f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+  return (
+    <IonBreadcrumbs color="primary">
+      <IonBreadcrumb href="#home">Home</IonBreadcrumb>
+      <IonBreadcrumb href="#electronics">Electronics</IonBreadcrumb>
+      <IonBreadcrumb href="#cameras">Cameras</IonBreadcrumb>
+      <IonBreadcrumb href="#film">Film</IonBreadcrumb>
+    </IonBreadcrumbs>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/theming/colors/vue.md b/static/usage/v7/breadcrumbs/theming/colors/vue.md
new file mode 100644
index 00000000000..5d29a975608
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-breadcrumbs>
+    <ion-breadcrumb color="primary" href="#home">Home</ion-breadcrumb>
+    <ion-breadcrumb color="primary" href="#electronics">Electronics</ion-breadcrumb>
+    <ion-breadcrumb color="primary" href="#cameras">Cameras</ion-breadcrumb>
+    <ion-breadcrumb color="primary" href="#film">Film</ion-breadcrumb>
+  </ion-breadcrumbs>
+</template>
+
+<script lang="ts">
+  import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBreadcrumb, IonBreadcrumbs },
+  });
+</script>
+```
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..338babc9c79
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+ion-breadcrumb {
+  --color: rgb(81, 155, 198);
+  --color-active: rgb(150, 112, 220);
+  --color-hover: rgb(103, 61, 180);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_html.md b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..9683fbe6792
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/demo.html b/static/usage/v7/breadcrumbs/theming/css-properties/demo.html
new file mode 100644
index 00000000000..9c888d5344d
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Breadcrumbs</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-breadcrumb {
+      --color: rgb(81, 155, 198);
+      --color-active: rgb(150, 112, 220);
+      --color-hover: rgb(103, 61, 180);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+        </ion-breadcrumbs>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/index.md b/static/usage/v7/breadcrumbs/theming/css-properties/index.md
new file mode 100644
index 00000000000..d808d24927b
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/breadcrumbs/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/javascript.md b/static/usage/v7/breadcrumbs/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..49e5c6688ff
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+</ion-breadcrumbs>
+
+<style>
+  ion-breadcrumb {
+    --color: rgb(81, 155, 198);
+    --color-active: rgb(150, 112, 220);
+    --color-hover: rgb(103, 61, 180);
+  }
+</style>
+```
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..338babc9c79
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md
@@ -0,0 +1,7 @@
+```css
+ion-breadcrumb {
+  --color: rgb(81, 155, 198);
+  --color-active: rgb(150, 112, 220);
+  --color-hover: rgb(103, 61, 180);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/react/main_tsx.md b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..7d168beeb60
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonBreadcrumbs>
+      <IonBreadcrumb href="#home">Home</IonBreadcrumb>
+      <IonBreadcrumb href="#electronics">Electronics</IonBreadcrumb>
+      <IonBreadcrumb href="#cameras">Cameras</IonBreadcrumb>
+      <IonBreadcrumb href="#film">Film</IonBreadcrumb>
+    </IonBreadcrumbs>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/vue.md b/static/usage/v7/breadcrumbs/theming/css-properties/vue.md
new file mode 100644
index 00000000000..119ed6e5a0a
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-breadcrumbs>
+    <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+    <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+    <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+    <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+  </ion-breadcrumbs>
+</template>
+
+<script lang="ts">
+  import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBreadcrumb, IonBreadcrumbs },
+  });
+</script>
+
+<style>
+  ion-breadcrumb {
+    --color: rgb(81, 155, 198);
+    --color-active: rgb(150, 112, 220);
+    --color-hover: rgb(103, 61, 180);
+  }
+</style>
+```
diff --git a/static/usage/v7/button/basic/angular.md b/static/usage/v7/button/basic/angular.md
new file mode 100644
index 00000000000..44ba5831426
--- /dev/null
+++ b/static/usage/v7/button/basic/angular.md
@@ -0,0 +1,4 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button [disabled]="true">Disabled</ion-button>
+```
diff --git a/static/usage/v7/button/basic/demo.html b/static/usage/v7/button/basic/demo.html
new file mode 100644
index 00000000000..2302dbff2ba
--- /dev/null
+++ b/static/usage/v7/button/basic/demo.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Default</ion-button>
+        <ion-button disabled>Disabled</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/button/basic/index.md b/static/usage/v7/button/basic/index.md
new file mode 100644
index 00000000000..5113cbb4106
--- /dev/null
+++ b/static/usage/v7/button/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/basic/demo.html" />
diff --git a/static/usage/v7/button/basic/javascript.md b/static/usage/v7/button/basic/javascript.md
new file mode 100644
index 00000000000..8296ef7f42a
--- /dev/null
+++ b/static/usage/v7/button/basic/javascript.md
@@ -0,0 +1,4 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button disabled="true">Disabled</ion-button>
+```
diff --git a/static/usage/v7/button/basic/react.md b/static/usage/v7/button/basic/react.md
new file mode 100644
index 00000000000..8393e9cf2b7
--- /dev/null
+++ b/static/usage/v7/button/basic/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton>Default</IonButton>
+      <IonButton disabled={true}>Disabled</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/basic/vue.md b/static/usage/v7/button/basic/vue.md
new file mode 100644
index 00000000000..dbd787691fb
--- /dev/null
+++ b/static/usage/v7/button/basic/vue.md
@@ -0,0 +1,15 @@
+```html
+<template>
+  <ion-button>Default</ion-button>
+  <ion-button :disabled="true">Disabled</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/button/expand/angular.md b/static/usage/v7/button/expand/angular.md
new file mode 100644
index 00000000000..ca3f5093b84
--- /dev/null
+++ b/static/usage/v7/button/expand/angular.md
@@ -0,0 +1,4 @@
+```html
+<ion-button expand="block">Block</ion-button>
+<ion-button expand="full">Full</ion-button>
+```
diff --git a/static/usage/v7/button/expand/demo.html b/static/usage/v7/button/expand/demo.html
new file mode 100644
index 00000000000..90421eefaf3
--- /dev/null
+++ b/static/usage/v7/button/expand/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <div class="container">
+        <ion-button expand="block">Block</ion-button>
+        <ion-button expand="full">Full</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/button/expand/index.md b/static/usage/v7/button/expand/index.md
new file mode 100644
index 00000000000..6bf7c9907f6
--- /dev/null
+++ b/static/usage/v7/button/expand/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/expand/demo.html" />
diff --git a/static/usage/v7/button/expand/javascript.md b/static/usage/v7/button/expand/javascript.md
new file mode 100644
index 00000000000..ca3f5093b84
--- /dev/null
+++ b/static/usage/v7/button/expand/javascript.md
@@ -0,0 +1,4 @@
+```html
+<ion-button expand="block">Block</ion-button>
+<ion-button expand="full">Full</ion-button>
+```
diff --git a/static/usage/v7/button/expand/react.md b/static/usage/v7/button/expand/react.md
new file mode 100644
index 00000000000..424d8e1494b
--- /dev/null
+++ b/static/usage/v7/button/expand/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton expand="block">Block</IonButton>
+      <IonButton expand="full">Full</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/expand/vue.md b/static/usage/v7/button/expand/vue.md
new file mode 100644
index 00000000000..f67d93ecdef
--- /dev/null
+++ b/static/usage/v7/button/expand/vue.md
@@ -0,0 +1,15 @@
+```html
+<template>
+  <ion-button expand="block">Block</ion-button>
+  <ion-button expand="full">Full</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/button/fill/angular.md b/static/usage/v7/button/fill/angular.md
new file mode 100644
index 00000000000..390ae848201
--- /dev/null
+++ b/static/usage/v7/button/fill/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button fill="clear">Clear</ion-button>
+<ion-button fill="outline">Outline</ion-button>
+<ion-button fill="solid">Solid</ion-button>
+```
diff --git a/static/usage/v7/button/fill/demo.html b/static/usage/v7/button/fill/demo.html
new file mode 100644
index 00000000000..6e405f68b24
--- /dev/null
+++ b/static/usage/v7/button/fill/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Default</ion-button>
+        <ion-button fill="clear">Clear</ion-button>
+        <ion-button fill="outline">Outline</ion-button>
+        <ion-button fill="solid">Solid</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/button/fill/index.md b/static/usage/v7/button/fill/index.md
new file mode 100644
index 00000000000..db05b92b344
--- /dev/null
+++ b/static/usage/v7/button/fill/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/fill/demo.html" />
diff --git a/static/usage/v7/button/fill/javascript.md b/static/usage/v7/button/fill/javascript.md
new file mode 100644
index 00000000000..390ae848201
--- /dev/null
+++ b/static/usage/v7/button/fill/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button fill="clear">Clear</ion-button>
+<ion-button fill="outline">Outline</ion-button>
+<ion-button fill="solid">Solid</ion-button>
+```
diff --git a/static/usage/v7/button/fill/react.md b/static/usage/v7/button/fill/react.md
new file mode 100644
index 00000000000..5a32a7d992d
--- /dev/null
+++ b/static/usage/v7/button/fill/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton>Default</IonButton>
+      <IonButton fill="clear">Clear</IonButton>
+      <IonButton fill="outline">Outline</IonButton>
+      <IonButton fill="solid">Solid</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/fill/vue.md b/static/usage/v7/button/fill/vue.md
new file mode 100644
index 00000000000..4b965ed3582
--- /dev/null
+++ b/static/usage/v7/button/fill/vue.md
@@ -0,0 +1,17 @@
+```html
+<template>
+  <ion-button>Default</ion-button>
+  <ion-button fill="clear">Clear</ion-button>
+  <ion-button fill="outline">Outline</ion-button>
+  <ion-button fill="solid">Solid</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/button/icons/angular.md b/static/usage/v7/button/icons/angular.md
new file mode 100644
index 00000000000..89d74ad2e17
--- /dev/null
+++ b/static/usage/v7/button/icons/angular.md
@@ -0,0 +1,15 @@
+```html
+<ion-button>
+  <ion-icon slot="start" name="star"></ion-icon>
+  Left Icon
+</ion-button>
+
+<ion-button>
+  Right Icon
+  <ion-icon slot="end" name="star"></ion-icon>
+</ion-button>
+
+<ion-button>
+  <ion-icon slot="icon-only" name="star"></ion-icon>
+</ion-button>
+```
diff --git a/static/usage/v7/button/icons/demo.html b/static/usage/v7/button/icons/demo.html
new file mode 100644
index 00000000000..e3594ca1f83
--- /dev/null
+++ b/static/usage/v7/button/icons/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>
+          <ion-icon slot="start" name="star"></ion-icon>
+          Left Icon
+        </ion-button>
+
+        <ion-button>
+          Right Icon
+          <ion-icon slot="end" name="star"></ion-icon>
+        </ion-button>
+
+        <ion-button>
+          <ion-icon slot="icon-only" name="star"></ion-icon>
+        </ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/button/icons/index.md b/static/usage/v7/button/icons/index.md
new file mode 100644
index 00000000000..1c5d7c9da22
--- /dev/null
+++ b/static/usage/v7/button/icons/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/icons/demo.html" />
diff --git a/static/usage/v7/button/icons/javascript.md b/static/usage/v7/button/icons/javascript.md
new file mode 100644
index 00000000000..89d74ad2e17
--- /dev/null
+++ b/static/usage/v7/button/icons/javascript.md
@@ -0,0 +1,15 @@
+```html
+<ion-button>
+  <ion-icon slot="start" name="star"></ion-icon>
+  Left Icon
+</ion-button>
+
+<ion-button>
+  Right Icon
+  <ion-icon slot="end" name="star"></ion-icon>
+</ion-button>
+
+<ion-button>
+  <ion-icon slot="icon-only" name="star"></ion-icon>
+</ion-button>
+```
diff --git a/static/usage/v7/button/icons/react.md b/static/usage/v7/button/icons/react.md
new file mode 100644
index 00000000000..09df368e950
--- /dev/null
+++ b/static/usage/v7/button/icons/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon } from '@ionic/react';
+import { star } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonButton>
+        <IonIcon slot="start" icon={star}></IonIcon>
+        Left Icon
+      </IonButton>
+
+      <IonButton>
+        Right Icon
+        <IonIcon slot="end" icon={star}></IonIcon>
+      </IonButton>
+
+      <IonButton>
+        <IonIcon slot="icon-only" icon={star}></IonIcon>
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/icons/vue.md b/static/usage/v7/button/icons/vue.md
new file mode 100644
index 00000000000..356fc5617dc
--- /dev/null
+++ b/static/usage/v7/button/icons/vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-button>
+    <ion-icon slot="start" :icon="star"></ion-icon>
+    Left Icon
+  </ion-button>
+
+  <ion-button>
+    Right Icon
+    <ion-icon slot="end" :icon="star"></ion-icon>
+  </ion-button>
+
+  <ion-button>
+    <ion-icon slot="icon-only" :icon="star"></ion-icon>
+  </ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonIcon } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { star } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: { IonButton, IonIcon },
+    setup() {
+      return { star }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/button/shape/angular.md b/static/usage/v7/button/shape/angular.md
new file mode 100644
index 00000000000..97ed756261a
--- /dev/null
+++ b/static/usage/v7/button/shape/angular.md
@@ -0,0 +1,4 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button shape="round">Round</ion-button>
+```
diff --git a/static/usage/v7/button/shape/demo.html b/static/usage/v7/button/shape/demo.html
new file mode 100644
index 00000000000..7cedc61e4c7
--- /dev/null
+++ b/static/usage/v7/button/shape/demo.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Default</ion-button>
+        <ion-button shape="round">Round</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/button/shape/index.md b/static/usage/v7/button/shape/index.md
new file mode 100644
index 00000000000..cc5417f8d56
--- /dev/null
+++ b/static/usage/v7/button/shape/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/shape/demo.html" />
diff --git a/static/usage/v7/button/shape/javascript.md b/static/usage/v7/button/shape/javascript.md
new file mode 100644
index 00000000000..97ed756261a
--- /dev/null
+++ b/static/usage/v7/button/shape/javascript.md
@@ -0,0 +1,4 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button shape="round">Round</ion-button>
+```
diff --git a/static/usage/v7/button/shape/react.md b/static/usage/v7/button/shape/react.md
new file mode 100644
index 00000000000..df52c3f8985
--- /dev/null
+++ b/static/usage/v7/button/shape/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton>Default</IonButton>
+      <IonButton shape="round">Round</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/shape/vue.md b/static/usage/v7/button/shape/vue.md
new file mode 100644
index 00000000000..6db047c9532
--- /dev/null
+++ b/static/usage/v7/button/shape/vue.md
@@ -0,0 +1,15 @@
+```html
+<template>
+  <ion-button>Default</ion-button>
+  <ion-button shape="round">Round</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/button/size/angular.md b/static/usage/v7/button/size/angular.md
new file mode 100644
index 00000000000..a24809c2d61
--- /dev/null
+++ b/static/usage/v7/button/size/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-button size="small">Small</ion-button>
+<ion-button size="default">Default</ion-button>
+<ion-button size="large">Large</ion-button>
+```
diff --git a/static/usage/v7/button/size/demo.html b/static/usage/v7/button/size/demo.html
new file mode 100644
index 00000000000..4aba9947d6e
--- /dev/null
+++ b/static/usage/v7/button/size/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button size="small">Small</ion-button>
+        <ion-button size="default">Default</ion-button>
+        <ion-button size="large">Large</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/button/size/index.md b/static/usage/v7/button/size/index.md
new file mode 100644
index 00000000000..e59a99edb6a
--- /dev/null
+++ b/static/usage/v7/button/size/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/size/demo.html" />
diff --git a/static/usage/v7/button/size/javascript.md b/static/usage/v7/button/size/javascript.md
new file mode 100644
index 00000000000..a24809c2d61
--- /dev/null
+++ b/static/usage/v7/button/size/javascript.md
@@ -0,0 +1,5 @@
+```html
+<ion-button size="small">Small</ion-button>
+<ion-button size="default">Default</ion-button>
+<ion-button size="large">Large</ion-button>
+```
diff --git a/static/usage/v7/button/size/react.md b/static/usage/v7/button/size/react.md
new file mode 100644
index 00000000000..8deb283a9d4
--- /dev/null
+++ b/static/usage/v7/button/size/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton size="small">Small</IonButton>
+      <IonButton size="default">Default</IonButton>
+      <IonButton size="large">Large</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/size/vue.md b/static/usage/v7/button/size/vue.md
new file mode 100644
index 00000000000..02a27f22d1d
--- /dev/null
+++ b/static/usage/v7/button/size/vue.md
@@ -0,0 +1,16 @@
+```html
+<template>
+  <ion-button size="small">Small</ion-button>
+  <ion-button size="default">Default</ion-button>
+  <ion-button size="large">Large</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/button/theming/colors/angular.md b/static/usage/v7/button/theming/colors/angular.md
new file mode 100644
index 00000000000..fed23e8442d
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button color="primary">Primary</ion-button>
+<ion-button color="secondary">Secondary</ion-button>
+<ion-button color="tertiary">Tertiary</ion-button>
+<ion-button color="success">Success</ion-button>
+<ion-button color="warning">Warning</ion-button>
+<ion-button color="danger">Danger</ion-button>
+<ion-button color="light">Light</ion-button>
+<ion-button color="medium">Medium</ion-button>
+<ion-button color="dark">Dark</ion-button>
+```
diff --git a/static/usage/v7/button/theming/colors/demo.html b/static/usage/v7/button/theming/colors/demo.html
new file mode 100644
index 00000000000..9be8d6d0f8b
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-wrap: wrap;
+      width: 350px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Default</ion-button>
+        <ion-button color="primary">Primary</ion-button>
+        <ion-button color="secondary">Secondary</ion-button>
+        <ion-button color="tertiary">Tertiary</ion-button>
+        <ion-button color="success">Success</ion-button>
+        <ion-button color="warning">Warning</ion-button>
+        <ion-button color="danger">Danger</ion-button>
+        <ion-button color="light">Light</ion-button>
+        <ion-button color="medium">Medium</ion-button>
+        <ion-button color="dark">Dark</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/button/theming/colors/index.md b/static/usage/v7/button/theming/colors/index.md
new file mode 100644
index 00000000000..88cb6539a81
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/theming/colors/demo.html" />
diff --git a/static/usage/v7/button/theming/colors/javascript.md b/static/usage/v7/button/theming/colors/javascript.md
new file mode 100644
index 00000000000..fed23e8442d
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button color="primary">Primary</ion-button>
+<ion-button color="secondary">Secondary</ion-button>
+<ion-button color="tertiary">Tertiary</ion-button>
+<ion-button color="success">Success</ion-button>
+<ion-button color="warning">Warning</ion-button>
+<ion-button color="danger">Danger</ion-button>
+<ion-button color="light">Light</ion-button>
+<ion-button color="medium">Medium</ion-button>
+<ion-button color="dark">Dark</ion-button>
+```
diff --git a/static/usage/v7/button/theming/colors/react.md b/static/usage/v7/button/theming/colors/react.md
new file mode 100644
index 00000000000..066aaa06f59
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton>Default</IonButton>
+      <IonButton color="primary">Primary</IonButton>
+      <IonButton color="secondary">Secondary</IonButton>
+      <IonButton color="tertiary">Tertiary</IonButton>
+      <IonButton color="success">Success</IonButton>
+      <IonButton color="warning">Warning</IonButton>
+      <IonButton color="danger">Danger</IonButton>
+      <IonButton color="light">Light</IonButton>
+      <IonButton color="medium">Medium</IonButton>
+      <IonButton color="dark">Dark</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/theming/colors/vue.md b/static/usage/v7/button/theming/colors/vue.md
new file mode 100644
index 00000000000..7fee983d696
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-button>Default</ion-button>
+  <ion-button color="primary">Primary</ion-button>
+  <ion-button color="secondary">Secondary</ion-button>
+  <ion-button color="tertiary">Tertiary</ion-button>
+  <ion-button color="success">Success</ion-button>
+  <ion-button color="warning">Warning</ion-button>
+  <ion-button color="danger">Danger</ion-button>
+  <ion-button color="light">Light</ion-button>
+  <ion-button color="medium">Medium</ion-button>
+  <ion-button color="dark">Dark</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/button/theming/css-properties/angular/example_component_css.md b/static/usage/v7/button/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..fa985cbe82f
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,22 @@
+```css
+ion-button {
+  --background: #93e9be;
+  --background-hover: #9ce0be;
+  --background-activated: #88f4be;
+  --background-focused: #88f4be;
+
+  --color: blue;
+
+  --border-radius: 0;
+  --border-color: #000;
+  --border-style: solid;
+  --border-width: 1px;
+
+  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+  --ripple-color: deeppink;
+
+  --padding-top: 10px;
+  --padding-bottom: 10px;
+}
+```
diff --git a/static/usage/v7/button/theming/css-properties/angular/example_component_html.md b/static/usage/v7/button/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..678df6cde1b
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button>Custom Button</ion-button>
+```
diff --git a/static/usage/v7/button/theming/css-properties/demo.html b/static/usage/v7/button/theming/css-properties/demo.html
new file mode 100644
index 00000000000..9fd0e65c096
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/demo.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-button {
+      --background: #93e9be;
+      --background-hover: #9ce0be;
+      --background-activated: #88f4be;
+      --background-focused: #88f4be;
+
+      --color: blue;
+
+      --border-radius: 0;
+      --border-color: #000;
+      --border-style: solid;
+      --border-width: 1px;
+
+      --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+      --ripple-color: deeppink;
+
+      --padding-top: 10px;
+      --padding-bottom: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Custom Button</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/button/theming/css-properties/index.md b/static/usage/v7/button/theming/css-properties/index.md
new file mode 100644
index 00000000000..32f67b6f002
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/button/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/button/theming/css-properties/javascript.md b/static/usage/v7/button/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..8bca67a3206
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/javascript.md
@@ -0,0 +1,26 @@
+```html
+<style>
+  ion-button {
+    --background: #93e9be;
+    --background-hover: #9ce0be;
+    --background-activated: #88f4be;
+    --background-focused: #88f4be;
+
+    --color: blue;
+
+    --border-radius: 0;
+    --border-color: #000;
+    --border-style: solid;
+    --border-width: 1px;
+
+    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+    --ripple-color: deeppink;
+
+    --padding-top: 10px;
+    --padding-bottom: 10px;
+  }
+</style>
+
+<ion-button>Custom Button</ion-button>
+```
diff --git a/static/usage/v7/button/theming/css-properties/react/main_css.md b/static/usage/v7/button/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..1fba4c49972
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/react/main_css.md
@@ -0,0 +1,23 @@
+
+```css
+ion-button {
+  --background: #93e9be;
+  --background-hover: #9ce0be;
+  --background-activated: #88f4be;
+  --background-focused: #88f4be;
+
+  --color: blue;
+
+  --border-radius: 0;
+  --border-color: #000;
+  --border-style: solid;
+  --border-width: 1px;
+
+  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+  --ripple-color: deeppink;
+
+  --padding-top: 10px;
+  --padding-bottom: 10px;
+}
+```
diff --git a/static/usage/v7/button/theming/css-properties/react/main_tsx.md b/static/usage/v7/button/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..6e0cddd9709
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonButton>Custom Button</IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/theming/css-properties/vue.md b/static/usage/v7/button/theming/css-properties/vue.md
new file mode 100644
index 00000000000..0243821d67f
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-button>Custom Button</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+  });
+</script>
+
+<style scoped>
+  ion-button {
+    --background: #93e9be;
+    --background-hover: #9ce0be;
+    --background-activated: #88f4be;
+    --background-focused: #88f4be;
+
+    --color: blue;
+
+    --border-radius: 0;
+    --border-color: #000;
+    --border-style: solid;
+    --border-width: 1px;
+
+    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+    --ripple-color: deeppink;
+
+    --padding-top: 10px;
+    --padding-bottom: 10px;
+  }
+</style>
+```
diff --git a/static/usage/v7/buttons/basic/angular.md b/static/usage/v7/buttons/basic/angular.md
new file mode 100644
index 00000000000..901587bfef1
--- /dev/null
+++ b/static/usage/v7/buttons/basic/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-button>Button</ion-button>
+  </ion-buttons>
+  <ion-title>Default Buttons</ion-title>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/buttons/basic/demo.html b/static/usage/v7/buttons/basic/demo.html
new file mode 100644
index 00000000000..f74d9eb0eca
--- /dev/null
+++ b/static/usage/v7/buttons/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Buttons</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button>Button</ion-button>
+          </ion-buttons>
+          <ion-title>Default Buttons</ion-title>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/buttons/basic/index.md b/static/usage/v7/buttons/basic/index.md
new file mode 100644
index 00000000000..f9c82463e84
--- /dev/null
+++ b/static/usage/v7/buttons/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/buttons/basic/demo.html" />
diff --git a/static/usage/v7/buttons/basic/javascript.md b/static/usage/v7/buttons/basic/javascript.md
new file mode 100644
index 00000000000..901587bfef1
--- /dev/null
+++ b/static/usage/v7/buttons/basic/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-button>Button</ion-button>
+  </ion-buttons>
+  <ion-title>Default Buttons</ion-title>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/buttons/basic/react.md b/static/usage/v7/buttons/basic/react.md
new file mode 100644
index 00000000000..4a73e0d4958
--- /dev/null
+++ b/static/usage/v7/buttons/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonToolbar>
+      <IonButtons slot="start">
+        <IonButton>Button</IonButton>
+      </IonButtons>
+      <IonTitle>Default Buttons</IonTitle>
+    </IonToolbar>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/buttons/basic/vue.md b/static/usage/v7/buttons/basic/vue.md
new file mode 100644
index 00000000000..3da668fcb20
--- /dev/null
+++ b/static/usage/v7/buttons/basic/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button>Button</ion-button>
+    </ion-buttons>
+    <ion-title>Default Buttons</ion-title>
+  </ion-toolbar>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonButtons, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/buttons/placement/angular.md b/static/usage/v7/buttons/placement/angular.md
new file mode 100644
index 00000000000..8273655ad49
--- /dev/null
+++ b/static/usage/v7/buttons/placement/angular.md
@@ -0,0 +1,21 @@
+```html
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-button>Start</ion-button>
+  </ion-buttons>
+  <ion-title>Buttons</ion-title>
+  <ion-buttons slot="end">
+    <ion-button>End</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button>Secondary</ion-button>
+  </ion-buttons>
+  <ion-title>Buttons</ion-title>
+  <ion-buttons slot="primary">
+    <ion-button>Primary</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/buttons/placement/demo.html b/static/usage/v7/buttons/placement/demo.html
new file mode 100644
index 00000000000..2c51099331c
--- /dev/null
+++ b/static/usage/v7/buttons/placement/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Buttons</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button>Start</ion-button>
+          </ion-buttons>
+          <ion-title>Buttons</ion-title>
+          <ion-buttons slot="end">
+            <ion-button>End</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button>Secondary</ion-button>
+          </ion-buttons>
+          <ion-title>Buttons</ion-title>
+          <ion-buttons slot="primary">
+            <ion-button>Primary</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/buttons/placement/index.md b/static/usage/v7/buttons/placement/index.md
new file mode 100644
index 00000000000..9d2fd3dcfec
--- /dev/null
+++ b/static/usage/v7/buttons/placement/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/buttons/placement/demo.html" />
diff --git a/static/usage/v7/buttons/placement/javascript.md b/static/usage/v7/buttons/placement/javascript.md
new file mode 100644
index 00000000000..8273655ad49
--- /dev/null
+++ b/static/usage/v7/buttons/placement/javascript.md
@@ -0,0 +1,21 @@
+```html
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-button>Start</ion-button>
+  </ion-buttons>
+  <ion-title>Buttons</ion-title>
+  <ion-buttons slot="end">
+    <ion-button>End</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button>Secondary</ion-button>
+  </ion-buttons>
+  <ion-title>Buttons</ion-title>
+  <ion-buttons slot="primary">
+    <ion-button>Primary</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/buttons/placement/react.md b/static/usage/v7/buttons/placement/react.md
new file mode 100644
index 00000000000..27d6b54d4ba
--- /dev/null
+++ b/static/usage/v7/buttons/placement/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonButton>Start</IonButton>
+        </IonButtons>
+        <IonTitle>Buttons</IonTitle>
+        <IonButtons slot="end">
+          <IonButton>End</IonButton>
+        </IonButtons>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="secondary">
+          <IonButton>Secondary</IonButton>
+        </IonButtons>
+        <IonTitle>Buttons</IonTitle>
+        <IonButtons slot="primary">
+          <IonButton>Primary</IonButton>
+        </IonButtons>
+      </IonToolbar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/buttons/placement/vue.md b/static/usage/v7/buttons/placement/vue.md
new file mode 100644
index 00000000000..dc0217fc146
--- /dev/null
+++ b/static/usage/v7/buttons/placement/vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button>Start</ion-button>
+    </ion-buttons>
+    <ion-title>Buttons</ion-title>
+    <ion-buttons slot="end">
+      <ion-button>End</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>Secondary</ion-button>
+    </ion-buttons>
+    <ion-title>Buttons</ion-title>
+    <ion-buttons slot="primary">
+      <ion-button>Primary</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonButtons, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/buttons/types/angular.md b/static/usage/v7/buttons/types/angular.md
new file mode 100644
index 00000000000..183c70105b1
--- /dev/null
+++ b/static/usage/v7/buttons/types/angular.md
@@ -0,0 +1,78 @@
+```html
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button size="large">
+      Favorite
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Default Buttons</ion-title>
+  <ion-buttons slot="primary">
+    <ion-button>
+      Delete
+    </ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+    </ion-button>
+    <ion-button>
+      <ion-icon slot="icon-only" name="search"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Icon Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button fill="solid">
+      <ion-icon slot="start" name="person-circle"></ion-icon>
+      Contact
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button fill="solid">
+      Help
+      <ion-icon slot="end" name="help-circle"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Solid Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button fill="outline">
+      <ion-icon slot="start" name="star"></ion-icon>
+      Star
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button fill="outline">
+      Edit
+      <ion-icon slot="end" name="create"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Outline Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-back-button default-href="#"></ion-back-button>
+  </ion-buttons>
+  <ion-title>Back Button</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-menu-button auto-hide="false"></ion-menu-button>
+  </ion-buttons>
+  <ion-title>Menu Button</ion-title>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/buttons/types/demo.html b/static/usage/v7/buttons/types/demo.html
new file mode 100644
index 00000000000..46288e45f1a
--- /dev/null
+++ b/static/usage/v7/buttons/types/demo.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Buttons</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button size="large">
+              Favorite
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Default Buttons</ion-title>
+          <ion-buttons slot="primary">
+            <ion-button>
+              Delete
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button>
+              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Icon Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="solid">
+              <ion-icon slot="start" name="person-circle"></ion-icon>
+              Contact
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button fill="solid">
+              Help
+              <ion-icon slot="end" name="help-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Solid Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="outline">
+              <ion-icon slot="start" name="star"></ion-icon>
+              Star
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button fill="outline">
+              Edit
+              <ion-icon slot="end" name="create"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Outline Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="#"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Back Button</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+          </ion-buttons>
+          <ion-title>Menu Button</ion-title>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/buttons/types/index.md b/static/usage/v7/buttons/types/index.md
new file mode 100644
index 00000000000..1427b4536f6
--- /dev/null
+++ b/static/usage/v7/buttons/types/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/buttons/types/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/buttons/types/javascript.md b/static/usage/v7/buttons/types/javascript.md
new file mode 100644
index 00000000000..183c70105b1
--- /dev/null
+++ b/static/usage/v7/buttons/types/javascript.md
@@ -0,0 +1,78 @@
+```html
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button size="large">
+      Favorite
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Default Buttons</ion-title>
+  <ion-buttons slot="primary">
+    <ion-button>
+      Delete
+    </ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+    </ion-button>
+    <ion-button>
+      <ion-icon slot="icon-only" name="search"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Icon Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button fill="solid">
+      <ion-icon slot="start" name="person-circle"></ion-icon>
+      Contact
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button fill="solid">
+      Help
+      <ion-icon slot="end" name="help-circle"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Solid Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button fill="outline">
+      <ion-icon slot="start" name="star"></ion-icon>
+      Star
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button fill="outline">
+      Edit
+      <ion-icon slot="end" name="create"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Outline Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-back-button default-href="#"></ion-back-button>
+  </ion-buttons>
+  <ion-title>Back Button</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-menu-button auto-hide="false"></ion-menu-button>
+  </ion-buttons>
+  <ion-title>Menu Button</ion-title>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/buttons/types/react.md b/static/usage/v7/buttons/types/react.md
new file mode 100644
index 00000000000..8d3b3edfe9e
--- /dev/null
+++ b/static/usage/v7/buttons/types/react.md
@@ -0,0 +1,90 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react';
+import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonToolbar>
+        <IonButtons slot="secondary">
+          <IonButton size="large">
+            Favorite
+          </IonButton>
+        </IonButtons>
+        <IonTitle>Default Buttons</IonTitle>
+        <IonButtons slot="primary">
+          <IonButton>
+            Delete
+          </IonButton>
+        </IonButtons>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="secondary">
+          <IonButton>
+            <IonIcon slot="icon-only" icon={personCircle}></IonIcon>
+          </IonButton>
+          <IonButton>
+            <IonIcon slot="icon-only" icon={search}></IonIcon>
+          </IonButton>
+        </IonButtons>
+        <IonButtons slot="primary">
+          <IonButton>
+            <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
+          </IonButton>
+        </IonButtons>
+        <IonTitle>Icon Buttons</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="secondary">
+          <IonButton fill="solid">
+            <IonIcon slot="start" icon={personCircle}></IonIcon>
+            Contact
+          </IonButton>
+        </IonButtons>
+        <IonButtons slot="primary">
+          <IonButton fill="solid">
+            Help
+            <IonIcon slot="end" icon={helpCircle}></IonIcon>
+          </IonButton>
+        </IonButtons>
+        <IonTitle>Solid Buttons</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="secondary">
+          <IonButton fill="outline">
+            <IonIcon slot="start" icon={star}></IonIcon>
+            Star
+          </IonButton>
+        </IonButtons>
+        <IonButtons slot="primary">
+          <IonButton fill="outline">
+            Edit
+            <IonIcon slot="end" icon={create}></IonIcon>
+          </IonButton>
+        </IonButtons>
+        <IonTitle>Outline Buttons</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton defaultHref="#"></IonBackButton>
+        </IonButtons>
+        <IonTitle>Back Button</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonMenuButton autoHide={false}></IonMenuButton>
+        </IonButtons>
+        <IonTitle>Menu Button</IonTitle>
+      </IonToolbar>
+    </>
+  );
+}
+export default Example;
+
+```
diff --git a/static/usage/v7/buttons/types/vue.md b/static/usage/v7/buttons/types/vue.md
new file mode 100644
index 00000000000..9a101caa402
--- /dev/null
+++ b/static/usage/v7/buttons/types/vue.md
@@ -0,0 +1,93 @@
+```html
+<template>
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button size="large">
+        Favorite
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Default Buttons</ion-title>
+    <ion-buttons slot="primary">
+      <ion-button>
+        Delete
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button>
+        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Icon Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="solid">
+        <ion-icon slot="start" :icon="personCircle"></ion-icon>
+        Contact
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button fill="solid">
+        Help
+        <ion-icon slot="end" :icon="helpCircle"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Solid Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="outline">
+        <ion-icon slot="start" :icon="star"></ion-icon>
+        Star
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button fill="outline">
+        Edit
+        <ion-icon slot="end" :icon="create"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Outline Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button default-href="#"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Back Button</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button :auto-hide="false"></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Menu Button</ion-title>
+  </ion-toolbar>
+</template>
+
+<script lang="ts">
+  import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
+    setup() {
+      return { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star };
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/card/basic/angular/example_component_css.md b/static/usage/v7/card/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/v7/card/basic/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/basic/angular/example_component_html.md b/static/usage/v7/card/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..d489fbc5e26
--- /dev/null
+++ b/static/usage/v7/card/basic/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Here's a small text description for the card content. Nothing more, nothing less.
+  </ion-card-content>
+</ion-card>
+```
diff --git a/static/usage/v7/card/basic/demo.html b/static/usage/v7/card/basic/demo.html
new file mode 100644
index 00000000000..e6464c335a9
--- /dev/null
+++ b/static/usage/v7/card/basic/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Here's a small text description for the card content. Nothing more, nothing less.
+          </ion-card-content>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/card/basic/index.md b/static/usage/v7/card/basic/index.md
new file mode 100644
index 00000000000..88e1ee9de5b
--- /dev/null
+++ b/static/usage/v7/card/basic/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/card/basic/demo.html"
+/>
diff --git a/static/usage/v7/card/basic/javascript.md b/static/usage/v7/card/basic/javascript.md
new file mode 100644
index 00000000000..737c46c9224
--- /dev/null
+++ b/static/usage/v7/card/basic/javascript.md
@@ -0,0 +1,20 @@
+```html
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Here's a small text description for the card content. Nothing more, nothing less.
+  </ion-card-content>
+</ion-card>
+
+<style>
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/card/basic/react/main_css.md b/static/usage/v7/card/basic/react/main_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/v7/card/basic/react/main_css.md
@@ -0,0 +1,7 @@
+```css
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/basic/react/main_tsx.md b/static/usage/v7/card/basic/react/main_tsx.md
new file mode 100644
index 00000000000..251b18ce24d
--- /dev/null
+++ b/static/usage/v7/card/basic/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonCard>
+      <IonCardHeader>
+        <IonCardTitle>Card Title</IonCardTitle>
+        <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+      </IonCardHeader>
+
+      <IonCardContent>
+        Here's a small text description for the card content. Nothing more, nothing less.
+      </IonCardContent>
+    </IonCard>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/card/basic/vue.md b/static/usage/v7/card/basic/vue.md
new file mode 100644
index 00000000000..4b2388246d5
--- /dev/null
+++ b/static/usage/v7/card/basic/vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Here's a small text description for the card content. Nothing more, nothing less.
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<script lang="ts">
+  import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
+  });
+</script>
+
+<style scoped>
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/card/buttons/angular/example_component_css.md b/static/usage/v7/card/buttons/angular/example_component_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/v7/card/buttons/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/buttons/angular/example_component_html.md b/static/usage/v7/card/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..c597c1dca7a
--- /dev/null
+++ b/static/usage/v7/card/buttons/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Here's a small text description for the card content. Nothing more, nothing less.
+  </ion-card-content>
+
+  <ion-button fill="clear">Action 1</ion-button>
+  <ion-button fill="clear">Action 2</ion-button>
+</ion-card>
+```
diff --git a/static/usage/v7/card/buttons/demo.html b/static/usage/v7/card/buttons/demo.html
new file mode 100644
index 00000000000..012bbc31321
--- /dev/null
+++ b/static/usage/v7/card/buttons/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Here's a small text description for the card content. Nothing more, nothing less.
+          </ion-card-content>
+
+          <ion-button fill="clear">Action 1</ion-button>
+          <ion-button fill="clear">Action 2</ion-button>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/card/buttons/index.md b/static/usage/v7/card/buttons/index.md
new file mode 100644
index 00000000000..4861313847b
--- /dev/null
+++ b/static/usage/v7/card/buttons/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/card/buttons/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/card/buttons/javascript.md b/static/usage/v7/card/buttons/javascript.md
new file mode 100644
index 00000000000..f87b4e14c90
--- /dev/null
+++ b/static/usage/v7/card/buttons/javascript.md
@@ -0,0 +1,23 @@
+```html
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Here's a small text description for the card content. Nothing more, nothing less.
+  </ion-card-content>
+
+  <ion-button fill="clear">Action 1</ion-button>
+  <ion-button fill="clear">Action 2</ion-button>
+</ion-card>
+
+<style>
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/card/buttons/react/main_css.md b/static/usage/v7/card/buttons/react/main_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/v7/card/buttons/react/main_css.md
@@ -0,0 +1,7 @@
+```css
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/buttons/react/main_tsx.md b/static/usage/v7/card/buttons/react/main_tsx.md
new file mode 100644
index 00000000000..a24ba6cd1e9
--- /dev/null
+++ b/static/usage/v7/card/buttons/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonCard>
+      <IonCardHeader>
+        <IonCardTitle>Card Title</IonCardTitle>
+        <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+      </IonCardHeader>
+
+      <IonCardContent>
+        Here's a small text description for the card content. Nothing more, nothing less.
+      </IonCardContent>
+
+      <IonButton fill="clear">Action 1</IonButton>
+      <IonButton fill="clear">Action 2</IonButton>
+    </IonCard>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/card/buttons/vue.md b/static/usage/v7/card/buttons/vue.md
new file mode 100644
index 00000000000..70db0d92201
--- /dev/null
+++ b/static/usage/v7/card/buttons/vue.md
@@ -0,0 +1,34 @@
+```html
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Here's a small text description for the card content. Nothing more, nothing less.
+    </ion-card-content>
+
+    <ion-button fill="clear">Action 1</ion-button>
+    <ion-button fill="clear">Action 2</ion-button>
+  </ion-card>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
+  });
+</script>
+
+<style scoped>
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/card/list/angular/example_component_css.md b/static/usage/v7/card/list/angular/example_component_css.md
new file mode 100644
index 00000000000..fe56dd12b99
--- /dev/null
+++ b/static/usage/v7/card/list/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item {
+  --padding-start: 0;
+}
+
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/list/angular/example_component_html.md b/static/usage/v7/card/list/angular/example_component_html.md
new file mode 100644
index 00000000000..850c62ec942
--- /dev/null
+++ b/static/usage/v7/card/list/angular/example_component_html.md
@@ -0,0 +1,39 @@
+```html
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+  <ion-card-content>
+    <ion-list>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+        <ion-label>Item</ion-label>
+      </ion-item>
+
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+        <ion-label>Item</ion-label>
+      </ion-item>
+
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+        <ion-label>Item</ion-label>
+      </ion-item>
+
+      <ion-item lines="none">
+        <ion-thumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+        <ion-label>Item</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-card-content>
+</ion-card>
+```
diff --git a/static/usage/v7/card/list/demo.html b/static/usage/v7/card/list/demo.html
new file mode 100644
index 00000000000..123db8876cf
--- /dev/null
+++ b/static/usage/v7/card/list/demo.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    ion-card {
+      width: 100%;
+    }
+
+    ion-item {
+      --padding-start: 0;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-list>
+              <ion-item>
+                <ion-thumbnail slot="start">
+                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+                </ion-thumbnail>
+                <ion-label>Item</ion-label>
+              </ion-item>
+
+              <ion-item>
+                <ion-thumbnail slot="start">
+                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+                </ion-thumbnail>
+                <ion-label>Item</ion-label>
+              </ion-item>
+
+              <ion-item>
+                <ion-thumbnail slot="start">
+                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+                </ion-thumbnail>
+                <ion-label>Item</ion-label>
+              </ion-item>
+
+              <ion-item lines="none">
+                <ion-thumbnail slot="start">
+                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+                </ion-thumbnail>
+                <ion-label>Item</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card-content>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/card/list/index.md b/static/usage/v7/card/list/index.md
new file mode 100644
index 00000000000..3cc353476b8
--- /dev/null
+++ b/static/usage/v7/card/list/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/card/list/demo.html"
+  size="400px"
+/>
diff --git a/static/usage/v7/card/list/javascript.md b/static/usage/v7/card/list/javascript.md
new file mode 100644
index 00000000000..4103b7c3c48
--- /dev/null
+++ b/static/usage/v7/card/list/javascript.md
@@ -0,0 +1,51 @@
+```html
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+  <ion-card-content>
+    <ion-list>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+        <ion-label>Item</ion-label>
+      </ion-item>
+
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+        <ion-label>Item</ion-label>
+      </ion-item>
+
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+        <ion-label>Item</ion-label>
+      </ion-item>
+
+      <ion-item lines="none">
+        <ion-thumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+        <ion-label>Item</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-card-content>
+</ion-card>
+
+<style>
+  ion-item {
+    --padding-start: 0;
+  }
+
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/card/list/react/main_css.md b/static/usage/v7/card/list/react/main_css.md
new file mode 100644
index 00000000000..fe56dd12b99
--- /dev/null
+++ b/static/usage/v7/card/list/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item {
+  --padding-start: 0;
+}
+
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/list/react/main_tsx.md b/static/usage/v7/card/list/react/main_tsx.md
new file mode 100644
index 00000000000..9bb30e92c92
--- /dev/null
+++ b/static/usage/v7/card/list/react/main_tsx.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonCard>
+      <IonCardHeader>
+        <IonCardTitle>Card Title</IonCardTitle>
+        <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <IonList>
+          <IonItem>
+            <IonThumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </IonThumbnail>
+            <IonLabel>Item</IonLabel>
+          </IonItem>
+
+          <IonItem>
+            <IonThumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </IonThumbnail>
+            <IonLabel>Item</IonLabel>
+          </IonItem>
+
+          <IonItem>
+            <IonThumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </IonThumbnail>
+            <IonLabel>Item</IonLabel>
+          </IonItem>
+
+          <IonItem lines="none">
+            <IonThumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </IonThumbnail>
+            <IonLabel>Item</IonLabel>
+          </IonItem>
+        </IonList>
+      </IonCardContent>
+    </IonCard>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/card/list/vue.md b/static/usage/v7/card/list/vue.md
new file mode 100644
index 00000000000..7d3e93d7770
--- /dev/null
+++ b/static/usage/v7/card/list/vue.md
@@ -0,0 +1,62 @@
+```html
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+          </ion-thumbnail>
+          <ion-label>Item</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+          </ion-thumbnail>
+          <ion-label>Item</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+          </ion-thumbnail>
+          <ion-label>Item</ion-label>
+        </ion-item>
+
+        <ion-item lines="none">
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+          </ion-thumbnail>
+          <ion-label>Item</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<script lang="ts">
+  import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
+  });
+</script>
+
+<style scoped>
+  ion-item {
+    --padding-start: 0;
+  }
+
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/card/media/angular/example_component_css.md b/static/usage/v7/card/media/angular/example_component_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/v7/card/media/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/media/angular/example_component_html.md b/static/usage/v7/card/media/angular/example_component_html.md
new file mode 100644
index 00000000000..2e074cd5c6d
--- /dev/null
+++ b/static/usage/v7/card/media/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-card>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Here's a small text description for the card content. Nothing more, nothing less.
+  </ion-card-content>
+</ion-card>
+```
diff --git a/static/usage/v7/card/media/demo.html b/static/usage/v7/card/media/demo.html
new file mode 100644
index 00000000000..edc1a4b75a1
--- /dev/null
+++ b/static/usage/v7/card/media/demo.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card>
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Here's a small text description for the card content. Nothing more, nothing less.
+          </ion-card-content>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/card/media/index.md b/static/usage/v7/card/media/index.md
new file mode 100644
index 00000000000..98101ce8e43
--- /dev/null
+++ b/static/usage/v7/card/media/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/card/media/demo.html"
+  size="350px"
+/>
diff --git a/static/usage/v7/card/media/javascript.md b/static/usage/v7/card/media/javascript.md
new file mode 100644
index 00000000000..eb6cfee9522
--- /dev/null
+++ b/static/usage/v7/card/media/javascript.md
@@ -0,0 +1,21 @@
+```html
+<ion-card>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Here's a small text description for the card content. Nothing more, nothing less.
+  </ion-card-content>
+</ion-card>
+
+<style>
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/card/media/react/main_css.md b/static/usage/v7/card/media/react/main_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/v7/card/media/react/main_css.md
@@ -0,0 +1,7 @@
+```css
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/media/react/main_tsx.md b/static/usage/v7/card/media/react/main_tsx.md
new file mode 100644
index 00000000000..7c47833027f
--- /dev/null
+++ b/static/usage/v7/card/media/react/main_tsx.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonCard>
+      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+      <IonCardHeader>
+        <IonCardTitle>Card Title</IonCardTitle>
+        <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+      </IonCardHeader>
+
+      <IonCardContent>
+        Here's a small text description for the card content. Nothing more, nothing less.
+      </IonCardContent>
+    </IonCard>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/card/media/vue.md b/static/usage/v7/card/media/vue.md
new file mode 100644
index 00000000000..e433119f123
--- /dev/null
+++ b/static/usage/v7/card/media/vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <ion-card>
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Here's a small text description for the card content. Nothing more, nothing less.
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<script lang="ts">
+  import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
+  });
+</script>
+
+<style scoped>
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/card/theming/colors/angular/example_component_css.md b/static/usage/v7/card/theming/colors/angular/example_component_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/theming/colors/angular/example_component_html.md b/static/usage/v7/card/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..bda4dbfe1dc
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/angular/example_component_html.md
@@ -0,0 +1,100 @@
+```html
+<ion-card color="primary">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="secondary">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="tertiary">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="success">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="warning">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="danger">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="light">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="medium">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="dark">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+```
diff --git a/static/usage/v7/card/theming/colors/demo.html b/static/usage/v7/card/theming/colors/demo.html
new file mode 100644
index 00000000000..c0e5f88d827
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/demo.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-wrap: wrap;
+    }
+
+    ion-card {
+      flex: 1 1 28%;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card color="primary">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="secondary">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="tertiary">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="success">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="warning">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="danger">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="light">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="medium">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card color="dark">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Card Content
+          </ion-card-content>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/card/theming/colors/index.md b/static/usage/v7/card/theming/colors/index.md
new file mode 100644
index 00000000000..c11eb4d6f18
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/card/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v7/card/theming/colors/javascript.md b/static/usage/v7/card/theming/colors/javascript.md
new file mode 100644
index 00000000000..6822cd586a4
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/javascript.md
@@ -0,0 +1,108 @@
+```html
+<ion-card color="primary">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="secondary">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="tertiary">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="success">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="warning">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="danger">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="light">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="medium">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<ion-card color="dark">
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Card Content
+  </ion-card-content>
+</ion-card>
+
+<style>
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/card/theming/colors/react/main_css.md b/static/usage/v7/card/theming/colors/react/main_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/react/main_css.md
@@ -0,0 +1,7 @@
+```css
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/theming/colors/react/main_tsx.md b/static/usage/v7/card/theming/colors/react/main_tsx.md
new file mode 100644
index 00000000000..efb556f7a01
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/react/main_tsx.md
@@ -0,0 +1,112 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonCard color="primary">
+        <IonCardHeader>
+          <IonCardTitle>Card Title</IonCardTitle>
+          <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+        </IonCardHeader>
+
+        <IonCardContent>
+          Card Content
+        </IonCardContent>
+      </IonCard>
+
+      <IonCard color="secondary">
+        <IonCardHeader>
+          <IonCardTitle>Card Title</IonCardTitle>
+          <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+        </IonCardHeader>
+
+        <IonCardContent>
+          Card Content
+        </IonCardContent>
+      </IonCard>
+
+      <IonCard color="tertiary">
+        <IonCardHeader>
+          <IonCardTitle>Card Title</IonCardTitle>
+          <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+        </IonCardHeader>
+
+        <IonCardContent>
+          Card Content
+        </IonCardContent>
+      </IonCard>
+
+      <IonCard color="success">
+        <IonCardHeader>
+          <IonCardTitle>Card Title</IonCardTitle>
+          <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+        </IonCardHeader>
+
+        <IonCardContent>
+          Card Content
+        </IonCardContent>
+      </IonCard>
+
+      <IonCard color="warning">
+        <IonCardHeader>
+          <IonCardTitle>Card Title</IonCardTitle>
+          <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+        </IonCardHeader>
+
+        <IonCardContent>
+          Card Content
+        </IonCardContent>
+      </IonCard>
+
+      <IonCard color="danger">
+        <IonCardHeader>
+          <IonCardTitle>Card Title</IonCardTitle>
+          <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+        </IonCardHeader>
+
+        <IonCardContent>
+          Card Content
+        </IonCardContent>
+      </IonCard>
+
+      <IonCard color="light">
+        <IonCardHeader>
+          <IonCardTitle>Card Title</IonCardTitle>
+          <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+        </IonCardHeader>
+
+        <IonCardContent>
+          Card Content
+        </IonCardContent>
+      </IonCard>
+
+      <IonCard color="medium">
+        <IonCardHeader>
+          <IonCardTitle>Card Title</IonCardTitle>
+          <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+        </IonCardHeader>
+
+        <IonCardContent>
+          Card Content
+        </IonCardContent>
+      </IonCard>
+
+      <IonCard color="dark">
+        <IonCardHeader>
+          <IonCardTitle>Card Title</IonCardTitle>
+          <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+        </IonCardHeader>
+
+        <IonCardContent>
+          Card Content
+        </IonCardContent>
+      </IonCard>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/card/theming/colors/vue.md b/static/usage/v7/card/theming/colors/vue.md
new file mode 100644
index 00000000000..9f8f76585c8
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/vue.md
@@ -0,0 +1,119 @@
+```html
+<template>
+  <ion-card color="primary">
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Card Content
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="secondary">
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Card Content
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="tertiary">
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Card Content
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="success">
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Card Content
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="warning">
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Card Content
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="danger">
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Card Content
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="light">
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Card Content
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="medium">
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Card Content
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="dark">
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Card Content
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<script lang="ts">
+  import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
+  });
+</script>
+
+<style scoped>
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/card/theming/css-properties/angular/example_component_css.md b/static/usage/v7/card/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..10b2ee69cb0
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,20 @@
+```css
+ion-card {
+  --background: #000;
+  --color: #9efff0;
+}
+
+ion-card-title {
+  --color: #52ffe4;
+}
+
+ion-card-subtitle {
+  --color: #d1fff8;
+}
+
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/theming/css-properties/angular/example_component_html.md b/static/usage/v7/card/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..d489fbc5e26
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Here's a small text description for the card content. Nothing more, nothing less.
+  </ion-card-content>
+</ion-card>
+```
diff --git a/static/usage/v7/card/theming/css-properties/demo.html b/static/usage/v7/card/theming/css-properties/demo.html
new file mode 100644
index 00000000000..dc131842db3
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Card</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    ion-card {
+      --background: #000;
+      --color: #9efff0;
+    }
+
+    ion-card-title {
+      --color: #52ffe4;
+    }
+
+    ion-card-subtitle {
+      --color: #d1fff8;
+    }
+
+    /* iOS places the subtitle above the title */
+    ion-card-header.ios {
+      display: flex;
+      flex-flow: column-reverse;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Here's a small text description for the card content. Nothing more, nothing less.
+          </ion-card-content>
+        </ion-card>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/card/theming/css-properties/index.md b/static/usage/v7/card/theming/css-properties/index.md
new file mode 100644
index 00000000000..cc473c03d32
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/card/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/card/theming/css-properties/javascript.md b/static/usage/v7/card/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..5f7c4c56a3b
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/javascript.md
@@ -0,0 +1,33 @@
+```html
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Card Title</ion-card-title>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Here's a small text description for the card content. Nothing more, nothing less.
+  </ion-card-content>
+</ion-card>
+
+<style>
+  ion-card {
+    --background: #000;
+    --color: #9efff0;
+  }
+
+  ion-card-title {
+    --color: #52ffe4;
+  }
+
+  ion-card-subtitle {
+    --color: #d1fff8;
+  }
+
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/card/theming/css-properties/react/main_css.md b/static/usage/v7/card/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..10b2ee69cb0
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/react/main_css.md
@@ -0,0 +1,20 @@
+```css
+ion-card {
+  --background: #000;
+  --color: #9efff0;
+}
+
+ion-card-title {
+  --color: #52ffe4;
+}
+
+ion-card-subtitle {
+  --color: #d1fff8;
+}
+
+/* iOS places the subtitle above the title */
+ion-card-header.ios {
+  display: flex;
+  flex-flow: column-reverse;
+}
+```
diff --git a/static/usage/v7/card/theming/css-properties/react/main_tsx.md b/static/usage/v7/card/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..251b18ce24d
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonCard>
+      <IonCardHeader>
+        <IonCardTitle>Card Title</IonCardTitle>
+        <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+      </IonCardHeader>
+
+      <IonCardContent>
+        Here's a small text description for the card content. Nothing more, nothing less.
+      </IonCardContent>
+    </IonCard>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/card/theming/css-properties/vue.md b/static/usage/v7/card/theming/css-properties/vue.md
new file mode 100644
index 00000000000..4099cc49de6
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/vue.md
@@ -0,0 +1,44 @@
+```html
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      Here's a small text description for the card content. Nothing more, nothing less.
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<script lang="ts">
+  import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
+  });
+</script>
+
+<style scoped>
+  ion-card {
+    --background: #000;
+    --color: #9efff0;
+  }
+
+  ion-card-title {
+    --color: #52ffe4;
+  }
+
+  ion-card-subtitle {
+    --color: #d1fff8;
+  }
+
+  /* iOS places the subtitle above the title */
+  ion-card-header.ios {
+    display: flex;
+    flex-flow: column-reverse;
+  }
+</style>
+```
diff --git a/static/usage/v7/checkbox/basic/angular.md b/static/usage/v7/checkbox/basic/angular.md
new file mode 100644
index 00000000000..29c262a3522
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start"></ion-checkbox>
+  <ion-label>I agree to the terms and conditions</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/checkbox/basic/demo.html b/static/usage/v7/checkbox/basic/demo.html
new file mode 100644
index 00000000000..2df0497c4fe
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Checkbox</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-checkbox slot="start"></ion-checkbox>
+          <ion-label>I agree to the terms and conditions</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/basic/index.md b/static/usage/v7/checkbox/basic/index.md
new file mode 100644
index 00000000000..e238ae9c63f
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/checkbox/basic/demo.html"
+/>
diff --git a/static/usage/v7/checkbox/basic/javascript.md b/static/usage/v7/checkbox/basic/javascript.md
new file mode 100644
index 00000000000..29c262a3522
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start"></ion-checkbox>
+  <ion-label>I agree to the terms and conditions</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/checkbox/basic/react.md b/static/usage/v7/checkbox/basic/react.md
new file mode 100644
index 00000000000..64dda9457bb
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import {
+  IonCheckbox,
+  IonItem,
+  IonLabel
+} from '@ionic/react';
+
+function Example() {
+  return (
+    <IonItem>
+      <IonCheckbox slot="start"></IonCheckbox>
+      <IonLabel>I agree to the terms and conditions</IonLabel>
+    </IonItem>
+  );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/basic/vue.md b/static/usage/v7/checkbox/basic/vue.md
new file mode 100644
index 00000000000..53cb1d16ccf
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-item>
+    <ion-checkbox slot="start"></ion-checkbox>
+    <ion-label>I agree to the terms and conditions</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import {
+    IonCheckbox,
+    IonItem,
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonCheckbox,
+      IonItem,
+      IonLabel
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/checkbox/indeterminate/angular.md b/static/usage/v7/checkbox/indeterminate/angular.md
new file mode 100644
index 00000000000..841851a904a
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start" [indeterminate]="true"></ion-checkbox>
+  <ion-label>Indeterminate checkbox</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/checkbox/indeterminate/demo.html b/static/usage/v7/checkbox/indeterminate/demo.html
new file mode 100644
index 00000000000..4e726022577
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Checkbox</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-checkbox slot="start" indeterminate="true"></ion-checkbox>
+          <ion-label>Indeterminate checkbox</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/indeterminate/index.md b/static/usage/v7/checkbox/indeterminate/index.md
new file mode 100644
index 00000000000..bcc02a761e7
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/checkbox/indeterminate/demo.html"
+/>
diff --git a/static/usage/v7/checkbox/indeterminate/javascript.md b/static/usage/v7/checkbox/indeterminate/javascript.md
new file mode 100644
index 00000000000..9a216a7d8b0
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start" indeterminate="true"></ion-checkbox>
+  <ion-label>Indeterminate checkbox</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/checkbox/indeterminate/react.md b/static/usage/v7/checkbox/indeterminate/react.md
new file mode 100644
index 00000000000..9e08f102560
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import {
+  IonCheckbox,
+  IonItem,
+  IonLabel
+} from '@ionic/react';
+
+function Example() {
+  return (
+    <IonItem>
+      <IonCheckbox slot="start" indeterminate={true}></IonCheckbox>
+      <IonLabel>Indeterminate checkbox</IonLabel>
+    </IonItem>
+  );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/indeterminate/vue.md b/static/usage/v7/checkbox/indeterminate/vue.md
new file mode 100644
index 00000000000..0ad2ddbf62b
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-item>
+    <ion-checkbox slot="start" :indeterminate="true"></ion-checkbox>
+    <ion-label>Indeterminate checkbox</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import {
+    IonCheckbox,
+    IonItem,
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonCheckbox,
+      IonItem,
+      IonLabel
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..c8fbfdb86d8
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-checkbox {
+  --size: 32px;
+  --background-checked: #6815ec;
+}
+
+ion-checkbox::part(container) {
+  border-radius: 6px;
+  border: 2px solid #6815ec;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..a54828724aa
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start"></ion-checkbox>
+  <ion-label>Themed checkbox</ion-label>
+</ion-item>
+```
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/theming/css-properties/demo.html b/static/usage/v7/checkbox/theming/css-properties/demo.html
new file mode 100644
index 00000000000..b75f12c0655
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Checkbox</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-checkbox {
+      --size: 32px;
+      --background-checked: #6815ec;
+    }
+
+    ion-checkbox::part(container) {
+      border-radius: 6px;
+      border: 2px solid #6815ec;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-checkbox slot="start"></ion-checkbox>
+          <ion-label>Themed checkbox</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/theming/css-properties/index.md b/static/usage/v7/checkbox/theming/css-properties/index.md
new file mode 100644
index 00000000000..51d619f8ccf
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/checkbox/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/checkbox/theming/css-properties/javascript.md b/static/usage/v7/checkbox/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..5ee2949135b
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start"></ion-checkbox>
+  <ion-label>Themed checkbox</ion-label>
+</ion-item>
+
+<style>
+  ion-checkbox {
+    --size: 32px;
+    --background-checked: #6815ec;
+  }
+  
+  ion-checkbox::part(container) {
+    border-radius: 6px;
+    border: 2px solid #6815ec;
+  }
+</style>
+```
diff --git a/static/usage/v7/checkbox/theming/css-properties/react/main_css.md b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..c8fbfdb86d8
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-checkbox {
+  --size: 32px;
+  --background-checked: #6815ec;
+}
+
+ion-checkbox::part(container) {
+  border-radius: 6px;
+  border: 2px solid #6815ec;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..28784175181
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import {
+  IonCheckbox,
+  IonItem,
+  IonLabel
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonItem>
+      <IonCheckbox slot="start"></IonCheckbox>
+      <IonLabel>Themed checkbox</IonLabel>
+    </IonItem>
+  );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/theming/css-properties/vue.md b/static/usage/v7/checkbox/theming/css-properties/vue.md
new file mode 100644
index 00000000000..3bb88c82577
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-item>
+    <ion-checkbox slot="start"></ion-checkbox>
+    <ion-label>Themed checkbox</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import {
+    IonCheckbox,
+    IonItem,
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonCheckbox,
+      IonItem,
+      IonLabel
+    }
+  });
+</script>
+
+<style>
+  ion-checkbox {
+    --size: 32px;
+    --background-checked: #6815ec;
+  }
+  
+  ion-checkbox::part(container) {
+    border-radius: 6px;
+    border: 2px solid #6815ec;
+  }
+</style>
+```
diff --git a/static/usage/v7/chip/basic/angular.md b/static/usage/v7/chip/basic/angular.md
new file mode 100644
index 00000000000..0e9440b7ea8
--- /dev/null
+++ b/static/usage/v7/chip/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-chip>Default</ion-chip>
+<ion-chip [disabled]="true">Disabled</ion-chip>
+<ion-chip [outline]="true">Outline</ion-chip>
+```
diff --git a/static/usage/v7/chip/basic/demo.html b/static/usage/v7/chip/basic/demo.html
new file mode 100644
index 00000000000..df4c6569a13
--- /dev/null
+++ b/static/usage/v7/chip/basic/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Chip</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-chip>Default</ion-chip>
+        <ion-chip disabled="true">Disabled</ion-chip>
+        <ion-chip outline="true">Outline</ion-chip>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/chip/basic/index.md b/static/usage/v7/chip/basic/index.md
new file mode 100644
index 00000000000..e605cabed8e
--- /dev/null
+++ b/static/usage/v7/chip/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/chip/basic/demo.html" />
diff --git a/static/usage/v7/chip/basic/javascript.md b/static/usage/v7/chip/basic/javascript.md
new file mode 100644
index 00000000000..fb494e84571
--- /dev/null
+++ b/static/usage/v7/chip/basic/javascript.md
@@ -0,0 +1,5 @@
+```html
+<ion-chip>Default</ion-chip>
+<ion-chip disabled="true">Disabled</ion-chip>
+<ion-chip outline="true">Outline</ion-chip>
+```
diff --git a/static/usage/v7/chip/basic/react.md b/static/usage/v7/chip/basic/react.md
new file mode 100644
index 00000000000..cc1989f2d03
--- /dev/null
+++ b/static/usage/v7/chip/basic/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonChip } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonChip>Default</IonChip>
+      <IonChip disabled={true}>Disabled</IonChip>
+      <IonChip outline={true}>Outline</IonChip>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/chip/basic/vue.md b/static/usage/v7/chip/basic/vue.md
new file mode 100644
index 00000000000..69634b44d3e
--- /dev/null
+++ b/static/usage/v7/chip/basic/vue.md
@@ -0,0 +1,16 @@
+```html
+<template>
+  <ion-chip>Default</ion-chip>
+  <ion-chip :disabled="true">Disabled</ion-chip>
+  <ion-chip :outline="true">Outline</ion-chip>
+</template>
+
+<script lang="ts">
+  import { IonChip } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonChip },
+  });
+</script>
+```
diff --git a/static/usage/v7/chip/slots/angular.md b/static/usage/v7/chip/slots/angular.md
new file mode 100644
index 00000000000..75f2e24dd8d
--- /dev/null
+++ b/static/usage/v7/chip/slots/angular.md
@@ -0,0 +1,15 @@
+```html
+<ion-chip>
+  <ion-avatar>
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+  </ion-avatar>
+  <ion-label>Avatar Chip</ion-label>
+  <ion-icon name="close-circle"></ion-icon>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin" color="primary"></ion-icon>
+  <ion-label>Icon Chip</ion-label>
+  <ion-icon name="close"></ion-icon>
+</ion-chip>
+```
diff --git a/static/usage/v7/chip/slots/demo.html b/static/usage/v7/chip/slots/demo.html
new file mode 100644
index 00000000000..bbf70b2e82f
--- /dev/null
+++ b/static/usage/v7/chip/slots/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Chip</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-chip>
+          <ion-avatar>
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>Avatar Chip</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+
+        <ion-chip>
+          <ion-icon name="pin" color="primary"></ion-icon>
+          <ion-label>Icon Chip</ion-label>
+          <ion-icon name="close"></ion-icon>
+        </ion-chip>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/chip/slots/index.md b/static/usage/v7/chip/slots/index.md
new file mode 100644
index 00000000000..e73da2b3829
--- /dev/null
+++ b/static/usage/v7/chip/slots/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/chip/slots/demo.html" />
diff --git a/static/usage/v7/chip/slots/javascript.md b/static/usage/v7/chip/slots/javascript.md
new file mode 100644
index 00000000000..75f2e24dd8d
--- /dev/null
+++ b/static/usage/v7/chip/slots/javascript.md
@@ -0,0 +1,15 @@
+```html
+<ion-chip>
+  <ion-avatar>
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+  </ion-avatar>
+  <ion-label>Avatar Chip</ion-label>
+  <ion-icon name="close-circle"></ion-icon>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin" color="primary"></ion-icon>
+  <ion-label>Icon Chip</ion-label>
+  <ion-icon name="close"></ion-icon>
+</ion-chip>
+```
diff --git a/static/usage/v7/chip/slots/react.md b/static/usage/v7/chip/slots/react.md
new file mode 100644
index 00000000000..35dbd057c70
--- /dev/null
+++ b/static/usage/v7/chip/slots/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonChip, IonAvatar, IonLabel, IonIcon } from '@ionic/react';
+import { close, closeCircle, pin } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonChip>
+        <IonAvatar>
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </IonAvatar>
+        <IonLabel>Avatar Chip</IonLabel>
+        <IonIcon icon={closeCircle}></IonIcon>
+      </IonChip>
+
+      <IonChip>
+        <IonIcon icon={pin} color="primary"></IonIcon>
+        <IonLabel>Icon Chip</IonLabel>
+        <IonIcon icon={close}></IonIcon>
+      </IonChip>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/chip/slots/vue.md b/static/usage/v7/chip/slots/vue.md
new file mode 100644
index 00000000000..76f0bbfcf48
--- /dev/null
+++ b/static/usage/v7/chip/slots/vue.md
@@ -0,0 +1,34 @@
+```html
+<template>
+  <ion-chip>
+    <ion-avatar>
+      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+    </ion-avatar>
+    <ion-label>Avatar Chip</ion-label>
+    <ion-icon :icon="closeCircle"></ion-icon>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-icon :icon="pin" color="primary"></ion-icon>
+    <ion-label>Icon Chip</ion-label>
+    <ion-icon :icon="close"></ion-icon>
+  </ion-chip>
+</template>
+
+<script lang="ts">
+  import { IonChip, IonAvatar, IonLabel, IonIcon } from '@ionic/vue';
+  import { close, closeCircle, pin } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonChip, IonAvatar, IonLabel, IonIcon },
+    setup() {
+      return {
+        close,
+        closeCircle,
+        pin,
+      };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/chip/theming/colors/angular.md b/static/usage/v7/chip/theming/colors/angular.md
new file mode 100644
index 00000000000..db05dd6f248
--- /dev/null
+++ b/static/usage/v7/chip/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-chip>Default</ion-chip>
+<ion-chip color="primary">Primary</ion-chip>
+<ion-chip color="secondary">Secondary</ion-chip>
+<ion-chip color="tertiary">Tertiary</ion-chip>
+<ion-chip color="success">Success</ion-chip>
+<ion-chip color="warning">Warning</ion-chip>
+<ion-chip color="danger">Danger</ion-chip>
+<ion-chip color="light">Light</ion-chip>
+<ion-chip color="medium">Medium</ion-chip>
+<ion-chip color="dark">Dark</ion-chip>
+```
diff --git a/static/usage/v7/chip/theming/colors/demo.html b/static/usage/v7/chip/theming/colors/demo.html
new file mode 100644
index 00000000000..ecdbe97a047
--- /dev/null
+++ b/static/usage/v7/chip/theming/colors/demo.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Chip</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .flex-items {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      max-width: 440px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="flex-items">
+          <ion-chip>Default</ion-chip>
+          <ion-chip color="primary">Primary</ion-chip>
+          <ion-chip color="secondary">Secondary</ion-chip>
+          <ion-chip color="tertiary">Tertiary</ion-chip>
+          <ion-chip color="success">Success</ion-chip>
+          <ion-chip color="warning">Warning</ion-chip>
+          <ion-chip color="danger">Danger</ion-chip>
+          <ion-chip color="light">Light</ion-chip>
+          <ion-chip color="medium">Medium</ion-chip>
+          <ion-chip color="dark">Dark</ion-chip>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/chip/theming/colors/index.md b/static/usage/v7/chip/theming/colors/index.md
new file mode 100644
index 00000000000..08aba14caca
--- /dev/null
+++ b/static/usage/v7/chip/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/chip/theming/colors/demo.html" />
diff --git a/static/usage/v7/chip/theming/colors/javascript.md b/static/usage/v7/chip/theming/colors/javascript.md
new file mode 100644
index 00000000000..db05dd6f248
--- /dev/null
+++ b/static/usage/v7/chip/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-chip>Default</ion-chip>
+<ion-chip color="primary">Primary</ion-chip>
+<ion-chip color="secondary">Secondary</ion-chip>
+<ion-chip color="tertiary">Tertiary</ion-chip>
+<ion-chip color="success">Success</ion-chip>
+<ion-chip color="warning">Warning</ion-chip>
+<ion-chip color="danger">Danger</ion-chip>
+<ion-chip color="light">Light</ion-chip>
+<ion-chip color="medium">Medium</ion-chip>
+<ion-chip color="dark">Dark</ion-chip>
+```
diff --git a/static/usage/v7/chip/theming/colors/react.md b/static/usage/v7/chip/theming/colors/react.md
new file mode 100644
index 00000000000..8f12b4f978e
--- /dev/null
+++ b/static/usage/v7/chip/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonChip } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonChip>Default</IonChip>
+      <IonChip color="primary">Primary</IonChip>
+      <IonChip color="secondary">Secondary</IonChip>
+      <IonChip color="tertiary">Tertiary</IonChip>
+      <IonChip color="success">Success</IonChip>
+      <IonChip color="warning">Warning</IonChip>
+      <IonChip color="danger">Danger</IonChip>
+      <IonChip color="light">Light</IonChip>
+      <IonChip color="medium">Medium</IonChip>
+      <IonChip color="dark">Dark</IonChip>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/chip/theming/colors/vue.md b/static/usage/v7/chip/theming/colors/vue.md
new file mode 100644
index 00000000000..55221ac5115
--- /dev/null
+++ b/static/usage/v7/chip/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-chip>Default</ion-chip>
+  <ion-chip color="primary">Primary</ion-chip>
+  <ion-chip color="secondary">Secondary</ion-chip>
+  <ion-chip color="tertiary">Tertiary</ion-chip>
+  <ion-chip color="success">Success</ion-chip>
+  <ion-chip color="warning">Warning</ion-chip>
+  <ion-chip color="danger">Danger</ion-chip>
+  <ion-chip color="light">Light</ion-chip>
+  <ion-chip color="medium">Medium</ion-chip>
+  <ion-chip color="dark">Dark</ion-chip>
+</template>
+
+<script lang="ts">
+  import { IonChip } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonChip },
+  });
+</script>
+```
diff --git a/static/usage/v7/chip/theming/css-properties/angular/example_component_css.md b/static/usage/v7/chip/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..60dc62c6417
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-chip {
+  --background: #00213f;
+  --color: #adefd1;
+}
+```
diff --git a/static/usage/v7/chip/theming/css-properties/angular/example_component_html.md b/static/usage/v7/chip/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..67c6144e7b8
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-chip>Default</ion-chip>
+```
diff --git a/static/usage/v7/chip/theming/css-properties/demo.html b/static/usage/v7/chip/theming/css-properties/demo.html
new file mode 100644
index 00000000000..b0621dace2d
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Chip</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-chip {
+      --background: #00213F;
+      --color: #ADEFD1;
+    }
+  </style>
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-chip>Default</ion-chip>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/chip/theming/css-properties/index.md b/static/usage/v7/chip/theming/css-properties/index.md
new file mode 100644
index 00000000000..2ce8f542f9c
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/chip/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/chip/theming/css-properties/javascript.md b/static/usage/v7/chip/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..b40912d73a2
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/javascript.md
@@ -0,0 +1,10 @@
+```html
+<style>
+  ion-chip {
+    --background: #00213f;
+    --color: #adefd1;
+  }
+</style>
+
+<ion-chip>Default</ion-chip>
+```
diff --git a/static/usage/v7/chip/theming/css-properties/react/main_css.md b/static/usage/v7/chip/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..60dc62c6417
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-chip {
+  --background: #00213f;
+  --color: #adefd1;
+}
+```
diff --git a/static/usage/v7/chip/theming/css-properties/react/main_tsx.md b/static/usage/v7/chip/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..b4fc5f12cae
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonChip } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return <IonChip>Default</IonChip>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/chip/theming/css-properties/vue.md b/static/usage/v7/chip/theming/css-properties/vue.md
new file mode 100644
index 00000000000..7195787bd52
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/vue.md
@@ -0,0 +1,21 @@
+```html
+<style>
+  ion-chip {
+    --background: #00213f;
+    --color: #adefd1;
+  }
+</style>
+
+<template>
+  <ion-chip>Default</ion-chip>
+</template>
+
+<script lang="ts">
+  import { IonChip } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonChip },
+  });
+</script>
+```
diff --git a/static/usage/v7/content/basic/angular.md b/static/usage/v7/content/basic/angular.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v7/content/basic/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/content/basic/demo.html b/static/usage/v7/content/basic/demo.html
new file mode 100644
index 00000000000..14dbe3f5e7d
--- /dev/null
+++ b/static/usage/v7/content/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/content/basic/index.md b/static/usage/v7/content/basic/index.md
new file mode 100644
index 00000000000..2e49772c97d
--- /dev/null
+++ b/static/usage/v7/content/basic/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/content/basic/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/content/basic/javascript.md b/static/usage/v7/content/basic/javascript.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v7/content/basic/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/content/basic/react.md b/static/usage/v7/content/basic/react.md
new file mode 100644
index 00000000000..2ece824eea4
--- /dev/null
+++ b/static/usage/v7/content/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonContent className="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/basic/vue.md b/static/usage/v7/content/basic/vue.md
new file mode 100644
index 00000000000..84e2e35470e
--- /dev/null
+++ b/static/usage/v7/content/basic/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent },
+  });
+</script>
+```
diff --git a/static/usage/v7/content/fixed/angular.md b/static/usage/v7/content/fixed/angular.md
new file mode 100644
index 00000000000..178d8338f25
--- /dev/null
+++ b/static/usage/v7/content/fixed/angular.md
@@ -0,0 +1,14 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+  <ion-button>Normal Button</ion-button>
+  <ion-button slot="fixed">Fixed Button</ion-button>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/content/fixed/angular/example_component_css.md b/static/usage/v7/content/fixed/angular/example_component_css.md
new file mode 100644
index 00000000000..e5931e4d94f
--- /dev/null
+++ b/static/usage/v7/content/fixed/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-button[slot="fixed"] {
+  top: 50%;
+  right: 20px;
+}
+```
diff --git a/static/usage/v7/content/fixed/angular/example_component_html.md b/static/usage/v7/content/fixed/angular/example_component_html.md
new file mode 100644
index 00000000000..178d8338f25
--- /dev/null
+++ b/static/usage/v7/content/fixed/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+  <ion-button>Normal Button</ion-button>
+  <ion-button slot="fixed">Fixed Button</ion-button>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/content/fixed/demo.html b/static/usage/v7/content/fixed/demo.html
new file mode 100644
index 00000000000..9ea56f755e2
--- /dev/null
+++ b/static/usage/v7/content/fixed/demo.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-button[slot="fixed"] {
+      top: 50%;
+      right: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+      <ion-button>Normal Button</ion-button>
+      <ion-button slot="fixed">Fixed Button</ion-button>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+        fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+        augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+        mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+        quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+        varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+        consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+        amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+        vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+        Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+        odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+        vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+        odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+        Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+        tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+        et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+        faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+        venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+        sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+        molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+        sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+        amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+        Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+        vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+        at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+        mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+        enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+        orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+        cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+        vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+        egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/content/fixed/index.md b/static/usage/v7/content/fixed/index.md
new file mode 100644
index 00000000000..6ff6db1f65e
--- /dev/null
+++ b/static/usage/v7/content/fixed/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/content/fixed/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/content/fixed/javascript.md b/static/usage/v7/content/fixed/javascript.md
new file mode 100644
index 00000000000..2a577f1d76a
--- /dev/null
+++ b/static/usage/v7/content/fixed/javascript.md
@@ -0,0 +1,21 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+  <ion-button>Normal Button</ion-button>
+  <ion-button slot="fixed">Fixed Button</ion-button>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+
+<style>
+  ion-button[slot="fixed"] {
+    top: 50%;
+    right: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/content/fixed/react.md b/static/usage/v7/content/fixed/react.md
new file mode 100644
index 00000000000..d8e115e5491
--- /dev/null
+++ b/static/usage/v7/content/fixed/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonContent className="ion-padding">
+      <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+      <IonButton>Normal Button</IonButton>
+      <IonButton slot="fixed">Fixed Button</IonButton>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/fixed/react/main_css.md b/static/usage/v7/content/fixed/react/main_css.md
new file mode 100644
index 00000000000..e5931e4d94f
--- /dev/null
+++ b/static/usage/v7/content/fixed/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-button[slot="fixed"] {
+  top: 50%;
+  right: 20px;
+}
+```
diff --git a/static/usage/v7/content/fixed/react/main_tsx.md b/static/usage/v7/content/fixed/react/main_tsx.md
new file mode 100644
index 00000000000..542f79deeb8
--- /dev/null
+++ b/static/usage/v7/content/fixed/react/main_tsx.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonContent className="ion-padding">
+      <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+      <IonButton>Normal Button</IonButton>
+      <IonButton slot="fixed">Fixed Button</IonButton>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/fixed/vue.md b/static/usage/v7/content/fixed/vue.md
new file mode 100644
index 00000000000..2c44fd0b289
--- /dev/null
+++ b/static/usage/v7/content/fixed/vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+    <ion-button>Normal Button</ion-button>
+    <ion-button slot="fixed">Fixed Button</ion-button>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+    <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+    <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+    <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+    <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent },
+  });
+</script>
+
+<style scoped>
+  ion-button[slot="fixed"] {
+    top: 50%;
+    right: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/content/fullscreen/angular/example_component_css.md b/static/usage/v7/content/fullscreen/angular/example_component_css.md
new file mode 100644
index 00000000000..a62d625ae0a
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-toolbar {
+  --opacity: .5
+}
+```
diff --git a/static/usage/v7/content/fullscreen/angular/example_component_html.md b/static/usage/v7/content/fullscreen/angular/example_component_html.md
new file mode 100644
index 00000000000..c5cf5a10dd9
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Header
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true" class="ion-padding">
+  <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>
+      Footer
+    </ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/content/fullscreen/demo.html b/static/usage/v7/content/fullscreen/demo.html
new file mode 100644
index 00000000000..9bf752950d5
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-toolbar {
+      --opacity: .5
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>
+          Header
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true" class="ion-padding">
+      <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+        fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+        augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+        mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+        quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+        varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+        consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+        amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+        vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+        Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+        odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+        vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+        odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+        Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+        tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+        et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+        faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+        venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+        sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+        molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+        sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+        amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+        Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+        vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+        at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+        mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+        enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+        orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+        cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+        vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+        egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </ion-content>
+    <ion-footer>
+      <ion-toolbar>
+        <ion-title>
+          Footer
+        </ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/content/fullscreen/index.md b/static/usage/v7/content/fullscreen/index.md
new file mode 100644
index 00000000000..cc20ddf5070
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/content/fullscreen/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/content/fullscreen/javascript.md b/static/usage/v7/content/fullscreen/javascript.md
new file mode 100644
index 00000000000..f6011fa9b88
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/javascript.md
@@ -0,0 +1,31 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Header
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content fullscreen="true" class="ion-padding">
+  <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>
+      Footer
+    </ion-title>
+  </ion-toolbar>
+</ion-footer>
+
+<style>
+  ion-toolbar {
+    --opacity: .5
+  }
+</style>
+```
diff --git a/static/usage/v7/content/fullscreen/react/main_css.md b/static/usage/v7/content/fullscreen/react/main_css.md
new file mode 100644
index 00000000000..a62d625ae0a
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-toolbar {
+  --opacity: .5
+}
+```
diff --git a/static/usage/v7/content/fullscreen/react/main_tsx.md b/static/usage/v7/content/fullscreen/react/main_tsx.md
new file mode 100644
index 00000000000..ca324631897
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/react/main_tsx.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>
+            Header
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen={true} className="ion-padding">
+        <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+        <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+        <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+        <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+        <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+      </IonContent>
+      <IonFooter>
+        <IonToolbar>
+          <IonTitle>
+            Footer
+          </IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/fullscreen/vue.md b/static/usage/v7/content/fullscreen/vue.md
new file mode 100644
index 00000000000..e4bd0c3a59f
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/vue.md
@@ -0,0 +1,42 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>
+        Header
+      </ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content :fullscreen="true" class="ion-padding">
+    <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+    <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+    <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+    <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+    <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+  </ion-content>
+  <ion-footer>
+    <ion-toolbar>
+      <ion-title>
+        Footer
+      </ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar },
+  });
+</script>
+
+<style scoped>
+  ion-toolbar {
+    --opacity: .5
+  }
+</style>
+```
diff --git a/static/usage/v7/content/header-footer/angular.md b/static/usage/v7/content/header-footer/angular.md
new file mode 100644
index 00000000000..4a177d1d58f
--- /dev/null
+++ b/static/usage/v7/content/header-footer/angular.md
@@ -0,0 +1,26 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Header
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>
+      Footer
+    </ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/content/header-footer/demo.html b/static/usage/v7/content/header-footer/demo.html
new file mode 100644
index 00000000000..0a39f7a5fa8
--- /dev/null
+++ b/static/usage/v7/content/header-footer/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>
+          Header
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+    <ion-footer>
+      <ion-toolbar>
+        <ion-title>
+          Footer
+        </ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/content/header-footer/index.md b/static/usage/v7/content/header-footer/index.md
new file mode 100644
index 00000000000..d045cac7fa7
--- /dev/null
+++ b/static/usage/v7/content/header-footer/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/content/header-footer/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/content/header-footer/javascript.md b/static/usage/v7/content/header-footer/javascript.md
new file mode 100644
index 00000000000..4a177d1d58f
--- /dev/null
+++ b/static/usage/v7/content/header-footer/javascript.md
@@ -0,0 +1,26 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Header
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>
+      Footer
+    </ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/content/header-footer/react.md b/static/usage/v7/content/header-footer/react.md
new file mode 100644
index 00000000000..4ffff834f2a
--- /dev/null
+++ b/static/usage/v7/content/header-footer/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>
+            Header
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Heading 1</h1>
+        <h2>Heading 2</h2>
+        <h3>Heading 3</h3>
+        <h4>Heading 4</h4>
+        <h5>Heading 5</h5>
+        <h6>Heading 6</h6>
+
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonFooter>
+        <IonToolbar>
+          <IonTitle>
+            Footer
+          </IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/header-footer/vue.md b/static/usage/v7/content/header-footer/vue.md
new file mode 100644
index 00000000000..8bd052a6460
--- /dev/null
+++ b/static/usage/v7/content/header-footer/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>
+        Header
+      </ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-footer>
+    <ion-toolbar>
+      <ion-title>
+        Footer
+      </ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/content/scroll-events/angular/example_component_html.md b/static/usage/v7/content/scroll-events/angular/example_component_html.md
new file mode 100644
index 00000000000..a1c3aac558f
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+<!-- Scroll events are disabled by default for content for performance reasons, enable them to listen to them -->
+<!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+<ion-content
+  [scrollEvents]="true"
+  (ionScrollStart)="handleScrollStart()"
+  (ionScroll)="handleScroll($any($event))"
+  (ionScrollEnd)="handleScrollEnd()"
+  class="ion-padding">
+  <h1>Scroll to fire the scroll events and view them in the console.</h1>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/content/scroll-events/angular/example_component_ts.md b/static/usage/v7/content/scroll-events/angular/example_component_ts.md
new file mode 100644
index 00000000000..7e3f7625f57
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { ScrollDetail } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  handleScrollStart() {
+    console.log('scroll start');
+  }
+
+  handleScroll(ev: CustomEvent<ScrollDetail>) {
+    console.log('scroll', ev.detail);
+  }
+
+  handleScrollEnd() {
+    console.log('scroll end');
+  }
+}
+```
diff --git a/static/usage/v7/content/scroll-events/demo.html b/static/usage/v7/content/scroll-events/demo.html
new file mode 100644
index 00000000000..1db71ff8972
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Scroll to fire the scroll events and view them in the console.</h1>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+        fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+        augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+        mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+        quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+        varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+        consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+        amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+        vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+        Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+        odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+        vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+        odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+        Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+        tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+        et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+        faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+        venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+        sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+        molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+        sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+        amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+        Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+        vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+        at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+        mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+        enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+        orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+        cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+        vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+        egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const content = document.querySelector('ion-content');
+    // Scroll events are disabled by default for content for
+    // performance reasons, enable them to listen to them
+    content.scrollEvents = true;
+
+    content.addEventListener('ionScrollStart', () => console.log('scroll start'));
+    content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
+    content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/content/scroll-events/index.md b/static/usage/v7/content/scroll-events/index.md
new file mode 100644
index 00000000000..d908468b2f5
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/content/scroll-events/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/content/scroll-events/javascript.md b/static/usage/v7/content/scroll-events/javascript.md
new file mode 100644
index 00000000000..5cc4e537dd6
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/javascript.md
@@ -0,0 +1,22 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Scroll to fire the scroll events and view them in the console.</h1>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+
+<script>
+  const content = document.querySelector('ion-content');
+  // Scroll events are disabled by default for content for
+  // performance reasons, enable them to listen to them
+  content.scrollEvents = true;
+
+  content.addEventListener('ionScrollStart', () => console.log('scroll start'));
+  content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
+  content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
+</script>
+```
diff --git a/static/usage/v7/content/scroll-events/react.md b/static/usage/v7/content/scroll-events/react.md
new file mode 100644
index 00000000000..ce8ced69807
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonContent, ScrollDetail } from '@ionic/react';
+
+function Example() {
+  function handleScrollStart() {
+    console.log('scroll start');
+  }
+
+  function handleScroll(ev: CustomEvent<ScrollDetail>) {
+    console.log('scroll', ev.detail);
+  }
+
+  function handleScrollEnd() {
+    console.log('scroll end');
+  }
+
+  return (
+    // Scroll events are disabled by default for content for performance reasons, enable them to listen to them
+    <IonContent
+      scrollEvents={true}
+      onIonScrollStart={handleScrollStart}
+      onIonScroll={handleScroll}
+      onIonScrollEnd={handleScrollEnd}
+      class="ion-padding">
+      <h1>Scroll to fire the scroll events and view them in the console.</h1>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/scroll-events/vue.md b/static/usage/v7/content/scroll-events/vue.md
new file mode 100644
index 00000000000..2afdcf26682
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/vue.md
@@ -0,0 +1,39 @@
+```html
+<template>
+  <!-- Scroll events are disabled by default for content for performance reasons, enable them to listen to them -->
+  <ion-content
+    :scroll-events="true"
+    @ionScrollStart="handleScrollStart()"
+    @ionScroll="handleScroll($event)"
+    @ionScrollEnd="handleScrollEnd()"
+    class="ion-padding">
+    <h1>Scroll to fire the scroll events and view them in the console.</h1>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+    <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+    <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+    <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+    <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent },
+    methods: {
+      handleScrollStart() {
+        console.log('scroll start');
+      },
+      handleScroll(ev: CustomEvent) {
+        console.log('scroll', ev.detail);
+      },
+      handleScrollEnd() {
+        console.log('scroll end');
+      }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/content/scroll-methods/angular/example_component_html.md b/static/usage/v7/content/scroll-methods/angular/example_component_html.md
new file mode 100644
index 00000000000..ffa8c913e3e
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Click on the buttons to scroll the content.</h1>
+
+  <ion-button expand="block" (click)="scrollToBottom()">Scroll to Bottom</ion-button>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+
+  <ion-button expand="block" (click)="scrollToTop()">Scroll to Top</ion-button>
+</ion-content>
+```
diff --git a/static/usage/v7/content/scroll-methods/angular/example_component_ts.md b/static/usage/v7/content/scroll-methods/angular/example_component_ts.md
new file mode 100644
index 00000000000..1975fe3b341
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonContent } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild(IonContent) content: IonContent;
+
+  scrollToBottom() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the bottom instead of instantly
+    this.content.scrollToBottom(500);
+  }
+
+  scrollToTop() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the top instead of instantly
+    this.content.scrollToTop(500);
+  }
+}
+```
diff --git a/static/usage/v7/content/scroll-methods/demo.html b/static/usage/v7/content/scroll-methods/demo.html
new file mode 100644
index 00000000000..c72c5300ff5
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Click on the buttons to scroll the content.</h1>
+
+      <ion-button expand="block" onClick="scrollToBottom()">Scroll to Bottom</ion-button>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+        fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+        augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+        mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+        quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+        varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+        consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+        amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+        vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+        Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+        odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+        vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+        odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+        Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+        tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+        et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+        faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+        venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+        sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+        molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+        sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+        amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+        Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+        vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+        at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+        mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+        enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+        orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+        cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+        vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+        egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+
+      <ion-button expand="block" onClick="scrollToTop()">Scroll to Top</ion-button>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const content = document.querySelector('ion-content');
+
+    function scrollToBottom() {
+      // Passing a duration to the method makes it so the scroll slowly
+      // goes to the bottom instead of instantly
+      content.scrollToBottom(500);
+    }
+
+    function scrollToTop() {
+      // Passing a duration to the method makes it so the scroll slowly
+      // goes to the top instead of instantly
+      content.scrollToTop(500);
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/content/scroll-methods/index.md b/static/usage/v7/content/scroll-methods/index.md
new file mode 100644
index 00000000000..97e328a25cc
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/content/scroll-methods/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/content/scroll-methods/javascript.md b/static/usage/v7/content/scroll-methods/javascript.md
new file mode 100644
index 00000000000..b8f3bb1e13e
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/javascript.md
@@ -0,0 +1,31 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Click on the buttons to scroll the content.</h1>
+
+  <ion-button expand="block" onClick="scrollToBottom()">Scroll to Bottom</ion-button>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+
+  <ion-button expand="block" onClick="scrollToTop()">Scroll to Top</ion-button>
+</ion-content>
+
+<script>
+  const content = document.querySelector('ion-content');
+
+  function scrollToBottom() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the bottom instead of instantly
+    content.scrollToBottom(500);
+  }
+
+  function scrollToTop() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the top instead of instantly
+    content.scrollToTop(500);
+  }
+</script>
+```
diff --git a/static/usage/v7/content/scroll-methods/react.md b/static/usage/v7/content/scroll-methods/react.md
new file mode 100644
index 00000000000..9526a8884a4
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React, { createRef } from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function Example() {
+  const contentRef = createRef<HTMLIonContentElement>();
+
+  function scrollToBottom() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the bottom instead of instantly
+    contentRef.current?.scrollToBottom(500);
+  }
+
+  function scrollToTop() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the top instead of instantly
+    contentRef.current?.scrollToTop(500);
+  }
+
+  return (
+    <IonContent ref={contentRef} className="ion-padding">
+      <h1>Click on the buttons to scroll the content.</h1>
+
+      <IonButton expand="block" onClick={scrollToBottom}>Scroll to Bottom</IonButton>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+
+      <IonButton expand="block" onClick={scrollToTop}>Scroll to Top</IonButton>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/scroll-methods/vue.md b/static/usage/v7/content/scroll-methods/vue.md
new file mode 100644
index 00000000000..c3e63abb721
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/vue.md
@@ -0,0 +1,38 @@
+```html
+<template>
+  <ion-content ref="content" class="ion-padding">
+    <h1>Click on the buttons to scroll the content.</h1>
+
+    <ion-button expand="block" @click="scrollToBottom()">Scroll to Bottom</ion-button>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+    <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+    <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+    <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+    <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+
+    <ion-button expand="block" @click="scrollToTop()">Scroll to Top</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent },
+    methods: {
+      scrollToBottom() {
+        // Passing a duration to the method makes it so the scroll slowly
+        // goes to the bottom instead of instantly
+        this.$refs.content.$el.scrollToBottom(500);
+      },
+      scrollToTop() {
+        // Passing a duration to the method makes it so the scroll slowly
+        // goes to the top instead of instantly
+        this.$refs.content.$el.scrollToTop(500);
+      },
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/content/theming/colors/angular.md b/static/usage/v7/content/theming/colors/angular.md
new file mode 100644
index 00000000000..4b2489b6dae
--- /dev/null
+++ b/static/usage/v7/content/theming/colors/angular.md
@@ -0,0 +1,38 @@
+```html
+<ion-content color="primary" class="ion-padding">
+  <h1>Primary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="secondary" class="ion-padding">
+  <h1>Secondary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="tertiary" class="ion-padding">
+  <h1>Tertiary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="success" class="ion-padding">
+  <h1>Success content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="warning" class="ion-padding">
+  <h1>Warning content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="danger" class="ion-padding">
+  <h1>Danger content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="light" class="ion-padding">
+  <h1>Light content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="medium" class="ion-padding">
+  <h1>Medium content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="dark" class="ion-padding">
+  <h1>Dark content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/content/theming/colors/demo.html b/static/usage/v7/content/theming/colors/demo.html
new file mode 100644
index 00000000000..7e9409ec13e
--- /dev/null
+++ b/static/usage/v7/content/theming/colors/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-wrap: wrap;
+      align-content: center;
+    }
+
+    ion-content {
+      flex: 1 1 33%;
+      height: 250px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <div class="container">
+      <ion-content color="primary" class="ion-padding">
+        <h1>Primary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="secondary" class="ion-padding">
+        <h1>Secondary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="tertiary" class="ion-padding">
+        <h1>Tertiary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="success" class="ion-padding">
+        <h1>Success content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="warning" class="ion-padding">
+        <h1>Warning content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="danger" class="ion-padding">
+        <h1>Danger content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="light" class="ion-padding">
+        <h1>Light content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="medium" class="ion-padding">
+        <h1>Medium content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="dark" class="ion-padding">
+        <h1>Dark content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/content/theming/colors/index.md b/static/usage/v7/content/theming/colors/index.md
new file mode 100644
index 00000000000..207e0aaaa7f
--- /dev/null
+++ b/static/usage/v7/content/theming/colors/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/content/theming/colors/demo.html"
+  includeIonContent={false}
+  size="xlarge"
+/>
diff --git a/static/usage/v7/content/theming/colors/javascript.md b/static/usage/v7/content/theming/colors/javascript.md
new file mode 100644
index 00000000000..4b2489b6dae
--- /dev/null
+++ b/static/usage/v7/content/theming/colors/javascript.md
@@ -0,0 +1,38 @@
+```html
+<ion-content color="primary" class="ion-padding">
+  <h1>Primary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="secondary" class="ion-padding">
+  <h1>Secondary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="tertiary" class="ion-padding">
+  <h1>Tertiary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="success" class="ion-padding">
+  <h1>Success content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="warning" class="ion-padding">
+  <h1>Warning content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="danger" class="ion-padding">
+  <h1>Danger content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="light" class="ion-padding">
+  <h1>Light content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="medium" class="ion-padding">
+  <h1>Medium content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="dark" class="ion-padding">
+  <h1>Dark content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/content/theming/colors/react.md b/static/usage/v7/content/theming/colors/react.md
new file mode 100644
index 00000000000..5a24d44a829
--- /dev/null
+++ b/static/usage/v7/content/theming/colors/react.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonContent color="primary" className="ion-padding">
+        <h1>Primary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="secondary" className="ion-padding">
+        <h1>Secondary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="tertiary" className="ion-padding">
+        <h1>Tertiary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="success" className="ion-padding">
+        <h1>Success content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="warning" className="ion-padding">
+        <h1>Warning content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="danger" className="ion-padding">
+        <h1>Danger content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="light" className="ion-padding">
+        <h1>Light content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="medium" className="ion-padding">
+        <h1>Medium content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="dark" className="ion-padding">
+        <h1>Dark content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/theming/colors/vue.md b/static/usage/v7/content/theming/colors/vue.md
new file mode 100644
index 00000000000..1bbcc99834e
--- /dev/null
+++ b/static/usage/v7/content/theming/colors/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <ion-content color="primary" class="ion-padding">
+    <h1>Primary content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="secondary" class="ion-padding">
+    <h1>Secondary content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="tertiary" class="ion-padding">
+    <h1>Tertiary content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="success" class="ion-padding">
+    <h1>Success content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="warning" class="ion-padding">
+    <h1>Warning content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="danger" class="ion-padding">
+    <h1>Danger content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="light" class="ion-padding">
+    <h1>Light content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="medium" class="ion-padding">
+    <h1>Medium content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="dark" class="ion-padding">
+    <h1>Dark content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent },
+  });
+</script>
+```
diff --git a/static/usage/v7/content/theming/css-properties/angular/example_component_css.md b/static/usage/v7/content/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..be9b9d8063c
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-content {
+  --background: #d31373;
+  --color: #fff;
+}
+```
diff --git a/static/usage/v7/content/theming/css-properties/angular/example_component_html.md b/static/usage/v7/content/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/content/theming/css-properties/demo.html b/static/usage/v7/content/theming/css-properties/demo.html
new file mode 100644
index 00000000000..aeab8bee49b
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-content {
+      --background: #d31373;
+      --color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/content/theming/css-properties/index.md b/static/usage/v7/content/theming/css-properties/index.md
new file mode 100644
index 00000000000..54c7fe12094
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/content/theming/css-properties/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/content/theming/css-properties/javascript.md b/static/usage/v7/content/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..2ad2211af87
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/javascript.md
@@ -0,0 +1,19 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+
+<style>
+  ion-content {
+    --background: #d31373;
+    --color: #fff;
+  }
+</style>
+```
diff --git a/static/usage/v7/content/theming/css-properties/react/main_css.md b/static/usage/v7/content/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..be9b9d8063c
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-content {
+  --background: #d31373;
+  --color: #fff;
+}
+```
diff --git a/static/usage/v7/content/theming/css-properties/react/main_tsx.md b/static/usage/v7/content/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..33f0e53433b
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonContent className="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/theming/css-properties/vue.md b/static/usage/v7/content/theming/css-properties/vue.md
new file mode 100644
index 00000000000..09322711dfd
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent },
+  });
+</script>
+
+<style scoped>
+  ion-content {
+    --background: #d31373;
+    --color: #fff;
+  }
+</style>
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..29c3d353879
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,9 @@
+```css
+ion-content::part(background) {
+  background: #d31373;
+}
+
+ion-content::part(scroll) {
+  color: #fff;
+}
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/demo.html b/static/usage/v7/content/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..9b15b01757d
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-content::part(background) {
+      background: #d31373;
+    }
+
+    ion-content::part(scroll) {
+      color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/content/theming/css-shadow-parts/index.md b/static/usage/v7/content/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..ce8ccc6ed3f
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/content/theming/css-shadow-parts/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/content/theming/css-shadow-parts/javascript.md b/static/usage/v7/content/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..74124e4fdb3
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,22 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+
+<style>
+  ion-content::part(background) {
+    background: #d31373;
+  }
+
+  ion-content::part(scroll) {
+    color: #fff;
+  }
+</style>
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/content/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..29c3d353879
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,9 @@
+```css
+ion-content::part(background) {
+  background: #d31373;
+}
+
+ion-content::part(scroll) {
+  color: #fff;
+}
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/content/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..33f0e53433b
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonContent className="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/vue.md b/static/usage/v7/content/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..129f3ec615a
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/vue.md
@@ -0,0 +1,33 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent },
+  });
+</script>
+
+<style scoped>
+  ion-content::part(background) {
+    background: #d31373;
+  }
+
+  ion-content::part(scroll) {
+    color: #fff;
+  }
+</style>
+```
diff --git a/static/usage/v7/datetime-button/basic/angular.md b/static/usage/v7/datetime-button/basic/angular.md
new file mode 100644
index 00000000000..80a6ffe3724
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/angular.md
@@ -0,0 +1,9 @@
+```html
+<ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+<ion-modal [keepContentsMounted]="true">
+  <ng-template>
+    <ion-datetime id="datetime"></ion-datetime>
+  </ng-template>
+</ion-modal>
+```
diff --git a/static/usage/v7/datetime-button/basic/demo.html b/static/usage/v7/datetime-button/basic/demo.html
new file mode 100644
index 00000000000..73f3f9b1ab7
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.2.0/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.2.0/css/ionic.bundle.css" />
+  <style>
+    ion-modal {
+      --border-radius: 8px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+        <ion-modal>
+          <ion-datetime id="datetime"></ion-datetime>
+        </ion-modal>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime-button/basic/index.md b/static/usage/v7/datetime-button/basic/index.md
new file mode 100644
index 00000000000..a55a9640c0f
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime-button/basic/demo.html"
+/>
diff --git a/static/usage/v7/datetime-button/basic/javascript.md b/static/usage/v7/datetime-button/basic/javascript.md
new file mode 100644
index 00000000000..3b39203bb90
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/javascript.md
@@ -0,0 +1,7 @@
+```html
+<ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+<ion-modal>
+  <ion-datetime id="datetime"></ion-datetime>
+</ion-modal>
+```
diff --git a/static/usage/v7/datetime-button/basic/react.md b/static/usage/v7/datetime-button/basic/react.md
new file mode 100644
index 00000000000..90eaaba82af
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonDatetimeButton datetime="datetime"></IonDatetimeButton>
+      
+      <IonModal keepContentsMounted={true}>
+        <IonDatetime id="datetime"></IonDatetime>
+      </IonModal>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime-button/basic/vue.md b/static/usage/v7/datetime-button/basic/vue.md
new file mode 100644
index 00000000000..1272d768b88
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-datetime-button datetime="datetime"></ion-datetime-button>
+  
+  <ion-modal :keep-contents-mounted="true">
+    <ion-datetime id="datetime"></ion-datetime>
+  </ion-modal>
+</template>
+
+<script lang="ts">
+  import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime, IonDatetimeButton, IonModal },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/basic/angular.md b/static/usage/v7/datetime/basic/angular.md
new file mode 100644
index 00000000000..676d4c61c18
--- /dev/null
+++ b/static/usage/v7/datetime/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/basic/demo.html b/static/usage/v7/datetime/basic/demo.html
new file mode 100644
index 00000000000..a3945e21ce9
--- /dev/null
+++ b/static/usage/v7/datetime/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/basic/index.md b/static/usage/v7/datetime/basic/index.md
new file mode 100644
index 00000000000..99e893af493
--- /dev/null
+++ b/static/usage/v7/datetime/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/basic/demo.html"
+/>
diff --git a/static/usage/v7/datetime/basic/javascript.md b/static/usage/v7/datetime/basic/javascript.md
new file mode 100644
index 00000000000..676d4c61c18
--- /dev/null
+++ b/static/usage/v7/datetime/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/basic/react.md b/static/usage/v7/datetime/basic/react.md
new file mode 100644
index 00000000000..fe17ddda39b
--- /dev/null
+++ b/static/usage/v7/datetime/basic/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return <IonDatetime></IonDatetime>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/basic/vue.md b/static/usage/v7/datetime/basic/vue.md
new file mode 100644
index 00000000000..cc68b9ab44a
--- /dev/null
+++ b/static/usage/v7/datetime/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
new file mode 100644
index 00000000000..f4dd937826d
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-datetime
+  [showDefaultButtons]="true"
+  doneText="All set"
+  cancelText="Never mind"
+>
+</ion-datetime>
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html b/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html
new file mode 100644
index 00000000000..44074047aca
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+      min-height: 400px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime show-default-buttons="true" done-text="All set" cancel-text="Never mind"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/index.md b/static/usage/v7/datetime/buttons/customizing-button-texts/index.md
new file mode 100644
index 00000000000..7b03b2ff8f7
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="500px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/buttons/customizing-button-texts/demo.html"
+/>
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/javascript.md b/static/usage/v7/datetime/buttons/customizing-button-texts/javascript.md
new file mode 100644
index 00000000000..de572d57a2f
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/javascript.md
@@ -0,0 +1,7 @@
+```html
+<ion-datetime
+  show-default-buttons="true"
+  done-text="All set"
+  cancel-text="Never mind"
+></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/react.md b/static/usage/v7/datetime/buttons/customizing-button-texts/react.md
new file mode 100644
index 00000000000..25a59a34170
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime
+      showDefaultButtons={true}
+      doneText="All set"
+      cancelText="Never mind"
+    >
+    </IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md b/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
new file mode 100644
index 00000000000..2afdb6fe9a8
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-datetime
+    :show-default-buttons="true"
+    done-text="All set"
+    cancel-text="Never mind"
+  ></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime }
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/angular.md b/static/usage/v7/datetime/buttons/customizing-buttons/angular.md
new file mode 100644
index 00000000000..c5f1c5d8b9f
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/angular.md
@@ -0,0 +1,9 @@
+```html
+<ion-datetime #datetime>
+  <ion-buttons slot="buttons">
+    <ion-button color="danger" (click)="datetime.reset()">Reset</ion-button>
+    <ion-button color="primary" (click)="datetime.cancel()">Never mind</ion-button>
+    <ion-button color="primary" (click)="datetime.confirm()">All Set</ion-button>
+  </ion-buttons>
+</ion-datetime>
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/demo.html b/static/usage/v7/datetime/buttons/customizing-buttons/demo.html
new file mode 100644
index 00000000000..d0ce780da3d
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+      min-height: 400px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime>
+          <ion-buttons slot="buttons">
+            <ion-button color="danger" onclick="datetime.reset()">Reset</ion-button>
+            <ion-button color="primary" onclick="datetime.cancel()">Never mind</ion-button>
+            <ion-button color="primary" onclick="datetime.confirm()">All Set</ion-button>
+          </ion-buttons>
+        </ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/index.md b/static/usage/v7/datetime/buttons/customizing-buttons/index.md
new file mode 100644
index 00000000000..4224357f528
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="500px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/buttons/customizing-buttons/demo.html"
+/>
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/javascript.md b/static/usage/v7/datetime/buttons/customizing-buttons/javascript.md
new file mode 100644
index 00000000000..06ad3d83291
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/javascript.md
@@ -0,0 +1,13 @@
+```html
+<ion-datetime>
+  <ion-buttons slot="buttons">
+    <ion-button color="danger" onclick="datetime.reset()">Reset</ion-button>
+    <ion-button color="primary" onclick="datetime.cancel()">Never mind</ion-button>
+    <ion-button color="primary" onclick="datetime.confirm()">All Set</ion-button>
+  </ion-buttons>
+</ion-datetime>
+
+<script>
+  var datetime = document.querySelector('ion-datetime');
+</script>
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/react.md b/static/usage/v7/datetime/buttons/customizing-buttons/react.md
new file mode 100644
index 00000000000..6c47f3d800c
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonButtons, IonButton, IonDatetime } from '@ionic/react';
+function Example() {
+  const datetime = useRef<null | HTMLIonDatetimeElement>(null);
+  const reset = () => {
+    datetime.current?.reset();
+  }
+  const cancel = () => {
+    datetime.current?.cancel();
+  }
+  const confirm = () => {
+    datetime.current?.confirm();
+  }
+  return (
+    <IonDatetime ref={datetime}>
+      <IonButtons slot="buttons">
+        <IonButton color="danger" onClick={reset}>Reset</IonButton>
+        <IonButton color="primary" onClick={cancel}>Never mind</IonButton>
+        <IonButton color="primary" onClick={confirm}>All Set</IonButton>
+      </IonButtons>
+    </IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/vue.md b/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
new file mode 100644
index 00000000000..87d19a3754b
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-datetime ref="datetime">
+    <ion-buttons slot="buttons">
+      <ion-button color="danger" @click="reset()">Reset</ion-button>
+      <ion-button color="primary" @click="cancel()">Never mind</ion-button>
+      <ion-button color="primary" @click="confirm()">All Set</ion-button>
+    </ion-buttons>
+  </ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonButtons, IonButton, IonDatetime } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonButtons, IonButton, IonDatetime },
+    setup() {
+      const datetime = ref();
+      const reset = () => datetime.value.$el.reset();
+      const cancel = () => datetime.value.$el.cancel();
+      const confirm = () => datetime.value.$el.confirm();
+      return { datetime, reset, cancel, confirm }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md
new file mode 100644
index 00000000000..bf3bb712166
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [showDefaultButtons]="true"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html
new file mode 100644
index 00000000000..54b26b53f90
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+      min-height: 400px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime show-default-buttons="true"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md
new file mode 100644
index 00000000000..2510a15e899
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="500px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html"
+/>
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/javascript.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/javascript.md
new file mode 100644
index 00000000000..0c8a20f6672
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime show-default-buttons="true"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/react.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/react.md
new file mode 100644
index 00000000000..4faa415f624
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime showDefaultButtons={true}></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md
new file mode 100644
index 00000000000..196d89fbf4d
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime :show-default-buttons="true"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_html.md b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_html.md
new file mode 100644
index 00000000000..3ceed6383ae
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [isDateEnabled]="isWeekday"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
new file mode 100644
index 00000000000..3021390e188
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  isWeekday = (dateString: string) => {
+    const date = new Date(dateString);
+    const utcDay = date.getUTCDay();
+
+    /**
+     * Date will be enabled if it is not
+     * Sunday or Saturday
+     */
+    return utcDay !== 0 && utcDay !== 6;
+  };
+}
+```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/demo.html b/static/usage/v7/datetime/date-constraints/advanced/demo.html
new file mode 100644
index 00000000000..b7650f3740d
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.isDateEnabled = (dateString) => {
+      const date = new Date(dateString);
+      const utcDay = date.getUTCDay();
+
+      /**
+       * Date will be enabled if it is not
+       * Sunday or Saturday
+       */
+      return utcDay !== 0 && utcDay !== 6;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/date-constraints/advanced/index.md b/static/usage/v7/datetime/date-constraints/advanced/index.md
new file mode 100644
index 00000000000..4e3dba9ca14
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/datetime/date-constraints/advanced/demo.html"
+/>
diff --git a/static/usage/v7/datetime/date-constraints/advanced/javascript.md b/static/usage/v7/datetime/date-constraints/advanced/javascript.md
new file mode 100644
index 00000000000..b14ba47ffbe
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-datetime></ion-datetime>
+
+<script>
+  const datetime = document.querySelector('ion-datetime');
+  datetime.isDateEnabled = (dateString) => {
+    const date = new Date(dateString);
+    const utcDay = date.getUTCDay();
+
+    /**
+     * Date will be enabled if it is not
+     * Sunday or Saturday
+     */
+    return utcDay !== 0 && utcDay !== 6;
+  }
+</script>
+```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/react.md b/static/usage/v7/datetime/date-constraints/advanced/react.md
new file mode 100644
index 00000000000..925f97f34cc
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  const isWeekday = (dateString: string) => {
+    const date = new Date(dateString);
+    const utcDay = date.getUTCDay();
+    
+    /**
+     * Date will be enabled if it is not
+     * Sunday or Saturday
+     */
+    return utcDay !== 0 && utcDay !== 6;
+  }
+
+  return (
+    <IonDatetime isDateEnabled={isWeekday}></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/vue.md b/static/usage/v7/datetime/date-constraints/advanced/vue.md
new file mode 100644
index 00000000000..3dd1a8dc526
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-datetime :is-date-enabled="isWeekday"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+    setup() {
+      const isWeekday = (dateString: string) => {
+        const date = new Date(dateString);
+        const utcDay = date.getUTCDay();
+        
+        /**
+         * Date will be enabled if it is not
+         * Sunday or Saturday
+         */
+        return utcDay !== 0 && utcDay !== 6;
+      }
+      
+      return { isWeekday }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/angular.md b/static/usage/v7/datetime/date-constraints/max-min/angular.md
new file mode 100644
index 00000000000..58583fe712d
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/angular.md
@@ -0,0 +1,7 @@
+```html
+<ion-datetime
+  value="2022-04-21T00:00:00"
+  min="2022-03-01T00:00:00"
+  max="2022-05-31T23:59:59"
+></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/demo.html b/static/usage/v7/datetime/date-constraints/max-min/demo.html
new file mode 100644
index 00000000000..b1f9e57810d
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/date-constraints/max-min/index.md b/static/usage/v7/datetime/date-constraints/max-min/index.md
new file mode 100644
index 00000000000..808fa7bf756
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/date-constraints/max-min/demo.html"
+/>
diff --git a/static/usage/v7/datetime/date-constraints/max-min/javascript.md b/static/usage/v7/datetime/date-constraints/max-min/javascript.md
new file mode 100644
index 00000000000..58583fe712d
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/javascript.md
@@ -0,0 +1,7 @@
+```html
+<ion-datetime
+  value="2022-04-21T00:00:00"
+  min="2022-03-01T00:00:00"
+  max="2022-05-31T23:59:59"
+></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/react.md b/static/usage/v7/datetime/date-constraints/max-min/react.md
new file mode 100644
index 00000000000..356cf7b117a
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime
+      value="2022-04-21T00:00:00"
+      min="2022-03-01T00:00:00"
+      max="2022-05-31T23:59:59"
+    ></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/vue.md b/static/usage/v7/datetime/date-constraints/max-min/vue.md
new file mode 100644
index 00000000000..a0d236a8604
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-datetime
+    value="2022-04-21T00:00:00"
+    min="2022-03-01T00:00:00"
+    max="2022-05-31T23:59:59"
+  ></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/date-constraints/values/angular.md b/static/usage/v7/datetime/date-constraints/values/angular.md
new file mode 100644
index 00000000000..de86842994a
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-datetime
+  minuteValues="0,15,30,45"
+  dayValues="5,10,15,20,25,30"
+></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/date-constraints/values/demo.html b/static/usage/v7/datetime/date-constraints/values/demo.html
new file mode 100644
index 00000000000..ba560da4969
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime minute-values="0,15,30,45" day-values="5,10,15,20,25,30"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/date-constraints/values/index.md b/static/usage/v7/datetime/date-constraints/values/index.md
new file mode 100644
index 00000000000..dc33ed9ac87
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/date-constraints/values/demo.html"
+/>
diff --git a/static/usage/v7/datetime/date-constraints/values/javascript.md b/static/usage/v7/datetime/date-constraints/values/javascript.md
new file mode 100644
index 00000000000..5081a44f6f5
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-datetime
+  minute-values="0,15,30,45"
+  day-values="5,10,15,20,25,30"
+></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/date-constraints/values/react.md b/static/usage/v7/datetime/date-constraints/values/react.md
new file mode 100644
index 00000000000..38328d17045
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime
+      minuteValues="0,15,30,45"
+      dayValues="5,10,15,20,25,30"
+    ></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/date-constraints/values/vue.md b/static/usage/v7/datetime/date-constraints/values/vue.md
new file mode 100644
index 00000000000..743cbb9e541
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/vue.md
@@ -0,0 +1,17 @@
+```html
+<template>
+  <ion-datetime
+    minute-values="0,15,30,45"
+    day-values="5,10,15,20,25,30"
+  ></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/localization/custom-locale/angular.md b/static/usage/v7/datetime/localization/custom-locale/angular.md
new file mode 100644
index 00000000000..c3697585c67
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="es-ES"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/custom-locale/demo.html b/static/usage/v7/datetime/localization/custom-locale/demo.html
new file mode 100644
index 00000000000..70e266f3402
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime locale="es-ES"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/localization/custom-locale/index.md b/static/usage/v7/datetime/localization/custom-locale/index.md
new file mode 100644
index 00000000000..566363cc089
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/localization/custom-locale/demo.html"
+/>
diff --git a/static/usage/v7/datetime/localization/custom-locale/javascript.md b/static/usage/v7/datetime/localization/custom-locale/javascript.md
new file mode 100644
index 00000000000..c3697585c67
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="es-ES"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/custom-locale/react.md b/static/usage/v7/datetime/localization/custom-locale/react.md
new file mode 100644
index 00000000000..729e42be9b8
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime locale="es-ES"></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/localization/custom-locale/vue.md b/static/usage/v7/datetime/localization/custom-locale/vue.md
new file mode 100644
index 00000000000..8a3712a255e
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime locale="es-ES"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/angular.md b/static/usage/v7/datetime/localization/first-day-of-week/angular.md
new file mode 100644
index 00000000000..2281060074e
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [firstDayOfWeek]="1"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/demo.html b/static/usage/v7/datetime/localization/first-day-of-week/demo.html
new file mode 100644
index 00000000000..ce555ed4b74
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime first-day-of-week="1"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/index.md b/static/usage/v7/datetime/localization/first-day-of-week/index.md
new file mode 100644
index 00000000000..389010b4302
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/localization/first-day-of-week/demo.html"
+/>
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/javascript.md b/static/usage/v7/datetime/localization/first-day-of-week/javascript.md
new file mode 100644
index 00000000000..420402e2d9c
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime first-day-of-week="1"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/react.md b/static/usage/v7/datetime/localization/first-day-of-week/react.md
new file mode 100644
index 00000000000..d15a99abb10
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime firstDayOfWeek={1}></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/vue.md b/static/usage/v7/datetime/localization/first-day-of-week/vue.md
new file mode 100644
index 00000000000..71c24fd72be
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime :first-day-of-week="1"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/angular.md b/static/usage/v7/datetime/localization/hour-cycle/angular.md
new file mode 100644
index 00000000000..aeb27d6152b
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="en-GB" hourCycle="h12"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/demo.html b/static/usage/v7/datetime/localization/hour-cycle/demo.html
new file mode 100644
index 00000000000..db65b072c82
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime locale="en-GB" hour-cycle="h12"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/localization/hour-cycle/index.md b/static/usage/v7/datetime/localization/hour-cycle/index.md
new file mode 100644
index 00000000000..5ffaf29bb41
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/localization/hour-cycle/demo.html"
+/>
diff --git a/static/usage/v7/datetime/localization/hour-cycle/javascript.md b/static/usage/v7/datetime/localization/hour-cycle/javascript.md
new file mode 100644
index 00000000000..5f3638f13aa
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="en-GB" hour-cycle="h12"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/react.md b/static/usage/v7/datetime/localization/hour-cycle/react.md
new file mode 100644
index 00000000000..fc2887e67f8
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime locale="en-GB" hourCycle="h12"></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/vue.md b/static/usage/v7/datetime/localization/hour-cycle/vue.md
new file mode 100644
index 00000000000..b8767c6c2db
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime locale="en-GB" hour-cycle="h12"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/angular.md b/static/usage/v7/datetime/localization/locale-extension-tags/angular.md
new file mode 100644
index 00000000000..828f85eeb0a
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/demo.html b/static/usage/v7/datetime/localization/locale-extension-tags/demo.html
new file mode 100644
index 00000000000..6d7328eddf6
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/index.md b/static/usage/v7/datetime/localization/locale-extension-tags/index.md
new file mode 100644
index 00000000000..33c92262f9e
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/localization/locale-extension-tags/demo.html"
+/>
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/javascript.md b/static/usage/v7/datetime/localization/locale-extension-tags/javascript.md
new file mode 100644
index 00000000000..828f85eeb0a
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/react.md b/static/usage/v7/datetime/localization/locale-extension-tags/react.md
new file mode 100644
index 00000000000..227a0261434
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime locale="en-GB-u-hc-h12"></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/vue.md b/static/usage/v7/datetime/localization/locale-extension-tags/vue.md
new file mode 100644
index 00000000000..a0181dc8e2d
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/localization/time-label/angular.md b/static/usage/v7/datetime/localization/time-label/angular.md
new file mode 100644
index 00000000000..38f0e697d3a
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-datetime locale="es-ES">
+  <span slot="time-label">Tiempo</span>
+</ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/time-label/demo.html b/static/usage/v7/datetime/localization/time-label/demo.html
new file mode 100644
index 00000000000..8ad93461f78
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime locale="es-ES">
+          <span slot="time-label">Tiempo</span>
+        </ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/localization/time-label/index.md b/static/usage/v7/datetime/localization/time-label/index.md
new file mode 100644
index 00000000000..e35108abac4
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/localization/time-label/demo.html"
+/>
diff --git a/static/usage/v7/datetime/localization/time-label/javascript.md b/static/usage/v7/datetime/localization/time-label/javascript.md
new file mode 100644
index 00000000000..38f0e697d3a
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/javascript.md
@@ -0,0 +1,5 @@
+```html
+<ion-datetime locale="es-ES">
+  <span slot="time-label">Tiempo</span>
+</ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/time-label/react.md b/static/usage/v7/datetime/localization/time-label/react.md
new file mode 100644
index 00000000000..ba81f8743a8
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/react.md
@@ -0,0 +1,12 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime locale="es-ES">
+      <span slot="time-label">Tiempo</span>
+    </IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/localization/time-label/vue.md b/static/usage/v7/datetime/localization/time-label/vue.md
new file mode 100644
index 00000000000..37af973ee32
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/vue.md
@@ -0,0 +1,16 @@
+```html
+<template>
+  <ion-datetime locale="es-ES">
+    <span slot="time-label">Tiempo</span>
+  </ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/multiple/angular.md b/static/usage/v7/datetime/multiple/angular.md
new file mode 100644
index 00000000000..673f5b03e59
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/angular.md
@@ -0,0 +1,7 @@
+```html
+<ion-datetime
+  presentation="date"
+  [multiple]="true"
+  [value]="['2022-06-03', '2022-06-13', '2022-06-29']"
+></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/multiple/demo.html b/static/usage/v7/datetime/multiple/demo.html
new file mode 100644
index 00000000000..43edb188016
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/demo.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date" multiple="true"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/multiple/index.md b/static/usage/v7/datetime/multiple/index.md
new file mode 100644
index 00000000000..84405fb740f
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/multiple/demo.html"
+/>
diff --git a/static/usage/v7/datetime/multiple/javascript.md b/static/usage/v7/datetime/multiple/javascript.md
new file mode 100644
index 00000000000..10455808ab2
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-datetime presentation="date" multiple="true"></ion-datetime>
+
+<script>
+  const datetime = document.querySelector('ion-datetime');
+  datetime.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
+</script>
+```
diff --git a/static/usage/v7/datetime/multiple/react.md b/static/usage/v7/datetime/multiple/react.md
new file mode 100644
index 00000000000..edcf933f530
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React, { useRef, useEffect } from 'react';
+import { IonDatetime } from '@ionic/react';
+
+function Example() {
+  const datetime = useRef<null | HTMLIonDatetimeElement>(null);
+
+  useEffect(() => {
+    if(!datetime.current) return;
+    datetime.current.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
+  }, []);
+
+  return <IonDatetime
+    ref={datetime}
+    presentation="date"
+    multiple={true}
+  ></IonDatetime>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/multiple/vue.md b/static/usage/v7/datetime/multiple/vue.md
new file mode 100644
index 00000000000..163831a3d81
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-datetime
+    presentation="date"
+    :multiple="true"
+    :value="['2022-06-03', '2022-06-13', '2022-06-29']"
+  ></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/presentation/date/angular.md b/static/usage/v7/datetime/presentation/date/angular.md
new file mode 100644
index 00000000000..8694e723b1a
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/date/demo.html b/static/usage/v7/datetime/presentation/date/demo.html
new file mode 100644
index 00000000000..ca76bcec306
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/presentation/date/index.md b/static/usage/v7/datetime/presentation/date/index.md
new file mode 100644
index 00000000000..97780827260
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/presentation/date/demo.html"
+/>
diff --git a/static/usage/v7/datetime/presentation/date/javascript.md b/static/usage/v7/datetime/presentation/date/javascript.md
new file mode 100644
index 00000000000..8694e723b1a
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/date/react.md b/static/usage/v7/datetime/presentation/date/react.md
new file mode 100644
index 00000000000..333aadfb58d
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime presentation="date"></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/presentation/date/vue.md b/static/usage/v7/datetime/presentation/date/vue.md
new file mode 100644
index 00000000000..b686297a867
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime presentation="date"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/angular.md b/static/usage/v7/datetime/presentation/month-and-year/angular.md
new file mode 100644
index 00000000000..fee755e147f
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="month-year"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/demo.html b/static/usage/v7/datetime/presentation/month-and-year/demo.html
new file mode 100644
index 00000000000..58fa960c863
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="month-year"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/presentation/month-and-year/index.md b/static/usage/v7/datetime/presentation/month-and-year/index.md
new file mode 100644
index 00000000000..524545fb033
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="240px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/presentation/month-and-year/demo.html"
+/>
diff --git a/static/usage/v7/datetime/presentation/month-and-year/javascript.md b/static/usage/v7/datetime/presentation/month-and-year/javascript.md
new file mode 100644
index 00000000000..fee755e147f
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="month-year"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/react.md b/static/usage/v7/datetime/presentation/month-and-year/react.md
new file mode 100644
index 00000000000..346ad116b68
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime presentation="month-year"></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/vue.md b/static/usage/v7/datetime/presentation/month-and-year/vue.md
new file mode 100644
index 00000000000..01744a290fe
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime presentation="month-year"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/presentation/time/angular.md b/static/usage/v7/datetime/presentation/time/angular.md
new file mode 100644
index 00000000000..d54dd466706
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="time"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/time/demo.html b/static/usage/v7/datetime/presentation/time/demo.html
new file mode 100644
index 00000000000..7ea21d3f4d5
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="time"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/presentation/time/index.md b/static/usage/v7/datetime/presentation/time/index.md
new file mode 100644
index 00000000000..9423cfba0f9
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/presentation/time/demo.html"
+/>
diff --git a/static/usage/v7/datetime/presentation/time/javascript.md b/static/usage/v7/datetime/presentation/time/javascript.md
new file mode 100644
index 00000000000..d54dd466706
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="time"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/time/react.md b/static/usage/v7/datetime/presentation/time/react.md
new file mode 100644
index 00000000000..934c3221112
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime presentation="time"></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/presentation/time/vue.md b/static/usage/v7/datetime/presentation/time/vue.md
new file mode 100644
index 00000000000..7e01bc7d730
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime presentation="time"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/presentation/wheel/angular.md b/static/usage/v7/datetime/presentation/wheel/angular.md
new file mode 100644
index 00000000000..f98877053c3
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date-time" [preferWheel]="true"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/wheel/demo.html b/static/usage/v7/datetime/presentation/wheel/demo.html
new file mode 100644
index 00000000000..5b2028d4a6b
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date-time" prefer-wheel="true"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/presentation/wheel/index.md b/static/usage/v7/datetime/presentation/wheel/index.md
new file mode 100644
index 00000000000..47e4923bba6
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/presentation/wheel/demo.html"
+/>
diff --git a/static/usage/v7/datetime/presentation/wheel/javascript.md b/static/usage/v7/datetime/presentation/wheel/javascript.md
new file mode 100644
index 00000000000..83f43a87d61
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date-time" prefer-wheel="true"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/wheel/react.md b/static/usage/v7/datetime/presentation/wheel/react.md
new file mode 100644
index 00000000000..49f231b6966
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime presentation="date-time" preferWheel={true}></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/presentation/wheel/vue.md b/static/usage/v7/datetime/presentation/wheel/vue.md
new file mode 100644
index 00000000000..c1055e8cfb7
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime presentation="date-time" :prefer-wheel="true"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/theming/angular/example_component_html.md b/static/usage/v7/datetime/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..0a38b1bc5b6
--- /dev/null
+++ b/static/usage/v7/datetime/theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime color="rose"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/theming/angular/global_css.md b/static/usage/v7/datetime/theming/angular/global_css.md
new file mode 100644
index 00000000000..4ec3d3ecdf9
--- /dev/null
+++ b/static/usage/v7/datetime/theming/angular/global_css.md
@@ -0,0 +1,66 @@
+```css
+/* Core CSS required for Ionic components to work properly */
+@import '~@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '~@ionic/angular/css/normalize.css';
+@import '~@ionic/angular/css/structure.css';
+@import '~@ionic/angular/css/typography.css';
+@import '~@ionic/angular/css/display.css';
+
+/* Optional CSS utils that can be commented out */
+@import '~@ionic/angular/css/padding.css';
+@import '~@ionic/angular/css/float-elements.css';
+@import '~@ionic/angular/css/text-alignment.css';
+@import '~@ionic/angular/css/text-transformation.css';
+@import '~@ionic/angular/css/flex-utils.css';
+
+:root {
+  --ion-color-rose: #831843;
+  --ion-color-rose-rgb: 131, 24, 67;
+  --ion-color-rose-contrast: #ffffff;
+  --ion-color-rose-contrast-rgb: 255, 255, 255;
+  --ion-color-rose-shade: #73153b;
+  --ion-color-rose-tint: #8f2f56;
+
+  --ion-text-color: #881337;
+  --ion-text-color-rgb: 136, 19, 55;
+
+  --ion-color-step-50: #f9e6e9;
+  --ion-color-step-100: #f3dbdf;
+  --ion-color-step-150: #edd0d6;
+  --ion-color-step-200: #e7c5cd;
+  --ion-color-step-250: #e1bac3;
+  --ion-color-step-300: #dbaeba;
+  --ion-color-step-350: #d5a3b1;
+  --ion-color-step-400: #cf98a7;
+  --ion-color-step-450: #c98d9e;
+  --ion-color-step-500: #c48295;
+  --ion-color-step-550: #be778b;
+  --ion-color-step-600: #b86c82;
+  --ion-color-step-650: #b26178;
+  --ion-color-step-700: #ac566f;
+  --ion-color-step-750: #a64b66;
+  --ion-color-step-800: #a03f5c;
+  --ion-color-step-850: #9a3453;
+  --ion-color-step-900: #94294a;
+  --ion-color-step-950: #8e1e40;
+}
+
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+ion-datetime {
+  --background: #fff1f2;
+  --background-rgb: 255, 241, 242;
+
+  border-radius: 16px;
+  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+}
+```
diff --git a/static/usage/v7/datetime/theming/demo.html b/static/usage/v7/datetime/theming/demo.html
new file mode 100644
index 00000000000..e50a5576c63
--- /dev/null
+++ b/static/usage/v7/datetime/theming/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    :root,
+    .ios body.dark,
+    .md body.dark {
+      --ion-color-rose: #831843;
+      --ion-color-rose-rgb: 131, 24, 67;
+      --ion-color-rose-contrast: #ffffff;
+      --ion-color-rose-contrast-rgb: 255, 255, 255;
+      --ion-color-rose-shade: #73153b;
+      --ion-color-rose-tint: #8f2f56;
+
+      --ion-text-color: #881337;
+      --ion-text-color-rgb: 136, 19, 55;
+
+      --ion-color-step-50: #f9e6e9;
+      --ion-color-step-100: #f3dbdf;
+      --ion-color-step-150: #edd0d6;
+      --ion-color-step-200: #e7c5cd;
+      --ion-color-step-250: #e1bac3;
+      --ion-color-step-300: #dbaeba;
+      --ion-color-step-350: #d5a3b1;
+      --ion-color-step-400: #cf98a7;
+      --ion-color-step-450: #c98d9e;
+      --ion-color-step-500: #c48295;
+      --ion-color-step-550: #be778b;
+      --ion-color-step-600: #b86c82;
+      --ion-color-step-650: #b26178;
+      --ion-color-step-700: #ac566f;
+      --ion-color-step-750: #a64b66;
+      --ion-color-step-800: #a03f5c;
+      --ion-color-step-850: #9a3453;
+      --ion-color-step-900: #94294a;
+      --ion-color-step-950: #8e1e40;
+    }
+
+    .ion-color-rose {
+      --ion-color-base: var(--ion-color-rose);
+      --ion-color-base-rgb: var(--ion-color-rose-rgb);
+      --ion-color-contrast: var(--ion-color-rose-contrast);
+      --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+      --ion-color-shade: var(--ion-color-rose-shade);
+      --ion-color-tint: var(--ion-color-rose-tint);
+    }
+
+    ion-datetime {
+      --background: #fff1f2;
+      --background-rgb: 255, 241, 242;
+
+      width: 350px;
+
+      border-radius: 16px;
+      box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime color="rose"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/theming/index.md b/static/usage/v7/datetime/theming/index.md
new file mode 100644
index 00000000000..f45d3c0e7c6
--- /dev/null
+++ b/static/usage/v7/datetime/theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  version="7"
+  size="450px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v7/datetime/theming/demo.html"
+/>
diff --git a/static/usage/v7/datetime/theming/javascript.md b/static/usage/v7/datetime/theming/javascript.md
new file mode 100644
index 00000000000..b01585db44e
--- /dev/null
+++ b/static/usage/v7/datetime/theming/javascript.md
@@ -0,0 +1,54 @@
+```html
+<ion-datetime color="rose"></ion-datetime>
+
+<style>
+  :root {
+    --ion-color-rose: #831843;
+    --ion-color-rose-rgb: 131,24,67;
+    --ion-color-rose-contrast: #ffffff;
+    --ion-color-rose-contrast-rgb: 255,255,255;
+    --ion-color-rose-shade: #73153b;
+    --ion-color-rose-tint: #8f2f56;
+  
+    --ion-text-color: #881337;
+    --ion-text-color-rgb: 136,19,55;
+  
+    --ion-color-step-50: #f9e6e9;
+    --ion-color-step-100: #f3dbdf;
+    --ion-color-step-150: #edd0d6;
+    --ion-color-step-200: #e7c5cd;
+    --ion-color-step-250: #e1bac3;
+    --ion-color-step-300: #dbaeba;
+    --ion-color-step-350: #d5a3b1;
+    --ion-color-step-400: #cf98a7;
+    --ion-color-step-450: #c98d9e;
+    --ion-color-step-500: #c48295;
+    --ion-color-step-550: #be778b;
+    --ion-color-step-600: #b86c82;
+    --ion-color-step-650: #b26178;
+    --ion-color-step-700: #ac566f;
+    --ion-color-step-750: #a64b66;
+    --ion-color-step-800: #a03f5c;
+    --ion-color-step-850: #9a3453;
+    --ion-color-step-900: #94294a;
+    --ion-color-step-950: #8e1e40;
+  }
+  
+  .ion-color-rose {
+    --ion-color-base: var(--ion-color-rose);
+    --ion-color-base-rgb: var(--ion-color-rose-rgb);
+    --ion-color-contrast: var(--ion-color-rose-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+    --ion-color-shade: var(--ion-color-rose-shade);
+    --ion-color-tint: var(--ion-color-rose-tint);
+  }
+  
+  ion-datetime {
+    --background: #fff1f2;
+    --background-rgb: 255,241,242;
+    
+    border-radius: 16px;
+    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+  }
+</style>
+```
diff --git a/static/usage/v7/datetime/theming/react/main_css.md b/static/usage/v7/datetime/theming/react/main_css.md
new file mode 100644
index 00000000000..374f851b5ce
--- /dev/null
+++ b/static/usage/v7/datetime/theming/react/main_css.md
@@ -0,0 +1,50 @@
+```css
+:root {
+  --ion-color-rose: #831843;
+  --ion-color-rose-rgb: 131,24,67;
+  --ion-color-rose-contrast: #ffffff;
+  --ion-color-rose-contrast-rgb: 255,255,255;
+  --ion-color-rose-shade: #73153b;
+  --ion-color-rose-tint: #8f2f56;
+
+  --ion-text-color: #881337;
+  --ion-text-color-rgb: 136,19,55;
+
+  --ion-color-step-50: #f9e6e9;
+  --ion-color-step-100: #f3dbdf;
+  --ion-color-step-150: #edd0d6;
+  --ion-color-step-200: #e7c5cd;
+  --ion-color-step-250: #e1bac3;
+  --ion-color-step-300: #dbaeba;
+  --ion-color-step-350: #d5a3b1;
+  --ion-color-step-400: #cf98a7;
+  --ion-color-step-450: #c98d9e;
+  --ion-color-step-500: #c48295;
+  --ion-color-step-550: #be778b;
+  --ion-color-step-600: #b86c82;
+  --ion-color-step-650: #b26178;
+  --ion-color-step-700: #ac566f;
+  --ion-color-step-750: #a64b66;
+  --ion-color-step-800: #a03f5c;
+  --ion-color-step-850: #9a3453;
+  --ion-color-step-900: #94294a;
+  --ion-color-step-950: #8e1e40;
+}
+
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+ion-datetime {
+  --background: #fff1f2;
+  --background-rgb: 255,241,242;
+  
+  border-radius: 16px;
+  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/datetime/theming/react/main_tsx.md b/static/usage/v7/datetime/theming/react/main_tsx.md
new file mode 100644
index 00000000000..37e658cdcd1
--- /dev/null
+++ b/static/usage/v7/datetime/theming/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return <IonDatetime color="rose"></IonDatetime>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/theming/vue.md b/static/usage/v7/datetime/theming/vue.md
new file mode 100644
index 00000000000..0ba14641daa
--- /dev/null
+++ b/static/usage/v7/datetime/theming/vue.md
@@ -0,0 +1,65 @@
+```html
+<template>
+  <ion-datetime color="rose"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+
+<style>
+  :root {
+    --ion-color-rose: #831843;
+    --ion-color-rose-rgb: 131,24,67;
+    --ion-color-rose-contrast: #ffffff;
+    --ion-color-rose-contrast-rgb: 255,255,255;
+    --ion-color-rose-shade: #73153b;
+    --ion-color-rose-tint: #8f2f56;
+  
+    --ion-text-color: #881337;
+    --ion-text-color-rgb: 136,19,55;
+  
+    --ion-color-step-50: #f9e6e9;
+    --ion-color-step-100: #f3dbdf;
+    --ion-color-step-150: #edd0d6;
+    --ion-color-step-200: #e7c5cd;
+    --ion-color-step-250: #e1bac3;
+    --ion-color-step-300: #dbaeba;
+    --ion-color-step-350: #d5a3b1;
+    --ion-color-step-400: #cf98a7;
+    --ion-color-step-450: #c98d9e;
+    --ion-color-step-500: #c48295;
+    --ion-color-step-550: #be778b;
+    --ion-color-step-600: #b86c82;
+    --ion-color-step-650: #b26178;
+    --ion-color-step-700: #ac566f;
+    --ion-color-step-750: #a64b66;
+    --ion-color-step-800: #a03f5c;
+    --ion-color-step-850: #9a3453;
+    --ion-color-step-900: #94294a;
+    --ion-color-step-950: #8e1e40;
+  }
+  
+  .ion-color-rose {
+    --ion-color-base: var(--ion-color-rose);
+    --ion-color-base-rgb: var(--ion-color-rose-rgb);
+    --ion-color-contrast: var(--ion-color-rose-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+    --ion-color-shade: var(--ion-color-rose-shade);
+    --ion-color-tint: var(--ion-color-rose-tint);
+  }
+  
+  ion-datetime {
+    --background: #fff1f2;
+    --background-rgb: 255,241,242;
+    
+    border-radius: 16px;
+    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+  }
+</style>
+```
diff --git a/static/usage/v7/datetime/title/customizing-title/angular.md b/static/usage/v7/datetime/title/customizing-title/angular.md
new file mode 100644
index 00000000000..5f0ded69fbc
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-datetime>
+  <span slot="title">Select a Reservation Date</span>
+</ion-datetime>
+```
diff --git a/static/usage/v7/datetime/title/customizing-title/demo.html b/static/usage/v7/datetime/title/customizing-title/demo.html
new file mode 100644
index 00000000000..ab7ead5aca6
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime>
+          <span slot="title">Select a Reservation Date</span>
+        </ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/title/customizing-title/index.md b/static/usage/v7/datetime/title/customizing-title/index.md
new file mode 100644
index 00000000000..82a2b46e45b
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="large"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/title/customizing-title/demo.html"
+/>
diff --git a/static/usage/v7/datetime/title/customizing-title/javascript.md b/static/usage/v7/datetime/title/customizing-title/javascript.md
new file mode 100644
index 00000000000..5f0ded69fbc
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/javascript.md
@@ -0,0 +1,5 @@
+```html
+<ion-datetime>
+  <span slot="title">Select a Reservation Date</span>
+</ion-datetime>
+```
diff --git a/static/usage/v7/datetime/title/customizing-title/react.md b/static/usage/v7/datetime/title/customizing-title/react.md
new file mode 100644
index 00000000000..ae4fec002d5
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/react.md
@@ -0,0 +1,12 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime>
+      <span slot="title">Select a Reservation Date</span>
+    </IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/title/customizing-title/vue.md b/static/usage/v7/datetime/title/customizing-title/vue.md
new file mode 100644
index 00000000000..cb633931dba
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/vue.md
@@ -0,0 +1,16 @@
+```html
+<template>
+  <ion-datetime>
+    <span slot="title">Select a Reservation Date</span>
+  </ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/title/showing-default-title/angular.md b/static/usage/v7/datetime/title/showing-default-title/angular.md
new file mode 100644
index 00000000000..c67e022da04
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [showDefaultTitle]="true"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/title/showing-default-title/demo.html b/static/usage/v7/datetime/title/showing-default-title/demo.html
new file mode 100644
index 00000000000..3d725f9eb92
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime show-default-title="true"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/title/showing-default-title/index.md b/static/usage/v7/datetime/title/showing-default-title/index.md
new file mode 100644
index 00000000000..c0efd60dc18
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="large"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/datetime/title/showing-default-title/demo.html"
+/>
diff --git a/static/usage/v7/datetime/title/showing-default-title/javascript.md b/static/usage/v7/datetime/title/showing-default-title/javascript.md
new file mode 100644
index 00000000000..6786deb32cf
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime show-default-title="true"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/title/showing-default-title/react.md b/static/usage/v7/datetime/title/showing-default-title/react.md
new file mode 100644
index 00000000000..f5a7c681c22
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime showDefaultTitle={true}></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/title/showing-default-title/vue.md b/static/usage/v7/datetime/title/showing-default-title/vue.md
new file mode 100644
index 00000000000..7a6e48f7214
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime :show-default-title="true"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```
diff --git a/static/usage/v7/fab/basic/angular.md b/static/usage/v7/fab/basic/angular.md
new file mode 100644
index 00000000000..b8394f90ed6
--- /dev/null
+++ b/static/usage/v7/fab/basic/angular.md
@@ -0,0 +1,7 @@
+```html
+<ion-fab>
+  <ion-fab-button>
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/basic/demo.html b/static/usage/v7/fab/basic/demo.html
new file mode 100644
index 00000000000..bf3ddf18220
--- /dev/null
+++ b/static/usage/v7/fab/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab>
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/fab/basic/index.md b/static/usage/v7/fab/basic/index.md
new file mode 100644
index 00000000000..d1172ccc7c7
--- /dev/null
+++ b/static/usage/v7/fab/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/fab/basic/demo.html" />
diff --git a/static/usage/v7/fab/basic/javascript.md b/static/usage/v7/fab/basic/javascript.md
new file mode 100644
index 00000000000..b8394f90ed6
--- /dev/null
+++ b/static/usage/v7/fab/basic/javascript.md
@@ -0,0 +1,7 @@
+```html
+<ion-fab>
+  <ion-fab-button>
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/basic/react.md b/static/usage/v7/fab/basic/react.md
new file mode 100644
index 00000000000..f1df86581d6
--- /dev/null
+++ b/static/usage/v7/fab/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/react';
+import { add } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <IonFab>
+      <IonFabButton>
+        <IonIcon icon={add}></IonIcon>
+      </IonFabButton>
+    </IonFab>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/basic/vue.md b/static/usage/v7/fab/basic/vue.md
new file mode 100644
index 00000000000..e6b99476bd0
--- /dev/null
+++ b/static/usage/v7/fab/basic/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-fab>
+    <ion-fab-button>
+      <ion-icon :icon="add"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+</template>
+
+<script lang="ts">
+  import { IonFab, IonFabButton, IonIcon } from '@ionic/vue';
+  import { add } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonFab, IonFabButton, IonFabList, IonIcon },
+    setup() {
+      return { add }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/fab/button-sizing/angular.md b/static/usage/v7/fab/button-sizing/angular.md
new file mode 100644
index 00000000000..31bd1874625
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/angular.md
@@ -0,0 +1,18 @@
+```html
+<ion-fab>
+  <ion-fab-button size="small">
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+  <ion-fab-list side="end">
+    <ion-fab-button>
+      <ion-icon name="document"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="color-palette"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="globe"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/button-sizing/demo.html b/static/usage/v7/fab/button-sizing/demo.html
new file mode 100644
index 00000000000..e3595399219
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab>
+          <ion-fab-button size="small">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="end">
+            <ion-fab-button>
+              <ion-icon name="document"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="color-palette"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="globe"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/fab/button-sizing/index.md b/static/usage/v7/fab/button-sizing/index.md
new file mode 100644
index 00000000000..4c0eeba8100
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/fab/button-sizing/demo.html" />
diff --git a/static/usage/v7/fab/button-sizing/javascript.md b/static/usage/v7/fab/button-sizing/javascript.md
new file mode 100644
index 00000000000..31bd1874625
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-fab>
+  <ion-fab-button size="small">
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+  <ion-fab-list side="end">
+    <ion-fab-button>
+      <ion-icon name="document"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="color-palette"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="globe"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/button-sizing/react.md b/static/usage/v7/fab/button-sizing/react.md
new file mode 100644
index 00000000000..c6837284e08
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, colorPalette, document, globe } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <IonFab>
+      <IonFabButton size="small">
+        <IonIcon icon={add}></IonIcon>
+      </IonFabButton>
+      <IonFabList side="end">
+        <IonFabButton>
+          <IonIcon icon={document}></IonIcon>
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={colorPalette}></IonIcon>
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={globe}></IonIcon>
+        </IonFabButton>
+      </IonFabList>
+    </IonFab>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/button-sizing/vue.md b/static/usage/v7/fab/button-sizing/vue.md
new file mode 100644
index 00000000000..bf292433d7e
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/vue.md
@@ -0,0 +1,33 @@
+```html
+<template>
+  <ion-fab>
+    <ion-fab-button size="small">
+      <ion-icon :icon="add"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="end">
+      <ion-fab-button>
+        <ion-icon :icon="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon :icon="colorPalette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon :icon="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+</template>
+
+<script lang="ts">
+  import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
+  import { add, colorPalette, document, globe } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonFab, IonFabButton, IonFabList, IonIcon },
+    setup() {
+      return { add, colorPalette, document, globe }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/fab/list-side/angular.md b/static/usage/v7/fab/list-side/angular.md
new file mode 100644
index 00000000000..17f7d1818c0
--- /dev/null
+++ b/static/usage/v7/fab/list-side/angular.md
@@ -0,0 +1,33 @@
+```html
+<ion-fab slot="fixed" horizontal="center" vertical="center">
+  <ion-fab-button>
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+  <ion-fab-list side="top">
+    <ion-fab-button>
+      <ion-icon name="chevron-up"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="end">
+    <ion-fab-button>
+      <ion-icon name="chevron-forward"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="chevron-forward"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="bottom">
+    <ion-fab-button>
+      <ion-icon name="chevron-down"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="start">
+    <ion-fab-button>
+      <ion-icon name="chevron-back"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="chevron-back"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/list-side/demo.html b/static/usage/v7/fab/list-side/demo.html
new file mode 100644
index 00000000000..2b24622135a
--- /dev/null
+++ b/static/usage/v7/fab/list-side/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab slot="fixed" horizontal="center" vertical="center">
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="top">
+            <ion-fab-button>
+              <ion-icon name="chevron-up"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end">
+            <ion-fab-button>
+              <ion-icon name="chevron-forward"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="chevron-forward"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="bottom">
+            <ion-fab-button>
+              <ion-icon name="chevron-down"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="start">
+            <ion-fab-button>
+              <ion-icon name="chevron-back"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="chevron-back"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/fab/list-side/index.md b/static/usage/v7/fab/list-side/index.md
new file mode 100644
index 00000000000..23d2789fe3b
--- /dev/null
+++ b/static/usage/v7/fab/list-side/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/fab/list-side/demo.html" />
diff --git a/static/usage/v7/fab/list-side/javascript.md b/static/usage/v7/fab/list-side/javascript.md
new file mode 100644
index 00000000000..17f7d1818c0
--- /dev/null
+++ b/static/usage/v7/fab/list-side/javascript.md
@@ -0,0 +1,33 @@
+```html
+<ion-fab slot="fixed" horizontal="center" vertical="center">
+  <ion-fab-button>
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+  <ion-fab-list side="top">
+    <ion-fab-button>
+      <ion-icon name="chevron-up"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="end">
+    <ion-fab-button>
+      <ion-icon name="chevron-forward"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="chevron-forward"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="bottom">
+    <ion-fab-button>
+      <ion-icon name="chevron-down"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="start">
+    <ion-fab-button>
+      <ion-icon name="chevron-back"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="chevron-back"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/list-side/react.md b/static/usage/v7/fab/list-side/react.md
new file mode 100644
index 00000000000..b461d8c94eb
--- /dev/null
+++ b/static/usage/v7/fab/list-side/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <IonFab slot="fixed" horizontal="center" vertical="center">
+      <IonFabButton>
+        <IonIcon icon={add}></IonIcon>
+      </IonFabButton>
+      <IonFabList side="top">
+        <IonFabButton>
+          <IonIcon icon={chevronUp}></IonIcon>
+        </IonFabButton>
+      </IonFabList>
+      <IonFabList side="end">
+        <IonFabButton>
+          <IonIcon icon={chevronForward}></IonIcon>
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={chevronForward}></IonIcon>
+        </IonFabButton>
+      </IonFabList>
+      <IonFabList side="bottom">
+        <IonFabButton>
+          <IonIcon icon={chevronDown}></IonIcon>
+        </IonFabButton>
+      </IonFabList>
+      <IonFabList side="start">
+        <IonFabButton>
+          <IonIcon icon={chevronBack}></IonIcon>
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={chevronBack}></IonIcon>
+        </IonFabButton>
+      </IonFabList>
+    </IonFab>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/list-side/vue.md b/static/usage/v7/fab/list-side/vue.md
new file mode 100644
index 00000000000..2c42562587c
--- /dev/null
+++ b/static/usage/v7/fab/list-side/vue.md
@@ -0,0 +1,48 @@
+```html
+<template>
+  <ion-fab slot="fixed" horizontal="center" vertical="center">
+    <ion-fab-button>
+      <ion-icon :icon="add"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="top">
+      <ion-fab-button>
+        <ion-icon :icon="chevronUp"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="end">
+      <ion-fab-button>
+        <ion-icon :icon="chevronForward"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon :icon="chevronForward"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="bottom">
+      <ion-fab-button>
+        <ion-icon :icon="chevronDown"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="start">
+      <ion-fab-button>
+        <ion-icon :icon="chevronBack"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon :icon="chevronBack"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+</template>
+
+<script lang="ts">
+  import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
+  import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonFab, IonFabButton, IonFabList, IonIcon },
+    setup() {
+      return { add, chevronBack, chevronDown, chevronForward, chevronUp }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/fab/positioning/angular.md b/static/usage/v7/fab/positioning/angular.md
new file mode 100644
index 00000000000..e28150bea57
--- /dev/null
+++ b/static/usage/v7/fab/positioning/angular.md
@@ -0,0 +1,59 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Fab Buttons</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-fab slot="fixed" vertical="top" horizontal="start">
+    <ion-fab-button>
+      <ion-icon name="chevron-forward-circle"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="end">
+      <ion-fab-button>
+        <ion-icon name="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="color-palette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab slot="fixed" vertical="top" horizontal="end" [edge]="true">
+    <ion-fab-button>
+      <ion-icon name="chevron-down-circle"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="bottom">
+      <ion-fab-button>
+        <ion-icon name="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="color-palette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+      
+  <ion-fab slot="fixed" vertical="bottom" horizontal="end">
+    <ion-fab-button>
+      <ion-icon name="chevron-up-circle"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="top">
+      <ion-fab-button>
+        <ion-icon name="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="color-palette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+</ion-content>
+```
diff --git a/static/usage/v7/fab/positioning/demo.html b/static/usage/v7/fab/positioning/demo.html
new file mode 100644
index 00000000000..bb00b1cfdc4
--- /dev/null
+++ b/static/usage/v7/fab/positioning/demo.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Fab Buttons</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-fab slot="fixed" vertical="top" horizontal="start">
+        <ion-fab-button>
+          <ion-icon name="chevron-forward-circle"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-list side="end">
+          <ion-fab-button>
+            <ion-icon name="document"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="color-palette"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="globe"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+      </ion-fab>
+
+      <ion-fab slot="fixed" vertical="top" horizontal="end" edge="true">
+        <ion-fab-button>
+          <ion-icon name="chevron-down-circle"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-list side="bottom">
+          <ion-fab-button>
+            <ion-icon name="document"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="color-palette"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="globe"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+      </ion-fab>
+
+      <ion-fab slot="fixed" vertical="bottom" horizontal="end">
+        <ion-fab-button>
+          <ion-icon name="chevron-up-circle"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-list side="top">
+          <ion-fab-button>
+            <ion-icon name="document"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="color-palette"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="globe"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+      </ion-fab>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/fab/positioning/index.md b/static/usage/v7/fab/positioning/index.md
new file mode 100644
index 00000000000..deb0474e9a5
--- /dev/null
+++ b/static/usage/v7/fab/positioning/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/fab/positioning/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/fab/positioning/javascript.md b/static/usage/v7/fab/positioning/javascript.md
new file mode 100644
index 00000000000..27dec2c07b8
--- /dev/null
+++ b/static/usage/v7/fab/positioning/javascript.md
@@ -0,0 +1,59 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Fab Buttons</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-fab slot="fixed" vertical="top" horizontal="start">
+    <ion-fab-button>
+      <ion-icon name="chevron-forward-circle"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="end">
+      <ion-fab-button>
+        <ion-icon name="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="color-palette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab slot="fixed" vertical="top" horizontal="end" edge="true">
+    <ion-fab-button>
+      <ion-icon name="chevron-down-circle"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="bottom">
+      <ion-fab-button>
+        <ion-icon name="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="color-palette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+      
+  <ion-fab slot="fixed" vertical="bottom" horizontal="end">
+    <ion-fab-button>
+      <ion-icon name="chevron-up-circle"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="top">
+      <ion-fab-button>
+        <ion-icon name="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="color-palette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+</ion-content>
+```
diff --git a/static/usage/v7/fab/positioning/react.md b/static/usage/v7/fab/positioning/react.md
new file mode 100644
index 00000000000..c8eb95d0166
--- /dev/null
+++ b/static/usage/v7/fab/positioning/react.md
@@ -0,0 +1,70 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/react';
+import { chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Fab Buttons</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonFab slot="fixed" vertical="top" horizontal="start">
+          <IonFabButton>
+            <IonIcon icon={chevronForwardCircle}></IonIcon>
+          </IonFabButton>
+          <IonFabList side="end">
+            <IonFabButton>
+              <IonIcon icon={document}></IonIcon>
+            </IonFabButton>
+            <IonFabButton>
+              <IonIcon icon={colorPalette}></IonIcon>
+            </IonFabButton>
+            <IonFabButton>
+              <IonIcon icon={globe}></IonIcon>
+            </IonFabButton>
+          </IonFabList>
+        </IonFab>
+
+        <IonFab slot="fixed" vertical="top" horizontal="end" edge={true}>
+          <IonFabButton>
+            <IonIcon icon={chevronDownCircle}></IonIcon>
+          </IonFabButton>
+          <IonFabList side="bottom">
+            <IonFabButton>
+              <IonIcon icon={document}></IonIcon>
+            </IonFabButton>
+            <IonFabButton>
+              <IonIcon icon={colorPalette}></IonIcon>
+            </IonFabButton>
+            <IonFabButton>
+              <IonIcon icon={globe}></IonIcon>
+            </IonFabButton>
+          </IonFabList>
+        </IonFab>
+      
+        <IonFab slot="fixed" vertical="bottom" horizontal="end">
+          <IonFabButton>
+            <IonIcon icon={chevronUpCircle}></IonIcon>
+          </IonFabButton>
+          <IonFabList side="top">
+            <IonFabButton>
+              <IonIcon icon={document}></IonIcon>
+            </IonFabButton>
+            <IonFabButton>
+              <IonIcon icon={colorPalette}></IonIcon>
+            </IonFabButton>
+            <IonFabButton>
+              <IonIcon icon={globe}></IonIcon>
+            </IonFabButton>
+          </IonFabList>
+        </IonFab>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/positioning/vue.md b/static/usage/v7/fab/positioning/vue.md
new file mode 100644
index 00000000000..f3421f2b2ea
--- /dev/null
+++ b/static/usage/v7/fab/positioning/vue.md
@@ -0,0 +1,74 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Fab Buttons</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-fab slot="fixed" vertical="top" horizontal="start">
+      <ion-fab-button>
+        <ion-icon :icon="chevronForwardCircle"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-list side="end">
+        <ion-fab-button>
+          <ion-icon :icon="document"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button>
+          <ion-icon :icon="colorPalette"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button>
+          <ion-icon :icon="globe"></ion-icon>
+        </ion-fab-button>
+      </ion-fab-list>
+    </ion-fab>
+
+    <ion-fab slot="fixed" vertical="top" horizontal="end" :edge="true">
+      <ion-fab-button>
+        <ion-icon :icon="chevronDownCircle"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-list side="bottom">
+        <ion-fab-button>
+          <ion-icon :icon="document"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button>
+          <ion-icon :icon="colorPalette"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button>
+          <ion-icon :icon="globe"></ion-icon>
+        </ion-fab-button>
+      </ion-fab-list>
+    </ion-fab>
+      
+    <ion-fab slot="fixed" vertical="bottom" horizontal="end">
+      <ion-fab-button>
+        <ion-icon :icon="chevronUpCircle"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-list side="top">
+        <ion-fab-button>
+          <ion-icon :icon="document"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button>
+          <ion-icon :icon="colorPalette"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button>
+          <ion-icon :icon="globe"></ion-icon>
+        </ion-fab-button>
+      </ion-fab-list>
+    </ion-fab>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/vue';
+  import { chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar },
+    setup() {
+      return { chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/fab/theming/colors/angular.md b/static/usage/v7/fab/theming/colors/angular.md
new file mode 100644
index 00000000000..66d4db84a0f
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/angular.md
@@ -0,0 +1,33 @@
+```html
+<ion-fab slot="fixed" horizontal="center" vertical="center">
+  <ion-fab-button color="secondary">
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+  <ion-fab-list side="top">
+    <ion-fab-button color="primary">
+      <ion-icon name="chevron-up"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="end">
+    <ion-fab-button color="tertiary">
+      <ion-icon name="chevron-forward"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button color="success">
+      <ion-icon name="chevron-forward"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="bottom">
+    <ion-fab-button color="warning">
+      <ion-icon name="chevron-down"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="start">
+    <ion-fab-button color="danger">
+      <ion-icon name="chevron-back"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button color="dark">
+      <ion-icon name="chevron-back"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/theming/colors/demo.html b/static/usage/v7/fab/theming/colors/demo.html
new file mode 100644
index 00000000000..7f1b059484c
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab slot="fixed" horizontal="center" vertical="center">
+          <ion-fab-button color="secondary">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="top">
+            <ion-fab-button color="primary">
+              <ion-icon name="chevron-up"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end">
+            <ion-fab-button color="tertiary">
+              <ion-icon name="chevron-forward"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button color="success">
+              <ion-icon name="chevron-forward"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="bottom">
+            <ion-fab-button color="warning">
+              <ion-icon name="chevron-down"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="start">
+            <ion-fab-button color="danger">
+              <ion-icon name="chevron-back"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button color="dark">
+              <ion-icon name="chevron-back"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/colors/index.md b/static/usage/v7/fab/theming/colors/index.md
new file mode 100644
index 00000000000..93571b0084c
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/fab/theming/colors/demo.html" />
diff --git a/static/usage/v7/fab/theming/colors/javascript.md b/static/usage/v7/fab/theming/colors/javascript.md
new file mode 100644
index 00000000000..66d4db84a0f
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/javascript.md
@@ -0,0 +1,33 @@
+```html
+<ion-fab slot="fixed" horizontal="center" vertical="center">
+  <ion-fab-button color="secondary">
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+  <ion-fab-list side="top">
+    <ion-fab-button color="primary">
+      <ion-icon name="chevron-up"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="end">
+    <ion-fab-button color="tertiary">
+      <ion-icon name="chevron-forward"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button color="success">
+      <ion-icon name="chevron-forward"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="bottom">
+    <ion-fab-button color="warning">
+      <ion-icon name="chevron-down"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+  <ion-fab-list side="start">
+    <ion-fab-button color="danger">
+      <ion-icon name="chevron-back"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button color="dark">
+      <ion-icon name="chevron-back"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/theming/colors/react.md b/static/usage/v7/fab/theming/colors/react.md
new file mode 100644
index 00000000000..c600aaca898
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <IonFab slot="fixed" horizontal="center" vertical="center">
+      <IonFabButton color="secondary">
+        <IonIcon icon={add}></IonIcon>
+      </IonFabButton>
+      <IonFabList side="top">
+        <IonFabButton color="primary">
+          <IonIcon icon={chevronUp}></IonIcon>
+        </IonFabButton>
+      </IonFabList>
+      <IonFabList side="end">
+        <IonFabButton color="tertiary">
+          <IonIcon icon={chevronForward}></IonIcon>
+        </IonFabButton>
+        <IonFabButton color="success">
+          <IonIcon icon={chevronForward}></IonIcon>
+        </IonFabButton>
+      </IonFabList>
+      <IonFabList side="bottom">
+        <IonFabButton color="warning">
+          <IonIcon icon={chevronDown}></IonIcon>
+        </IonFabButton>
+      </IonFabList>
+      <IonFabList side="start">
+        <IonFabButton color="danger">
+          <IonIcon icon={chevronBack}></IonIcon>
+        </IonFabButton>
+        <IonFabButton color="dark">
+          <IonIcon icon={chevronBack}></IonIcon>
+        </IonFabButton>
+      </IonFabList>
+    </IonFab>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/theming/colors/vue.md b/static/usage/v7/fab/theming/colors/vue.md
new file mode 100644
index 00000000000..44968e6cb4c
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/vue.md
@@ -0,0 +1,48 @@
+```html
+<template>
+  <ion-fab slot="fixed" horizontal="center" vertical="center">
+    <ion-fab-button color="secondary">
+      <ion-icon :icon="add"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="top">
+      <ion-fab-button color="primary">
+        <ion-icon :icon="chevronUp"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="end">
+      <ion-fab-button color="tertiary">
+        <ion-icon :icon="chevronForward"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button color="success">
+        <ion-icon :icon="chevronForward"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="bottom">
+      <ion-fab-button color="warning">
+        <ion-icon :icon="chevronDown"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="start">
+      <ion-fab-button color="danger">
+        <ion-icon :icon="chevronBack"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button color="dark">
+        <ion-icon :icon="chevronBack"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+</template>
+
+<script lang="ts">
+  import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
+  import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonFab, IonFabButton, IonFabList, IonIcon },
+    setup() {
+      return { add, chevronBack, chevronDown, chevronForward, chevronUp }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_css.md b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..2e8c0c2bb93
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+ion-fab-button {
+  --background: #b7f399;
+  --background-activated: #87d361;
+  --background-hover: #a3e681;
+  --border-radius: 15px;
+  --box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+  --color: black;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_html.md b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4db1e796e3a
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+<ion-fab>
+  <ion-fab-button>
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+  <ion-fab-list side="end">
+    <ion-fab-button>
+      <ion-icon name="document"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="color-palette"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="globe"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/demo.html b/static/usage/v7/fab/theming/css-custom-properties/demo.html
new file mode 100644
index 00000000000..90b398450b3
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-fab-button {
+      --background: #b7f399;
+      --background-activated: #87d361;
+      --background-hover: #a3e681;
+      --border-radius: 15px;
+      --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);
+      --color: black;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab>
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="end">
+            <ion-fab-button>
+              <ion-icon name="document"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="color-palette"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="globe"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-custom-properties/index.md b/static/usage/v7/fab/theming/css-custom-properties/index.md
new file mode 100644
index 00000000000..94ebf3e223c
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/fab/theming/css-custom-properties/demo.html"
+/>
diff --git a/static/usage/v7/fab/theming/css-custom-properties/javascript.md b/static/usage/v7/fab/theming/css-custom-properties/javascript.md
new file mode 100644
index 00000000000..45d5f5e1243
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/javascript.md
@@ -0,0 +1,29 @@
+```html
+<style>
+  ion-fab-button {
+    --background: #b7f399;
+    --background-activated: #87d361;
+    --background-hover: #a3e681;
+    --border-radius: 15px;
+    --box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+    --color: black;
+  }
+</style>
+
+<ion-fab>
+  <ion-fab-button>
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+  <ion-fab-list side="end">
+    <ion-fab-button>
+      <ion-icon name="document"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="color-palette"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="globe"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/react/main_css.md b/static/usage/v7/fab/theming/css-custom-properties/react/main_css.md
new file mode 100644
index 00000000000..2e8c0c2bb93
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+ion-fab-button {
+  --background: #b7f399;
+  --background-activated: #87d361;
+  --background-hover: #a3e681;
+  --border-radius: 15px;
+  --box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+  --color: black;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-custom-properties/react/main_tsx.md b/static/usage/v7/fab/theming/css-custom-properties/react/main_tsx.md
new file mode 100644
index 00000000000..8a1371c77ec
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/react/main_tsx.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, colorPalette, document, globe } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonFab>
+      <IonFabButton>
+        <IonIcon icon={add}></IonIcon>
+      </IonFabButton>
+      <IonFabList side="end">
+        <IonFabButton>
+          <IonIcon icon={document}></IonIcon>
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={colorPalette}></IonIcon>
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={globe}></IonIcon>
+        </IonFabButton>
+      </IonFabList>
+    </IonFab>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/vue.md b/static/usage/v7/fab/theming/css-custom-properties/vue.md
new file mode 100644
index 00000000000..373d97cb6ec
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/vue.md
@@ -0,0 +1,44 @@
+```html
+<template>
+  <ion-fab>
+    <ion-fab-button>
+      <ion-icon :icon="add"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="end">
+      <ion-fab-button>
+        <ion-icon :icon="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon :icon="colorPalette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon :icon="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+</template>
+
+<script lang="ts">
+  import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
+  import { add, colorPalette, document, globe } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonFab, IonFabButton, IonFabList, IonIcon },
+    setup() {
+      return { add, colorPalette, document, globe }
+    }
+  });
+</script>
+
+<style>
+  ion-fab-button {
+    --background: #b7f399;
+    --background-activated: #87d361;
+    --background-hover: #a3e681;
+    --border-radius: 15px;
+    --box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+    --color: black;
+  }
+</style>
+```
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..b480b0cc455
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,16 @@
+```css
+ion-fab-button::part(native) {
+  background-color: #b7f399;
+  border-radius: 15px;
+  box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+  color: black;
+}
+    
+ion-fab-button::part(native):hover::after {
+  background-color: #a3e681;
+}
+
+ion-fab-button::part(native):active::after {
+  background-color: #87d361;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4db1e796e3a
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+<ion-fab>
+  <ion-fab-button>
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+  <ion-fab-list side="end">
+    <ion-fab-button>
+      <ion-icon name="document"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="color-palette"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="globe"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/demo.html b/static/usage/v7/fab/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..40c416ab32c
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fab</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-fab-button::part(native) {
+      background-color: #b7f399;
+      border-radius: 15px;
+      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);
+      color: black;
+    }
+
+    ion-fab-button::part(native):hover::after {
+      background-color: #a3e681;
+    }
+
+    ion-fab-button::part(native):active::after {
+      background-color: #87d361;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-fab>
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="end">
+            <ion-fab-button>
+              <ion-icon name="document"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="color-palette"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="globe"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/index.md b/static/usage/v7/fab/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..8f9b56738ae
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/fab/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/javascript.md b/static/usage/v7/fab/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..9ca1aa39119
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,35 @@
+```html
+<style>
+  ion-fab-button::part(native) {
+    background-color: #b7f399;
+    border-radius: 15px;
+    box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+    color: black;
+  }
+    
+  ion-fab-button::part(native):hover::after {
+    background-color: #a3e681;
+  }
+
+  ion-fab-button::part(native):active::after {
+    background-color: #87d361;
+  }
+</style>
+
+<ion-fab>
+  <ion-fab-button>
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+  <ion-fab-list side="end">
+    <ion-fab-button>
+      <ion-icon name="document"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="color-palette"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="globe"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/fab/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..b480b0cc455
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,16 @@
+```css
+ion-fab-button::part(native) {
+  background-color: #b7f399;
+  border-radius: 15px;
+  box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+  color: black;
+}
+    
+ion-fab-button::part(native):hover::after {
+  background-color: #a3e681;
+}
+
+ion-fab-button::part(native):active::after {
+  background-color: #87d361;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/fab/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..8a1371c77ec
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, colorPalette, document, globe } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonFab>
+      <IonFabButton>
+        <IonIcon icon={add}></IonIcon>
+      </IonFabButton>
+      <IonFabList side="end">
+        <IonFabButton>
+          <IonIcon icon={document}></IonIcon>
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={colorPalette}></IonIcon>
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={globe}></IonIcon>
+        </IonFabButton>
+      </IonFabList>
+    </IonFab>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/vue.md b/static/usage/v7/fab/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..9c9f1559805
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/vue.md
@@ -0,0 +1,50 @@
+```html
+<template>
+  <ion-fab>
+    <ion-fab-button>
+      <ion-icon :icon="add"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="end">
+      <ion-fab-button>
+        <ion-icon :icon="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon :icon="colorPalette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon :icon="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+</template>
+
+<script lang="ts">
+  import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
+  import { add, colorPalette, document, globe } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonFab, IonFabButton, IonFabList, IonIcon },
+    setup() {
+      return { add, colorPalette, document, globe }
+    }
+  });
+</script>
+
+<style>
+  ion-fab-button::part(native) {
+    background-color: #b7f399;
+    border-radius: 15px;
+    box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+    color: black;
+  }
+    
+  ion-fab-button::part(native):hover::after {
+    background-color: #a3e681;
+  }
+
+  ion-fab-button::part(native):active::after {
+    background-color: #87d361;
+  }
+</style>
+```
diff --git a/static/usage/v7/footer/basic/angular.md b/static/usage/v7/footer/basic/angular.md
new file mode 100644
index 00000000000..b0506781582
--- /dev/null
+++ b/static/usage/v7/footer/basic/angular.md
@@ -0,0 +1,10 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Content</h1>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/footer/basic/demo.html b/static/usage/v7/footer/basic/demo.html
new file mode 100644
index 00000000000..205a6543d4b
--- /dev/null
+++ b/static/usage/v7/footer/basic/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Footer</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Content</h1>
+    </ion-content>
+    <ion-footer>
+      <ion-toolbar>
+        <ion-title>Footer</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/footer/basic/index.md b/static/usage/v7/footer/basic/index.md
new file mode 100644
index 00000000000..d9abf47d787
--- /dev/null
+++ b/static/usage/v7/footer/basic/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/footer/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/footer/basic/javascript.md b/static/usage/v7/footer/basic/javascript.md
new file mode 100644
index 00000000000..b0506781582
--- /dev/null
+++ b/static/usage/v7/footer/basic/javascript.md
@@ -0,0 +1,10 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Content</h1>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/footer/basic/react.md b/static/usage/v7/footer/basic/react.md
new file mode 100644
index 00000000000..6d7119f0f3f
--- /dev/null
+++ b/static/usage/v7/footer/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonContent className="ion-padding">
+        <h1>Content</h1>
+      </IonContent>
+      <IonFooter>
+        <IonToolbar>
+          <IonTitle>Footer</IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/footer/basic/vue.md b/static/usage/v7/footer/basic/vue.md
new file mode 100644
index 00000000000..ed20057150d
--- /dev/null
+++ b/static/usage/v7/footer/basic/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Content</h1>
+  </ion-content>
+  <ion-footer>
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonFooter, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/footer/custom-scroll-target/angular/example_component_css.md b/static/usage/v7/footer/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v7/footer/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/footer/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/footer/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..db8f0f30a0e
--- /dev/null
+++ b/static/usage/v7/footer/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+<ion-content [scrollY]="false">
+  <div class="ion-content-scroll-host ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+    <h2>Sea Turtle</h2>
+    <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+    <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+    <h2>Giraffe</h2>
+    <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+    <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+    <h2>Elephant</h2>
+    <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+    <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+    <h2>Dolphin</h2>
+    <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+  </div>
+</ion-content>
+<ion-footer collapse="fade">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/footer/custom-scroll-target/demo.html b/static/usage/v7/footer/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..f9349b02086
--- /dev/null
+++ b/static/usage/v7/footer/custom-scroll-target/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Footer</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .ion-content-scroll-host {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content scroll-y="false">
+      <div class="ion-content-scroll-host ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+        <h2>Sea Turtle</h2>
+        <img alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.</p>
+
+        <h2>Giraffe</h2>
+        <img alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+          have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+        <h2>Elephant</h2>
+        <img alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.</p>
+
+        <h2>Dolphin</h2>
+        <img alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+          gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with
+          about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap
+          that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+      </div>
+    </ion-content>
+    <ion-footer collapse="fade">
+      <ion-toolbar>
+        <ion-title>Footer</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/footer/custom-scroll-target/index.md b/static/usage/v7/footer/custom-scroll-target/index.md
new file mode 100644
index 00000000000..ab03916d220
--- /dev/null
+++ b/static/usage/v7/footer/custom-scroll-target/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/footer/custom-scroll-target/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/footer/custom-scroll-target/javascript.md b/static/usage/v7/footer/custom-scroll-target/javascript.md
new file mode 100644
index 00000000000..607c759f225
--- /dev/null
+++ b/static/usage/v7/footer/custom-scroll-target/javascript.md
@@ -0,0 +1,44 @@
+```html
+<ion-content scroll-y="false">
+  <div class="ion-content-scroll-host ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+    <h2>Sea Turtle</h2>
+    <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+    <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+    <h2>Giraffe</h2>
+    <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+    <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+    <h2>Elephant</h2>
+    <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+    <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+    <h2>Dolphin</h2>
+    <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+  </div>
+</ion-content>
+<ion-footer collapse="fade">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+
+<style>
+  .ion-content-scroll-host {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+</style>
+```
diff --git a/static/usage/v7/footer/custom-scroll-target/react/main_css.md b/static/usage/v7/footer/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v7/footer/custom-scroll-target/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/footer/custom-scroll-target/react/main_tsx.md b/static/usage/v7/footer/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..425d1ee9528
--- /dev/null
+++ b/static/usage/v7/footer/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonContent scrollY={false}>
+        <div className="ion-content-scroll-host ion-padding">
+          <h1>Animal Facts</h1>
+
+          <h2>Rhinoceros</h2>
+          <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+          <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+          <h2>Sea Turtle</h2>
+          <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+          <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+          <h2>Giraffe</h2>
+          <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+          <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+          <h2>Elephant</h2>
+          <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+          <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+          <h2>Dolphin</h2>
+          <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+          <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+        </div>
+      </IonContent>
+      <IonFooter collapse="fade">
+        <IonToolbar>
+          <IonTitle>Footer</IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/footer/custom-scroll-target/vue.md b/static/usage/v7/footer/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..c7c13e7063c
--- /dev/null
+++ b/static/usage/v7/footer/custom-scroll-target/vue.md
@@ -0,0 +1,55 @@
+```html
+<template>
+  <ion-content :scroll-y="false">
+    <div class="ion-content-scroll-host ion-padding">
+      <h1>Animal Facts</h1>
+
+      <h2>Rhinoceros</h2>
+      <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+      <h2>Sea Turtle</h2>
+      <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+      <h2>Giraffe</h2>
+      <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+      <h2>Elephant</h2>
+      <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+      <h2>Dolphin</h2>
+      <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+    </div>
+  </ion-content>
+  <ion-footer collapse="fade">
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonFooter, IonTitle, IonToolbar },
+  });
+</script>
+
+<style scoped>
+  .ion-content-scroll-host {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+</style>
+```
diff --git a/static/usage/v7/footer/fade/angular.md b/static/usage/v7/footer/fade/angular.md
new file mode 100644
index 00000000000..cff7f1a7531
--- /dev/null
+++ b/static/usage/v7/footer/fade/angular.md
@@ -0,0 +1,30 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+  <h2>Sea Turtle</h2>
+  <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+  <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+  <h2>Giraffe</h2>
+  <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+  <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+  <h2>Elephant</h2>
+  <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+  <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+  <h2>Dolphin</h2>
+  <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+</ion-content>
+<ion-footer collapse="fade">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/footer/fade/demo.html b/static/usage/v7/footer/fade/demo.html
new file mode 100644
index 00000000000..75ed07ea1bf
--- /dev/null
+++ b/static/usage/v7/footer/fade/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Footer</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Animal Facts</h1>
+
+      <h2>Rhinoceros</h2>
+      <img alt="rhino standing near grass"
+        src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+        the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+        the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+        horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+      <h2>Sea Turtle</h2>
+      <img alt="brown sea turtle in water"
+        src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+        turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+        adapted for swimming, so they are vulnerable while on land.</p>
+
+      <h2>Giraffe</h2>
+      <img alt="giraffe sticking its tongue out"
+        src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+        a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+        the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+      <h2>Elephant</h2>
+      <img alt="two grey elephants on grass plains during sunset"
+        src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+        long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+        suck up water for drinking or bathing.</p>
+
+      <h2>Dolphin</h2>
+      <img alt="black and white dolphin in water"
+        src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+        blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+        100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+        to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+    </ion-content>
+    <ion-footer collapse="fade">
+      <ion-toolbar>
+        <ion-title>Footer</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/footer/fade/index.md b/static/usage/v7/footer/fade/index.md
new file mode 100644
index 00000000000..fd980ba23c6
--- /dev/null
+++ b/static/usage/v7/footer/fade/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/footer/fade/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/footer/fade/javascript.md b/static/usage/v7/footer/fade/javascript.md
new file mode 100644
index 00000000000..cff7f1a7531
--- /dev/null
+++ b/static/usage/v7/footer/fade/javascript.md
@@ -0,0 +1,30 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+  <h2>Sea Turtle</h2>
+  <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+  <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+  <h2>Giraffe</h2>
+  <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+  <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+  <h2>Elephant</h2>
+  <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+  <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+  <h2>Dolphin</h2>
+  <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+</ion-content>
+<ion-footer collapse="fade">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/footer/fade/react.md b/static/usage/v7/footer/fade/react.md
new file mode 100644
index 00000000000..858ea06635c
--- /dev/null
+++ b/static/usage/v7/footer/fade/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonContent className="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+        <h2>Sea Turtle</h2>
+        <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+        <h2>Giraffe</h2>
+        <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+        <h2>Elephant</h2>
+        <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+        <h2>Dolphin</h2>
+        <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+      </IonContent>
+      <IonFooter collapse="fade">
+        <IonToolbar>
+          <IonTitle>Footer</IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/footer/fade/vue.md b/static/usage/v7/footer/fade/vue.md
new file mode 100644
index 00000000000..8814012da11
--- /dev/null
+++ b/static/usage/v7/footer/fade/vue.md
@@ -0,0 +1,41 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+    <h2>Sea Turtle</h2>
+    <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+    <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+    <h2>Giraffe</h2>
+    <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+    <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+    <h2>Elephant</h2>
+    <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+    <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+    <h2>Dolphin</h2>
+    <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+  </ion-content>
+  <ion-footer collapse="fade">
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonFooter, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/footer/no-border/angular.md b/static/usage/v7/footer/no-border/angular.md
new file mode 100644
index 00000000000..6b31b329d96
--- /dev/null
+++ b/static/usage/v7/footer/no-border/angular.md
@@ -0,0 +1,10 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Content</h1>
+</ion-content>
+<ion-footer class="ion-no-border">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/footer/no-border/demo.html b/static/usage/v7/footer/no-border/demo.html
new file mode 100644
index 00000000000..8050b2a7bcd
--- /dev/null
+++ b/static/usage/v7/footer/no-border/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Footer</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Content</h1>
+    </ion-content>
+    <ion-footer class="ion-no-border">
+      <ion-toolbar>
+        <ion-title>Footer</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/footer/no-border/index.md b/static/usage/v7/footer/no-border/index.md
new file mode 100644
index 00000000000..61152f09bf8
--- /dev/null
+++ b/static/usage/v7/footer/no-border/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/footer/no-border/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/footer/no-border/javascript.md b/static/usage/v7/footer/no-border/javascript.md
new file mode 100644
index 00000000000..6b31b329d96
--- /dev/null
+++ b/static/usage/v7/footer/no-border/javascript.md
@@ -0,0 +1,10 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Content</h1>
+</ion-content>
+<ion-footer class="ion-no-border">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/footer/no-border/react.md b/static/usage/v7/footer/no-border/react.md
new file mode 100644
index 00000000000..2c58e513063
--- /dev/null
+++ b/static/usage/v7/footer/no-border/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonContent className="ion-padding">
+        <h1>Content</h1>
+      </IonContent>
+      <IonFooter className="ion-no-border">
+        <IonToolbar>
+          <IonTitle>Footer</IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/footer/no-border/vue.md b/static/usage/v7/footer/no-border/vue.md
new file mode 100644
index 00000000000..9a3eccff15a
--- /dev/null
+++ b/static/usage/v7/footer/no-border/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Content</h1>
+  </ion-content>
+  <ion-footer class="ion-no-border">
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonFooter, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/footer/translucent/angular.md b/static/usage/v7/footer/translucent/angular.md
new file mode 100644
index 00000000000..3d8f6098b38
--- /dev/null
+++ b/static/usage/v7/footer/translucent/angular.md
@@ -0,0 +1,30 @@
+```html
+<ion-content [fullscreen]="true" class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+  <h2>Sea Turtle</h2>
+  <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+  <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+  <h2>Giraffe</h2>
+  <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+  <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+  <h2>Elephant</h2>
+  <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+  <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+  <h2>Dolphin</h2>
+  <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+</ion-content>
+<ion-footer [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/footer/translucent/demo.html b/static/usage/v7/footer/translucent/demo.html
new file mode 100644
index 00000000000..b04fd24bddc
--- /dev/null
+++ b/static/usage/v7/footer/translucent/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Footer</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content fullscreen="true" class="ion-padding">
+      <h1>Animal Facts</h1>
+
+      <h2>Rhinoceros</h2>
+      <img alt="rhino standing near grass"
+        src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+        the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+        the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+        horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+      <h2>Sea Turtle</h2>
+      <img alt="brown sea turtle in water"
+        src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+        turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+        adapted for swimming, so they are vulnerable while on land.</p>
+
+      <h2>Giraffe</h2>
+      <img alt="giraffe sticking its tongue out"
+        src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+        a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+        the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+      <h2>Elephant</h2>
+      <img alt="two grey elephants on grass plains during sunset"
+        src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+        long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+        suck up water for drinking or bathing.</p>
+
+      <h2>Dolphin</h2>
+      <img alt="black and white dolphin in water"
+        src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+        blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+        100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+        to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+    </ion-content>
+    <ion-footer translucent="true">
+      <ion-toolbar>
+        <ion-title>Footer</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/footer/translucent/index.md b/static/usage/v7/footer/translucent/index.md
new file mode 100644
index 00000000000..1893af3c325
--- /dev/null
+++ b/static/usage/v7/footer/translucent/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/footer/translucent/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/footer/translucent/javascript.md b/static/usage/v7/footer/translucent/javascript.md
new file mode 100644
index 00000000000..029b08984c3
--- /dev/null
+++ b/static/usage/v7/footer/translucent/javascript.md
@@ -0,0 +1,30 @@
+```html
+<ion-content fullscreen="true" class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+  <h2>Sea Turtle</h2>
+  <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+  <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+  <h2>Giraffe</h2>
+  <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+  <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+  <h2>Elephant</h2>
+  <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+  <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+  <h2>Dolphin</h2>
+  <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+</ion-content>
+<ion-footer translucent="true">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/footer/translucent/react.md b/static/usage/v7/footer/translucent/react.md
new file mode 100644
index 00000000000..0a3884fb0cd
--- /dev/null
+++ b/static/usage/v7/footer/translucent/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonContent fullscreen={true} className="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+        <h2>Sea Turtle</h2>
+        <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+        <h2>Giraffe</h2>
+        <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+        <h2>Elephant</h2>
+        <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+        <h2>Dolphin</h2>
+        <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+      </IonContent>
+      <IonFooter translucent={true}>
+        <IonToolbar>
+          <IonTitle>Footer</IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/footer/translucent/vue.md b/static/usage/v7/footer/translucent/vue.md
new file mode 100644
index 00000000000..cd64be6bc88
--- /dev/null
+++ b/static/usage/v7/footer/translucent/vue.md
@@ -0,0 +1,41 @@
+```html
+<template>
+  <ion-content :fullscreen="true" class="ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+    <h2>Sea Turtle</h2>
+    <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+    <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+    <h2>Giraffe</h2>
+    <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+    <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+    <h2>Elephant</h2>
+    <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+    <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+    <h2>Dolphin</h2>
+    <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+  </ion-content>
+  <ion-footer :translucent="true">
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonFooter, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/grid/basic/angular/example_component_css.md b/static/usage/v7/grid/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/basic/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/basic/angular/example_component_html.md b/static/usage/v7/grid/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..daa37c1e31f
--- /dev/null
+++ b/static/usage/v7/grid/basic/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+    <ion-col>4</ion-col>
+    <ion-col>5</ion-col>
+    <ion-col>6</ion-col>
+  </ion-row>
+</ion-grid>
+
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+    <ion-col>4</ion-col>
+    <ion-col>5</ion-col>
+    <ion-col>6</ion-col>
+    <ion-col>7</ion-col>
+    <ion-col>8</ion-col>
+    <ion-col>9</ion-col>
+    <ion-col>10</ion-col>
+    <ion-col>11</ion-col>
+    <ion-col>12</ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/basic/demo.html b/static/usage/v7/grid/basic/demo.html
new file mode 100644
index 00000000000..36ef496f817
--- /dev/null
+++ b/static/usage/v7/grid/basic/demo.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+            <ion-col>4</ion-col>
+            <ion-col>5</ion-col>
+            <ion-col>6</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+            <ion-col>4</ion-col>
+            <ion-col>5</ion-col>
+            <ion-col>6</ion-col>
+            <ion-col>7</ion-col>
+            <ion-col>8</ion-col>
+            <ion-col>9</ion-col>
+            <ion-col>10</ion-col>
+            <ion-col>11</ion-col>
+            <ion-col>12</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/basic/index.md b/static/usage/v7/grid/basic/index.md
new file mode 100644
index 00000000000..6945d9ba91b
--- /dev/null
+++ b/static/usage/v7/grid/basic/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/basic/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/v7/grid/basic/javascript.md b/static/usage/v7/grid/basic/javascript.md
new file mode 100644
index 00000000000..53e0dd4f8c9
--- /dev/null
+++ b/static/usage/v7/grid/basic/javascript.md
@@ -0,0 +1,46 @@
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+    <ion-col>4</ion-col>
+    <ion-col>5</ion-col>
+    <ion-col>6</ion-col>
+  </ion-row>
+</ion-grid>
+
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+    <ion-col>4</ion-col>
+    <ion-col>5</ion-col>
+    <ion-col>6</ion-col>
+    <ion-col>7</ion-col>
+    <ion-col>8</ion-col>
+    <ion-col>9</ion-col>
+    <ion-col>10</ion-col>
+    <ion-col>11</ion-col>
+    <ion-col>12</ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/basic/react/main_css.md b/static/usage/v7/grid/basic/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/basic/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/basic/react/main_tsx.md b/static/usage/v7/grid/basic/react/main_tsx.md
new file mode 100644
index 00000000000..9fb9652e4ce
--- /dev/null
+++ b/static/usage/v7/grid/basic/react/main_tsx.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
+          <IonCol>4</IonCol>
+          <IonCol>5</IonCol>
+          <IonCol>6</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
+          <IonCol>4</IonCol>
+          <IonCol>5</IonCol>
+          <IonCol>6</IonCol>
+          <IonCol>7</IonCol>
+          <IonCol>8</IonCol>
+          <IonCol>9</IonCol>
+          <IonCol>10</IonCol>
+          <IonCol>11</IonCol>
+          <IonCol>12</IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/basic/vue.md b/static/usage/v7/grid/basic/vue.md
new file mode 100644
index 00000000000..d693fc8510d
--- /dev/null
+++ b/static/usage/v7/grid/basic/vue.md
@@ -0,0 +1,57 @@
+```html
+<template>
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col>2</ion-col>
+      <ion-col>3</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col>2</ion-col>
+      <ion-col>3</ion-col>
+      <ion-col>4</ion-col>
+      <ion-col>5</ion-col>
+      <ion-col>6</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col>2</ion-col>
+      <ion-col>3</ion-col>
+      <ion-col>4</ion-col>
+      <ion-col>5</ion-col>
+      <ion-col>6</ion-col>
+      <ion-col>7</ion-col>
+      <ion-col>8</ion-col>
+      <ion-col>9</ion-col>
+      <ion-col>10</ion-col>
+      <ion-col>11</ion-col>
+      <ion-col>12</ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/customizing/column-number/angular/example_component_css.md b/static/usage/v7/grid/customizing/column-number/angular/example_component_css.md
new file mode 100644
index 00000000000..ceadac1c05c
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-grid {
+  --ion-grid-columns: 6;
+}
+
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/column-number/angular/example_component_html.md b/static/usage/v7/grid/customizing/column-number/angular/example_component_html.md
new file mode 100644
index 00000000000..6e9b744b161
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<b>Total number of columns is set to <code>6</code>, column <code>size</code> is set to <code>1</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="1">1</ion-col>
+    <ion-col size="1">2</ion-col>
+    <ion-col size="1">3</ion-col>
+    <ion-col size="1">4</ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/customizing/column-number/demo.html b/static/usage/v7/grid/customizing/column-number/demo.html
new file mode 100644
index 00000000000..ee0550437e5
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/demo.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+
+      --ion-grid-columns: 6;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Total number of columns is set to <code>6</code>, column <code>size</code> is set to <code>1</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="1">1</ion-col>
+            <ion-col size="1">2</ion-col>
+            <ion-col size="1">3</ion-col>
+            <ion-col size="1">4</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/customizing/column-number/index.md b/static/usage/v7/grid/customizing/column-number/index.md
new file mode 100644
index 00000000000..eed737ae21f
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/customizing/column-number/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/grid/customizing/column-number/javascript.md b/static/usage/v7/grid/customizing/column-number/javascript.md
new file mode 100644
index 00000000000..5c4c6edf166
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/javascript.md
@@ -0,0 +1,24 @@
+```html
+<b>Total number of columns is set to <code>6</code>, column <code>size</code> is set to <code>1</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="1">1</ion-col>
+    <ion-col size="1">2</ion-col>
+    <ion-col size="1">3</ion-col>
+    <ion-col size="1">4</ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-grid {
+    --ion-grid-columns: 6;
+  }
+
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/customizing/column-number/react/main_css.md b/static/usage/v7/grid/customizing/column-number/react/main_css.md
new file mode 100644
index 00000000000..ceadac1c05c
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+ion-grid {
+  --ion-grid-columns: 6;
+}
+
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/column-number/react/main_tsx.md b/static/usage/v7/grid/customizing/column-number/react/main_tsx.md
new file mode 100644
index 00000000000..f911fdef9b4
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/react/main_tsx.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <b>Total number of columns is set to <code>6</code>, column <code>size</code> is set to <code>1</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol size="1">1</IonCol>
+          <IonCol size="1">2</IonCol>
+          <IonCol size="1">3</IonCol>
+          <IonCol size="1">4</IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/customizing/column-number/vue.md b/static/usage/v7/grid/customizing/column-number/vue.md
new file mode 100644
index 00000000000..1af3143593f
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/vue.md
@@ -0,0 +1,35 @@
+```html
+<template>
+  <b>Total number of columns is set to <code>6</code>, column <code>size</code> is set to <code>1</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="1">1</ion-col>
+      <ion-col size="1">2</ion-col>
+      <ion-col size="1">3</ion-col>
+      <ion-col size="1">4</ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-grid {
+    --ion-grid-columns: 6;
+  }
+
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/customizing/padding/angular/example_component_css.md b/static/usage/v7/grid/customizing/padding/angular/example_component_css.md
new file mode 100644
index 00000000000..c7d165d3b75
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/angular/example_component_css.md
@@ -0,0 +1,26 @@
+```css
+ion-grid {
+  --ion-grid-padding: 20px;
+
+  --ion-grid-padding-xs: 20px;
+  --ion-grid-padding-sm: 20px;
+  --ion-grid-padding-md: 20px;
+  --ion-grid-padding-lg: 20px;
+  --ion-grid-padding-xl: 20px;
+
+  --ion-grid-column-padding: 30px;
+
+  --ion-grid-column-padding-xs: 30px;
+  --ion-grid-column-padding-sm: 30px;
+  --ion-grid-column-padding-md: 30px;
+  --ion-grid-column-padding-lg: 30px;
+  --ion-grid-column-padding-xl: 30px;
+}
+
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/padding/angular/example_component_html.md b/static/usage/v7/grid/customizing/padding/angular/example_component_html.md
new file mode 100644
index 00000000000..74811052b30
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/customizing/padding/demo.html b/static/usage/v7/grid/customizing/padding/demo.html
new file mode 100644
index 00000000000..38dae06af73
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+
+      --ion-grid-padding: 20px;
+
+      --ion-grid-padding-xs: 20px;
+      --ion-grid-padding-sm: 20px;
+      --ion-grid-padding-md: 20px;
+      --ion-grid-padding-lg: 20px;
+      --ion-grid-padding-xl: 20px;
+
+      --ion-grid-column-padding: 30px;
+
+      --ion-grid-column-padding-xs: 30px;
+      --ion-grid-column-padding-sm: 30px;
+      --ion-grid-column-padding-md: 30px;
+      --ion-grid-column-padding-lg: 30px;
+      --ion-grid-column-padding-xl: 30px;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/customizing/padding/index.md b/static/usage/v7/grid/customizing/padding/index.md
new file mode 100644
index 00000000000..ea5280cc8f1
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/customizing/padding/demo.html"
+  size="150px"
+/>
diff --git a/static/usage/v7/grid/customizing/padding/javascript.md b/static/usage/v7/grid/customizing/padding/javascript.md
new file mode 100644
index 00000000000..fea0d256a72
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/javascript.md
@@ -0,0 +1,36 @@
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-grid {
+    --ion-grid-padding: 20px;
+
+    --ion-grid-padding-xs: 20px;
+    --ion-grid-padding-sm: 20px;
+    --ion-grid-padding-md: 20px;
+    --ion-grid-padding-lg: 20px;
+    --ion-grid-padding-xl: 20px;
+
+    --ion-grid-column-padding: 30px;
+
+    --ion-grid-column-padding-xs: 30px;
+    --ion-grid-column-padding-sm: 30px;
+    --ion-grid-column-padding-md: 30px;
+    --ion-grid-column-padding-lg: 30px;
+    --ion-grid-column-padding-xl: 30px;
+  }
+
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/customizing/padding/react/main_css.md b/static/usage/v7/grid/customizing/padding/react/main_css.md
new file mode 100644
index 00000000000..c7d165d3b75
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/react/main_css.md
@@ -0,0 +1,26 @@
+```css
+ion-grid {
+  --ion-grid-padding: 20px;
+
+  --ion-grid-padding-xs: 20px;
+  --ion-grid-padding-sm: 20px;
+  --ion-grid-padding-md: 20px;
+  --ion-grid-padding-lg: 20px;
+  --ion-grid-padding-xl: 20px;
+
+  --ion-grid-column-padding: 30px;
+
+  --ion-grid-column-padding-xs: 30px;
+  --ion-grid-column-padding-sm: 30px;
+  --ion-grid-column-padding-md: 30px;
+  --ion-grid-column-padding-lg: 30px;
+  --ion-grid-column-padding-xl: 30px;
+}
+
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/padding/react/main_tsx.md b/static/usage/v7/grid/customizing/padding/react/main_tsx.md
new file mode 100644
index 00000000000..4faf0a3cac1
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/react/main_tsx.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/customizing/padding/vue.md b/static/usage/v7/grid/customizing/padding/vue.md
new file mode 100644
index 00000000000..343511e231d
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/vue.md
@@ -0,0 +1,47 @@
+```html
+<template>
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col>2</ion-col>
+      <ion-col>3</ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-grid {
+    --ion-grid-padding: 20px;
+
+    --ion-grid-padding-xs: 20px;
+    --ion-grid-padding-sm: 20px;
+    --ion-grid-padding-md: 20px;
+    --ion-grid-padding-lg: 20px;
+    --ion-grid-padding-xl: 20px;
+
+    --ion-grid-column-padding: 30px;
+
+    --ion-grid-column-padding-xs: 30px;
+    --ion-grid-column-padding-sm: 30px;
+    --ion-grid-column-padding-md: 30px;
+    --ion-grid-column-padding-lg: 30px;
+    --ion-grid-column-padding-xl: 30px;
+  }
+
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/customizing/width/angular/example_component_css.md b/static/usage/v7/grid/customizing/width/angular/example_component_css.md
new file mode 100644
index 00000000000..bbb8f04519a
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-grid {
+  --ion-grid-width: 50%;
+
+  --ion-grid-width-xs: 50%;
+  --ion-grid-width-sm: 288px;
+  --ion-grid-width-md: 384px;
+  --ion-grid-width-lg: 480px;
+  --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/width/angular/example_component_html.md b/static/usage/v7/grid/customizing/width/angular/example_component_html.md
new file mode 100644
index 00000000000..0688212c247
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-grid [fixed]="true">
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/customizing/width/demo.html b/static/usage/v7/grid/customizing/width/demo.html
new file mode 100644
index 00000000000..09527dca430
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      flex-grow: 0;
+
+      --ion-grid-width: 50%;
+
+      --ion-grid-width-xs: 50%;
+      --ion-grid-width-sm: 288px;
+      --ion-grid-width-md: 384px;
+      --ion-grid-width-lg: 480px;
+      --ion-grid-width-xl: 570px;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-grid fixed="true">
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/customizing/width/index.md b/static/usage/v7/grid/customizing/width/index.md
new file mode 100644
index 00000000000..99ea8710f85
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/customizing/width/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/grid/customizing/width/javascript.md b/static/usage/v7/grid/customizing/width/javascript.md
new file mode 100644
index 00000000000..2ff36295b70
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-grid fixed="true">
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+  }
+
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/customizing/width/react/main_css.md b/static/usage/v7/grid/customizing/width/react/main_css.md
new file mode 100644
index 00000000000..bbb8f04519a
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-grid {
+  --ion-grid-width: 50%;
+
+  --ion-grid-width-xs: 50%;
+  --ion-grid-width-sm: 288px;
+  --ion-grid-width-md: 384px;
+  --ion-grid-width-lg: 480px;
+  --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/width/react/main_tsx.md b/static/usage/v7/grid/customizing/width/react/main_tsx.md
new file mode 100644
index 00000000000..73ccebd0606
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/react/main_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonGrid fixed={true}>
+      <IonRow>
+        <IonCol>1</IonCol>
+        <IonCol>2</IonCol>
+        <IonCol>3</IonCol>
+      </IonRow>
+    </IonGrid>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/customizing/width/vue.md b/static/usage/v7/grid/customizing/width/vue.md
new file mode 100644
index 00000000000..40b0002e822
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/vue.md
@@ -0,0 +1,39 @@
+```html
+<template>
+  <ion-grid :fixed="true">
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col>2</ion-col>
+      <ion-col>3</ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+  }
+
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/fixed/angular/example_component_css.md b/static/usage/v7/grid/fixed/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/fixed/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/fixed/angular/example_component_html.md b/static/usage/v7/grid/fixed/angular/example_component_html.md
new file mode 100644
index 00000000000..0688212c247
--- /dev/null
+++ b/static/usage/v7/grid/fixed/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-grid [fixed]="true">
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/fixed/demo.html b/static/usage/v7/grid/fixed/demo.html
new file mode 100644
index 00000000000..9dcc3781d7c
--- /dev/null
+++ b/static/usage/v7/grid/fixed/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-grid fixed="true">
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/fixed/index.md b/static/usage/v7/grid/fixed/index.md
new file mode 100644
index 00000000000..bede2ed6bc7
--- /dev/null
+++ b/static/usage/v7/grid/fixed/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/fixed/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/grid/fixed/javascript.md b/static/usage/v7/grid/fixed/javascript.md
new file mode 100644
index 00000000000..5fa9672a8ab
--- /dev/null
+++ b/static/usage/v7/grid/fixed/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-grid fixed="true">
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/fixed/react/main_css.md b/static/usage/v7/grid/fixed/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/fixed/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/fixed/react/main_tsx.md b/static/usage/v7/grid/fixed/react/main_tsx.md
new file mode 100644
index 00000000000..73ccebd0606
--- /dev/null
+++ b/static/usage/v7/grid/fixed/react/main_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonGrid fixed={true}>
+      <IonRow>
+        <IonCol>1</IonCol>
+        <IonCol>2</IonCol>
+        <IonCol>3</IonCol>
+      </IonRow>
+    </IonGrid>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/fixed/vue.md b/static/usage/v7/grid/fixed/vue.md
new file mode 100644
index 00000000000..fbaa7118bbd
--- /dev/null
+++ b/static/usage/v7/grid/fixed/vue.md
@@ -0,0 +1,29 @@
+```html
+<template>
+  <ion-grid :fixed="true">
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col>2</ion-col>
+      <ion-col>3</ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/angular/example_component_css.md b/static/usage/v7/grid/horizontal-alignment/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/angular/example_component_html.md b/static/usage/v7/grid/horizontal-alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..63a33b6361e
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/angular/example_component_html.md
@@ -0,0 +1,61 @@
+```html
+<b>Columns aligned at the start</b>
+<ion-grid>
+  <ion-row class="ion-justify-content-start">
+    <ion-col size="3">
+      1
+    </ion-col>
+    <ion-col size="3">
+      2
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned at the center</b>
+<ion-grid>
+  <ion-row class="ion-justify-content-center">
+    <ion-col size="3">
+      1
+    </ion-col>
+    <ion-col size="3">
+      2
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned at the end</b>
+<ion-grid>
+  <ion-row class="ion-justify-content-end">
+    <ion-col size="3">
+      1
+    </ion-col>
+    <ion-col size="3">
+      2
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned with space around</b>
+<ion-grid>
+  <ion-row class="ion-justify-content-around">
+    <ion-col size="3">
+      1
+    </ion-col>
+    <ion-col size="3">
+      2
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned with space between</b>
+<ion-grid>
+  <ion-row class="ion-justify-content-between">
+    <ion-col size="3">
+      1
+    </ion-col>
+    <ion-col size="3">
+      2
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/demo.html b/static/usage/v7/grid/horizontal-alignment/demo.html
new file mode 100644
index 00000000000..2960357e81e
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/demo.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Columns aligned at the start</b>
+        <ion-grid>
+          <ion-row class="ion-justify-content-start">
+            <ion-col size="3">
+              1
+            </ion-col>
+            <ion-col size="3">
+              2
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned at the center</b>
+        <ion-grid>
+          <ion-row class="ion-justify-content-center">
+            <ion-col size="3">
+              1
+            </ion-col>
+            <ion-col size="3">
+              2
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned at the end</b>
+        <ion-grid>
+          <ion-row class="ion-justify-content-end">
+            <ion-col size="3">
+              1
+            </ion-col>
+            <ion-col size="3">
+              2
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned with space around</b>
+        <ion-grid>
+          <ion-row class="ion-justify-content-around">
+            <ion-col size="3">
+              1
+            </ion-col>
+            <ion-col size="3">
+              2
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned with space between</b>
+        <ion-grid>
+          <ion-row class="ion-justify-content-between">
+            <ion-col size="3">
+              1
+            </ion-col>
+            <ion-col size="3">
+              2
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/horizontal-alignment/index.md b/static/usage/v7/grid/horizontal-alignment/index.md
new file mode 100644
index 00000000000..aa44db5ad2d
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/horizontal-alignment/demo.html"
+  size="400px"
+/>
diff --git a/static/usage/v7/grid/horizontal-alignment/javascript.md b/static/usage/v7/grid/horizontal-alignment/javascript.md
new file mode 100644
index 00000000000..79a8e723d8e
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/javascript.md
@@ -0,0 +1,70 @@
+```html
+<b>Columns aligned at the start</b>
+<ion-grid>
+  <ion-row class="ion-justify-content-start">
+    <ion-col size="3">
+      1
+    </ion-col>
+    <ion-col size="3">
+      2
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned at the center</b>
+<ion-grid>
+  <ion-row class="ion-justify-content-center">
+    <ion-col size="3">
+      1
+    </ion-col>
+    <ion-col size="3">
+      2
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned at the end</b>
+<ion-grid>
+  <ion-row class="ion-justify-content-end">
+    <ion-col size="3">
+      1
+    </ion-col>
+    <ion-col size="3">
+      2
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned with space around</b>
+<ion-grid>
+  <ion-row class="ion-justify-content-around">
+    <ion-col size="3">
+      1
+    </ion-col>
+    <ion-col size="3">
+      2
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned with space between</b>
+<ion-grid>
+  <ion-row class="ion-justify-content-between">
+    <ion-col size="3">
+      1
+    </ion-col>
+    <ion-col size="3">
+      2
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/react/main_css.md b/static/usage/v7/grid/horizontal-alignment/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/react/main_tsx.md b/static/usage/v7/grid/horizontal-alignment/react/main_tsx.md
new file mode 100644
index 00000000000..320fb74063c
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/react/main_tsx.md
@@ -0,0 +1,73 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <b>Columns aligned at the start</b>
+      <IonGrid>
+        <IonRow class="ion-justify-content-start">
+          <IonCol size="3">
+            1
+          </IonCol>
+          <IonCol size="3">
+            2
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Columns aligned at the center</b>
+      <IonGrid>
+        <IonRow class="ion-justify-content-center">
+          <IonCol size="3">
+            1
+          </IonCol>
+          <IonCol size="3">
+            2
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Columns aligned at the end</b>
+      <IonGrid>
+        <IonRow class="ion-justify-content-end">
+          <IonCol size="3">
+            1
+          </IonCol>
+          <IonCol size="3">
+            2
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Columns aligned with space around</b>
+      <IonGrid>
+        <IonRow class="ion-justify-content-around">
+          <IonCol size="3">
+            1
+          </IonCol>
+          <IonCol size="3">
+            2
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Columns aligned with space between</b>
+      <IonGrid>
+        <IonRow class="ion-justify-content-between">
+          <IonCol size="3">
+            1
+          </IonCol>
+          <IonCol size="3">
+            2
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/vue.md b/static/usage/v7/grid/horizontal-alignment/vue.md
new file mode 100644
index 00000000000..4cb3c1bcefd
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/vue.md
@@ -0,0 +1,81 @@
+```html
+<template>
+  <b>Columns aligned at the start</b>
+  <ion-grid>
+    <ion-row class="ion-justify-content-start">
+      <ion-col size="3">
+        1
+      </ion-col>
+      <ion-col size="3">
+        2
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Columns aligned at the center</b>
+  <ion-grid>
+    <ion-row class="ion-justify-content-center">
+      <ion-col size="3">
+        1
+      </ion-col>
+      <ion-col size="3">
+        2
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Columns aligned at the end</b>
+  <ion-grid>
+    <ion-row class="ion-justify-content-end">
+      <ion-col size="3">
+        1
+      </ion-col>
+      <ion-col size="3">
+        2
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Columns aligned with space around</b>
+  <ion-grid>
+    <ion-row class="ion-justify-content-around">
+      <ion-col size="3">
+        1
+      </ion-col>
+      <ion-col size="3">
+        2
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Columns aligned with space between</b>
+  <ion-grid>
+    <ion-row class="ion-justify-content-between">
+      <ion-col size="3">
+        1
+      </ion-col>
+      <ion-col size="3">
+        2
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/offset-responsive/angular/example_component_css.md b/static/usage/v7/grid/offset-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/offset-responsive/angular/example_component_html.md b/static/usage/v7/grid/offset-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..09088adcd03
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+<b>No offset for xs breakpoint, offset 1st column for sm and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col offset-sm="2">1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+    <ion-col>4</ion-col>
+    <ion-col>5</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>No offset for xs breakpoint, offset last 3 columns for md and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col offset-md="2">2</ion-col>
+    <ion-col offset-md="2">3</ion-col>
+    <ion-col offset-md="2">4</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col offset="6" offset-md="4" offset-lg="2">1</ion-col>
+    <ion-col offset="6" offset-md="4" offset-lg="2">2</ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/offset-responsive/demo.html b/static/usage/v7/grid/offset-responsive/demo.html
new file mode 100644
index 00000000000..07c5cdca37b
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/demo.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>No offset for xs breakpoint, offset 1st column for sm and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col offset-sm="2">1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+            <ion-col>4</ion-col>
+            <ion-col>5</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>No offset for xs breakpoint, offset last 3 columns for md and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col offset-md="2">2</ion-col>
+            <ion-col offset-md="2">3</ion-col>
+            <ion-col offset-md="2">4</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col offset="6" offset-md="4" offset-lg="2">1</ion-col>
+            <ion-col offset="6" offset-md="4" offset-lg="2">2</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/offset-responsive/index.md b/static/usage/v7/grid/offset-responsive/index.md
new file mode 100644
index 00000000000..8ed07e871b5
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/offset-responsive/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/grid/offset-responsive/javascript.md b/static/usage/v7/grid/offset-responsive/javascript.md
new file mode 100644
index 00000000000..f380aa503c0
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/javascript.md
@@ -0,0 +1,39 @@
+```html
+<b>No offset for xs breakpoint, offset 1st column for sm and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col offset-sm="2">1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+    <ion-col>4</ion-col>
+    <ion-col>5</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>No offset for xs breakpoint, offset last 3 columns for md and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col offset-md="2">2</ion-col>
+    <ion-col offset-md="2">3</ion-col>
+    <ion-col offset-md="2">4</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col offset="6" offset-md="4" offset-lg="2">1</ion-col>
+    <ion-col offset="6" offset-md="4" offset-lg="2">2</ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/offset-responsive/react/main_css.md b/static/usage/v7/grid/offset-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/offset-responsive/react/main_tsx.md b/static/usage/v7/grid/offset-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..482f957cde8
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/react/main_tsx.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <b>No offset for xs breakpoint, offset 1st column for sm and up</b>
+      <IonGrid>
+        <IonRow>
+          <IonCol offset-sm="2">1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
+          <IonCol>4</IonCol>
+          <IonCol>5</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>No offset for xs breakpoint, offset last 3 columns for md and up</b>
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol offset-md="2">2</IonCol>
+          <IonCol offset-md="2">3</IonCol>
+          <IonCol offset-md="2">4</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up</b>
+      <IonGrid>
+        <IonRow>
+          <IonCol offset="6" offset-md="4" offset-lg="2">1</IonCol>
+          <IonCol offset="6" offset-md="4" offset-lg="2">2</IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/offset-responsive/vue.md b/static/usage/v7/grid/offset-responsive/vue.md
new file mode 100644
index 00000000000..ca540bee471
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/vue.md
@@ -0,0 +1,50 @@
+```html
+<template>
+  <b>No offset for xs breakpoint, offset 1st column for sm and up</b>
+  <ion-grid>
+    <ion-row>
+      <ion-col offset-sm="2">1</ion-col>
+      <ion-col>2</ion-col>
+      <ion-col>3</ion-col>
+      <ion-col>4</ion-col>
+      <ion-col>5</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>No offset for xs breakpoint, offset last 3 columns for md and up</b>
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col offset-md="2">2</ion-col>
+      <ion-col offset-md="2">3</ion-col>
+      <ion-col offset-md="2">4</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up</b>
+  <ion-grid>
+    <ion-row>
+      <ion-col offset="6" offset-md="4" offset-lg="2">1</ion-col>
+      <ion-col offset="6" offset-md="4" offset-lg="2">2</ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/offset/angular/example_component_css.md b/static/usage/v7/grid/offset/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/offset/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/offset/angular/example_component_html.md b/static/usage/v7/grid/offset/angular/example_component_html.md
new file mode 100644
index 00000000000..66e044507a8
--- /dev/null
+++ b/static/usage/v7/grid/offset/angular/example_component_html.md
@@ -0,0 +1,29 @@
+```html
+<b>Column 2 has <code>offset</code> set to <code>"3"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col offset="3">2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 5 has <code>offset</code> set to <code>"2"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+    <ion-col>4</ion-col>
+    <ion-col offset="2">5</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 1 has <code>offset</code> set to <code>"4"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="2" offset="4">1</ion-col>
+    <ion-col size="2">2</ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/offset/demo.html b/static/usage/v7/grid/offset/demo.html
new file mode 100644
index 00000000000..876e4f9acf1
--- /dev/null
+++ b/static/usage/v7/grid/offset/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Column 2 has <code>offset</code> set to <code>"3"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col offset="3">2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 5 has <code>offset</code> set to <code>"2"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+            <ion-col>4</ion-col>
+            <ion-col offset="2">5</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 1 has <code>offset</code> set to <code>"4"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="2" offset="4">1</ion-col>
+            <ion-col size="2">2</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/offset/index.md b/static/usage/v7/grid/offset/index.md
new file mode 100644
index 00000000000..27a55412d53
--- /dev/null
+++ b/static/usage/v7/grid/offset/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/offset/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/v7/grid/offset/javascript.md b/static/usage/v7/grid/offset/javascript.md
new file mode 100644
index 00000000000..dcb717dd8d2
--- /dev/null
+++ b/static/usage/v7/grid/offset/javascript.md
@@ -0,0 +1,38 @@
+```html
+<b>Column 2 has <code>offset</code> set to <code>"3"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col offset="3">2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 5 has <code>offset</code> set to <code>"2"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+    <ion-col>4</ion-col>
+    <ion-col offset="2">5</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 1 has <code>offset</code> set to <code>"4"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="2" offset="4">1</ion-col>
+    <ion-col size="2">2</ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/offset/react/main_css.md b/static/usage/v7/grid/offset/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/offset/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/offset/react/main_tsx.md b/static/usage/v7/grid/offset/react/main_tsx.md
new file mode 100644
index 00000000000..99add2f8a44
--- /dev/null
+++ b/static/usage/v7/grid/offset/react/main_tsx.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <b>Column 2 has <code>offset</code> set to <code>"3"</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol offset="3">2</IonCol>
+          <IonCol>3</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Column 5 has <code>offset</code> set to <code>"2"</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
+          <IonCol>4</IonCol>
+          <IonCol offset="2">5</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Column 1 has <code>offset</code> set to <code>"4"</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol size="2" offset="4">1</IonCol>
+          <IonCol size="2">2</IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/offset/vue.md b/static/usage/v7/grid/offset/vue.md
new file mode 100644
index 00000000000..1a69ea6e061
--- /dev/null
+++ b/static/usage/v7/grid/offset/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <b>Column 2 has <code>offset</code> set to <code>"3"</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col offset="3">2</ion-col>
+      <ion-col>3</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Column 5 has <code>offset</code> set to <code>"2"</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col>2</ion-col>
+      <ion-col>3</ion-col>
+      <ion-col>4</ion-col>
+      <ion-col offset="2">5</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Column 1 has <code>offset</code> set to <code>"4"</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="2" offset="4">1</ion-col>
+      <ion-col size="2">2</ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/angular/example_component_css.md b/static/usage/v7/grid/push-pull-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/angular/example_component_html.md b/static/usage/v7/grid/push-pull-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..4e67838643e
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/angular/example_component_html.md
@@ -0,0 +1,31 @@
+```html
+<b>No change for xs breakpoint, push 1st column & pull 2nd column for sm and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col push-sm="6">1</ion-col>
+    <ion-col pull-sm="6">2</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>No change for xs breakpoint, push middle columns & pull last column for md and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col push-md="3">2</ion-col>
+    <ion-col push-md="3">3</ion-col>
+    <ion-col pull-md="6">4</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col push="6" push-lg="10">1</ion-col>
+    <ion-col push="6" push-lg="6">2</ion-col>
+    <ion-col push="6" push-lg="2">3</ion-col>
+    <ion-col pull="6" pull-lg="2">4</ion-col>
+    <ion-col pull="6" pull-lg="6">5</ion-col>
+    <ion-col pull="6" pull-lg="10">6</ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/demo.html b/static/usage/v7/grid/push-pull-responsive/demo.html
new file mode 100644
index 00000000000..aa956b2c1b0
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/demo.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>No change for xs breakpoint, push 1st column & pull 2nd column for sm and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col push-sm="6">1</ion-col>
+            <ion-col pull-sm="6">2</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>No change for xs breakpoint, push middle columns & pull last column for md and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col push-md="3">2</ion-col>
+            <ion-col push-md="3">3</ion-col>
+            <ion-col pull-md="6">4</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col push="6" push-lg="10">1</ion-col>
+            <ion-col push="6" push-lg="6">2</ion-col>
+            <ion-col push="6" push-lg="2">3</ion-col>
+            <ion-col pull="6" pull-lg="2">4</ion-col>
+            <ion-col pull="6" pull-lg="6">5</ion-col>
+            <ion-col pull="6" pull-lg="10">6</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/push-pull-responsive/index.md b/static/usage/v7/grid/push-pull-responsive/index.md
new file mode 100644
index 00000000000..cd608eaae70
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/push-pull-responsive/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/v7/grid/push-pull-responsive/javascript.md b/static/usage/v7/grid/push-pull-responsive/javascript.md
new file mode 100644
index 00000000000..05c03f1def8
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/javascript.md
@@ -0,0 +1,40 @@
+```html
+<b>No change for xs breakpoint, push 1st column & pull 2nd column for sm and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col push-sm="6">1</ion-col>
+    <ion-col pull-sm="6">2</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>No change for xs breakpoint, push middle columns & pull last column for md and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col push-md="3">2</ion-col>
+    <ion-col push-md="3">3</ion-col>
+    <ion-col pull-md="6">4</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col push="6" push-lg="10">1</ion-col>
+    <ion-col push="6" push-lg="6">2</ion-col>
+    <ion-col push="6" push-lg="2">3</ion-col>
+    <ion-col pull="6" pull-lg="2">4</ion-col>
+    <ion-col pull="6" pull-lg="6">5</ion-col>
+    <ion-col pull="6" pull-lg="10">6</ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/react/main_css.md b/static/usage/v7/grid/push-pull-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..3f6e2879e08
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <b>No change for xs breakpoint, push 1st column & pull 2nd column for sm and up</b>
+      <IonGrid>
+        <IonRow>
+          <IonCol push-sm="6">1</IonCol>
+          <IonCol pull-sm="6">2</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>No change for xs breakpoint, push middle columns & pull last column for md and up</b>
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol push-md="3">2</IonCol>
+          <IonCol push-md="3">3</IonCol>
+          <IonCol pull-md="6">4</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up</b>
+      <IonGrid>
+        <IonRow>
+          <IonCol push="6" push-lg="10">1</IonCol>
+          <IonCol push="6" push-lg="6">2</IonCol>
+          <IonCol push="6" push-lg="2">3</IonCol>
+          <IonCol pull="6" pull-lg="2">4</IonCol>
+          <IonCol pull="6" pull-lg="6">5</IonCol>
+          <IonCol pull="6" pull-lg="10">6</IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/vue.md b/static/usage/v7/grid/push-pull-responsive/vue.md
new file mode 100644
index 00000000000..82015e52758
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/vue.md
@@ -0,0 +1,51 @@
+```html
+<template>
+  <b>No change for xs breakpoint, push 1st column & pull 2nd column for sm and up</b>
+  <ion-grid>
+    <ion-row>
+      <ion-col push-sm="6">1</ion-col>
+      <ion-col pull-sm="6">2</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>No change for xs breakpoint, push middle columns & pull last column for md and up</b>
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col push-md="3">2</ion-col>
+      <ion-col push-md="3">3</ion-col>
+      <ion-col pull-md="6">4</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up</b>
+  <ion-grid>
+    <ion-row>
+      <ion-col push="6" push-lg="10">1</ion-col>
+      <ion-col push="6" push-lg="6">2</ion-col>
+      <ion-col push="6" push-lg="2">3</ion-col>
+      <ion-col pull="6" pull-lg="2">4</ion-col>
+      <ion-col pull="6" pull-lg="6">5</ion-col>
+      <ion-col pull="6" pull-lg="10">6</ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/push-pull/angular/example_component_css.md b/static/usage/v7/grid/push-pull/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/push-pull/angular/example_component_html.md b/static/usage/v7/grid/push-pull/angular/example_component_html.md
new file mode 100644
index 00000000000..cb8190ef9e9
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+<b>Column 1 has <code>push</code> set to <code>"4"</code> and column 2 has <code>pull</code> set to <code>"4"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col push="4">1</ion-col>
+    <ion-col pull="4">2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 2 has <code>push</code> set to <code>"4"</code> and column 3 & 4 have <code>pull</code> set to <code>"2"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col push="4">2</ion-col>
+    <ion-col pull="2">3</ion-col>
+    <ion-col pull="2">4</ion-col>
+    <ion-col>5</ion-col>
+    <ion-col>6</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 1 has <code>push</code> set to <code>"3"</code> and column 2 has <code>pull</code> set to <code>"9"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="9" push="3">1</ion-col>
+    <ion-col size="3" pull="9">2</ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/push-pull/demo.html b/static/usage/v7/grid/push-pull/demo.html
new file mode 100644
index 00000000000..b34be1bb39d
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/demo.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Column 1 has <code>push</code> set to <code>"4"</code> and column 2 has <code>pull</code> set to
+          <code>"4"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col push="4">1</ion-col>
+            <ion-col pull="4">2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 2 has <code>push</code> set to <code>"4"</code> and column 3 & 4 have <code>pull</code> set to
+          <code>"2"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col push="4">2</ion-col>
+            <ion-col pull="2">3</ion-col>
+            <ion-col pull="2">4</ion-col>
+            <ion-col>5</ion-col>
+            <ion-col>6</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 1 has <code>push</code> set to <code>"3"</code> and column 2 has <code>pull</code> set to
+          <code>"9"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="9" push="3">1</ion-col>
+            <ion-col size="3" pull="9">2</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/push-pull/index.md b/static/usage/v7/grid/push-pull/index.md
new file mode 100644
index 00000000000..a723dfd08f1
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/push-pull/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/v7/grid/push-pull/javascript.md b/static/usage/v7/grid/push-pull/javascript.md
new file mode 100644
index 00000000000..6dca0e83ec4
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/javascript.md
@@ -0,0 +1,39 @@
+```html
+<b>Column 1 has <code>push</code> set to <code>"4"</code> and column 2 has <code>pull</code> set to <code>"4"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col push="4">1</ion-col>
+    <ion-col pull="4">2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 2 has <code>push</code> set to <code>"4"</code> and column 3 & 4 have <code>pull</code> set to <code>"2"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col push="4">2</ion-col>
+    <ion-col pull="2">3</ion-col>
+    <ion-col pull="2">4</ion-col>
+    <ion-col>5</ion-col>
+    <ion-col>6</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 1 has <code>push</code> set to <code>"3"</code> and column 2 has <code>pull</code> set to <code>"9"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="9" push="3">1</ion-col>
+    <ion-col size="3" pull="9">2</ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/push-pull/react/main_css.md b/static/usage/v7/grid/push-pull/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/push-pull/react/main_tsx.md b/static/usage/v7/grid/push-pull/react/main_tsx.md
new file mode 100644
index 00000000000..6b087b72b77
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/react/main_tsx.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <b>Column 1 has <code>push</code> set to <code>"4"</code> and column 2 has <code>pull</code> set to <code>"4"</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol push="4">1</IonCol>
+          <IonCol pull="4">2</IonCol>
+          <IonCol>3</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Column 2 has <code>push</code> set to <code>"4"</code> and column 3 & 4 have <code>pull</code> set to <code>"2"</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol push="4">2</IonCol>
+          <IonCol pull="2">3</IonCol>
+          <IonCol pull="2">4</IonCol>
+          <IonCol>5</IonCol>
+          <IonCol>6</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Column 1 has <code>push</code> set to <code>"3"</code> and column 2 has <code>pull</code> set to <code>"9"</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol size="9" push="3">1</IonCol>
+          <IonCol size="3" pull="9">2</IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/push-pull/vue.md b/static/usage/v7/grid/push-pull/vue.md
new file mode 100644
index 00000000000..2775067f7a7
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/vue.md
@@ -0,0 +1,50 @@
+```html
+<template>
+  <b>Column 1 has <code>push</code> set to <code>"4"</code> and column 2 has <code>pull</code> set to <code>"4"</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col push="4">1</ion-col>
+      <ion-col pull="4">2</ion-col>
+      <ion-col>3</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Column 2 has <code>push</code> set to <code>"4"</code> and column 3 & 4 have <code>pull</code> set to <code>"2"</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col push="4">2</ion-col>
+      <ion-col pull="2">3</ion-col>
+      <ion-col pull="2">4</ion-col>
+      <ion-col>5</ion-col>
+      <ion-col>6</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Column 1 has <code>push</code> set to <code>"3"</code> and column 2 has <code>pull</code> set to <code>"9"</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="9" push="3">1</ion-col>
+      <ion-col size="3" pull="9">2</ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/size-auto/angular/example_component_css.md b/static/usage/v7/grid/size-auto/angular/example_component_css.md
new file mode 100644
index 00000000000..be364843a89
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+}
+```
diff --git a/static/usage/v7/grid/size-auto/angular/example_component_html.md b/static/usage/v7/grid/size-auto/angular/example_component_html.md
new file mode 100644
index 00000000000..fc4515ea984
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/angular/example_component_html.md
@@ -0,0 +1,34 @@
+```html
+<b>Column 1 has <code>size</code> set to <code>"auto"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="auto">1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 3 contains an input and has <code>size</code> set to <code>"auto"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col size="auto">
+      <ion-input placeholder="3"></ion-input>
+    </ion-col>
+    <ion-col>4</ion-col>
+    <ion-col>5</ion-col>
+    <ion-col>6</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 2 has <code>size</code> set to <code>"auto"</code> and a defined width</b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col size="auto">
+      <div style="width: 150px">2</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/size-auto/demo.html b/static/usage/v7/grid/size-auto/demo.html
new file mode 100644
index 00000000000..364d5db3c9a
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Column 1 has <code>size</code> set to <code>"auto"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="auto">1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 3 contains an input and has <code>size</code> set to <code>"auto"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col size="auto">
+              <ion-input placeholder="3"></ion-input>
+            </ion-col>
+            <ion-col>4</ion-col>
+            <ion-col>5</ion-col>
+            <ion-col>6</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Column 2 has <code>size</code> set to <code>"auto"</code> and a defined width</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col size="auto">
+              <div style="width: 150px">2</div>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/size-auto/index.md b/static/usage/v7/grid/size-auto/index.md
new file mode 100644
index 00000000000..2da3611d3be
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/size-auto/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/grid/size-auto/javascript.md b/static/usage/v7/grid/size-auto/javascript.md
new file mode 100644
index 00000000000..7f6619df1f5
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/javascript.md
@@ -0,0 +1,47 @@
+```html
+<b>Column 1 has <code>size</code> set to <code>"auto"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="auto">1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 3 contains an input and has <code>size</code> set to <code>"auto"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col size="auto">
+      <ion-input placeholder="3"></ion-input>
+    </ion-col>
+    <ion-col>4</ion-col>
+    <ion-col>5</ion-col>
+    <ion-col>6</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Column 2 has <code>size</code> set to <code>"auto"</code> and a defined width</b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col size="auto">
+      <div style="width: 150px">2</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-col {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/size-auto/react/main_css.md b/static/usage/v7/grid/size-auto/react/main_css.md
new file mode 100644
index 00000000000..be364843a89
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+ion-col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+}
+```
diff --git a/static/usage/v7/grid/size-auto/react/main_tsx.md b/static/usage/v7/grid/size-auto/react/main_tsx.md
new file mode 100644
index 00000000000..15a19d04abe
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/react/main_tsx.md
@@ -0,0 +1,46 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <b>Column 1 has <code>size</code> set to <code>"auto"</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol size="auto">1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Column 3 contains an input and has <code>size</code> set to <code>"auto"</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol size="auto">
+            <IonInput placeholder="3"></IonInput>
+          </IonCol>
+          <IonCol>4</IonCol>
+          <IonCol>5</IonCol>
+          <IonCol>6</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Column 2 has <code>size</code> set to <code>"auto"</code> and a defined width</b>
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol size="auto">
+            <div style={{width: "150px"}}>2</div>
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/size-auto/vue.md b/static/usage/v7/grid/size-auto/vue.md
new file mode 100644
index 00000000000..f410272730d
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/vue.md
@@ -0,0 +1,58 @@
+```html
+<template>
+  <b>Column 1 has <code>size</code> set to <code>"auto"</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="auto">1</ion-col>
+      <ion-col>2</ion-col>
+      <ion-col>3</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Column 3 contains an input and has <code>size</code> set to <code>"auto"</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col>2</ion-col>
+      <ion-col size="auto">
+        <ion-input placeholder="3"></ion-input>
+      </ion-col>
+      <ion-col>4</ion-col>
+      <ion-col>5</ion-col>
+      <ion-col>6</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Column 2 has <code>size</code> set to <code>"auto"</code> and a defined width</b>
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col size="auto">
+        <div style="width: 150px">2</div>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonInput, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-col {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/size-responsive/angular/example_component_css.md b/static/usage/v7/grid/size-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/size-responsive/angular/example_component_html.md b/static/usage/v7/grid/size-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..62f96cb5800
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+<b>Stacked for xs breakpoint, equal width for sm and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="12" size-sm="3">1</ion-col>
+    <ion-col size="12" size-sm="3">2</ion-col>
+    <ion-col size="12" size-sm="3">3</ion-col>
+    <ion-col size="12" size-sm="3">4</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Equal width until md breakpoint, last column takes full width for md and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col size-md="6">1</ion-col>
+    <ion-col size-md="6">2</ion-col>
+    <ion-col size-md="12">3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>2 per row until md breakpoint, 3 per row for md, equal width for lg and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="6" size-md="4" size-lg="2">1</ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">2</ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">3</ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">4</ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">5</ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">6</ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/size-responsive/demo.html b/static/usage/v7/grid/size-responsive/demo.html
new file mode 100644
index 00000000000..9176b7070a6
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/demo.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Stacked for xs breakpoint, equal width for sm and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="12" size-sm="3">1</ion-col>
+            <ion-col size="12" size-sm="3">2</ion-col>
+            <ion-col size="12" size-sm="3">3</ion-col>
+            <ion-col size="12" size-sm="3">4</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Equal width until md breakpoint, last column takes full width for md and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size-md="6">1</ion-col>
+            <ion-col size-md="6">2</ion-col>
+            <ion-col size-md="12">3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>2 per row until md breakpoint, 3 per row for md, equal width for lg and up</b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="6" size-md="4" size-lg="2">1</ion-col>
+            <ion-col size="6" size-md="4" size-lg="2">2</ion-col>
+            <ion-col size="6" size-md="4" size-lg="2">3</ion-col>
+            <ion-col size="6" size-md="4" size-lg="2">4</ion-col>
+            <ion-col size="6" size-md="4" size-lg="2">5</ion-col>
+            <ion-col size="6" size-md="4" size-lg="2">6</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/size-responsive/index.md b/static/usage/v7/grid/size-responsive/index.md
new file mode 100644
index 00000000000..3c46f6ab5de
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/size-responsive/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/grid/size-responsive/javascript.md b/static/usage/v7/grid/size-responsive/javascript.md
new file mode 100644
index 00000000000..1b10d349bf4
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/javascript.md
@@ -0,0 +1,41 @@
+```html
+<b>Stacked for xs breakpoint, equal width for sm and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="12" size-sm="3">1</ion-col>
+    <ion-col size="12" size-sm="3">2</ion-col>
+    <ion-col size="12" size-sm="3">3</ion-col>
+    <ion-col size="12" size-sm="3">4</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Equal width until md breakpoint, last column takes full width for md and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col size-md="6">1</ion-col>
+    <ion-col size-md="6">2</ion-col>
+    <ion-col size-md="12">3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>2 per row until md breakpoint, 3 per row for md, equal width for lg and up</b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="6" size-md="4" size-lg="2">1</ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">2</ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">3</ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">4</ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">5</ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">6</ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/size-responsive/react/main_css.md b/static/usage/v7/grid/size-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/size-responsive/react/main_tsx.md b/static/usage/v7/grid/size-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..c27242fcf87
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/react/main_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <b>Stacked for xs breakpoint, equal width for sm and up</b>
+      <IonGrid>
+        <IonRow>
+          <IonCol size="12" size-sm="3">1</IonCol>
+          <IonCol size="12" size-sm="3">2</IonCol>
+          <IonCol size="12" size-sm="3">3</IonCol>
+          <IonCol size="12" size-sm="3">4</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Equal width until md breakpoint, last column takes full width for md and up</b>
+      <IonGrid>
+        <IonRow>
+          <IonCol size-md="6">1</IonCol>
+          <IonCol size-md="6">2</IonCol>
+          <IonCol size-md="12">3</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>2 per row until md breakpoint, 3 per row for md, equal width for lg and up</b>
+      <IonGrid>
+        <IonRow>
+          <IonCol size="6" size-md="4" size-lg="2">1</IonCol>
+          <IonCol size="6" size-md="4" size-lg="2">2</IonCol>
+          <IonCol size="6" size-md="4" size-lg="2">3</IonCol>
+          <IonCol size="6" size-md="4" size-lg="2">4</IonCol>
+          <IonCol size="6" size-md="4" size-lg="2">5</IonCol>
+          <IonCol size="6" size-md="4" size-lg="2">6</IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/size-responsive/vue.md b/static/usage/v7/grid/size-responsive/vue.md
new file mode 100644
index 00000000000..2762e9c4774
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/vue.md
@@ -0,0 +1,52 @@
+```html
+<template>
+  <b>Stacked for xs breakpoint, equal width for sm and up</b>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="12" size-sm="3">1</ion-col>
+      <ion-col size="12" size-sm="3">2</ion-col>
+      <ion-col size="12" size-sm="3">3</ion-col>
+      <ion-col size="12" size-sm="3">4</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Equal width until md breakpoint, last column takes full width for md and up</b>
+  <ion-grid>
+    <ion-row>
+      <ion-col size-md="6">1</ion-col>
+      <ion-col size-md="6">2</ion-col>
+      <ion-col size-md="12">3</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>2 per row until md breakpoint, 3 per row for md, equal width for lg and up</b>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="6" size-md="4" size-lg="2">1</ion-col>
+      <ion-col size="6" size-md="4" size-lg="2">2</ion-col>
+      <ion-col size="6" size-md="4" size-lg="2">3</ion-col>
+      <ion-col size="6" size-md="4" size-lg="2">4</ion-col>
+      <ion-col size="6" size-md="4" size-lg="2">5</ion-col>
+      <ion-col size="6" size-md="4" size-lg="2">6</ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/size/angular/example_component_css.md b/static/usage/v7/grid/size/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/size/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/size/angular/example_component_html.md b/static/usage/v7/grid/size/angular/example_component_html.md
new file mode 100644
index 00000000000..dc47b3de0dd
--- /dev/null
+++ b/static/usage/v7/grid/size/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+<b>Column 2 has <code>size</code> set to <code>"8"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col size="8">2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns 3 & 4 have <code>size</code> set to <code>"3"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col size="3">3</ion-col>
+    <ion-col size="3">4</ion-col>
+    <ion-col>5</ion-col>
+    <ion-col>6</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns 1 & 2 have <code>size</code> set to <code>"4"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="4">1</ion-col>
+    <ion-col size="4">2</ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/size/demo.html b/static/usage/v7/grid/size/demo.html
new file mode 100644
index 00000000000..4d16f74065e
--- /dev/null
+++ b/static/usage/v7/grid/size/demo.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Column 2 has <code>size</code> set to <code>"8"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col size="8">2</ion-col>
+            <ion-col>3</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns 3 & 4 have <code>size</code> set to <code>"3"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col>1</ion-col>
+            <ion-col>2</ion-col>
+            <ion-col size="3">3</ion-col>
+            <ion-col size="3">4</ion-col>
+            <ion-col>5</ion-col>
+            <ion-col>6</ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns 1 & 2 have <code>size</code> set to <code>"4"</code></b>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="4">1</ion-col>
+            <ion-col size="4">2</ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/size/index.md b/static/usage/v7/grid/size/index.md
new file mode 100644
index 00000000000..132f75c639a
--- /dev/null
+++ b/static/usage/v7/grid/size/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/size/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/v7/grid/size/javascript.md b/static/usage/v7/grid/size/javascript.md
new file mode 100644
index 00000000000..576234e746e
--- /dev/null
+++ b/static/usage/v7/grid/size/javascript.md
@@ -0,0 +1,39 @@
+```html
+<b>Column 2 has <code>size</code> set to <code>"8"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col size="8">2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns 3 & 4 have <code>size</code> set to <code>"3"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col>1</ion-col>
+    <ion-col>2</ion-col>
+    <ion-col size="3">3</ion-col>
+    <ion-col size="3">4</ion-col>
+    <ion-col>5</ion-col>
+    <ion-col>6</ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns 1 & 2 have <code>size</code> set to <code>"4"</code></b>
+<ion-grid>
+  <ion-row>
+    <ion-col size="4">1</ion-col>
+    <ion-col size="4">2</ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/size/react/main_css.md b/static/usage/v7/grid/size/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/size/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/size/react/main_tsx.md b/static/usage/v7/grid/size/react/main_tsx.md
new file mode 100644
index 00000000000..3669d57806d
--- /dev/null
+++ b/static/usage/v7/grid/size/react/main_tsx.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <b>Column 2 has <code>size</code> set to <code>"8"</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol size="8">2</IonCol>
+          <IonCol>3</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Columns 3 & 4 have <code>size</code> set to <code>"3"</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol size="3">3</IonCol>
+          <IonCol size="3">4</IonCol>
+          <IonCol>5</IonCol>
+          <IonCol>6</IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Columns 1 & 2 have <code>size</code> set to <code>"4"</code></b>
+      <IonGrid>
+        <IonRow>
+          <IonCol size="4">1</IonCol>
+          <IonCol size="4">2</IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/size/vue.md b/static/usage/v7/grid/size/vue.md
new file mode 100644
index 00000000000..14baef9e1c4
--- /dev/null
+++ b/static/usage/v7/grid/size/vue.md
@@ -0,0 +1,50 @@
+```html
+<template>
+  <b>Column 2 has <code>size</code> set to <code>"8"</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col size="8">2</ion-col>
+      <ion-col>3</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Columns 3 & 4 have <code>size</code> set to <code>"3"</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col>1</ion-col>
+      <ion-col>2</ion-col>
+      <ion-col size="3">3</ion-col>
+      <ion-col size="3">4</ion-col>
+      <ion-col>5</ion-col>
+      <ion-col>6</ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Columns 1 & 2 have <code>size</code> set to <code>"4"</code></b>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="4">1</ion-col>
+      <ion-col size="4">2</ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/vertical-alignment/angular/example_component_css.md b/static/usage/v7/grid/vertical-alignment/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/vertical-alignment/angular/example_component_html.md b/static/usage/v7/grid/vertical-alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..2b4e1b42106
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/angular/example_component_html.md
@@ -0,0 +1,64 @@
+```html
+<b>Columns aligned at the top</b>
+<ion-grid>
+  <ion-row class="ion-align-items-start">
+    <ion-col>
+      1
+    </ion-col>
+    <ion-col>
+      2
+    </ion-col>
+    <ion-col>
+      3
+    </ion-col>
+    <ion-col>
+      4 <br />
+      # <br />
+      # <br />
+      # <br />
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned at the center</b>
+<ion-grid>
+  <ion-row class="ion-align-items-center">
+    <ion-col>
+      1
+    </ion-col>
+    <ion-col>
+      2
+    </ion-col>
+    <ion-col>
+      3
+    </ion-col>
+    <ion-col>
+      4 <br />
+      # <br />
+      # <br />
+      # <br />
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned at the bottom</b>
+<ion-grid>
+  <ion-row class="ion-align-items-end">
+    <ion-col>
+      1
+    </ion-col>
+    <ion-col>
+      2
+    </ion-col>
+    <ion-col>
+      3
+    </ion-col>
+    <ion-col>
+      4 <br />
+      # <br />
+      # <br />
+      # <br />
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
diff --git a/static/usage/v7/grid/vertical-alignment/demo.html b/static/usage/v7/grid/vertical-alignment/demo.html
new file mode 100644
index 00000000000..dd1388fcdbf
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/demo.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Grid</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-grid {
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    ion-col {
+      background-color: #135d54;
+      border: solid 1px #fff;
+      color: #fff;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <b>Columns aligned at the top</b>
+        <ion-grid>
+          <ion-row class="ion-align-items-start">
+            <ion-col>
+              1
+            </ion-col>
+            <ion-col>
+              2
+            </ion-col>
+            <ion-col>
+              3
+            </ion-col>
+            <ion-col>
+              4 <br />
+              # <br />
+              # <br />
+              # <br />
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned at the center</b>
+        <ion-grid>
+          <ion-row class="ion-align-items-center">
+            <ion-col>
+              1
+            </ion-col>
+            <ion-col>
+              2
+            </ion-col>
+            <ion-col>
+              3
+            </ion-col>
+            <ion-col>
+              4 <br />
+              # <br />
+              # <br />
+              # <br />
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <b>Columns aligned at the bottom</b>
+        <ion-grid>
+          <ion-row class="ion-align-items-end">
+            <ion-col>
+              1
+            </ion-col>
+            <ion-col>
+              2
+            </ion-col>
+            <ion-col>
+              3
+            </ion-col>
+            <ion-col>
+              4 <br />
+              # <br />
+              # <br />
+              # <br />
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/grid/vertical-alignment/index.md b/static/usage/v7/grid/vertical-alignment/index.md
new file mode 100644
index 00000000000..74d347e49a5
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/grid/vertical-alignment/demo.html"
+  size="400px"
+/>
diff --git a/static/usage/v7/grid/vertical-alignment/javascript.md b/static/usage/v7/grid/vertical-alignment/javascript.md
new file mode 100644
index 00000000000..9e7573ebbc6
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/javascript.md
@@ -0,0 +1,73 @@
+```html
+<b>Columns aligned at the top</b>
+<ion-grid>
+  <ion-row class="ion-align-items-start">
+    <ion-col>
+      1
+    </ion-col>
+    <ion-col>
+      2
+    </ion-col>
+    <ion-col>
+      3
+    </ion-col>
+    <ion-col>
+      4 <br />
+      # <br />
+      # <br />
+      # <br />
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned at the center</b>
+<ion-grid>
+  <ion-row class="ion-align-items-center">
+    <ion-col>
+      1
+    </ion-col>
+    <ion-col>
+      2
+    </ion-col>
+    <ion-col>
+      3
+    </ion-col>
+    <ion-col>
+      4 <br />
+      # <br />
+      # <br />
+      # <br />
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<b>Columns aligned at the bottom</b>
+<ion-grid>
+  <ion-row class="ion-align-items-end">
+    <ion-col>
+      1
+    </ion-col>
+    <ion-col>
+      2
+    </ion-col>
+    <ion-col>
+      3
+    </ion-col>
+    <ion-col>
+      4 <br />
+      # <br />
+      # <br />
+      # <br />
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<style>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/grid/vertical-alignment/react/main_css.md b/static/usage/v7/grid/vertical-alignment/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+  background-color: #135d54;
+  border: solid 1px #fff;
+  color: #fff;
+  text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/vertical-alignment/react/main_tsx.md b/static/usage/v7/grid/vertical-alignment/react/main_tsx.md
new file mode 100644
index 00000000000..d1dad060701
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/react/main_tsx.md
@@ -0,0 +1,76 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <b>Columns aligned at the top</b>
+      <IonGrid>
+        <IonRow class="ion-align-items-start">
+          <IonCol>
+            1
+          </IonCol>
+          <IonCol>
+            2
+          </IonCol>
+          <IonCol>
+            3
+          </IonCol>
+          <IonCol>
+            4 <br />
+            # <br />
+            # <br />
+            # <br />
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Columns aligned at the center</b>
+      <IonGrid>
+        <IonRow class="ion-align-items-center">
+          <IonCol>
+            1
+          </IonCol>
+          <IonCol>
+            2
+          </IonCol>
+          <IonCol>
+            3
+          </IonCol>
+          <IonCol>
+            4 <br />
+            # <br />
+            # <br />
+            # <br />
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+
+      <b>Columns aligned at the bottom</b>
+      <IonGrid>
+        <IonRow class="ion-align-items-end">
+          <IonCol>
+            1
+          </IonCol>
+          <IonCol>
+            2
+          </IonCol>
+          <IonCol>
+            3
+          </IonCol>
+          <IonCol>
+            4 <br />
+            # <br />
+            # <br />
+            # <br />
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/vertical-alignment/vue.md b/static/usage/v7/grid/vertical-alignment/vue.md
new file mode 100644
index 00000000000..f150f908eec
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/vue.md
@@ -0,0 +1,84 @@
+```html
+<template>
+  <b>Columns aligned at the top</b>
+  <ion-grid>
+    <ion-row class="ion-align-items-start">
+      <ion-col>
+        1
+      </ion-col>
+      <ion-col>
+        2
+      </ion-col>
+      <ion-col>
+        3
+      </ion-col>
+      <ion-col>
+        4 <br />
+        # <br />
+        # <br />
+        # <br />
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Columns aligned at the center</b>
+  <ion-grid>
+    <ion-row class="ion-align-items-center">
+      <ion-col>
+        1
+      </ion-col>
+      <ion-col>
+        2
+      </ion-col>
+      <ion-col>
+        3
+      </ion-col>
+      <ion-col>
+        4 <br />
+        # <br />
+        # <br />
+        # <br />
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <b>Columns aligned at the bottom</b>
+  <ion-grid>
+    <ion-row class="ion-align-items-end">
+      <ion-col>
+        1
+      </ion-col>
+      <ion-col>
+        2
+      </ion-col>
+      <ion-col>
+        3
+      </ion-col>
+      <ion-col>
+        4 <br />
+        # <br />
+        # <br />
+        # <br />
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<script lang="ts">
+  import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCol, IonGrid, IonRow },
+  });
+</script>
+
+<style scoped>
+  ion-col {
+    background-color: #135d54;
+    border: solid 1px #fff;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+```
diff --git a/static/usage/v7/header/basic/angular.md b/static/usage/v7/header/basic/angular.md
new file mode 100644
index 00000000000..9edf1a22f27
--- /dev/null
+++ b/static/usage/v7/header/basic/angular.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Content</h1>
+</ion-content>
+```
diff --git a/static/usage/v7/header/basic/demo.html b/static/usage/v7/header/basic/demo.html
new file mode 100644
index 00000000000..a6752caddb9
--- /dev/null
+++ b/static/usage/v7/header/basic/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Content</h1>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/header/basic/index.md b/static/usage/v7/header/basic/index.md
new file mode 100644
index 00000000000..1058c42ba41
--- /dev/null
+++ b/static/usage/v7/header/basic/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/header/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/header/basic/javascript.md b/static/usage/v7/header/basic/javascript.md
new file mode 100644
index 00000000000..9edf1a22f27
--- /dev/null
+++ b/static/usage/v7/header/basic/javascript.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Content</h1>
+</ion-content>
+```
diff --git a/static/usage/v7/header/basic/react.md b/static/usage/v7/header/basic/react.md
new file mode 100644
index 00000000000..0dd2df0474d
--- /dev/null
+++ b/static/usage/v7/header/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Header</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Content</h1>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/basic/vue.md b/static/usage/v7/header/basic/vue.md
new file mode 100644
index 00000000000..1bba4fdee2b
--- /dev/null
+++ b/static/usage/v7/header/basic/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Content</h1>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/header/condense/angular.md b/static/usage/v7/header/condense/angular.md
new file mode 100644
index 00000000000..46ac7fac8ea
--- /dev/null
+++ b/static/usage/v7/header/condense/angular.md
@@ -0,0 +1,38 @@
+```html
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <div class="ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+    <h2>Sea Turtle</h2>
+    <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+    <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+    <h2>Giraffe</h2>
+    <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+    <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+    <h2>Elephant</h2>
+    <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+    <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+    <h2>Dolphin</h2>
+    <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+  </div>
+</ion-content>
+```
diff --git a/static/usage/v7/header/condense/demo.html b/static/usage/v7/header/condense/demo.html
new file mode 100644
index 00000000000..caed21b4dcd
--- /dev/null
+++ b/static/usage/v7/header/condense/demo.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Header</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <div class="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+        <h2>Sea Turtle</h2>
+        <img alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.</p>
+
+        <h2>Giraffe</h2>
+        <img alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+          have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+        <h2>Elephant</h2>
+        <img alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.</p>
+
+        <h2>Dolphin</h2>
+        <img alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+          gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with
+          about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap
+          that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/header/condense/index.md b/static/usage/v7/header/condense/index.md
new file mode 100644
index 00000000000..8c98b26a1af
--- /dev/null
+++ b/static/usage/v7/header/condense/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/header/condense/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/header/condense/javascript.md b/static/usage/v7/header/condense/javascript.md
new file mode 100644
index 00000000000..95ac5731c47
--- /dev/null
+++ b/static/usage/v7/header/condense/javascript.md
@@ -0,0 +1,38 @@
+```html
+<ion-header translucent="true">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content fullscreen="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <div class="ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+    <h2>Sea Turtle</h2>
+    <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+    <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+    <h2>Giraffe</h2>
+    <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+    <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+    <h2>Elephant</h2>
+    <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+    <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+    <h2>Dolphin</h2>
+    <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+  </div>
+</ion-content>
+```
diff --git a/static/usage/v7/header/condense/react.md b/static/usage/v7/header/condense/react.md
new file mode 100644
index 00000000000..0f68407aff0
--- /dev/null
+++ b/static/usage/v7/header/condense/react.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonHeader translucent={true}>
+        <IonToolbar>
+          <IonTitle>Header</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen={true}>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Header</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <div className="ion-padding">
+          <h1>Animal Facts</h1>
+
+          <h2>Rhinoceros</h2>
+          <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+          <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+          <h2>Sea Turtle</h2>
+          <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+          <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+          <h2>Giraffe</h2>
+          <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+          <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+          <h2>Elephant</h2>
+          <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+          <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+          <h2>Dolphin</h2>
+          <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+          <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+        </div>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/condense/vue.md b/static/usage/v7/header/condense/vue.md
new file mode 100644
index 00000000000..c3f354d010f
--- /dev/null
+++ b/static/usage/v7/header/condense/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <ion-header :translucent="true">
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content :fullscreen="true">
+    <ion-header collapse="condense">
+      <ion-toolbar>
+        <ion-title size="large">Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <div class="ion-padding">
+      <h1>Animal Facts</h1>
+
+      <h2>Rhinoceros</h2>
+      <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+      <h2>Sea Turtle</h2>
+      <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+      <h2>Giraffe</h2>
+      <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+      <h2>Elephant</h2>
+      <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+      <h2>Dolphin</h2>
+      <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+    </div>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/header/custom-scroll-target/angular/example_component_css.md b/static/usage/v7/header/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..b54ba9d2afa
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+<ion-header collapse="fade">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content [scrollY]="false">
+  <div class="ion-content-scroll-host ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+    <h2>Sea Turtle</h2>
+    <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+    <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+    <h2>Giraffe</h2>
+    <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+    <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+    <h2>Elephant</h2>
+    <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+    <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+    <h2>Dolphin</h2>
+    <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+  </div>
+</ion-content>
+```
diff --git a/static/usage/v7/header/custom-scroll-target/demo.html b/static/usage/v7/header/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..337bd2ece48
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .ion-content-scroll-host {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header collapse="fade">
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content scroll-y="false">
+      <div class="ion-content-scroll-host ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+        <h2>Sea Turtle</h2>
+        <img alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.</p>
+
+        <h2>Giraffe</h2>
+        <img alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+          have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+        <h2>Elephant</h2>
+        <img alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.</p>
+
+        <h2>Dolphin</h2>
+        <img alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+          gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with
+          about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap
+          that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/header/custom-scroll-target/index.md b/static/usage/v7/header/custom-scroll-target/index.md
new file mode 100644
index 00000000000..8e1dbed26df
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/header/custom-scroll-target/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/header/custom-scroll-target/javascript.md b/static/usage/v7/header/custom-scroll-target/javascript.md
new file mode 100644
index 00000000000..64077515677
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/javascript.md
@@ -0,0 +1,43 @@
+```html
+<ion-header collapse="fade">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content scroll-y="false">
+  <div class="ion-content-scroll-host ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+    <h2>Sea Turtle</h2>
+    <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+    <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+    <h2>Giraffe</h2>
+    <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+    <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+    <h2>Elephant</h2>
+    <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+    <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+    <h2>Dolphin</h2>
+    <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+</ion-content>
+
+<style>
+  .ion-content-scroll-host {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+</style>
+```
diff --git a/static/usage/v7/header/custom-scroll-target/react/main_css.md b/static/usage/v7/header/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/header/custom-scroll-target/react/main_tsx.md b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..bf6d13f26ec
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonHeader collapse="fade">
+        <IonToolbar>
+          <IonTitle>Header</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent scrollY={false}>
+        <div className="ion-content-scroll-host ion-padding">
+          <h1>Animal Facts</h1>
+
+          <h2>Rhinoceros</h2>
+          <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+          <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+          <h2>Sea Turtle</h2>
+          <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+          <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+          <h2>Giraffe</h2>
+          <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+          <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+          <h2>Elephant</h2>
+          <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+          <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+          <h2>Dolphin</h2>
+          <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+          <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+        </div>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/custom-scroll-target/vue.md b/static/usage/v7/header/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..73565d9ab18
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/vue.md
@@ -0,0 +1,55 @@
+```html
+<template>
+  <ion-header collapse="fade">
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content :scroll-y="false">
+    <div class="ion-content-scroll-host ion-padding">
+      <h1>Animal Facts</h1>
+
+      <h2>Rhinoceros</h2>
+      <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+      <h2>Sea Turtle</h2>
+      <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+      <h2>Giraffe</h2>
+      <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+      <h2>Elephant</h2>
+      <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+      <h2>Dolphin</h2>
+      <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+    </div>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonTitle, IonToolbar },
+  });
+</script>
+
+<style scoped>
+  .ion-content-scroll-host {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+</style>
+```
diff --git a/static/usage/v7/header/fade/angular.md b/static/usage/v7/header/fade/angular.md
new file mode 100644
index 00000000000..72e55ffc58c
--- /dev/null
+++ b/static/usage/v7/header/fade/angular.md
@@ -0,0 +1,30 @@
+```html
+<ion-header collapse="fade">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+  <h2>Sea Turtle</h2>
+  <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+  <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+  <h2>Giraffe</h2>
+  <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+  <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+  <h2>Elephant</h2>
+  <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+  <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+  <h2>Dolphin</h2>
+  <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/header/fade/demo.html b/static/usage/v7/header/fade/demo.html
new file mode 100644
index 00000000000..06b24cc2eb4
--- /dev/null
+++ b/static/usage/v7/header/fade/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header collapse="fade">
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Animal Facts</h1>
+
+      <h2>Rhinoceros</h2>
+      <img alt="rhino standing near grass"
+        src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+        the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+        the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+        horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+      <h2>Sea Turtle</h2>
+      <img alt="brown sea turtle in water"
+        src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+        turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+        adapted for swimming, so they are vulnerable while on land.</p>
+
+      <h2>Giraffe</h2>
+      <img alt="giraffe sticking its tongue out"
+        src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+        a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+        the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+      <h2>Elephant</h2>
+      <img alt="two grey elephants on grass plains during sunset"
+        src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+        long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+        suck up water for drinking or bathing.</p>
+
+      <h2>Dolphin</h2>
+      <img alt="black and white dolphin in water"
+        src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+        blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+        100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+        to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/header/fade/index.md b/static/usage/v7/header/fade/index.md
new file mode 100644
index 00000000000..797016cf1bb
--- /dev/null
+++ b/static/usage/v7/header/fade/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/header/fade/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/header/fade/javascript.md b/static/usage/v7/header/fade/javascript.md
new file mode 100644
index 00000000000..72e55ffc58c
--- /dev/null
+++ b/static/usage/v7/header/fade/javascript.md
@@ -0,0 +1,30 @@
+```html
+<ion-header collapse="fade">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+  <h2>Sea Turtle</h2>
+  <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+  <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+  <h2>Giraffe</h2>
+  <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+  <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+  <h2>Elephant</h2>
+  <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+  <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+  <h2>Dolphin</h2>
+  <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/header/fade/react.md b/static/usage/v7/header/fade/react.md
new file mode 100644
index 00000000000..453f32c4db4
--- /dev/null
+++ b/static/usage/v7/header/fade/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonHeader collapse="fade">
+        <IonToolbar>
+          <IonTitle>Header</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+        <h2>Sea Turtle</h2>
+        <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+        <h2>Giraffe</h2>
+        <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+        <h2>Elephant</h2>
+        <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+        <h2>Dolphin</h2>
+        <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/fade/vue.md b/static/usage/v7/header/fade/vue.md
new file mode 100644
index 00000000000..44327bf809c
--- /dev/null
+++ b/static/usage/v7/header/fade/vue.md
@@ -0,0 +1,41 @@
+```html
+<template>
+  <ion-header collapse="fade">
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+    <h2>Sea Turtle</h2>
+    <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+    <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+    <h2>Giraffe</h2>
+    <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+    <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+    <h2>Elephant</h2>
+    <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+    <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+    <h2>Dolphin</h2>
+    <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/header/no-border/angular.md b/static/usage/v7/header/no-border/angular.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/v7/header/no-border/angular.md
@@ -0,0 +1,10 @@
+```html
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Content</h1>
+</ion-content>
+```
diff --git a/static/usage/v7/header/no-border/demo.html b/static/usage/v7/header/no-border/demo.html
new file mode 100644
index 00000000000..9e8356fe253
--- /dev/null
+++ b/static/usage/v7/header/no-border/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header class="ion-no-border">
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Content</h1>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/header/no-border/index.md b/static/usage/v7/header/no-border/index.md
new file mode 100644
index 00000000000..e7300fb2610
--- /dev/null
+++ b/static/usage/v7/header/no-border/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/header/no-border/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/header/no-border/javascript.md b/static/usage/v7/header/no-border/javascript.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/v7/header/no-border/javascript.md
@@ -0,0 +1,10 @@
+```html
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Content</h1>
+</ion-content>
+```
diff --git a/static/usage/v7/header/no-border/react.md b/static/usage/v7/header/no-border/react.md
new file mode 100644
index 00000000000..2eb14f6882f
--- /dev/null
+++ b/static/usage/v7/header/no-border/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonHeader className="ion-no-border">
+        <IonToolbar>
+          <IonTitle>Header</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Content</h1>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/no-border/vue.md b/static/usage/v7/header/no-border/vue.md
new file mode 100644
index 00000000000..a5583fb06d1
--- /dev/null
+++ b/static/usage/v7/header/no-border/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-header class="ion-no-border">
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Content</h1>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/header/translucent/angular.md b/static/usage/v7/header/translucent/angular.md
new file mode 100644
index 00000000000..f2779c7d5c9
--- /dev/null
+++ b/static/usage/v7/header/translucent/angular.md
@@ -0,0 +1,30 @@
+```html
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true" class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+  <h2>Sea Turtle</h2>
+  <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+  <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+  <h2>Giraffe</h2>
+  <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+  <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+  <h2>Elephant</h2>
+  <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+  <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+  <h2>Dolphin</h2>
+  <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/header/translucent/demo.html b/static/usage/v7/header/translucent/demo.html
new file mode 100644
index 00000000000..bea9d3ecba1
--- /dev/null
+++ b/static/usage/v7/header/translucent/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true" class="ion-padding">
+      <h1>Animal Facts</h1>
+
+      <h2>Rhinoceros</h2>
+      <img alt="rhino standing near grass"
+        src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+        the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+        the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+        horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+      <h2>Sea Turtle</h2>
+      <img alt="brown sea turtle in water"
+        src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+      <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+        turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+        adapted for swimming, so they are vulnerable while on land.</p>
+
+      <h2>Giraffe</h2>
+      <img alt="giraffe sticking its tongue out"
+        src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+      <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+        a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+        the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+      <h2>Elephant</h2>
+      <img alt="two grey elephants on grass plains during sunset"
+        src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+      <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+        long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+        suck up water for drinking or bathing.</p>
+
+      <h2>Dolphin</h2>
+      <img alt="black and white dolphin in water"
+        src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+      <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+        blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+        100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+        to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/header/translucent/index.md b/static/usage/v7/header/translucent/index.md
new file mode 100644
index 00000000000..17a491b9e7a
--- /dev/null
+++ b/static/usage/v7/header/translucent/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/header/translucent/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/header/translucent/javascript.md b/static/usage/v7/header/translucent/javascript.md
new file mode 100644
index 00000000000..e03deeda2a5
--- /dev/null
+++ b/static/usage/v7/header/translucent/javascript.md
@@ -0,0 +1,30 @@
+```html
+<ion-header translucent="true">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content fullscreen="true" class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+  <h2>Sea Turtle</h2>
+  <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+  <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+  <h2>Giraffe</h2>
+  <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+  <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+  <h2>Elephant</h2>
+  <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+  <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+  <h2>Dolphin</h2>
+  <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+  <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/header/translucent/react.md b/static/usage/v7/header/translucent/react.md
new file mode 100644
index 00000000000..862211d839b
--- /dev/null
+++ b/static/usage/v7/header/translucent/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonHeader translucent={true}>
+        <IonToolbar>
+          <IonTitle>Header</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen={true} className="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+        <h2>Sea Turtle</h2>
+        <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+        <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+        <h2>Giraffe</h2>
+        <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+        <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+        <h2>Elephant</h2>
+        <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+        <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+        <h2>Dolphin</h2>
+        <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+        <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/translucent/vue.md b/static/usage/v7/header/translucent/vue.md
new file mode 100644
index 00000000000..34a4c740014
--- /dev/null
+++ b/static/usage/v7/header/translucent/vue.md
@@ -0,0 +1,41 @@
+```html
+<template>
+  <ion-header :translucent="true">
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content :fullscreen="true" class="ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img alt="rhino standing near grass" src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.</p>
+
+    <h2>Sea Turtle</h2>
+    <img alt="brown sea turtle in water" src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" />
+    <p>Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.</p>
+
+    <h2>Giraffe</h2>
+    <img alt="giraffe sticking its tongue out" src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80" />
+    <p>Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.</p>
+
+    <h2>Elephant</h2>
+    <img alt="two grey elephants on grass plains during sunset" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80" />
+    <p>Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.</p>
+
+    <h2>Dolphin</h2>
+    <img alt="black and white dolphin in water" src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" />
+    <p>Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/img/basic/angular.md b/static/usage/v7/img/basic/angular.md
new file mode 100644
index 00000000000..ce4d3d19e0d
--- /dev/null
+++ b/static/usage/v7/img/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-img src="https://docs-demo.ionic.io/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
+```
diff --git a/static/usage/v7/img/basic/demo.html b/static/usage/v7/img/basic/demo.html
new file mode 100644
index 00000000000..63f7703963c
--- /dev/null
+++ b/static/usage/v7/img/basic/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Image</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-img {
+      width: 300px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-img src="https://docs-demo.ionic.io/assets/madison.jpg"
+          alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/img/basic/index.md b/static/usage/v7/img/basic/index.md
new file mode 100644
index 00000000000..97f57f40ec2
--- /dev/null
+++ b/static/usage/v7/img/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/img/basic/demo.html" />
diff --git a/static/usage/v7/img/basic/javascript.md b/static/usage/v7/img/basic/javascript.md
new file mode 100644
index 00000000000..ce4d3d19e0d
--- /dev/null
+++ b/static/usage/v7/img/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-img src="https://docs-demo.ionic.io/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
+```
diff --git a/static/usage/v7/img/basic/react.md b/static/usage/v7/img/basic/react.md
new file mode 100644
index 00000000000..04c4c086b15
--- /dev/null
+++ b/static/usage/v7/img/basic/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonImg } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonImg src="https://docs-demo.ionic.io/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></IonImg>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/img/basic/vue.md b/static/usage/v7/img/basic/vue.md
new file mode 100644
index 00000000000..d8cb2cd2d7f
--- /dev/null
+++ b/static/usage/v7/img/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-img src="https://docs-demo.ionic.io/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
+</template>
+
+<script lang="ts">
+  import { IonImg } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonImg },
+  });
+</script>
+```
diff --git a/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..55469ab3c5a
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let item of items; let index">
+      <ion-avatar slot="start">
+        <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
+      </ion-avatar>
+      <ion-label>{{ item }}</ion-label>
+    </ion-item>
+  </ion-list>
+  <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
+    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+</ion-content>
+```
diff --git a/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..390ba6b75f1
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+  items = [];
+
+  ngOnInit() {
+    this.generateItems();
+  }
+
+  private generateItems() {
+    const count = this.items.length + 1;
+    for (let i = 0; i < 50; i++) {
+      this.items.push(`Item ${count + i}`);
+    }
+  }
+
+  onIonInfinite(ev) {
+    this.generateItems();
+    setTimeout(() => {
+      (ev as InfiniteScrollCustomEvent).target.complete();
+    }, 500);
+  }
+}
+```
diff --git a/static/usage/v7/infinite-scroll/basic/demo.html b/static/usage/v7/infinite-scroll/basic/demo.html
new file mode 100644
index 00000000000..ea12f54b686
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/demo.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Infinite Scroll</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <ion-list></ion-list>
+      <ion-infinite-scroll>
+        <ion-infinite-scroll-content></ion-infinite-scroll-content>
+      </ion-infinite-scroll>
+    </ion-content>
+  </ion-app>
+  <script>
+    const infiniteScroll = document.querySelector('ion-infinite-scroll');
+    infiniteScroll.addEventListener('ionInfinite', (event) => {
+      setTimeout(() => {
+        generateItems();
+        event.target.complete();
+      }, 500);
+    });
+
+    const list = document.querySelector('ion-list');
+
+    function generateItems() {
+      const count = list.childElementCount + 1;
+      const total = count + 50;
+      for (let i = count; i < total; i++) {
+        const el = document.createElement('ion-item');
+
+        const avatar = document.createElement('ion-avatar');
+        avatar.slot = 'start';
+        const img = document.createElement('img');
+        img.src = `https://picsum.photos/80/80?random=${i}`;
+        img.alt = 'Avatar';
+
+        avatar.appendChild(img);
+        el.appendChild(avatar);
+
+        const text = document.createElement('ion-label');
+        text.textContent = `Item ${i}`;
+
+        el.appendChild(text);
+
+        list.appendChild(el);
+      }
+    }
+
+    generateItems();
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/infinite-scroll/basic/index.md b/static/usage/v7/infinite-scroll/basic/index.md
new file mode 100644
index 00000000000..5ed57c31892
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/infinite-scroll/basic/demo.html"
+/>
diff --git a/static/usage/v7/infinite-scroll/basic/javascript.md b/static/usage/v7/infinite-scroll/basic/javascript.md
new file mode 100644
index 00000000000..b61db4c6ae3
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/javascript.md
@@ -0,0 +1,46 @@
+```html
+<ion-content>
+  <ion-list></ion-list>
+  <ion-infinite-scroll>
+    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+</ion-content>
+
+<script>
+  const infiniteScroll = document.querySelector('ion-infinite-scroll');
+  infiniteScroll.addEventListener('ionInfinite', (event) => {
+    setTimeout(() => {
+      generateItems();
+      event.target.complete();
+    }, 500);
+  });
+
+  const list = document.querySelector('ion-list');
+
+  function generateItems() {
+    const count = list.childElementCount + 1;
+    const total = count + 50;
+    for (let i = count; i < total; i++) {
+      const el = document.createElement('ion-item');
+
+      const avatar = document.createElement('ion-avatar');
+      avatar.slot = 'start';
+      const img = document.createElement('img');
+      img.src = `https://picsum.photos/80/80?random=${i}`;
+      img.alt = 'Avatar';
+
+      avatar.appendChild(img);
+      el.appendChild(avatar);
+
+      const text = document.createElement('ion-label');
+      text.textContent = `Item ${i}`;
+
+      el.appendChild(text);
+
+      list.appendChild(el);
+    }
+  }
+
+  generateItems();
+</script>
+```
diff --git a/static/usage/v7/infinite-scroll/basic/react.md b/static/usage/v7/infinite-scroll/basic/react.md
new file mode 100644
index 00000000000..c12032a6540
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/react.md
@@ -0,0 +1,53 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import {
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonList,
+  IonItem,
+  IonAvatar,
+  IonLabel,
+} from '@ionic/react';
+
+function Example() {
+  const [items, setItems] = useState<string[]>([]);
+
+  const generateItems = () => {
+    const newItems = [];
+    for (let i = 0; i < 50; i++) {
+      newItems.push(`Item ${1 + items.length + i}`);
+    }
+    setItems([...items, ...newItems]);
+  };
+
+  useEffect(() => {
+    generateItems();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <IonContent>
+      <IonList>
+        {items.map((item, index) => (
+          <IonItem key={item}>
+            <IonAvatar slot="start">
+              <img src={'https://picsum.photos/80/80?random=' + index} alt="avatar" />
+            </IonAvatar>
+            <IonLabel>{item}</IonLabel>
+          </IonItem>
+        ))}
+      </IonList>
+      <IonInfiniteScroll
+        onIonInfinite={(ev) => {
+          generateItems();
+          setTimeout(() => ev.target.complete(), 500);
+        }}
+      >
+        <IonInfiniteScrollContent></IonInfiniteScrollContent>
+      </IonInfiniteScroll>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/infinite-scroll/basic/vue.md b/static/usage/v7/infinite-scroll/basic/vue.md
new file mode 100644
index 00000000000..856c421b23b
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/vue.md
@@ -0,0 +1,65 @@
+```html
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-item v-for="(item, index) in items">
+        <ion-avatar slot="start">
+          <img :src="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
+        </ion-avatar>
+        <ion-label>{{ item }}</ion-label>
+      </ion-item>
+    </ion-list>
+    <ion-infinite-scroll @ionInfinite="ionInfinite">
+      <ion-infinite-scroll-content></ion-infinite-scroll-content>
+    </ion-infinite-scroll>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonContent,
+    IonInfiniteScroll,
+    IonInfiniteScrollContent,
+    IonList,
+    IonItem,
+    IonAvatar,
+    IonImg,
+    IonLabel,
+    IonInfiniteCustomEvent,
+  } from '@ionic/vue';
+  import { defineComponent, reactive } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonContent,
+      IonContent,
+      IonInfiniteScroll,
+      IonInfiniteScrollContent,
+      IonList,
+      IonItem,
+      IonAvatar,
+      IonImg,
+      IonLabel,
+    },
+    setup() {
+      const items = reactive([]);
+
+      const generateItems = () => {
+        const count = items.length + 1;
+        for (let i = 0; i < 50; i++) {
+          items.push(`Item ${count + i}`);
+        }
+      };
+
+      const ionInfinite = (ev: IonInfiniteCustomEvent) => {
+        generateItems();
+        setTimeout(() => ev.target.complete(), 500);
+      };
+
+      generateItems();
+
+      return { ionInfinite, items };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+svg {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+}
+
+.infinite-scroll-content {
+  text-align: center;
+  padding: 20px 0;
+}
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..60c02b86ea0
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
@@ -0,0 +1,68 @@
+```html
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let item of items; let index">
+      <ion-avatar slot="start">
+        <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
+      </ion-avatar>
+      <ion-label>{{ item }}</ion-label>
+    </ion-item>
+  </ion-list>
+  <ion-infinite-scroll>
+    <div class="infinite-scroll-content">
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 100 100"
+        xml:space="preserve"
+      >
+        <circle fill="none" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
+        <line
+          fill="none"
+          stroke-linecap="round"
+          stroke="#1b6dff"
+          stroke-width="4"
+          stroke-miterlimit="10"
+          x1="50"
+          y1="50"
+          x2="85"
+          y2="50.5"
+        >
+          <animateTransform
+            attributeName="transform"
+            dur="2s"
+            type="rotate"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </line>
+        <line
+          fill="none"
+          stroke-linecap="round"
+          stroke="#1b6dff"
+          stroke-width="4"
+          stroke-miterlimit="10"
+          x1="50"
+          y1="50"
+          x2="49.5"
+          y2="74"
+        >
+          <animateTransform
+            attributeName="transform"
+            dur="15s"
+            type="rotate"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </line>
+      </svg>
+    </div>
+  </ion-infinite-scroll>
+</ion-content>
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..415ed5dba8b
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+  items = [];
+
+  ngOnInit() {
+    for (let i = 1; i < 51; i++) {
+      this.items.push(`Item ${i}`);
+    }
+  }
+}
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..b56e952cfe7
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Infinite Scroll</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    svg {
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+    }
+
+    .infinite-scroll-content {
+      text-align: center;
+      padding: 20px 0;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <ion-list></ion-list>
+      <ion-infinite-scroll>
+        <div class="infinite-scroll-content">
+          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+            y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+            <circle fill="none" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
+            <line fill="none" stroke-linecap="round" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" x1="50"
+              y1="50" x2="85" y2="50.5">
+              <animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 50" to="360 50 50"
+                repeatCount="indefinite" />
+            </line>
+            <line fill="none" stroke-linecap="round" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" x1="50"
+              y1="50" x2="49.5" y2="74">
+              <animateTransform attributeName="transform" dur="15s" type="rotate" from="0 50 50" to="360 50 50"
+                repeatCount="indefinite" />
+            </line>
+          </svg>
+        </div>
+      </ion-infinite-scroll>
+    </ion-content>
+  </ion-app>
+  <script>
+    const list = document.querySelector('ion-list');
+
+    function generateItems() {
+      const count = list.childElementCount + 1;
+      const total = count + 50;
+      for (let i = count; i < total; i++) {
+        const el = document.createElement('ion-item');
+
+        const avatar = document.createElement('ion-avatar');
+        avatar.slot = 'start';
+        const img = document.createElement('img');
+        img.src = `https://picsum.photos/80/80?random=${i}`;
+        img.alt = 'Avatar';
+
+        avatar.appendChild(img);
+        el.appendChild(avatar);
+
+        const text = document.createElement('ion-label');
+        text.textContent = `Item ${i}`;
+
+        el.appendChild(text);
+
+        list.appendChild(el);
+      }
+    }
+
+    generateItems();
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md
new file mode 100644
index 00000000000..2fb457deb95
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html"
+/>
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/javascript.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/javascript.md
new file mode 100644
index 00000000000..721eb0c0ad4
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/javascript.md
@@ -0,0 +1,104 @@
+```html
+<style>
+  svg {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+  }
+
+  .infinite-scroll-content {
+    text-align: center;
+    padding: 20px 0;
+  }
+</style>
+
+<ion-content>
+  <ion-list></ion-list>
+  <ion-infinite-scroll>
+    <div class="infinite-scroll-content">
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 100 100"
+        xml:space="preserve"
+      >
+        <circle fill="none" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
+        <line
+          fill="none"
+          stroke-linecap="round"
+          stroke="#1b6dff"
+          stroke-width="4"
+          stroke-miterlimit="10"
+          x1="50"
+          y1="50"
+          x2="85"
+          y2="50.5"
+        >
+          <animateTransform
+            attributeName="transform"
+            dur="2s"
+            type="rotate"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </line>
+        <line
+          fill="none"
+          stroke-linecap="round"
+          stroke="#1b6dff"
+          stroke-width="4"
+          stroke-miterlimit="10"
+          x1="50"
+          y1="50"
+          x2="49.5"
+          y2="74"
+        >
+          <animateTransform
+            attributeName="transform"
+            dur="15s"
+            type="rotate"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </line>
+      </svg>
+    </div>
+  </ion-infinite-scroll>
+</ion-content>
+
+<script>
+  const list = document.querySelector('ion-list');
+
+  function generateItems() {
+    const count = list.childElementCount + 1;
+    const total = count + 50;
+    for (let i = count; i < total; i++) {
+      const el = document.createElement('ion-item');
+
+      const avatar = document.createElement('ion-avatar');
+      avatar.slot = 'start';
+      const img = document.createElement('img');
+      img.src = `https://picsum.photos/80/80?random=${i}`;
+      img.alt = 'Avatar';
+
+      avatar.appendChild(img);
+      el.appendChild(avatar);
+
+      const text = document.createElement('ion-label');
+      text.textContent = `Item ${i}`;
+
+      el.appendChild(text);
+
+      list.appendChild(el);
+    }
+  }
+
+  generateItems();
+</script>
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_css.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+svg {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+}
+
+.infinite-scroll-content {
+  text-align: center;
+  padding: 20px 0;
+}
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
new file mode 100644
index 00000000000..1139f55920d
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
@@ -0,0 +1,89 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import { IonContent, IonInfiniteScroll, IonList, IonItem, IonAvatar, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const [items, setItems] = useState<string[]>([]);
+
+  useEffect(() => {
+    const newItems = [];
+    for (let i = 1; i < 51; i++) {
+      newItems.push(`Item ${items.length + i}`);
+    }
+    setItems([...items, ...newItems]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <IonContent>
+      <IonList>
+        {items.map((item, index) => (
+          <IonItem key={item}>
+            <IonAvatar slot="start">
+              <img src={'https://picsum.photos/80/80?random=' + index} alt="avatar" />
+            </IonAvatar>
+            <IonLabel>{item}</IonLabel>
+          </IonItem>
+        ))}
+      </IonList>
+      <IonInfiniteScroll>
+        <div className="infinite-scroll-content">
+          <svg
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            x="0px"
+            y="0px"
+            viewBox="0 0 100 100"
+            enableBackground="new 0 0 100 100"
+          >
+            <circle fill="none" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
+            <line
+              fill="none"
+              strokeLinecap="round"
+              stroke="#1b6dff"
+              strokeWidth="4"
+              strokeMiterlimit="10"
+              x1="50"
+              y1="50"
+              x2="85"
+              y2="50.5"
+            >
+              <animateTransform
+                attributeName="transform"
+                dur="2s"
+                type="rotate"
+                from="0 50 50"
+                to="360 50 50"
+                repeatCount="indefinite"
+              />
+            </line>
+            <line
+              fill="none"
+              strokeLinecap="round"
+              stroke="#1b6dff"
+              strokeWidth="4"
+              strokeMiterlimit="10"
+              x1="50"
+              y1="50"
+              x2="49.5"
+              y2="74"
+            >
+              <animateTransform
+                attributeName="transform"
+                dur="15s"
+                type="rotate"
+                from="0 50 50"
+                to="360 50 50"
+                repeatCount="indefinite"
+              />
+            </line>
+          </svg>
+        </div>
+      </IonInfiniteScroll>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..a86fa6ed062
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
@@ -0,0 +1,121 @@
+```html
+<style>
+  svg {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+  }
+
+  .infinite-scroll-content {
+    text-align: center;
+    padding: 20px 0;
+  }
+</style>
+
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-item v-for="(item, index) in items">
+        <ion-avatar slot="start">
+          <img :src="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
+        </ion-avatar>
+        <ion-label>{{ item }}</ion-label>
+      </ion-item>
+    </ion-list>
+    <ion-infinite-scroll>
+      <div class="infinite-scroll-content">
+        <svg
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 100 100"
+          enable-background="new 0 0 100 100"
+          xml:space="preserve"
+        >
+          <circle fill="none" stroke="#1b6dff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
+          <line
+            fill="none"
+            stroke-linecap="round"
+            stroke="#1b6dff"
+            stroke-width="4"
+            stroke-miterlimit="10"
+            x1="50"
+            y1="50"
+            x2="85"
+            y2="50.5"
+          >
+            <animateTransform
+              attributeName="transform"
+              dur="2s"
+              type="rotate"
+              from="0 50 50"
+              to="360 50 50"
+              repeatCount="indefinite"
+            />
+          </line>
+          <line
+            fill="none"
+            stroke-linecap="round"
+            stroke="#1b6dff"
+            stroke-width="4"
+            stroke-miterlimit="10"
+            x1="50"
+            y1="50"
+            x2="49.5"
+            y2="74"
+          >
+            <animateTransform
+              attributeName="transform"
+              dur="15s"
+              type="rotate"
+              from="0 50 50"
+              to="360 50 50"
+              repeatCount="indefinite"
+            />
+          </line>
+        </svg>
+      </div>
+    </ion-infinite-scroll>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonContent,
+    IonInfiniteScroll,
+    IonInfiniteScrollContent,
+    IonList,
+    IonItem,
+    IonAvatar,
+    IonImg,
+    IonLabel,
+    IonInfiniteCustomEvent,
+  } from '@ionic/vue';
+  import { defineComponent, reactive } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonContent,
+      IonContent,
+      IonInfiniteScroll,
+      IonInfiniteScrollContent,
+      IonList,
+      IonItem,
+      IonAvatar,
+      IonImg,
+      IonLabel,
+    },
+    setup() {
+      const items = reactive([]);
+
+      for (let i = 1; i < 51; i++) {
+        items.push(`Item ${i}`);
+      }
+
+      return { items };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..2e23e359257
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let item of items; let index">
+      <ion-avatar slot="start">
+        <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
+      </ion-avatar>
+      <ion-label>{{ item }}</ion-label>
+    </ion-item>
+  </ion-list>
+  <ion-infinite-scroll>
+    <ion-infinite-scroll-content loadingText="Please wait..." loadingSpinner="bubbles"></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+</ion-content>
+```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..415ed5dba8b
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+  items = [];
+
+  ngOnInit() {
+    for (let i = 1; i < 51; i++) {
+      this.items.push(`Item ${i}`);
+    }
+  }
+}
+```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..46016207432
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Infinite Scroll</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <ion-list></ion-list>
+      <ion-infinite-scroll>
+        <ion-infinite-scroll-content loading-text="Please wait..." loading-spinner="bubbles">
+        </ion-infinite-scroll-content>
+      </ion-infinite-scroll>
+    </ion-content>
+  </ion-app>
+  <script>
+    const list = document.querySelector('ion-list');
+
+    function generateItems() {
+      const count = list.childElementCount + 1;
+      const total = count + 50;
+      for (let i = count; i < total; i++) {
+        const el = document.createElement('ion-item');
+
+        const avatar = document.createElement('ion-avatar');
+        avatar.slot = 'start';
+        const img = document.createElement('img');
+        img.src = `https://picsum.photos/80/80?random=${i}`;
+        img.alt = 'Avatar';
+
+        avatar.appendChild(img);
+        el.appendChild(avatar);
+
+        const text = document.createElement('ion-label');
+        text.textContent = `Item ${i}`;
+
+        el.appendChild(text);
+
+        list.appendChild(el);
+      }
+    }
+
+    generateItems();
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md
new file mode 100644
index 00000000000..e053e5d2d97
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/infinite-scroll/infinite-scroll-content/demo.html"
+/>
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/javascript.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/javascript.md
new file mode 100644
index 00000000000..6b2a9bb409f
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/javascript.md
@@ -0,0 +1,38 @@
+```html
+<ion-content>
+  <ion-list></ion-list>
+  <ion-infinite-scroll>
+    <ion-infinite-scroll-content loading-text="Please wait..." loading-spinner="bubbles"></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+</ion-content>
+
+<script>
+  const list = document.querySelector('ion-list');
+
+  function generateItems() {
+    const count = list.childElementCount + 1;
+    const total = count + 50;
+    for (let i = count; i < total; i++) {
+      const el = document.createElement('ion-item');
+
+      const avatar = document.createElement('ion-avatar');
+      avatar.slot = 'start';
+      const img = document.createElement('img');
+      img.src = `https://picsum.photos/80/80?random=${i}`;
+      img.alt = 'Avatar';
+
+      avatar.appendChild(img);
+      el.appendChild(avatar);
+
+      const text = document.createElement('ion-label');
+      text.textContent = `Item ${i}`;
+
+      el.appendChild(text);
+
+      list.appendChild(el);
+    }
+  }
+
+  generateItems();
+</script>
+```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/react.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/react.md
new file mode 100644
index 00000000000..2c2b5f77b8a
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import {
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonList,
+  IonItem,
+  IonAvatar,
+  IonLabel,
+} from '@ionic/react';
+
+function Example() {
+  const [items, setItems] = useState<string[]>([]);
+
+  useEffect(() => {
+    const newItems = [];
+    for (let i = 1; i < 51; i++) {
+      newItems.push(`Item ${items.length + i}`);
+    }
+    setItems([...items, ...newItems]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <IonContent>
+      <IonList>
+        {items.map((item, index) => (
+          <IonItem key={item}>
+            <IonAvatar slot="start">
+              <img src={'https://picsum.photos/80/80?random=' + index} alt="avatar" />
+            </IonAvatar>
+            <IonLabel>{item}</IonLabel>
+          </IonItem>
+        ))}
+      </IonList>
+      <IonInfiniteScroll>
+        <IonInfiniteScrollContent loadingText="Please wait..." loadingSpinner="bubbles"></IonInfiniteScrollContent>
+      </IonInfiniteScroll>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..9b7d22436ee
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
@@ -0,0 +1,58 @@
+```html
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-item v-for="(item, index) in items">
+        <ion-avatar slot="start">
+          <img :src="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
+        </ion-avatar>
+        <ion-label>{{ item }}</ion-label>
+      </ion-item>
+    </ion-list>
+    <ion-infinite-scroll>
+      <ion-infinite-scroll-content
+        loading-text="Please wait..."
+        loading-spinner="bubbles"
+      ></ion-infinite-scroll-content>
+    </ion-infinite-scroll>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonContent,
+    IonInfiniteScroll,
+    IonInfiniteScrollContent,
+    IonList,
+    IonItem,
+    IonAvatar,
+    IonImg,
+    IonLabel,
+    IonInfiniteCustomEvent,
+  } from '@ionic/vue';
+  import { defineComponent, reactive } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonContent,
+      IonContent,
+      IonInfiniteScroll,
+      IonInfiniteScrollContent,
+      IonList,
+      IonItem,
+      IonAvatar,
+      IonImg,
+      IonLabel,
+    },
+    setup() {
+      const items = reactive([]);
+
+      for (let i = 1; i < 51; i++) {
+        items.push(`Item ${i}`);
+      }
+
+      return { items };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/input/basic/angular.md b/static/usage/v7/input/basic/angular.md
new file mode 100644
index 00000000000..faa0271acae
--- /dev/null
+++ b/static/usage/v7/input/basic/angular.md
@@ -0,0 +1,28 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Default input</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Input with placeholder</ion-label>
+    <ion-input placeholder="Enter company name"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Input with value</ion-label>
+    <ion-input value="121 S Pinckney St #300"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Readonly input</ion-label>
+    <ion-input value="Madison" [readonly]="true"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Disabled input</ion-label>
+    <ion-input value="53703" [disabled]="true"></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/basic/demo.html b/static/usage/v7/input/basic/demo.html
new file mode 100644
index 00000000000..264bbaa75e6
--- /dev/null
+++ b/static/usage/v7/input/basic/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Default input</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Input with placeholder</ion-label>
+            <ion-input placeholder="Enter company name"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Input with value</ion-label>
+            <ion-input value="121 S Pinckney St #300"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Readonly input</ion-label>
+            <ion-input value="Madison" readonly="true"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled input</ion-label>
+            <ion-input value="53703" disabled="true"></ion-input>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/input/basic/index.md b/static/usage/v7/input/basic/index.md
new file mode 100644
index 00000000000..ed54a843667
--- /dev/null
+++ b/static/usage/v7/input/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/basic/demo.html" size="300px" />
diff --git a/static/usage/v7/input/basic/javascript.md b/static/usage/v7/input/basic/javascript.md
new file mode 100644
index 00000000000..668cdbdf07e
--- /dev/null
+++ b/static/usage/v7/input/basic/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Default input</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Input with placeholder</ion-label>
+    <ion-input placeholder="Enter company name"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Input with value</ion-label>
+    <ion-input value="121 S Pinckney St #300"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Readonly input</ion-label>
+    <ion-input value="Madison" readonly="true"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Disabled input</ion-label>
+    <ion-input value="53703" disabled="true"></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/basic/react.md b/static/usage/v7/input/basic/react.md
new file mode 100644
index 00000000000..b3ad075a156
--- /dev/null
+++ b/static/usage/v7/input/basic/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonLabel>Default input</IonLabel>
+        <IonInput></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Input with placeholder</IonLabel>
+        <IonInput placeholder="Enter company name"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Input with value</IonLabel>
+        <IonInput value="121 S Pinckney St #300"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Readonly input</IonLabel>
+        <IonInput value="Madison" readonly={true}></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Disabled input</IonLabel>
+        <IonInput value="53703" disabled={true}></IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/basic/vue.md b/static/usage/v7/input/basic/vue.md
new file mode 100644
index 00000000000..80ad1c0cd54
--- /dev/null
+++ b/static/usage/v7/input/basic/vue.md
@@ -0,0 +1,39 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>Default input</ion-label>
+      <ion-input></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Input with placeholder</ion-label>
+      <ion-input placeholder="Enter company name"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Input with value</ion-label>
+      <ion-input value="121 S Pinckney St #300"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Readonly input</ion-label>
+      <ion-input value="Madison" :readonly="true"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Disabled input</ion-label>
+      <ion-input value="53703" :disabled="true"></ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/input/clear/angular.md b/static/usage/v7/input/clear/angular.md
new file mode 100644
index 00000000000..d198485925f
--- /dev/null
+++ b/static/usage/v7/input/clear/angular.md
@@ -0,0 +1,18 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label position="stacked">Input with clear button</ion-label>
+    <ion-input [clearInput]="true" placeholder="Enter text to see clear button" value="Default value"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Input with clear on edit</ion-label>
+    <ion-input [clearOnEdit]="true" placeholder="Enter text, leave the input, come back and type to clear"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Password input</ion-label>
+    <ion-input type="password" placeholder="Enter text, leave the input, come back and type to clear"></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/clear/demo.html b/static/usage/v7/input/clear/demo.html
new file mode 100644
index 00000000000..e46c310a3a4
--- /dev/null
+++ b/static/usage/v7/input/clear/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label position="stacked">Input with clear button</ion-label>
+            <ion-input clear-input="true" placeholder="Enter text to see clear button" value="Default value">
+            </ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label position="stacked">Input with clear on edit</ion-label>
+            <ion-input clear-on-edit="true" placeholder="Enter text, leave the input, come back and type to clear">
+            </ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label position="stacked">Password input</ion-label>
+            <ion-input type="password" placeholder="Enter text, leave the input, come back and type to clear">
+            </ion-input>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/input/clear/index.md b/static/usage/v7/input/clear/index.md
new file mode 100644
index 00000000000..eecea0ba6cf
--- /dev/null
+++ b/static/usage/v7/input/clear/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/clear/demo.html" size="250px" />
diff --git a/static/usage/v7/input/clear/javascript.md b/static/usage/v7/input/clear/javascript.md
new file mode 100644
index 00000000000..7a3a7fc2701
--- /dev/null
+++ b/static/usage/v7/input/clear/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label position="stacked">Input with clear button</ion-label>
+    <ion-input clear-input="true" placeholder="Enter text to see clear button" value="Default value"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Input with clear on edit</ion-label>
+    <ion-input clear-on-edit="true" placeholder="Enter text, leave the input, come back and type to clear"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Password input</ion-label>
+    <ion-input type="password" placeholder="Enter text, leave the input, come back and type to clear"></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/clear/react.md b/static/usage/v7/input/clear/react.md
new file mode 100644
index 00000000000..c7205c903a4
--- /dev/null
+++ b/static/usage/v7/input/clear/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonLabel position="stacked">Input with clear button</IonLabel>
+        <IonInput clearInput={true} placeholder="Enter text to see clear button" value="Default value"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="stacked">Input with clear on edit</IonLabel>
+        <IonInput clearOnEdit={true} placeholder="Enter text, leave the input, come back and type to clear"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="stacked">Password input</IonLabel>
+        <IonInput type="password" placeholder="Enter text, leave the input, come back and type to clear"></IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/clear/vue.md b/static/usage/v7/input/clear/vue.md
new file mode 100644
index 00000000000..fecb1e831f1
--- /dev/null
+++ b/static/usage/v7/input/clear/vue.md
@@ -0,0 +1,29 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label position="stacked">Input with clear button</ion-label>
+      <ion-input :clear-input="true" placeholder="Enter text to see clear button" value="Default value"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="stacked">Input with clear on edit</ion-label>
+      <ion-input :clear-on-edit="true" placeholder="Enter text, leave the input, come back and type to clear"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="stacked">Password input</ion-label>
+      <ion-input type="password" placeholder="Enter text, leave the input, come back and type to clear"></ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/input/fill/angular.md b/static/usage/v7/input/fill/angular.md
new file mode 100644
index 00000000000..54ff7eafb18
--- /dev/null
+++ b/static/usage/v7/input/fill/angular.md
@@ -0,0 +1,16 @@
+```html
+<ion-item>
+  <ion-label position="floating">Default input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item fill="solid">
+  <ion-label position="floating">Solid input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item fill="outline">
+  <ion-label position="floating">Outline input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+```
diff --git a/static/usage/v7/input/fill/demo.html b/static/usage/v7/input/fill/demo.html
new file mode 100644
index 00000000000..a7afe6c8d13
--- /dev/null
+++ b/static/usage/v7/input/fill/demo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label position="floating">Default input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item fill="solid">
+          <ion-label position="floating">Solid input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item fill="outline">
+          <ion-label position="floating">Outline input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/input/fill/index.md b/static/usage/v7/input/fill/index.md
new file mode 100644
index 00000000000..534ebc41c25
--- /dev/null
+++ b/static/usage/v7/input/fill/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/fill/demo.html" size="250px" />
diff --git a/static/usage/v7/input/fill/javascript.md b/static/usage/v7/input/fill/javascript.md
new file mode 100644
index 00000000000..54ff7eafb18
--- /dev/null
+++ b/static/usage/v7/input/fill/javascript.md
@@ -0,0 +1,16 @@
+```html
+<ion-item>
+  <ion-label position="floating">Default input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item fill="solid">
+  <ion-label position="floating">Solid input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item fill="outline">
+  <ion-label position="floating">Outline input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+```
diff --git a/static/usage/v7/input/fill/react.md b/static/usage/v7/input/fill/react.md
new file mode 100644
index 00000000000..00000a9ee97
--- /dev/null
+++ b/static/usage/v7/input/fill/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonLabel position="floating">Default input</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem fill="solid">
+        <IonLabel position="floating">Solid input</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem fill="outline">
+        <IonLabel position="floating">Outline input</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/fill/vue.md b/static/usage/v7/input/fill/vue.md
new file mode 100644
index 00000000000..d76a7929fb2
--- /dev/null
+++ b/static/usage/v7/input/fill/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-item>
+    <ion-label position="floating">Default input</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item fill="solid">
+    <ion-label position="floating">Solid input</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item fill="outline">
+    <ion-label position="floating">Outline input</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonLabel },
+  });
+</script>
+```
diff --git a/static/usage/v7/input/labels/angular.md b/static/usage/v7/input/labels/angular.md
new file mode 100644
index 00000000000..9756b9c57cb
--- /dev/null
+++ b/static/usage/v7/input/labels/angular.md
@@ -0,0 +1,23 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Default label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="fixed">Fixed label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Stacked label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Floating label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/labels/demo.html b/static/usage/v7/input/labels/demo.html
new file mode 100644
index 00000000000..ea089a533e8
--- /dev/null
+++ b/static/usage/v7/input/labels/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Default label</ion-label>
+            <ion-input placeholder="Enter text"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label position="fixed">Fixed label</ion-label>
+            <ion-input placeholder="Enter text"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label position="stacked">Stacked label</ion-label>
+            <ion-input placeholder="Enter text"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label position="floating">Floating label</ion-label>
+            <ion-input placeholder="Enter text"></ion-input>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/input/labels/index.md b/static/usage/v7/input/labels/index.md
new file mode 100644
index 00000000000..cfe1967e733
--- /dev/null
+++ b/static/usage/v7/input/labels/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/labels/demo.html" size="300px" />
diff --git a/static/usage/v7/input/labels/javascript.md b/static/usage/v7/input/labels/javascript.md
new file mode 100644
index 00000000000..9756b9c57cb
--- /dev/null
+++ b/static/usage/v7/input/labels/javascript.md
@@ -0,0 +1,23 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Default label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="fixed">Fixed label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Stacked label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Floating label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/labels/react.md b/static/usage/v7/input/labels/react.md
new file mode 100644
index 00000000000..37a6bb8246b
--- /dev/null
+++ b/static/usage/v7/input/labels/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonLabel>Default label</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="fixed">Fixed label</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="stacked">Stacked label</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="floating">Floating label</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/labels/vue.md b/static/usage/v7/input/labels/vue.md
new file mode 100644
index 00000000000..fae061af85f
--- /dev/null
+++ b/static/usage/v7/input/labels/vue.md
@@ -0,0 +1,34 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>Default label</ion-label>
+      <ion-input placeholder="Enter text"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="fixed">Fixed label</ion-label>
+      <ion-input placeholder="Enter text"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="stacked">Stacked label</ion-label>
+      <ion-input placeholder="Enter text"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">Floating label</ion-label>
+      <ion-input placeholder="Enter text"></ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/input/theming/colors/angular.md b/static/usage/v7/input/theming/colors/angular.md
new file mode 100644
index 00000000000..cc4a5b35ed5
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-input color="primary" placeholder="Primary input"></ion-input>
+<ion-input color="secondary" placeholder="Secondary input"></ion-input>
+<ion-input color="tertiary" placeholder="Tertiary input"></ion-input>
+<ion-input color="success" placeholder="Success input"></ion-input>
+<ion-input color="warning" placeholder="Warning input"></ion-input>
+<ion-input color="danger" placeholder="Danger input"></ion-input>
+<ion-input color="light" placeholder="Light input"></ion-input>
+<ion-input color="medium" placeholder="Medium input"></ion-input>
+<ion-input color="dark" placeholder="Dark input"></ion-input>
+```
diff --git a/static/usage/v7/input/theming/colors/demo.html b/static/usage/v7/input/theming/colors/demo.html
new file mode 100644
index 00000000000..c0c93908ac6
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/demo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+      flex-wrap: wrap;
+    }
+
+    .container ion-input {
+      flex: 1 1 33%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-input color="primary" placeholder="Primary input"></ion-input>
+        <ion-input color="secondary" placeholder="Secondary input"></ion-input>
+        <ion-input color="tertiary" placeholder="Tertiary input"></ion-input>
+        <ion-input color="success" placeholder="Success input"></ion-input>
+        <ion-input color="warning" placeholder="Warning input"></ion-input>
+        <ion-input color="danger" placeholder="Danger input"></ion-input>
+        <ion-input color="light" placeholder="Light input"></ion-input>
+        <ion-input color="medium" placeholder="Medium input"></ion-input>
+        <ion-input color="dark" placeholder="Dark input"></ion-input>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/input/theming/colors/index.md b/static/usage/v7/input/theming/colors/index.md
new file mode 100644
index 00000000000..17c29f994c3
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/input/theming/colors/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/v7/input/theming/colors/javascript.md b/static/usage/v7/input/theming/colors/javascript.md
new file mode 100644
index 00000000000..cc4a5b35ed5
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-input color="primary" placeholder="Primary input"></ion-input>
+<ion-input color="secondary" placeholder="Secondary input"></ion-input>
+<ion-input color="tertiary" placeholder="Tertiary input"></ion-input>
+<ion-input color="success" placeholder="Success input"></ion-input>
+<ion-input color="warning" placeholder="Warning input"></ion-input>
+<ion-input color="danger" placeholder="Danger input"></ion-input>
+<ion-input color="light" placeholder="Light input"></ion-input>
+<ion-input color="medium" placeholder="Medium input"></ion-input>
+<ion-input color="dark" placeholder="Dark input"></ion-input>
+```
diff --git a/static/usage/v7/input/theming/colors/react.md b/static/usage/v7/input/theming/colors/react.md
new file mode 100644
index 00000000000..d9697d40c34
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonInput } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonInput color="primary" placeholder="Primary input"></IonInput>
+      <IonInput color="secondary" placeholder="Secondary input"></IonInput>
+      <IonInput color="tertiary" placeholder="Tertiary input"></IonInput>
+      <IonInput color="success" placeholder="Success input"></IonInput>
+      <IonInput color="warning" placeholder="Warning input"></IonInput>
+      <IonInput color="danger" placeholder="Danger input"></IonInput>
+      <IonInput color="light" placeholder="Light input"></IonInput>
+      <IonInput color="medium" placeholder="Medium input"></IonInput>
+      <IonInput color="dark" placeholder="Dark input"></IonInput>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/theming/colors/vue.md b/static/usage/v7/input/theming/colors/vue.md
new file mode 100644
index 00000000000..b6229c74c63
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-input color="primary" placeholder="Primary input"></ion-input>
+  <ion-input color="secondary" placeholder="Secondary input"></ion-input>
+  <ion-input color="tertiary" placeholder="Tertiary input"></ion-input>
+  <ion-input color="success" placeholder="Success input"></ion-input>
+  <ion-input color="warning" placeholder="Warning input"></ion-input>
+  <ion-input color="danger" placeholder="Danger input"></ion-input>
+  <ion-input color="light" placeholder="Light input"></ion-input>
+  <ion-input color="medium" placeholder="Medium input"></ion-input>
+  <ion-input color="dark" placeholder="Dark input"></ion-input>
+</template>
+
+<script lang="ts">
+  import { IonInput } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput },
+  });
+</script>
+```
diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..bede6457325
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+ion-input.custom {
+  --background: #373737;
+  --color: #fff;
+  --placeholder-color: #ddd;
+  --placeholder-opacity: .8;
+
+  --padding-bottom: 10px;
+  --padding-end: 10px;
+  --padding-start: 10px;
+  --padding-top: 10px;
+}
+```
diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_html.md b/static/usage/v7/input/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..b0f2c5bff5a
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-input placeholder="Custom input" class="custom"></ion-input>
+```
diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html
new file mode 100644
index 00000000000..4414ead7bf6
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 200px;
+      margin: 0 auto;
+    }
+
+    ion-input.custom {
+      --background: #373737;
+      --color: #fff;
+      --placeholder-color: #ddd;
+      --placeholder-opacity: .8;
+
+      --padding-bottom: 10px;
+      --padding-end: 10px;
+      --padding-start: 10px;
+      --padding-top: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-input placeholder="Custom input" class="custom"></ion-input>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/input/theming/css-properties/index.md b/static/usage/v7/input/theming/css-properties/index.md
new file mode 100644
index 00000000000..db7ffd5f993
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/input/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/input/theming/css-properties/javascript.md b/static/usage/v7/input/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..3b406ede42f
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-input placeholder="Custom input" class="custom"></ion-input>
+
+<style>
+  ion-input.custom {
+    --background: #373737;
+    --color: #fff;
+    --placeholder-color: #ddd;
+    --placeholder-opacity: .8;
+
+    --padding-bottom: 10px;
+    --padding-end: 10px;
+    --padding-start: 10px;
+    --padding-top: 10px;
+  }
+</style>
+```
diff --git a/static/usage/v7/input/theming/css-properties/react/main_css.md b/static/usage/v7/input/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..bede6457325
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/react/main_css.md
@@ -0,0 +1,13 @@
+```css
+ion-input.custom {
+  --background: #373737;
+  --color: #fff;
+  --placeholder-color: #ddd;
+  --placeholder-opacity: .8;
+
+  --padding-bottom: 10px;
+  --padding-end: 10px;
+  --padding-start: 10px;
+  --padding-top: 10px;
+}
+```
diff --git a/static/usage/v7/input/theming/css-properties/react/main_tsx.md b/static/usage/v7/input/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..e4ec0fb134a
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonInput } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonInput placeholder="Custom input" class="custom"></IonInput>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/theming/css-properties/vue.md b/static/usage/v7/input/theming/css-properties/vue.md
new file mode 100644
index 00000000000..6d5d5fa41cc
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-input placeholder="Custom input" class="custom"></ion-input>
+</template>
+
+<script lang="ts">
+  import { IonInput } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput },
+  });
+</script>
+
+<style scoped>
+  ion-input.custom {
+    --background: #373737;
+    --color: #fff;
+    --placeholder-color: #ddd;
+    --placeholder-opacity: .8;
+
+    --padding-bottom: 10px;
+    --padding-end: 10px;
+    --padding-start: 10px;
+    --padding-top: 10px;
+  }
+</style>
+```
diff --git a/static/usage/v7/input/types/angular.md b/static/usage/v7/input/types/angular.md
new file mode 100644
index 00000000000..1c8ae75a5bc
--- /dev/null
+++ b/static/usage/v7/input/types/angular.md
@@ -0,0 +1,28 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Text input</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Number input</ion-label>
+    <ion-input type="number" placeholder="000"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Password input</ion-label>
+    <ion-input type="password" value="password"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Email input</ion-label>
+    <ion-input type="email" placeholder="email@domain.com"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Telephone input</ion-label>
+    <ion-input type="tel" placeholder="888-888-8888"></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/types/demo.html b/static/usage/v7/input/types/demo.html
new file mode 100644
index 00000000000..5955051f78f
--- /dev/null
+++ b/static/usage/v7/input/types/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Text input</ion-label>
+            <ion-input placeholder="Enter text"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Number input</ion-label>
+            <ion-input type="number" placeholder="000"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Password input</ion-label>
+            <ion-input type="password" value="password"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Email input</ion-label>
+            <ion-input type="email" placeholder="email@domain.com"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Telephone input</ion-label>
+            <ion-input type="tel" placeholder="888-888-8888"></ion-input>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/input/types/index.md b/static/usage/v7/input/types/index.md
new file mode 100644
index 00000000000..7640d15d59d
--- /dev/null
+++ b/static/usage/v7/input/types/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/types/demo.html" size="300px" />
diff --git a/static/usage/v7/input/types/javascript.md b/static/usage/v7/input/types/javascript.md
new file mode 100644
index 00000000000..1c8ae75a5bc
--- /dev/null
+++ b/static/usage/v7/input/types/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Text input</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Number input</ion-label>
+    <ion-input type="number" placeholder="000"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Password input</ion-label>
+    <ion-input type="password" value="password"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Email input</ion-label>
+    <ion-input type="email" placeholder="email@domain.com"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Telephone input</ion-label>
+    <ion-input type="tel" placeholder="888-888-8888"></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/types/react.md b/static/usage/v7/input/types/react.md
new file mode 100644
index 00000000000..8ee7ad7044d
--- /dev/null
+++ b/static/usage/v7/input/types/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonLabel>Text input</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Number input</IonLabel>
+        <IonInput type="number" placeholder="000"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Password input</IonLabel>
+        <IonInput type="password" value="password"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Email input</IonLabel>
+        <IonInput type="email" placeholder="email@domain.com"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Telephone input</IonLabel>
+        <IonInput type="tel" placeholder="888-888-8888"></IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/types/vue.md b/static/usage/v7/input/types/vue.md
new file mode 100644
index 00000000000..9f44a8e4ca5
--- /dev/null
+++ b/static/usage/v7/input/types/vue.md
@@ -0,0 +1,39 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>Text input</ion-label>
+      <ion-input placeholder="Enter text"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Number input</ion-label>
+      <ion-input type="number" placeholder="000"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Password input</ion-label>
+      <ion-input type="password" value="password"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Email input</ion-label>
+      <ion-input type="email" placeholder="email@domain.com"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Telephone input</ion-label>
+      <ion-input type="tel" placeholder="888-888-8888"></ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/item-divider/basic/angular.md b/static/usage/v7/item-divider/basic/angular.md
new file mode 100644
index 00000000000..d74e5b05549
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/angular.md
@@ -0,0 +1,39 @@
+```html
+<ion-list>
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>
+        Section A
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item>
+      <ion-label>A1</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>A2</ion-label>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-label>A3</ion-label>
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>
+        Section B
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item>
+      <ion-label>B1</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>B2</ion-label>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-label>B3</ion-label>
+    </ion-item>
+  </ion-item-group>
+</ion-list>
+```
diff --git a/static/usage/v7/item-divider/basic/demo.html b/static/usage/v7/item-divider/basic/demo.html
new file mode 100644
index 00000000000..d99c52d65af
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/demo.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Divider</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item-group>
+            <ion-item-divider>
+              <ion-label>
+                Section A
+              </ion-label>
+            </ion-item-divider>
+
+            <ion-item>
+              <ion-label>A1</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>A2</ion-label>
+            </ion-item>
+            <ion-item lines="none">
+              <ion-label>A3</ion-label>
+            </ion-item>
+          </ion-item-group>
+
+          <ion-item-group>
+            <ion-item-divider>
+              <ion-label>
+                Section B
+              </ion-label>
+            </ion-item-divider>
+
+            <ion-item>
+              <ion-label>B1</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>B2</ion-label>
+            </ion-item>
+            <ion-item lines="none">
+              <ion-label>B3</ion-label>
+            </ion-item>
+          </ion-item-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item-divider/basic/index.md b/static/usage/v7/item-divider/basic/index.md
new file mode 100644
index 00000000000..9c8a9e292be
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/item-divider/basic/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/item-divider/basic/javascript.md b/static/usage/v7/item-divider/basic/javascript.md
new file mode 100644
index 00000000000..d74e5b05549
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/javascript.md
@@ -0,0 +1,39 @@
+```html
+<ion-list>
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>
+        Section A
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item>
+      <ion-label>A1</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>A2</ion-label>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-label>A3</ion-label>
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>
+        Section B
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item>
+      <ion-label>B1</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>B2</ion-label>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-label>B3</ion-label>
+    </ion-item>
+  </ion-item-group>
+</ion-list>
+```
diff --git a/static/usage/v7/item-divider/basic/react.md b/static/usage/v7/item-divider/basic/react.md
new file mode 100644
index 00000000000..289f1727c8d
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItemGroup>
+        <IonItemDivider>
+          <IonLabel>
+            Section A
+          </IonLabel>
+        </IonItemDivider>
+
+        <IonItem>
+          <IonLabel>A1</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>A2</IonLabel>
+        </IonItem>
+        <IonItem lines="none">
+          <IonLabel>A3</IonLabel>
+        </IonItem>
+      </IonItemGroup>
+
+      <IonItemGroup>
+        <IonItemDivider>
+          <IonLabel>
+            Section B
+          </IonLabel>
+        </IonItemDivider>
+
+        <IonItem>
+          <IonLabel>B1</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>B2</IonLabel>
+        </IonItem>
+        <IonItem lines="none">
+          <IonLabel>B3</IonLabel>
+        </IonItem>
+      </IonItemGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-divider/basic/vue.md b/static/usage/v7/item-divider/basic/vue.md
new file mode 100644
index 00000000000..95f26ebc027
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/vue.md
@@ -0,0 +1,50 @@
+```html
+<template>
+  <ion-list>
+    <ion-item-group>
+      <ion-item-divider>
+        <ion-label>
+          Section A
+        </ion-label>
+      </ion-item-divider>
+
+      <ion-item>
+        <ion-label>A1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>A2</ion-label>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-label>A3</ion-label>
+      </ion-item>
+    </ion-item-group>
+
+    <ion-item-group>
+      <ion-item-divider>
+        <ion-label>
+          Section B
+        </ion-label>
+      </ion-item-divider>
+
+      <ion-item>
+        <ion-label>B1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>B2</ion-label>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-label>B3</ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/item-divider/theming/colors/angular.md b/static/usage/v7/item-divider/theming/colors/angular.md
new file mode 100644
index 00000000000..e23070ec5a0
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/angular.md
@@ -0,0 +1,32 @@
+```html
+<ion-item-divider>
+  <ion-label>Default</ion-label>
+</ion-item-divider>
+<ion-item-divider color="primary">
+  <ion-label>Primary</ion-label>
+</ion-item-divider>
+<ion-item-divider color="secondary">
+  <ion-label>Secondary</ion-label>
+</ion-item-divider>
+<ion-item-divider color="tertiary">
+  <ion-label>Tertiary</ion-label>
+</ion-item-divider>
+<ion-item-divider color="success">
+  <ion-label>Success</ion-label>
+</ion-item-divider>
+<ion-item-divider color="warning">
+  <ion-label>Warning</ion-label>
+</ion-item-divider>
+<ion-item-divider color="danger">
+  <ion-label>Danger</ion-label>
+</ion-item-divider>
+<ion-item-divider color="light">
+  <ion-label>Light</ion-label>
+</ion-item-divider>
+<ion-item-divider color="medium">
+  <ion-label>Medium</ion-label>
+</ion-item-divider>
+<ion-item-divider color="dark">
+  <ion-label>Dark</ion-label>
+</ion-item-divider>
+```
diff --git a/static/usage/v7/item-divider/theming/colors/demo.html b/static/usage/v7/item-divider/theming/colors/demo.html
new file mode 100644
index 00000000000..354ab9096e8
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Divider</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item-divider>
+          <ion-label>Default</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="primary">
+          <ion-label>Primary</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="secondary">
+          <ion-label>Secondary</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="tertiary">
+          <ion-label>Tertiary</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="success">
+          <ion-label>Success</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="warning">
+          <ion-label>Warning</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="danger">
+          <ion-label>Danger</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="light">
+          <ion-label>Light</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="medium">
+          <ion-label>Medium</ion-label>
+        </ion-item-divider>
+        <ion-item-divider color="dark">
+          <ion-label>Dark</ion-label>
+        </ion-item-divider>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item-divider/theming/colors/index.md b/static/usage/v7/item-divider/theming/colors/index.md
new file mode 100644
index 00000000000..a728b84c5db
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/item-divider/theming/colors/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/item-divider/theming/colors/javascript.md b/static/usage/v7/item-divider/theming/colors/javascript.md
new file mode 100644
index 00000000000..e23070ec5a0
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+<ion-item-divider>
+  <ion-label>Default</ion-label>
+</ion-item-divider>
+<ion-item-divider color="primary">
+  <ion-label>Primary</ion-label>
+</ion-item-divider>
+<ion-item-divider color="secondary">
+  <ion-label>Secondary</ion-label>
+</ion-item-divider>
+<ion-item-divider color="tertiary">
+  <ion-label>Tertiary</ion-label>
+</ion-item-divider>
+<ion-item-divider color="success">
+  <ion-label>Success</ion-label>
+</ion-item-divider>
+<ion-item-divider color="warning">
+  <ion-label>Warning</ion-label>
+</ion-item-divider>
+<ion-item-divider color="danger">
+  <ion-label>Danger</ion-label>
+</ion-item-divider>
+<ion-item-divider color="light">
+  <ion-label>Light</ion-label>
+</ion-item-divider>
+<ion-item-divider color="medium">
+  <ion-label>Medium</ion-label>
+</ion-item-divider>
+<ion-item-divider color="dark">
+  <ion-label>Dark</ion-label>
+</ion-item-divider>
+```
diff --git a/static/usage/v7/item-divider/theming/colors/react.md b/static/usage/v7/item-divider/theming/colors/react.md
new file mode 100644
index 00000000000..7bf4cd2193f
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonItemDivider, IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItemDivider>
+        <IonLabel>Default</IonLabel>
+      </IonItemDivider>
+      <IonItemDivider color="primary">
+        <IonLabel>Primary</IonLabel>
+      </IonItemDivider>
+      <IonItemDivider color="secondary">
+        <IonLabel>Secondary</IonLabel>
+      </IonItemDivider>
+      <IonItemDivider color="tertiary">
+        <IonLabel>Tertiary</IonLabel>
+      </IonItemDivider>
+      <IonItemDivider color="success">
+        <IonLabel>Success</IonLabel>
+      </IonItemDivider>
+      <IonItemDivider color="warning">
+        <IonLabel>Warning</IonLabel>
+      </IonItemDivider>
+      <IonItemDivider color="danger">
+        <IonLabel>Danger</IonLabel>
+      </IonItemDivider>
+      <IonItemDivider color="light">
+        <IonLabel>Light</IonLabel>
+      </IonItemDivider>
+      <IonItemDivider color="medium">
+        <IonLabel>Medium</IonLabel>
+      </IonItemDivider>
+      <IonItemDivider color="dark">
+        <IonLabel>Dark</IonLabel>
+      </IonItemDivider>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-divider/theming/colors/vue.md b/static/usage/v7/item-divider/theming/colors/vue.md
new file mode 100644
index 00000000000..981f99a09da
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+<template>
+  <ion-item-divider>
+    <ion-label>Default</ion-label>
+  </ion-item-divider>
+  <ion-item-divider color="primary">
+    <ion-label>Primary</ion-label>
+  </ion-item-divider>
+  <ion-item-divider color="secondary">
+    <ion-label>Secondary</ion-label>
+  </ion-item-divider>
+  <ion-item-divider color="tertiary">
+    <ion-label>Tertiary</ion-label>
+  </ion-item-divider>
+  <ion-item-divider color="success">
+    <ion-label>Success</ion-label>
+  </ion-item-divider>
+  <ion-item-divider color="warning">
+    <ion-label>Warning</ion-label>
+  </ion-item-divider>
+  <ion-item-divider color="danger">
+    <ion-label>Danger</ion-label>
+  </ion-item-divider>
+  <ion-item-divider color="light">
+    <ion-label>Light</ion-label>
+  </ion-item-divider>
+  <ion-item-divider color="medium">
+    <ion-label>Medium</ion-label>
+  </ion-item-divider>
+  <ion-item-divider color="dark">
+    <ion-label>Dark</ion-label>
+  </ion-item-divider>
+</template>
+
+<script lang="ts">
+  import { IonItemDivider, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItemDivider, IonLabel },
+  });
+</script>
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/angular/example_component_css.md b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..7c29ebdd846
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item-divider {
+  --background: #19422d;
+  --color: #fff;
+
+  --padding-top: 10px;
+  --padding-bottom: 10px;
+  --padding-start: 20px;
+  --padding-end: 20px;
+}
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..b3b1bb4da25
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+<ion-item-divider>
+  <ion-label>
+    Item Divider
+  </ion-label>
+</ion-item-divider>
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/demo.html b/static/usage/v7/item-divider/theming/css-properties/demo.html
new file mode 100644
index 00000000000..9223767446d
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Divider</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-item-divider {
+      --background: #19422d;
+      --color: #fff;
+
+      --padding-top: 10px;
+      --padding-bottom: 10px;
+      --padding-start: 20px;
+      --padding-end: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item-divider>
+          <ion-label>
+            Item Divider
+          </ion-label>
+        </ion-item-divider>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item-divider/theming/css-properties/index.md b/static/usage/v7/item-divider/theming/css-properties/index.md
new file mode 100644
index 00000000000..f425706d75d
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/item-divider/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/item-divider/theming/css-properties/javascript.md b/static/usage/v7/item-divider/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..6622b6d7e3f
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/javascript.md
@@ -0,0 +1,19 @@
+```html
+<style>
+  ion-item-divider {
+    --background: #19422d;
+    --color: #fff;
+
+    --padding-top: 10px;
+    --padding-bottom: 10px;
+    --padding-start: 20px;
+    --padding-end: 20px;
+  }
+</style>
+
+<ion-item-divider>
+  <ion-label>
+    Item Divider
+  </ion-label>
+</ion-item-divider>
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/react/main_css.md b/static/usage/v7/item-divider/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..7c29ebdd846
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item-divider {
+  --background: #19422d;
+  --color: #fff;
+
+  --padding-top: 10px;
+  --padding-bottom: 10px;
+  --padding-start: 20px;
+  --padding-end: 20px;
+}
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..6cd8d464d7e
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,18 @@
+
+```tsx
+import React from 'react';
+import { IonItemDivider, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonItemDivider>
+      <IonLabel>
+        Item Divider
+      </IonLabel>
+    </IonItemDivider>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/vue.md b/static/usage/v7/item-divider/theming/css-properties/vue.md
new file mode 100644
index 00000000000..3589bcc7cd4
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-item-divider>
+    <ion-label>
+      Item Divider
+    </ion-label>
+  </ion-item-divider>
+</template>
+
+<script lang="ts">
+  import { IonItemDivider } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItemDivider }
+  });
+</script>
+
+<style scoped>
+  ion-item-divider {
+    --background: #19422d;
+    --color: #fff;
+
+    --padding-top: 10px;
+    --padding-bottom: 10px;
+    --padding-start: 20px;
+    --padding-end: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/item-group/basic/angular.md b/static/usage/v7/item-group/basic/angular.md
new file mode 100644
index 00000000000..8ea0ff7cef9
--- /dev/null
+++ b/static/usage/v7/item-group/basic/angular.md
@@ -0,0 +1,33 @@
+```html
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>A</ion-label>
+  </ion-item-divider>
+
+  <ion-item>
+    <ion-label>Angola</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Argentina</ion-label>
+  </ion-item>
+  <ion-item lines="none">
+    <ion-label>Armenia</ion-label>
+  </ion-item>
+</ion-item-group>
+
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>B</ion-label>
+  </ion-item-divider>
+
+  <ion-item>
+    <ion-label>Bangladesh</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Belarus</ion-label>
+  </ion-item>
+  <ion-item lines="none">
+    <ion-label>Belgium</ion-label>
+  </ion-item>
+</ion-item-group>
+```
diff --git a/static/usage/v7/item-group/basic/demo.html b/static/usage/v7/item-group/basic/demo.html
new file mode 100644
index 00000000000..eaf062c371d
--- /dev/null
+++ b/static/usage/v7/item-group/basic/demo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Group</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>A</ion-label>
+          </ion-item-divider>
+
+          <ion-item>
+            <ion-label>Angola</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Argentina</ion-label>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label>Armenia</ion-label>
+          </ion-item>
+        </ion-item-group>
+
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>B</ion-label>
+          </ion-item-divider>
+
+          <ion-item>
+            <ion-label>Bangladesh</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Belarus</ion-label>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label>Belgium</ion-label>
+          </ion-item>
+        </ion-item-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item-group/basic/index.md b/static/usage/v7/item-group/basic/index.md
new file mode 100644
index 00000000000..a752ec62278
--- /dev/null
+++ b/static/usage/v7/item-group/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/item-group/basic/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/item-group/basic/javascript.md b/static/usage/v7/item-group/basic/javascript.md
new file mode 100644
index 00000000000..8ea0ff7cef9
--- /dev/null
+++ b/static/usage/v7/item-group/basic/javascript.md
@@ -0,0 +1,33 @@
+```html
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>A</ion-label>
+  </ion-item-divider>
+
+  <ion-item>
+    <ion-label>Angola</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Argentina</ion-label>
+  </ion-item>
+  <ion-item lines="none">
+    <ion-label>Armenia</ion-label>
+  </ion-item>
+</ion-item-group>
+
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>B</ion-label>
+  </ion-item-divider>
+
+  <ion-item>
+    <ion-label>Bangladesh</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Belarus</ion-label>
+  </ion-item>
+  <ion-item lines="none">
+    <ion-label>Belgium</ion-label>
+  </ion-item>
+</ion-item-group>
+```
diff --git a/static/usage/v7/item-group/basic/react.md b/static/usage/v7/item-group/basic/react.md
new file mode 100644
index 00000000000..ddb3f381230
--- /dev/null
+++ b/static/usage/v7/item-group/basic/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItemGroup>
+        <IonItemDivider>
+          <IonLabel>A</IonLabel>
+        </IonItemDivider>
+
+        <IonItem>
+          <IonLabel>Angola</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Argentina</IonLabel>
+        </IonItem>
+        <IonItem lines="none">
+          <IonLabel>Armenia</IonLabel>
+        </IonItem>
+      </IonItemGroup>
+
+      <IonItemGroup>
+        <IonItemDivider>
+          <IonLabel>B</IonLabel>
+        </IonItemDivider>
+
+        <IonItem>
+          <IonLabel>Bangladesh</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Belarus</IonLabel>
+        </IonItem>
+        <IonItem lines="none">
+          <IonLabel>Belgium</IonLabel>
+        </IonItem>
+      </IonItemGroup>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-group/basic/vue.md b/static/usage/v7/item-group/basic/vue.md
new file mode 100644
index 00000000000..edba72f0e69
--- /dev/null
+++ b/static/usage/v7/item-group/basic/vue.md
@@ -0,0 +1,44 @@
+```html
+<template>
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>A</ion-label>
+    </ion-item-divider>
+
+    <ion-item>
+      <ion-label>Angola</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Argentina</ion-label>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-label>Armenia</ion-label>
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>B</ion-label>
+    </ion-item-divider>
+
+    <ion-item>
+      <ion-label>Bangladesh</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Belarus</ion-label>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-label>Belgium</ion-label>
+    </ion-item>
+  </ion-item-group>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonItemDivider, IonItemGroup, IonLabel },
+  });
+</script>
+```
diff --git a/static/usage/v7/item-group/sliding-items/angular.md b/static/usage/v7/item-group/sliding-items/angular.md
new file mode 100644
index 00000000000..a451b58c9c4
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/angular.md
@@ -0,0 +1,95 @@
+```html
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>
+      Fruits
+    </ion-label>
+  </ion-item-divider>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        Grapes
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        Apples
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item lines="none">
+      <ion-label>
+        Bananas
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-item-group>
+
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>
+      Vegetables
+    </ion-label>
+  </ion-item-divider>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        Carrots
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        Broccoli
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item lines="none">
+      <ion-label>
+        Celery
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-item-group>
+```
diff --git a/static/usage/v7/item-group/sliding-items/demo.html b/static/usage/v7/item-group/sliding-items/demo.html
new file mode 100644
index 00000000000..87c87870df4
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/demo.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Group</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>
+              Fruits
+            </ion-label>
+          </ion-item-divider>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>
+                Grapes
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>
+                Apples
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item lines="none">
+              <ion-label>
+                Bananas
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </ion-item-group>
+
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>
+              Vegetables
+            </ion-label>
+          </ion-item-divider>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>
+                Carrots
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>
+                Broccoli
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item lines="none">
+              <ion-label>
+                Celery
+              </ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option>
+                Favorite
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </ion-item-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item-group/sliding-items/index.md b/static/usage/v7/item-group/sliding-items/index.md
new file mode 100644
index 00000000000..39983e2a9bc
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/item-group/sliding-items/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/item-group/sliding-items/javascript.md b/static/usage/v7/item-group/sliding-items/javascript.md
new file mode 100644
index 00000000000..a451b58c9c4
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/javascript.md
@@ -0,0 +1,95 @@
+```html
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>
+      Fruits
+    </ion-label>
+  </ion-item-divider>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        Grapes
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        Apples
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item lines="none">
+      <ion-label>
+        Bananas
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-item-group>
+
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>
+      Vegetables
+    </ion-label>
+  </ion-item-divider>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        Carrots
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        Broccoli
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item lines="none">
+      <ion-label>
+        Celery
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-item-group>
+```
diff --git a/static/usage/v7/item-group/sliding-items/react.md b/static/usage/v7/item-group/sliding-items/react.md
new file mode 100644
index 00000000000..2ca4d7ca380
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/react.md
@@ -0,0 +1,105 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItemGroup>
+        <IonItemDivider>
+          <IonLabel>
+            Fruits
+          </IonLabel>
+        </IonItemDivider>
+
+        <IonItemSliding>
+          <IonItem>
+            <IonLabel>
+              Grapes
+            </IonLabel>
+          </IonItem>
+          <IonItemOptions>
+            <IonItemOption>
+              Favorite
+            </IonItemOption>
+          </IonItemOptions>
+        </IonItemSliding>
+
+        <IonItemSliding>
+          <IonItem>
+            <IonLabel>
+              Apples
+            </IonLabel>
+          </IonItem>
+          <IonItemOptions>
+            <IonItemOption>
+              Favorite
+            </IonItemOption>
+          </IonItemOptions>
+        </IonItemSliding>
+
+        <IonItemSliding>
+          <IonItem lines="none">
+            <IonLabel>
+              Bananas
+            </IonLabel>
+          </IonItem>
+          <IonItemOptions>
+            <IonItemOption>
+              Favorite
+            </IonItemOption>
+          </IonItemOptions>
+        </IonItemSliding>
+      </IonItemGroup>
+
+      <IonItemGroup>
+        <IonItemDivider>
+          <IonLabel>
+            Vegetables
+          </IonLabel>
+        </IonItemDivider>
+
+        <IonItemSliding>
+          <IonItem>
+            <IonLabel>
+              Carrots
+            </IonLabel>
+          </IonItem>
+          <IonItemOptions>
+            <IonItemOption>
+              Favorite
+            </IonItemOption>
+          </IonItemOptions>
+        </IonItemSliding>
+
+        <IonItemSliding>
+          <IonItem>
+            <IonLabel>
+              Broccoli
+            </IonLabel>
+          </IonItem>
+          <IonItemOptions>
+            <IonItemOption>
+              Favorite
+            </IonItemOption>
+          </IonItemOptions>
+        </IonItemSliding>
+
+        <IonItemSliding>
+          <IonItem lines="none">
+            <IonLabel>
+              Celery
+            </IonLabel>
+          </IonItem>
+          <IonItemOptions>
+            <IonItemOption>
+              Favorite
+            </IonItemOption>
+          </IonItemOptions>
+        </IonItemSliding>
+      </IonItemGroup>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-group/sliding-items/vue.md b/static/usage/v7/item-group/sliding-items/vue.md
new file mode 100644
index 00000000000..5110ba1abed
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/vue.md
@@ -0,0 +1,106 @@
+```html
+<template>
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>
+        Fruits
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          Grapes
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          Apples
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item lines="none">
+        <ion-label>
+          Bananas
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>
+        Vegetables
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          Carrots
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          Broccoli
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item lines="none">
+        <ion-label>
+          Celery
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-item-group>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel },
+  });
+</script>
+```
diff --git a/static/usage/v7/item-sliding/basic/angular.md b/static/usage/v7/item-sliding/basic/angular.md
new file mode 100644
index 00000000000..a5404da4cb4
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/angular.md
@@ -0,0 +1,39 @@
+```html
+<ion-list>
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>Sliding Item with End Options</ion-label>
+    </ion-item>
+
+    <ion-item-options>
+      <ion-item-option>Favorite</ion-item-option>
+      <ion-item-option color="danger">Delete</ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">Archive</ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>Sliding Item with Start Options</ion-label>
+    </ion-item>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">Archive</ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>Sliding Item with Options on Both Sides</ion-label>
+    </ion-item>
+
+    <ion-item-options side="end">
+      <ion-item-option>Favorite</ion-item-option>
+      <ion-item-option color="danger">Delete</ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-list>
+```
diff --git a/static/usage/v7/item-sliding/basic/demo.html b/static/usage/v7/item-sliding/basic/demo.html
new file mode 100644
index 00000000000..00e4bc82f99
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/demo.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Sliding</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>Sliding Item with End Options</ion-label>
+            </ion-item>
+
+            <ion-item-options>
+              <ion-item-option>Favorite</ion-item-option>
+              <ion-item-option color="danger">Delete</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">Archive</ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>Sliding Item with Start Options</ion-label>
+            </ion-item>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">Archive</ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>Sliding Item with Options on Both Sides</ion-label>
+            </ion-item>
+
+            <ion-item-options side="end">
+              <ion-item-option>Favorite</ion-item-option>
+              <ion-item-option color="danger">Delete</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item-sliding/basic/index.md b/static/usage/v7/item-sliding/basic/index.md
new file mode 100644
index 00000000000..a75eff57b64
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item-sliding/basic/demo.html" />
diff --git a/static/usage/v7/item-sliding/basic/javascript.md b/static/usage/v7/item-sliding/basic/javascript.md
new file mode 100644
index 00000000000..a5404da4cb4
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/javascript.md
@@ -0,0 +1,39 @@
+```html
+<ion-list>
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>Sliding Item with End Options</ion-label>
+    </ion-item>
+
+    <ion-item-options>
+      <ion-item-option>Favorite</ion-item-option>
+      <ion-item-option color="danger">Delete</ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">Archive</ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>Sliding Item with Start Options</ion-label>
+    </ion-item>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">Archive</ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>Sliding Item with Options on Both Sides</ion-label>
+    </ion-item>
+
+    <ion-item-options side="end">
+      <ion-item-option>Favorite</ion-item-option>
+      <ion-item-option color="danger">Delete</ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-list>
+```
diff --git a/static/usage/v7/item-sliding/basic/react.md b/static/usage/v7/item-sliding/basic/react.md
new file mode 100644
index 00000000000..d9b45125574
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>Sliding Item with End Options</IonLabel>
+        </IonItem>
+
+        <IonItemOptions>
+          <IonItemOption>Favorite</IonItemOption>
+          <IonItemOption color="danger">Delete</IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItemOptions side="start">
+          <IonItemOption color="success">Archive</IonItemOption>
+        </IonItemOptions>
+
+        <IonItem>
+          <IonLabel>Sliding Item with Start Options</IonLabel>
+        </IonItem>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItemOptions side="start">
+          <IonItemOption color="success">Archive</IonItemOption>
+        </IonItemOptions>
+
+        <IonItem>
+          <IonLabel>Sliding Item with Options on Both Sides</IonLabel>
+        </IonItem>
+
+        <IonItemOptions side="end">
+          <IonItemOption>Favorite</IonItemOption>
+          <IonItemOption color="danger">Delete</IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-sliding/basic/vue.md b/static/usage/v7/item-sliding/basic/vue.md
new file mode 100644
index 00000000000..f6f8631a2bd
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/vue.md
@@ -0,0 +1,50 @@
+```html
+<template>
+  <ion-list>
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>Sliding Item with End Options</ion-label>
+      </ion-item>
+
+      <ion-item-options>
+        <ion-item-option>Favorite</ion-item-option>
+        <ion-item-option color="danger">Delete</ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item-options side="start">
+        <ion-item-option color="success">Archive</ion-item-option>
+      </ion-item-options>
+
+      <ion-item>
+        <ion-label>Sliding Item with Start Options</ion-label>
+      </ion-item>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item-options side="start">
+        <ion-item-option color="success">Archive</ion-item-option>
+      </ion-item-options>
+
+      <ion-item>
+        <ion-label>Sliding Item with Options on Both Sides</ion-label>
+      </ion-item>
+
+      <ion-item-options side="end">
+        <ion-item-option>Favorite</ion-item-option>
+        <ion-item-option color="danger">Delete</ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/item-sliding/expandable/angular.md b/static/usage/v7/item-sliding/expandable/angular.md
new file mode 100644
index 00000000000..b7e37fa57c7
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/angular.md
@@ -0,0 +1,18 @@
+```html
+<ion-list>
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success" expandable>Archive</ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>Sliding Item with Expandable Options</ion-label>
+    </ion-item>
+
+    <ion-item-options side="end">
+      <ion-item-option>Favorite</ion-item-option>
+      <ion-item-option color="danger" expandable>Delete</ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-list>
+```
diff --git a/static/usage/v7/item-sliding/expandable/demo.html b/static/usage/v7/item-sliding/expandable/demo.html
new file mode 100644
index 00000000000..bfdb1ef5884
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/demo.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Sliding</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success" expandable>Archive</ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>Sliding Item with Expandable Options</ion-label>
+            </ion-item>
+
+            <ion-item-options side="end">
+              <ion-item-option>Favorite</ion-item-option>
+              <ion-item-option color="danger" expandable>Delete</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item-sliding/expandable/index.md b/static/usage/v7/item-sliding/expandable/index.md
new file mode 100644
index 00000000000..f794264ce0f
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/item-sliding/expandable/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/item-sliding/expandable/javascript.md b/static/usage/v7/item-sliding/expandable/javascript.md
new file mode 100644
index 00000000000..b7e37fa57c7
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-list>
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success" expandable>Archive</ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>Sliding Item with Expandable Options</ion-label>
+    </ion-item>
+
+    <ion-item-options side="end">
+      <ion-item-option>Favorite</ion-item-option>
+      <ion-item-option color="danger" expandable>Delete</ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-list>
+```
diff --git a/static/usage/v7/item-sliding/expandable/react.md b/static/usage/v7/item-sliding/expandable/react.md
new file mode 100644
index 00000000000..3cb039d08ba
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItemSliding>
+        <IonItemOptions side="start">
+          <IonItemOption color="success" expandable>Archive</IonItemOption>
+        </IonItemOptions>
+
+        <IonItem>
+          <IonLabel>Sliding Item with Expandable Options</IonLabel>
+        </IonItem>
+
+        <IonItemOptions side="end">
+          <IonItemOption>Favorite</IonItemOption>
+          <IonItemOption color="danger" expandable>Delete</IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-sliding/expandable/vue.md b/static/usage/v7/item-sliding/expandable/vue.md
new file mode 100644
index 00000000000..fc9ee8c25ca
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/vue.md
@@ -0,0 +1,29 @@
+```html
+<template>
+  <ion-list>
+    <ion-item-sliding>
+      <ion-item-options side="start">
+        <ion-item-option color="success" expandable>Archive</ion-item-option>
+      </ion-item-options>
+
+      <ion-item>
+        <ion-label>Sliding Item with Expandable Options</ion-label>
+      </ion-item>
+
+      <ion-item-options side="end">
+        <ion-item-option>Favorite</ion-item-option>
+        <ion-item-option color="danger" expandable>Delete</ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/item-sliding/icons/angular.md b/static/usage/v7/item-sliding/icons/angular.md
new file mode 100644
index 00000000000..2ea983f2056
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/angular.md
@@ -0,0 +1,128 @@
+```html
+<ion-list>
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">
+        <ion-icon slot="icon-only" name="archive"></ion-icon>
+      </ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>Sliding Item with Icons Only</ion-label>
+    </ion-item>
+
+    <ion-item-options side="end">
+      <ion-item-option>
+        <ion-icon slot="icon-only" name="heart"></ion-icon>
+      </ion-item-option>
+      <ion-item-option color="danger">
+        <ion-icon slot="icon-only" name="trash"></ion-icon>
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">
+        <ion-icon slot="start" name="archive"></ion-icon>
+        Archive
+      </ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>
+        Sliding Item with Start Icons
+      </ion-label>
+    </ion-item>
+
+    <ion-item-options side="end">
+      <ion-item-option>
+        <ion-icon slot="start" name="heart"></ion-icon>
+        Favorite
+      </ion-item-option>
+      <ion-item-option color="danger">
+        <ion-icon slot="start" name="trash"></ion-icon>
+        Delete
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">
+        <ion-icon slot="end" name="archive"></ion-icon>
+        Archive
+      </ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>
+        Sliding Item with End Icons
+      </ion-label>
+    </ion-item>
+
+    <ion-item-options>
+      <ion-item-option>
+        <ion-icon slot="end" name="heart"></ion-icon>
+        Favorite
+      </ion-item-option>
+      <ion-item-option color="danger">
+        <ion-icon slot="end" name="trash"></ion-icon>
+        Delete
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">
+        <ion-icon slot="top" name="archive"></ion-icon>
+        Archive
+      </ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>
+        Sliding Item with Top Icons
+      </ion-label>
+    </ion-item>
+
+    <ion-item-options>
+      <ion-item-option>
+        <ion-icon slot="top" name="heart"></ion-icon>
+        Favorite
+      </ion-item-option>
+      <ion-item-option color="danger">
+        <ion-icon slot="top" name="trash"></ion-icon>
+        Delete
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">
+        <ion-icon slot="bottom" name="archive"></ion-icon>
+        Archive
+      </ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>
+        Sliding Item with Bottom Icons
+      </ion-label>
+    </ion-item>
+
+    <ion-item-options>
+      <ion-item-option>
+        <ion-icon slot="bottom" name="heart"></ion-icon>
+        Favorite
+      </ion-item-option>
+      <ion-item-option color="danger">
+        <ion-icon slot="bottom" name="trash"></ion-icon>
+        Delete
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-list>
+```
diff --git a/static/usage/v7/item-sliding/icons/demo.html b/static/usage/v7/item-sliding/icons/demo.html
new file mode 100644
index 00000000000..6bc01e42837
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/demo.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item Sliding</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      align-items: stretch;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">
+                <ion-icon slot="icon-only" name="archive"></ion-icon>
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>Sliding Item with Icons Only</ion-label>
+            </ion-item>
+
+            <ion-item-options side="end">
+              <ion-item-option>
+                <ion-icon slot="icon-only" name="heart"></ion-icon>
+              </ion-item-option>
+              <ion-item-option color="danger">
+                <ion-icon slot="icon-only" name="trash"></ion-icon>
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">
+                <ion-icon slot="start" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>
+                Sliding Item with Start Icons
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options side="end">
+              <ion-item-option>
+                <ion-icon slot="start" name="heart"></ion-icon>
+                Favorite
+              </ion-item-option>
+              <ion-item-option color="danger">
+                <ion-icon slot="start" name="trash"></ion-icon>
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">
+                <ion-icon slot="end" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>
+                Sliding Item with End Icons
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options>
+              <ion-item-option>
+                <ion-icon slot="end" name="heart"></ion-icon>
+                Favorite
+              </ion-item-option>
+              <ion-item-option color="danger">
+                <ion-icon slot="end" name="trash"></ion-icon>
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">
+                <ion-icon slot="top" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>
+                Sliding Item with Top Icons
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options>
+              <ion-item-option>
+                <ion-icon slot="top" name="heart"></ion-icon>
+                Favorite
+              </ion-item-option>
+              <ion-item-option color="danger">
+                <ion-icon slot="top" name="trash"></ion-icon>
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="success">
+                <ion-icon slot="bottom" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>
+                Sliding Item with Bottom Icons
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options>
+              <ion-item-option>
+                <ion-icon slot="bottom" name="heart"></ion-icon>
+                Favorite
+              </ion-item-option>
+              <ion-item-option color="danger">
+                <ion-icon slot="bottom" name="trash"></ion-icon>
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item-sliding/icons/index.md b/static/usage/v7/item-sliding/icons/index.md
new file mode 100644
index 00000000000..9b6b42564b7
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/item-sliding/icons/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/item-sliding/icons/javascript.md b/static/usage/v7/item-sliding/icons/javascript.md
new file mode 100644
index 00000000000..2ea983f2056
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/javascript.md
@@ -0,0 +1,128 @@
+```html
+<ion-list>
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">
+        <ion-icon slot="icon-only" name="archive"></ion-icon>
+      </ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>Sliding Item with Icons Only</ion-label>
+    </ion-item>
+
+    <ion-item-options side="end">
+      <ion-item-option>
+        <ion-icon slot="icon-only" name="heart"></ion-icon>
+      </ion-item-option>
+      <ion-item-option color="danger">
+        <ion-icon slot="icon-only" name="trash"></ion-icon>
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">
+        <ion-icon slot="start" name="archive"></ion-icon>
+        Archive
+      </ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>
+        Sliding Item with Start Icons
+      </ion-label>
+    </ion-item>
+
+    <ion-item-options side="end">
+      <ion-item-option>
+        <ion-icon slot="start" name="heart"></ion-icon>
+        Favorite
+      </ion-item-option>
+      <ion-item-option color="danger">
+        <ion-icon slot="start" name="trash"></ion-icon>
+        Delete
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">
+        <ion-icon slot="end" name="archive"></ion-icon>
+        Archive
+      </ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>
+        Sliding Item with End Icons
+      </ion-label>
+    </ion-item>
+
+    <ion-item-options>
+      <ion-item-option>
+        <ion-icon slot="end" name="heart"></ion-icon>
+        Favorite
+      </ion-item-option>
+      <ion-item-option color="danger">
+        <ion-icon slot="end" name="trash"></ion-icon>
+        Delete
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">
+        <ion-icon slot="top" name="archive"></ion-icon>
+        Archive
+      </ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>
+        Sliding Item with Top Icons
+      </ion-label>
+    </ion-item>
+
+    <ion-item-options>
+      <ion-item-option>
+        <ion-icon slot="top" name="heart"></ion-icon>
+        Favorite
+      </ion-item-option>
+      <ion-item-option color="danger">
+        <ion-icon slot="top" name="trash"></ion-icon>
+        Delete
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item-options side="start">
+      <ion-item-option color="success">
+        <ion-icon slot="bottom" name="archive"></ion-icon>
+        Archive
+      </ion-item-option>
+    </ion-item-options>
+
+    <ion-item>
+      <ion-label>
+        Sliding Item with Bottom Icons
+      </ion-label>
+    </ion-item>
+
+    <ion-item-options>
+      <ion-item-option>
+        <ion-icon slot="bottom" name="heart"></ion-icon>
+        Favorite
+      </ion-item-option>
+      <ion-item-option color="danger">
+        <ion-icon slot="bottom" name="trash"></ion-icon>
+        Delete
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-list>
+```
diff --git a/static/usage/v7/item-sliding/icons/react.md b/static/usage/v7/item-sliding/icons/react.md
new file mode 100644
index 00000000000..be291c017e4
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/react.md
@@ -0,0 +1,137 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+import { archive, heart, trash } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItemSliding>
+        <IonItemOptions side="start">
+          <IonItemOption color="success">
+            <IonIcon slot="icon-only" icon={archive}></IonIcon>
+          </IonItemOption>
+        </IonItemOptions>
+
+        <IonItem>
+          <IonLabel>Sliding Item with Icons Only</IonLabel>
+        </IonItem>
+
+        <IonItemOptions side="end">
+          <IonItemOption>
+            <IonIcon slot="icon-only" icon={heart}></IonIcon>
+          </IonItemOption>
+          <IonItemOption color="danger">
+            <IonIcon slot="icon-only" icon={trash}></IonIcon>
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItemOptions side="start">
+          <IonItemOption color="success">
+            <IonIcon slot="start" icon={archive}></IonIcon>
+            Archive
+          </IonItemOption>
+        </IonItemOptions>
+
+        <IonItem>
+          <IonLabel>
+            Sliding Item with Start Icons
+          </IonLabel>
+        </IonItem>
+
+        <IonItemOptions side="end">
+          <IonItemOption>
+            <IonIcon slot="start" icon={heart}></IonIcon>
+            Favorite
+          </IonItemOption>
+          <IonItemOption color="danger">
+            <IonIcon slot="start" icon={trash}></IonIcon>
+            Delete
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItemOptions side="start">
+          <IonItemOption color="success">
+            <IonIcon slot="end" icon={archive}></IonIcon>
+            Archive
+          </IonItemOption>
+        </IonItemOptions>
+
+        <IonItem>
+          <IonLabel>
+            Sliding Item with End Icons
+          </IonLabel>
+        </IonItem>
+
+        <IonItemOptions>
+          <IonItemOption>
+            <IonIcon slot="end" icon={heart}></IonIcon>
+            Favorite
+          </IonItemOption>
+          <IonItemOption color="danger">
+            <IonIcon slot="end" icon={trash}></IonIcon>
+            Delete
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItemOptions side="start">
+          <IonItemOption color="success">
+            <IonIcon slot="top" icon={archive}></IonIcon>
+            Archive
+          </IonItemOption>
+        </IonItemOptions>
+
+        <IonItem>
+          <IonLabel>
+            Sliding Item with Top Icons
+          </IonLabel>
+        </IonItem>
+
+        <IonItemOptions>
+          <IonItemOption>
+            <IonIcon slot="top" icon={heart}></IonIcon>
+            Favorite
+          </IonItemOption>
+          <IonItemOption color="danger">
+            <IonIcon slot="top" icon={trash}></IonIcon>
+            Delete
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItemOptions side="start">
+          <IonItemOption color="success">
+            <IonIcon slot="bottom" icon={archive}></IonIcon>
+            Archive
+          </IonItemOption>
+        </IonItemOptions>
+
+        <IonItem>
+          <IonLabel>
+            Sliding Item with Bottom Icons
+          </IonLabel>
+        </IonItem>
+
+        <IonItemOptions>
+          <IonItemOption>
+            <IonIcon slot="bottom" icon={heart}></IonIcon>
+            Favorite
+          </IonItemOption>
+          <IonItemOption color="danger">
+            <IonIcon slot="bottom" icon={trash}></IonIcon>
+            Delete
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-sliding/icons/vue.md b/static/usage/v7/item-sliding/icons/vue.md
new file mode 100644
index 00000000000..6b456c9882e
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/vue.md
@@ -0,0 +1,143 @@
+```html
+<template>
+  <ion-list>
+    <ion-item-sliding>
+      <ion-item-options side="start">
+        <ion-item-option color="success">
+          <ion-icon slot="icon-only" :icon="archive"></ion-icon>
+        </ion-item-option>
+      </ion-item-options>
+
+      <ion-item>
+        <ion-label>Sliding Item with Icons Only</ion-label>
+      </ion-item>
+
+      <ion-item-options side="end">
+        <ion-item-option>
+          <ion-icon slot="icon-only" :icon="heart"></ion-icon>
+        </ion-item-option>
+        <ion-item-option color="danger">
+          <ion-icon slot="icon-only" :icon="trash"></ion-icon>
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item-options side="start">
+        <ion-item-option color="success">
+          <ion-icon slot="start" :icon="archive"></ion-icon>
+          Archive
+        </ion-item-option>
+      </ion-item-options>
+
+      <ion-item>
+        <ion-label>
+          Sliding Item with Start Icons
+        </ion-label>
+      </ion-item>
+
+      <ion-item-options side="end">
+        <ion-item-option>
+          <ion-icon slot="start" :icon="heart"></ion-icon>
+          Favorite
+        </ion-item-option>
+        <ion-item-option color="danger">
+          <ion-icon slot="start" :icon="trash"></ion-icon>
+          Delete
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item-options side="start">
+        <ion-item-option color="success">
+          <ion-icon slot="end" :icon="archive"></ion-icon>
+          Archive
+        </ion-item-option>
+      </ion-item-options>
+
+      <ion-item>
+        <ion-label>
+          Sliding Item with End Icons
+        </ion-label>
+      </ion-item>
+
+      <ion-item-options>
+        <ion-item-option>
+          <ion-icon slot="end" :icon="heart"></ion-icon>
+          Favorite
+        </ion-item-option>
+        <ion-item-option color="danger">
+          <ion-icon slot="end" :icon="trash"></ion-icon>
+          Delete
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item-options side="start">
+        <ion-item-option color="success">
+          <ion-icon slot="top" :icon="archive"></ion-icon>
+          Archive
+        </ion-item-option>
+      </ion-item-options>
+
+      <ion-item>
+        <ion-label>
+          Sliding Item with Top Icons
+        </ion-label>
+      </ion-item>
+
+      <ion-item-options>
+        <ion-item-option>
+          <ion-icon slot="top" :icon="heart"></ion-icon>
+          Favorite
+        </ion-item-option>
+        <ion-item-option color="danger">
+          <ion-icon slot="top" :icon="trash"></ion-icon>
+          Delete
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item-options side="start">
+        <ion-item-option color="success">
+          <ion-icon slot="bottom" :icon="archive"></ion-icon>
+          Archive
+        </ion-item-option>
+      </ion-item-options>
+
+      <ion-item>
+        <ion-label>
+          Sliding Item with Bottom Icons
+        </ion-label>
+      </ion-item>
+
+      <ion-item-options>
+        <ion-item-option>
+          <ion-icon slot="bottom" :icon="heart"></ion-icon>
+          Favorite
+        </ion-item-option>
+        <ion-item-option color="danger">
+          <ion-icon slot="bottom" :icon="trash"></ion-icon>
+          Delete
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/vue';
+  import { archive, heart, trash } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList },
+    setup() {
+      return { archive, heart, trash }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/item/basic/angular.md b/static/usage/v7/item/basic/angular.md
new file mode 100644
index 00000000000..f0b13250493
--- /dev/null
+++ b/static/usage/v7/item/basic/angular.md
@@ -0,0 +1,42 @@
+```html
+<ion-item>
+  <ion-label>Basic Item</ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Multi-line text that should ellipsis when it is too long
+    to fit on one line. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label class="ion-text-wrap">
+    Multi-line text that should wrap when it is too long
+    to fit on one line. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    <h1>H1 Heading</h1>
+    <p>Paragraph</p>
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    <h2>H2 Heading</h2>
+    <p>Paragraph</p>
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    <h3>H3 Heading</h3>
+    <p>Paragraph</p>
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/basic/demo.html b/static/usage/v7/item/basic/demo.html
new file mode 100644
index 00000000000..55e5fe17a30
--- /dev/null
+++ b/static/usage/v7/item/basic/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Basic Item</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Multi-line text that should ellipsis when it is too long
+            to fit on one line. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit.
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            Multi-line text that should wrap when it is too long
+            to fit on one line. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit.
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h1>H1 Heading</h1>
+            <p>Paragraph</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h2>H2 Heading</h2>
+            <p>Paragraph</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h3>H3 Heading</h3>
+            <p>Paragraph</p>
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/basic/index.md b/static/usage/v7/item/basic/index.md
new file mode 100644
index 00000000000..f5c330d7b40
--- /dev/null
+++ b/static/usage/v7/item/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/basic/demo.html" size="medium" />
diff --git a/static/usage/v7/item/basic/javascript.md b/static/usage/v7/item/basic/javascript.md
new file mode 100644
index 00000000000..f0b13250493
--- /dev/null
+++ b/static/usage/v7/item/basic/javascript.md
@@ -0,0 +1,42 @@
+```html
+<ion-item>
+  <ion-label>Basic Item</ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Multi-line text that should ellipsis when it is too long
+    to fit on one line. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label class="ion-text-wrap">
+    Multi-line text that should wrap when it is too long
+    to fit on one line. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    <h1>H1 Heading</h1>
+    <p>Paragraph</p>
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    <h2>H2 Heading</h2>
+    <p>Paragraph</p>
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    <h3>H3 Heading</h3>
+    <p>Paragraph</p>
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/basic/react.md b/static/usage/v7/item/basic/react.md
new file mode 100644
index 00000000000..dfed86af19e
--- /dev/null
+++ b/static/usage/v7/item/basic/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonLabel>Basic Item</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>
+          Multi-line text that should ellipsis when it is too long
+          to fit on one line. Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit.
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel class="ion-text-wrap">
+          Multi-line text that should wrap when it is too long
+          to fit on one line. Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit.
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>
+          <h1>H1 Heading</h1>
+          <p>Paragraph</p>
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>
+          <h2>H2 Heading</h2>
+          <p>Paragraph</p>
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>
+          <h3>H3 Heading</h3>
+          <p>Paragraph</p>
+        </IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md
new file mode 100644
index 00000000000..479e90196a4
--- /dev/null
+++ b/static/usage/v7/item/basic/vue.md
@@ -0,0 +1,53 @@
+```html
+<template>
+  <ion-item>
+    <ion-label>Basic Item</ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Multi-line text that should ellipsis when it is too long
+      to fit on one line. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit.
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label class="ion-text-wrap">
+      Multi-line text that should wrap when it is too long
+      to fit on one line. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit.
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      <h1>H1 Heading</h1>
+      <p>Paragraph</p>
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      <h2>H2 Heading</h2>
+      <p>Paragraph</p>
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      <h3>H3 Heading</h3>
+      <p>Paragraph</p>
+    </ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel },
+  });
+</script>
+```
diff --git a/static/usage/v7/item/buttons/angular.md b/static/usage/v7/item/buttons/angular.md
new file mode 100644
index 00000000000..bf7069f48f7
--- /dev/null
+++ b/static/usage/v7/item/buttons/angular.md
@@ -0,0 +1,46 @@
+```html
+<ion-item>
+  <ion-button slot="start">
+    Start
+  </ion-button>
+  <ion-label>Default Buttons</ion-label>
+  <ion-button slot="end">
+    End
+  </ion-button>
+</ion-item>
+
+<ion-item>
+  <ion-button slot="start">
+    Start
+    <ion-icon name="home" slot="end"></ion-icon>
+  </ion-button>
+  <ion-label>Buttons with Icons</ion-label>
+  <ion-button slot="end">
+    <ion-icon name="star" slot="end"></ion-icon>
+    End
+  </ion-button>
+</ion-item>
+
+<ion-item>
+  <ion-button slot="start">
+    <ion-icon slot="icon-only" name="navigate"></ion-icon>
+  </ion-button>
+  <ion-label>Icon only Buttons</ion-label>
+  <ion-button slot="end">
+    <ion-icon slot="icon-only" name="star"></ion-icon>
+  </ion-button>
+</ion-item>
+
+<ion-item>
+  <ion-label>Button Sizes</ion-label>
+  <ion-button slot="end" size="small">
+    Small
+  </ion-button>
+  <ion-button slot="end" size="default">
+    Default
+  </ion-button>
+  <ion-button slot="end" size="large">
+    Large
+  </ion-button>
+</ion-item>
+```
diff --git a/static/usage/v7/item/buttons/demo.html b/static/usage/v7/item/buttons/demo.html
new file mode 100644
index 00000000000..08847fb4fff
--- /dev/null
+++ b/static/usage/v7/item/buttons/demo.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      align-items: stretch;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-button slot="start">
+            Start
+          </ion-button>
+          <ion-label>Default Buttons</ion-label>
+          <ion-button slot="end">
+            End
+          </ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-button slot="start">
+            Start
+            <ion-icon name="home" slot="end"></ion-icon>
+          </ion-button>
+          <ion-label>Buttons with Icons</ion-label>
+          <ion-button slot="end">
+            <ion-icon name="star" slot="end"></ion-icon>
+            End
+          </ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-button slot="start">
+            <ion-icon slot="icon-only" name="navigate"></ion-icon>
+          </ion-button>
+          <ion-label>Icon only Buttons</ion-label>
+          <ion-button slot="end">
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Button Sizes</ion-label>
+          <ion-button slot="end" size="small">
+            Small
+          </ion-button>
+          <ion-button slot="end" size="default">
+            Default
+          </ion-button>
+          <ion-button slot="end" size="large">
+            Large
+          </ion-button>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/buttons/index.md b/static/usage/v7/item/buttons/index.md
new file mode 100644
index 00000000000..dc0db44f71d
--- /dev/null
+++ b/static/usage/v7/item/buttons/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/buttons/demo.html" size="250px" />
diff --git a/static/usage/v7/item/buttons/javascript.md b/static/usage/v7/item/buttons/javascript.md
new file mode 100644
index 00000000000..bf7069f48f7
--- /dev/null
+++ b/static/usage/v7/item/buttons/javascript.md
@@ -0,0 +1,46 @@
+```html
+<ion-item>
+  <ion-button slot="start">
+    Start
+  </ion-button>
+  <ion-label>Default Buttons</ion-label>
+  <ion-button slot="end">
+    End
+  </ion-button>
+</ion-item>
+
+<ion-item>
+  <ion-button slot="start">
+    Start
+    <ion-icon name="home" slot="end"></ion-icon>
+  </ion-button>
+  <ion-label>Buttons with Icons</ion-label>
+  <ion-button slot="end">
+    <ion-icon name="star" slot="end"></ion-icon>
+    End
+  </ion-button>
+</ion-item>
+
+<ion-item>
+  <ion-button slot="start">
+    <ion-icon slot="icon-only" name="navigate"></ion-icon>
+  </ion-button>
+  <ion-label>Icon only Buttons</ion-label>
+  <ion-button slot="end">
+    <ion-icon slot="icon-only" name="star"></ion-icon>
+  </ion-button>
+</ion-item>
+
+<ion-item>
+  <ion-label>Button Sizes</ion-label>
+  <ion-button slot="end" size="small">
+    Small
+  </ion-button>
+  <ion-button slot="end" size="default">
+    Default
+  </ion-button>
+  <ion-button slot="end" size="large">
+    Large
+  </ion-button>
+</ion-item>
+```
diff --git a/static/usage/v7/item/buttons/react.md b/static/usage/v7/item/buttons/react.md
new file mode 100644
index 00000000000..8776e5215fb
--- /dev/null
+++ b/static/usage/v7/item/buttons/react.md
@@ -0,0 +1,57 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { home, navigate, star } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonButton slot="start">
+          Start
+        </IonButton>
+        <IonLabel>Default Buttons</IonLabel>
+        <IonButton slot="end">
+          End
+        </IonButton>
+      </IonItem>
+
+      <IonItem>
+        <IonButton slot="start">
+          Start
+          <IonIcon icon={home} slot="end"></IonIcon>
+        </IonButton>
+        <IonLabel>Buttons with Icons</IonLabel>
+        <IonButton slot="end">
+          <IonIcon icon={star} slot="end"></IonIcon>
+          End
+        </IonButton>
+      </IonItem>
+
+      <IonItem>
+        <IonButton slot="start">
+          <IonIcon slot="icon-only" icon={navigate}></IonIcon>
+        </IonButton>
+        <IonLabel>Icon only Buttons</IonLabel>
+        <IonButton slot="end">
+          <IonIcon slot="icon-only" icon={star}></IonIcon>
+        </IonButton>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Button Sizes</IonLabel>
+        <IonButton slot="end" size="small">
+          Small
+        </IonButton>
+        <IonButton slot="end" size="default">
+          Default
+        </IonButton>
+        <IonButton slot="end" size="large">
+          Large
+        </IonButton>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/buttons/vue.md b/static/usage/v7/item/buttons/vue.md
new file mode 100644
index 00000000000..02de38e58ab
--- /dev/null
+++ b/static/usage/v7/item/buttons/vue.md
@@ -0,0 +1,61 @@
+```html
+<template>
+  <ion-item>
+    <ion-button slot="start">
+      Start
+    </ion-button>
+    <ion-label>Default Buttons</ion-label>
+    <ion-button slot="end">
+      End
+    </ion-button>
+  </ion-item>
+
+  <ion-item>
+    <ion-button slot="start">
+      Start
+      <ion-icon :icon="home" slot="end"></ion-icon>
+    </ion-button>
+    <ion-label>Buttons with Icons</ion-label>
+    <ion-button slot="end">
+      <ion-icon :icon="star" slot="end"></ion-icon>
+      End
+    </ion-button>
+  </ion-item>
+
+  <ion-item>
+    <ion-button slot="start">
+      <ion-icon slot="icon-only" :icon="navigate"></ion-icon>
+    </ion-button>
+    <ion-label>Icon only Buttons</ion-label>
+    <ion-button slot="end">
+      <ion-icon slot="icon-only" :icon="star"></ion-icon>
+    </ion-button>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Button Sizes</ion-label>
+    <ion-button slot="end" size="small">
+      Small
+    </ion-button>
+    <ion-button slot="end" size="default">
+      Default
+    </ion-button>
+    <ion-button slot="end" size="large">
+      Large
+    </ion-button>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/vue';
+  import { home, navigate, star } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonIcon, IonItem, IonLabel },
+    setup() {
+      return { home, navigate, star }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/item/clickable/angular.md b/static/usage/v7/item/clickable/angular.md
new file mode 100644
index 00000000000..7e8ac266eb2
--- /dev/null
+++ b/static/usage/v7/item/clickable/angular.md
@@ -0,0 +1,17 @@
+```html
+<ion-item href="#">
+  <ion-label>Anchor Item</ion-label>
+</ion-item>
+
+<ion-item href="#" disabled="true">
+  <ion-label>Disabled Anchor Item</ion-label>
+</ion-item>
+
+<ion-item button>
+  <ion-label>Button Item</ion-label>
+</ion-item>
+
+<ion-item button disabled="true">
+  <ion-label>Disabled Button Item</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/clickable/demo.html b/static/usage/v7/item/clickable/demo.html
new file mode 100644
index 00000000000..189cbffbd35
--- /dev/null
+++ b/static/usage/v7/item/clickable/demo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item href="#">
+          <ion-label>Anchor Item</ion-label>
+        </ion-item>
+
+        <ion-item href="#" disabled="true">
+          <ion-label>Disabled Anchor Item</ion-label>
+        </ion-item>
+
+        <ion-item button>
+          <ion-label>Button Item</ion-label>
+        </ion-item>
+
+        <ion-item button disabled="true">
+          <ion-label>Disabled Button Item</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/clickable/index.md b/static/usage/v7/item/clickable/index.md
new file mode 100644
index 00000000000..11fe249d0c5
--- /dev/null
+++ b/static/usage/v7/item/clickable/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/clickable/demo.html" />
diff --git a/static/usage/v7/item/clickable/javascript.md b/static/usage/v7/item/clickable/javascript.md
new file mode 100644
index 00000000000..7e8ac266eb2
--- /dev/null
+++ b/static/usage/v7/item/clickable/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-item href="#">
+  <ion-label>Anchor Item</ion-label>
+</ion-item>
+
+<ion-item href="#" disabled="true">
+  <ion-label>Disabled Anchor Item</ion-label>
+</ion-item>
+
+<ion-item button>
+  <ion-label>Button Item</ion-label>
+</ion-item>
+
+<ion-item button disabled="true">
+  <ion-label>Disabled Button Item</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/clickable/react.md b/static/usage/v7/item/clickable/react.md
new file mode 100644
index 00000000000..c83845b65c7
--- /dev/null
+++ b/static/usage/v7/item/clickable/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem href="#">
+        <IonLabel>Anchor Item</IonLabel>
+      </IonItem>
+
+      <IonItem href="#" disabled={true}>
+        <IonLabel>Disabled Anchor Item</IonLabel>
+      </IonItem>
+
+      <IonItem button>
+        <IonLabel>Button Item</IonLabel>
+      </IonItem>
+
+      <IonItem button disabled={true}>
+        <IonLabel>Disabled Button Item</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/clickable/vue.md b/static/usage/v7/item/clickable/vue.md
new file mode 100644
index 00000000000..1af8f362758
--- /dev/null
+++ b/static/usage/v7/item/clickable/vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-item href="#">
+    <ion-label>Anchor Item</ion-label>
+  </ion-item>
+
+  <ion-item href="#" disabled="true">
+    <ion-label>Disabled Anchor Item</ion-label>
+  </ion-item>
+
+  <ion-item button>
+    <ion-label>Button Item</ion-label>
+  </ion-item>
+
+  <ion-item button disabled="true">
+    <ion-label>Disabled Button Item</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel },
+  });
+</script>
+```
diff --git a/static/usage/v7/item/counter/angular/example_component_html.md b/static/usage/v7/item/counter/angular/example_component_html.md
new file mode 100644
index 00000000000..913d6644cfc
--- /dev/null
+++ b/static/usage/v7/item/counter/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-item counter="true">
+  <ion-label position="floating">Default Counter</ion-label>
+  <ion-input maxlength="20"></ion-input>
+</ion-item>
+
+<ion-item id="custom-item" counter="true" [counterFormatter]="customCounterFormatter">
+  <ion-label position="floating">Custom Counter Format</ion-label>
+  <ion-input maxlength="20"></ion-input>
+</ion-item>
+```
diff --git a/static/usage/v7/item/counter/angular/example_component_ts.md b/static/usage/v7/item/counter/angular/example_component_ts.md
new file mode 100644
index 00000000000..2c08dc06fc2
--- /dev/null
+++ b/static/usage/v7/item/counter/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  customCounterFormatter(inputLength: number, maxLength: number) {
+    return `${maxLength - inputLength} characters remaining`;
+  }
+}
+```
diff --git a/static/usage/v7/item/counter/demo.html b/static/usage/v7/item/counter/demo.html
new file mode 100644
index 00000000000..cb68d350bc2
--- /dev/null
+++ b/static/usage/v7/item/counter/demo.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    ion-item {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item counter="true">
+          <ion-label position="floating">Default Counter</ion-label>
+          <ion-input maxlength="20"></ion-input>
+        </ion-item>
+
+        <ion-item id="custom-item" counter="true">
+          <ion-label position="floating">Custom Counter Format</ion-label>
+          <ion-input maxlength="20"></ion-input>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+<script>
+  const customItem = document.querySelector('#custom-item');
+  customItem.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
+</script>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/counter/index.md b/static/usage/v7/item/counter/index.md
new file mode 100644
index 00000000000..c37e7d4f654
--- /dev/null
+++ b/static/usage/v7/item/counter/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/item/counter/demo.html"
+/>
diff --git a/static/usage/v7/item/counter/javascript.md b/static/usage/v7/item/counter/javascript.md
new file mode 100644
index 00000000000..761f1819ef9
--- /dev/null
+++ b/static/usage/v7/item/counter/javascript.md
@@ -0,0 +1,16 @@
+```html
+<ion-item counter="true">
+  <ion-label position="floating">Default Counter</ion-label>
+  <ion-input maxlength="20"></ion-input>
+</ion-item>
+
+<ion-item id="custom-item" counter="true">
+  <ion-label position="floating">Custom Counter Format</ion-label>
+  <ion-input maxlength="20"></ion-input>
+</ion-item>
+
+<script>
+  const customItem = document.querySelector('#custom-item');
+  customItem.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
+</script>
+```
diff --git a/static/usage/v7/item/counter/react.md b/static/usage/v7/item/counter/react.md
new file mode 100644
index 00000000000..435701d5b53
--- /dev/null
+++ b/static/usage/v7/item/counter/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem counter={true}>
+        <IonLabel position="floating">Default Counter</IonLabel>
+        <IonInput maxlength={20}></IonInput>
+      </IonItem>
+
+      <IonItem counter={true} counterFormatter={(inputLength, maxLength) => `${maxLength - inputLength} characters remaining`}>
+        <IonLabel position="floating">Custom Counter Format</IonLabel>
+        <IonInput maxlength={20}></IonInput>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/counter/vue.md b/static/usage/v7/item/counter/vue.md
new file mode 100644
index 00000000000..3a97d40743a
--- /dev/null
+++ b/static/usage/v7/item/counter/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-item counter="true">
+    <ion-label position="floating">Default Counter</ion-label>
+    <ion-input maxlength="20"></ion-input>
+  </ion-item>
+
+  <ion-item id="custom-item" counter="true" :counterFormatter="customFormatter">
+    <ion-label position="floating">Custom Counter Format</ion-label>
+    <ion-input maxlength="20"></ion-input>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonLabel },
+    methods: {
+      customFormatter(inputLength, maxLength) {
+        return `${maxLength - inputLength} characters remaining`;
+      }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/item/detail-arrows/angular.md b/static/usage/v7/item/detail-arrows/angular.md
new file mode 100644
index 00000000000..aa14eb9ec2d
--- /dev/null
+++ b/static/usage/v7/item/detail-arrows/angular.md
@@ -0,0 +1,37 @@
+```html
+<ion-item detail="true">
+  <ion-label>
+    <h3>Text Item</h3>
+    <p>Detail set to true - detail arrow displays on both modes</p>
+  </ion-label>
+</ion-item>
+
+<ion-item button>
+  <ion-label>
+    <h3>Button Item</h3>
+    <p>Default detail - detail arrow displays on iOS only</p>
+  </ion-label>
+</ion-item>
+
+<ion-item button detail="true">
+  <ion-label>
+    <h3>Button Item</h3>
+    <p>Detail set to true - detail arrow displays on both modes</p>
+  </ion-label>
+</ion-item>
+
+<ion-item button detail="false">
+  <ion-label>
+    <h3>Button Item</h3>
+    <p>Detail set to false - detail arrow hidden on both modes</p>
+  </ion-label>
+</ion-item>
+
+<ion-item button detail="true" detail-icon="caret-forward-outline">
+  <ion-label>
+    <h3>Button Item</h3>
+    <p>Detail set to true - detail arrow displays on both modes</p>
+    <p>Detail icon set to caret-forward-outline</p>
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/detail-arrows/demo.html b/static/usage/v7/item/detail-arrows/demo.html
new file mode 100644
index 00000000000..1cc1c907045
--- /dev/null
+++ b/static/usage/v7/item/detail-arrows/demo.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item detail="true">
+          <ion-label>
+            <h3>Text Item</h3>
+            <p>Detail set to true - detail arrow displays on both modes</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item button>
+          <ion-label>
+            <h3>Button Item</h3>
+            <p>Default detail - detail arrow displays on iOS only</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item button detail="true">
+          <ion-label>
+            <h3>Button Item</h3>
+            <p>Detail set to true - detail arrow displays on both modes</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item button detail="false">
+          <ion-label>
+            <h3>Button Item</h3>
+            <p>Detail set to false - detail arrow hidden on both modes</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item button detail="true" detail-icon="caret-forward-outline">
+          <ion-label>
+            <h3>Button Item</h3>
+            <p>Detail set to true - detail arrow displays on both modes</p>
+            <p>Detail icon set to caret-forward-outline</p>
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/detail-arrows/index.md b/static/usage/v7/item/detail-arrows/index.md
new file mode 100644
index 00000000000..37b9b495dc1
--- /dev/null
+++ b/static/usage/v7/item/detail-arrows/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/item/detail-arrows/demo.html"
+  size="350px"
+/>
diff --git a/static/usage/v7/item/detail-arrows/javascript.md b/static/usage/v7/item/detail-arrows/javascript.md
new file mode 100644
index 00000000000..aa14eb9ec2d
--- /dev/null
+++ b/static/usage/v7/item/detail-arrows/javascript.md
@@ -0,0 +1,37 @@
+```html
+<ion-item detail="true">
+  <ion-label>
+    <h3>Text Item</h3>
+    <p>Detail set to true - detail arrow displays on both modes</p>
+  </ion-label>
+</ion-item>
+
+<ion-item button>
+  <ion-label>
+    <h3>Button Item</h3>
+    <p>Default detail - detail arrow displays on iOS only</p>
+  </ion-label>
+</ion-item>
+
+<ion-item button detail="true">
+  <ion-label>
+    <h3>Button Item</h3>
+    <p>Detail set to true - detail arrow displays on both modes</p>
+  </ion-label>
+</ion-item>
+
+<ion-item button detail="false">
+  <ion-label>
+    <h3>Button Item</h3>
+    <p>Detail set to false - detail arrow hidden on both modes</p>
+  </ion-label>
+</ion-item>
+
+<ion-item button detail="true" detail-icon="caret-forward-outline">
+  <ion-label>
+    <h3>Button Item</h3>
+    <p>Detail set to true - detail arrow displays on both modes</p>
+    <p>Detail icon set to caret-forward-outline</p>
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/detail-arrows/react.md b/static/usage/v7/item/detail-arrows/react.md
new file mode 100644
index 00000000000..de16b10fde6
--- /dev/null
+++ b/static/usage/v7/item/detail-arrows/react.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+import { caretForwardOutline } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonItem detail={true}>
+        <IonLabel>
+          <h3>Text Item</h3>
+          <p>Detail set to true - detail arrow displays on both modes</p>
+        </IonLabel>
+      </IonItem>
+
+      <IonItem button>
+        <IonLabel>
+          <h3>Button Item</h3>
+          <p>Default detail - detail arrow displays on iOS only</p>
+        </IonLabel>
+      </IonItem>
+
+      <IonItem button detail={true}>
+        <IonLabel>
+          <h3>Button Item</h3>
+          <p>Detail set to true - detail arrow displays on both modes</p>
+        </IonLabel>
+      </IonItem>
+
+      <IonItem button detail={false}>
+        <IonLabel>
+          <h3>Button Item</h3>
+          <p>Detail set to false - detail arrow hidden on both modes</p>
+        </IonLabel>
+      </IonItem>
+
+      <IonItem button detail={true} detailIcon={caretForwardOutline}>
+        <IonLabel>
+          <h3>Button Item</h3>
+          <p>Detail set to true - detail arrow displays on both modes</p>
+          <p>Detail icon set to caret-forward-outline</p>
+        </IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/detail-arrows/vue.md b/static/usage/v7/item/detail-arrows/vue.md
new file mode 100644
index 00000000000..d341c004f15
--- /dev/null
+++ b/static/usage/v7/item/detail-arrows/vue.md
@@ -0,0 +1,53 @@
+```html
+<template>
+  <ion-item detail="true">
+    <ion-label>
+      <h3>Text Item</h3>
+      <p>Detail set to true - detail arrow displays on both modes</p>
+    </ion-label>
+  </ion-item>
+
+  <ion-item button>
+    <ion-label>
+      <h3>Button Item</h3>
+      <p>Default detail - detail arrow displays on iOS only</p>
+    </ion-label>
+  </ion-item>
+
+  <ion-item button detail="true">
+    <ion-label>
+      <h3>Button Item</h3>
+      <p>Detail set to true - detail arrow displays on both modes</p>
+    </ion-label>
+  </ion-item>
+
+  <ion-item button detail="false">
+    <ion-label>
+      <h3>Button Item</h3>
+      <p>Detail set to false - detail arrow hidden on both modes</p>
+    </ion-label>
+  </ion-item>
+
+  <ion-item button detail="true" :detailIcon="caretForwardOutline">
+    <ion-label>
+      <h3>Button Item</h3>
+      <p>Detail set to true - detail arrow displays on both modes</p>
+      <p>Detail icon set to caret-forward-outline</p>
+    </ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel } from '@ionic/vue';
+  import { caretForwardOutline } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel },
+    setup() {
+      return {
+        caretForwardOutline,
+      };
+    },
+  });
+</script>
diff --git a/static/usage/v7/item/helper-error/angular.md b/static/usage/v7/item/helper-error/angular.md
new file mode 100644
index 00000000000..05959c95210
--- /dev/null
+++ b/static/usage/v7/item/helper-error/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-item fill="solid">
+  <ion-label position="floating">Email</ion-label>
+  <ion-input type="email" ngModel email></ion-input>
+  <ion-note slot="helper">Enter a valid email</ion-note>
+  <ion-note slot="error">Invalid email</ion-note>
+</ion-item>
+```
diff --git a/static/usage/v7/item/helper-error/demo.html b/static/usage/v7/item/helper-error/demo.html
new file mode 100644
index 00000000000..399f66d1270
--- /dev/null
+++ b/static/usage/v7/item/helper-error/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item fill="solid">
+          <ion-label position="floating">Email</ion-label>
+          <ion-input></ion-input>
+          <ion-note slot="helper">Enter a valid email</ion-note>
+          <ion-note slot="error">Invalid email</ion-note>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const item = document.querySelector('ion-item');
+    const input = item.querySelector('ion-input');
+
+    input.addEventListener('ionInput', (ev) => validate(ev));
+    input.addEventListener('ionBlur', () => markTouched());
+
+    const validateEmail = (email) => {
+      return email.match(/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/);
+    };
+
+    const validate = (ev) => {
+      const value = ev.target.value;
+
+      item.classList.remove('ion-valid');
+      item.classList.remove('ion-invalid');
+
+      if (value === "") return;
+
+      validateEmail(value) ? item.classList.add('ion-valid') : item.classList.add('ion-invalid');
+    }
+
+    const markTouched = () => {
+      item.classList.add('ion-touched');
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/helper-error/index.md b/static/usage/v7/item/helper-error/index.md
new file mode 100644
index 00000000000..abf593b1021
--- /dev/null
+++ b/static/usage/v7/item/helper-error/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/item/helper-error/demo.html"
+  size="150px"
+/>
diff --git a/static/usage/v7/item/helper-error/javascript.md b/static/usage/v7/item/helper-error/javascript.md
new file mode 100644
index 00000000000..eb0d43327d9
--- /dev/null
+++ b/static/usage/v7/item/helper-error/javascript.md
@@ -0,0 +1,35 @@
+```html
+<ion-item fill="solid">
+  <ion-label position="floating">Email</ion-label>
+  <ion-input type="email"></ion-input>
+  <ion-note slot="helper">Enter a valid email</ion-note>
+  <ion-note slot="error">Invalid email</ion-note>
+</ion-item>
+
+<script>
+  const item = document.querySelector('ion-item');
+  const input = item.querySelector('ion-input');
+
+  input.addEventListener('ionInput', (ev) => validate(ev));
+  input.addEventListener('ionBlur', () => markTouched());
+
+  const validateEmail = (email) => {
+    return email.match(/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/);
+  };
+
+  const validate = (ev) => {
+    const value = ev.target.value;
+
+    item.classList.remove('ion-valid');
+    item.classList.remove('ion-invalid');
+
+    if (value === "") return;
+
+    validateEmail(value) ? item.classList.add('ion-valid') : item.classList.add('ion-invalid');
+  }
+
+  const markTouched = () => {
+    item.classList.add('ion-touched');
+  }
+</script>
+```
diff --git a/static/usage/v7/item/helper-error/react.md b/static/usage/v7/item/helper-error/react.md
new file mode 100644
index 00000000000..a1e0e1e1b25
--- /dev/null
+++ b/static/usage/v7/item/helper-error/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React, { useState } from 'react';
+import { IonInput, IonItem, IonLabel, IonNote } from '@ionic/react';
+
+function Example() {
+  const [isTouched, setIsTouched] = useState(false);
+  const [isValid, setIsValid] = useState<boolean>();
+
+  const validateEmail = (email: string) => {
+    return email.match(
+      /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+    );
+  };
+
+  const validate = (ev: Event) => {
+    const value = (ev.target as HTMLInputElement).value;
+
+    setIsValid(undefined);
+
+    if (value === '') return;
+
+    validateEmail(value) !== null ? setIsValid(true) : setIsValid(false);
+  };
+
+  const markTouched = () => {
+    setIsTouched(true);
+  };
+
+  return (
+    <IonItem fill="solid" className={`${isValid && 'ion-valid'} ${isValid === false && 'ion-invalid'} ${isTouched && 'ion-touched'}`}>
+      <IonLabel position="floating">Email</IonLabel>
+      <IonInput type="email" onIonInput={(event) => validate(event)} onIonBlur={() => markTouched()}></IonInput>
+      <IonNote slot="helper">Enter a valid email</IonNote>
+      <IonNote slot="error">Invalid email</IonNote>
+    </IonItem>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/helper-error/vue.md b/static/usage/v7/item/helper-error/vue.md
new file mode 100644
index 00000000000..0febb45cfe4
--- /dev/null
+++ b/static/usage/v7/item/helper-error/vue.md
@@ -0,0 +1,41 @@
+```html
+<template>
+  <ion-item fill="solid" ref="item">
+    <ion-label position="floating">Email</ion-label>
+    <ion-input type="email" @ionInput="validate" @ionBlur="markTouched"></ion-input>
+    <ion-note slot="helper">Enter a valid email</ion-note>
+    <ion-note slot="error">Invalid email</ion-note>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonLabel, IonNote } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonLabel, IonNote },
+    methods: {
+      validateEmail(email) {
+        return email.match(/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/);
+      },
+
+      validate(ev) {
+        const value = ev.target.value;
+
+        this.$refs.item.$el.classList.remove('ion-valid');
+        this.$refs.item.$el.classList.remove('ion-invalid');
+
+        if (value === '') return;
+
+        this.validateEmail(value)
+          ? this.$refs.item.$el.classList.add('ion-valid')
+          : this.$refs.item.$el.classList.add('ion-invalid');
+      },
+
+      markTouched() {
+        this.$refs.item.$el.classList.add('ion-touched')
+      }
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/item/icons/angular.md b/static/usage/v7/item/icons/angular.md
new file mode 100644
index 00000000000..49a1cc707e3
--- /dev/null
+++ b/static/usage/v7/item/icons/angular.md
@@ -0,0 +1,29 @@
+```html
+<ion-item>
+  <ion-label>
+    Default Icon
+  </ion-label>
+  <ion-icon name="information-circle" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Large Icon
+  </ion-label>
+  <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Small Icon
+  </ion-label>
+  <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item>
+  <ion-icon name="star" slot="start"></ion-icon>
+  <ion-label>
+    Default Icon
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/icons/demo.html b/static/usage/v7/item/icons/demo.html
new file mode 100644
index 00000000000..6cbd9d1b2a9
--- /dev/null
+++ b/static/usage/v7/item/icons/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>
+            Default Icon
+          </ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Large Icon
+          </ion-label>
+          <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Small Icon
+          </ion-label>
+          <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="star" slot="start"></ion-icon>
+          <ion-label>
+            Default Icon
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/icons/index.md b/static/usage/v7/item/icons/index.md
new file mode 100644
index 00000000000..69563c44023
--- /dev/null
+++ b/static/usage/v7/item/icons/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/icons/demo.html" size="250px" />
diff --git a/static/usage/v7/item/icons/javascript.md b/static/usage/v7/item/icons/javascript.md
new file mode 100644
index 00000000000..49a1cc707e3
--- /dev/null
+++ b/static/usage/v7/item/icons/javascript.md
@@ -0,0 +1,29 @@
+```html
+<ion-item>
+  <ion-label>
+    Default Icon
+  </ion-label>
+  <ion-icon name="information-circle" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Large Icon
+  </ion-label>
+  <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Small Icon
+  </ion-label>
+  <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item>
+  <ion-icon name="star" slot="start"></ion-icon>
+  <ion-label>
+    Default Icon
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/icons/react.md b/static/usage/v7/item/icons/react.md
new file mode 100644
index 00000000000..a5fc0ae6629
--- /dev/null
+++ b/static/usage/v7/item/icons/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { informationCircle, star } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonLabel>
+          Default Icon
+        </IonLabel>
+        <IonIcon icon={informationCircle} slot="end"></IonIcon>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>
+          Large Icon
+        </IonLabel>
+        <IonIcon icon={informationCircle} size="large" slot="end"></IonIcon>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>
+          Small Icon
+        </IonLabel>
+        <IonIcon icon={informationCircle} size="small" slot="end"></IonIcon>
+      </IonItem>
+
+      <IonItem>
+        <IonIcon icon={star} slot="start"></IonIcon>
+        <IonLabel>
+          Default Icon
+        </IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/icons/vue.md b/static/usage/v7/item/icons/vue.md
new file mode 100644
index 00000000000..82e09004fbe
--- /dev/null
+++ b/static/usage/v7/item/icons/vue.md
@@ -0,0 +1,44 @@
+```html
+<template>
+  <ion-item>
+    <ion-label>
+      Default Icon
+    </ion-label>
+    <ion-icon :icon="informationCircle" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Large Icon
+    </ion-label>
+    <ion-icon :icon="informationCircle" size="large" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Small Icon
+    </ion-label>
+    <ion-icon :icon="informationCircle" size="small" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item>
+    <ion-icon :icon="star" slot="start"></ion-icon>
+    <ion-label>
+      Default Icon
+    </ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/vue';
+  import { informationCircle, star } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonIcon, IonItem, IonLabel },
+    setup() {
+      return { informationCircle, star }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/item/inputs/angular.md b/static/usage/v7/item/inputs/angular.md
new file mode 100644
index 00000000000..013e672ae99
--- /dev/null
+++ b/static/usage/v7/item/inputs/angular.md
@@ -0,0 +1,59 @@
+```html
+<ion-item>
+  <ion-label>Default Input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="fixed">Fixed Input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="stacked">Stacked Input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="floating">Floating Input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item fill="outline">
+  <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item fill="solid">
+  <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label>Select</ion-label>
+  <ion-select placeholder="Make a Selection">
+    <ion-select-option value="">No Game Console</ion-select-option>
+    <ion-select-option value="nes">NES</ion-select-option>
+    <ion-select-option value="n64">Nintendo64</ion-select-option>
+    <ion-select-option value="ps">PlayStation</ion-select-option>
+    <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+    <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+    <ion-select-option value="snes">SNES</ion-select-option>
+  </ion-select>
+</ion-item>
+
+<ion-item>
+  <ion-label>Toggle</ion-label>
+  <ion-toggle slot="end"></ion-toggle>
+</ion-item>
+
+<ion-item>
+  <ion-label>Checkbox</ion-label>
+  <ion-checkbox slot="end"></ion-checkbox>
+</ion-item>
+
+<ion-item>
+  <ion-label position="stacked">Range</ion-label>
+  <ion-range></ion-range>
+</ion-item>
+```
diff --git a/static/usage/v7/item/inputs/demo.html b/static/usage/v7/item/inputs/demo.html
new file mode 100644
index 00000000000..4ab92196b2e
--- /dev/null
+++ b/static/usage/v7/item/inputs/demo.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Default Input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="fixed">Fixed Input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="stacked">Stacked Input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="floating">Floating Input</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item fill="outline">
+          <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item fill="solid">
+          <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Select</ion-label>
+          <ion-select placeholder="Make a Selection">
+            <ion-select-option value="">No Game Console</ion-select-option>
+            <ion-select-option value="nes">NES</ion-select-option>
+            <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+            <ion-select-option value="ps">PlayStation</ion-select-option>
+            <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+            <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+            <ion-select-option value="snes">SNES</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Toggle</ion-label>
+          <ion-toggle slot="end"></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Checkbox</ion-label>
+          <ion-checkbox slot="end"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="stacked">Range</ion-label>
+          <ion-range></ion-range>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/inputs/index.md b/static/usage/v7/item/inputs/index.md
new file mode 100644
index 00000000000..1925824c43f
--- /dev/null
+++ b/static/usage/v7/item/inputs/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/inputs/demo.html" size="large" />
diff --git a/static/usage/v7/item/inputs/javascript.md b/static/usage/v7/item/inputs/javascript.md
new file mode 100644
index 00000000000..013e672ae99
--- /dev/null
+++ b/static/usage/v7/item/inputs/javascript.md
@@ -0,0 +1,59 @@
+```html
+<ion-item>
+  <ion-label>Default Input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="fixed">Fixed Input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="stacked">Stacked Input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="floating">Floating Input</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item fill="outline">
+  <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item fill="solid">
+  <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label>Select</ion-label>
+  <ion-select placeholder="Make a Selection">
+    <ion-select-option value="">No Game Console</ion-select-option>
+    <ion-select-option value="nes">NES</ion-select-option>
+    <ion-select-option value="n64">Nintendo64</ion-select-option>
+    <ion-select-option value="ps">PlayStation</ion-select-option>
+    <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+    <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+    <ion-select-option value="snes">SNES</ion-select-option>
+  </ion-select>
+</ion-item>
+
+<ion-item>
+  <ion-label>Toggle</ion-label>
+  <ion-toggle slot="end"></ion-toggle>
+</ion-item>
+
+<ion-item>
+  <ion-label>Checkbox</ion-label>
+  <ion-checkbox slot="end"></ion-checkbox>
+</ion-item>
+
+<ion-item>
+  <ion-label position="stacked">Range</ion-label>
+  <ion-range></ion-range>
+</ion-item>
+```
diff --git a/static/usage/v7/item/inputs/react.md b/static/usage/v7/item/inputs/react.md
new file mode 100644
index 00000000000..0cb6523f053
--- /dev/null
+++ b/static/usage/v7/item/inputs/react.md
@@ -0,0 +1,69 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonLabel>Default Input</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="fixed">Fixed Input</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="stacked">Stacked Input</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="floating">Floating Input</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem fill="outline">
+        <IonLabel position="floating">Floating Input: Outline (MD only)</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem fill="solid">
+        <IonLabel position="floating">Floating Input: Solid (MD only)</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Select</IonLabel>
+        <IonSelect placeholder="Make a Selection">
+          <IonSelectOption value="">No Game Console</IonSelectOption>
+          <IonSelectOption value="nes">NES</IonSelectOption>
+          <IonSelectOption value="n64">Nintendo64</IonSelectOption>
+          <IonSelectOption value="ps">PlayStation</IonSelectOption>
+          <IonSelectOption value="genesis">Sega Genesis</IonSelectOption>
+          <IonSelectOption value="saturn">Sega Saturn</IonSelectOption>
+          <IonSelectOption value="snes">SNES</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Toggle</IonLabel>
+        <IonToggle slot="end"></IonToggle>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Checkbox</IonLabel>
+        <IonCheckbox slot="end"></IonCheckbox>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="stacked">Range</IonLabel>
+        <IonRange></IonRange>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/inputs/vue.md b/static/usage/v7/item/inputs/vue.md
new file mode 100644
index 00000000000..7dc085a7a4d
--- /dev/null
+++ b/static/usage/v7/item/inputs/vue.md
@@ -0,0 +1,70 @@
+```html
+<template>
+  <ion-item>
+    <ion-label>Default Input</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="fixed">Fixed Input</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Stacked Input</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Floating Input</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item fill="outline">
+    <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item fill="solid">
+    <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Select</ion-label>
+    <ion-select placeholder="Make a Selection">
+      <ion-select-option value="">No Game Console</ion-select-option>
+      <ion-select-option value="nes">NES</ion-select-option>
+      <ion-select-option value="n64">Nintendo64</ion-select-option>
+      <ion-select-option value="ps">PlayStation</ion-select-option>
+      <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+      <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+      <ion-select-option value="snes">SNES</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Toggle</ion-label>
+    <ion-toggle slot="end"></ion-toggle>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Checkbox</ion-label>
+    <ion-checkbox slot="end"></ion-checkbox>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Range</ion-label>
+    <ion-range></ion-range>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle },
+  });
+</script>
+```
diff --git a/static/usage/v7/item/lines/angular.md b/static/usage/v7/item/lines/angular.md
new file mode 100644
index 00000000000..b0700ae1a1b
--- /dev/null
+++ b/static/usage/v7/item/lines/angular.md
@@ -0,0 +1,43 @@
+```html
+<ion-item>
+  <ion-label>
+    Default Item Lines
+  </ion-label>
+</ion-item>
+
+<ion-item lines="inset">
+  <ion-label>Item Lines Inset</ion-label>
+</ion-item>
+
+<ion-item lines="full">
+  <ion-label>Item Lines Full</ion-label>
+</ion-item>
+
+<ion-item lines="none">
+  <ion-label>Item Lines None</ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-icon name="star" slot="start"></ion-icon>
+  <ion-label>Default Item Lines</ion-label>
+  <ion-icon name="information-circle" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item lines="inset">
+  <ion-icon name="star" slot="start"></ion-icon>
+  <ion-label>Item Lines Inset</ion-label>
+  <ion-icon name="information-circle" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item lines="full">
+  <ion-icon name="star" slot="start"></ion-icon>
+  <ion-label>Item Lines Full</ion-label>
+  <ion-icon name="information-circle" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item lines="none">
+  <ion-icon name="star" slot="start"></ion-icon>
+  <ion-label>Item Lines None</ion-label>
+  <ion-icon name="information-circle" slot="end"></ion-icon>
+</ion-item>
+```
diff --git a/static/usage/v7/item/lines/demo.html b/static/usage/v7/item/lines/demo.html
new file mode 100644
index 00000000000..79cb3ce7933
--- /dev/null
+++ b/static/usage/v7/item/lines/demo.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>
+            Default Item Lines
+          </ion-label>
+        </ion-item>
+
+        <ion-item lines="inset">
+          <ion-label>Item Lines Inset</ion-label>
+        </ion-item>
+
+        <ion-item lines="full">
+          <ion-label>Item Lines Full</ion-label>
+        </ion-item>
+
+        <ion-item lines="none">
+          <ion-label>Item Lines None</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="star" slot="start"></ion-icon>
+          <ion-label>Default Item Lines</ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item lines="inset">
+          <ion-icon name="star" slot="start"></ion-icon>
+          <ion-label>Item Lines Inset</ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item lines="full">
+          <ion-icon name="star" slot="start"></ion-icon>
+          <ion-label>Item Lines Full</ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item lines="none">
+          <ion-icon name="star" slot="start"></ion-icon>
+          <ion-label>Item Lines None</ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/lines/index.md b/static/usage/v7/item/lines/index.md
new file mode 100644
index 00000000000..717465e6906
--- /dev/null
+++ b/static/usage/v7/item/lines/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/lines/demo.html" size="medium" />
diff --git a/static/usage/v7/item/lines/javascript.md b/static/usage/v7/item/lines/javascript.md
new file mode 100644
index 00000000000..b0700ae1a1b
--- /dev/null
+++ b/static/usage/v7/item/lines/javascript.md
@@ -0,0 +1,43 @@
+```html
+<ion-item>
+  <ion-label>
+    Default Item Lines
+  </ion-label>
+</ion-item>
+
+<ion-item lines="inset">
+  <ion-label>Item Lines Inset</ion-label>
+</ion-item>
+
+<ion-item lines="full">
+  <ion-label>Item Lines Full</ion-label>
+</ion-item>
+
+<ion-item lines="none">
+  <ion-label>Item Lines None</ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-icon name="star" slot="start"></ion-icon>
+  <ion-label>Default Item Lines</ion-label>
+  <ion-icon name="information-circle" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item lines="inset">
+  <ion-icon name="star" slot="start"></ion-icon>
+  <ion-label>Item Lines Inset</ion-label>
+  <ion-icon name="information-circle" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item lines="full">
+  <ion-icon name="star" slot="start"></ion-icon>
+  <ion-label>Item Lines Full</ion-label>
+  <ion-icon name="information-circle" slot="end"></ion-icon>
+</ion-item>
+
+<ion-item lines="none">
+  <ion-icon name="star" slot="start"></ion-icon>
+  <ion-label>Item Lines None</ion-label>
+  <ion-icon name="information-circle" slot="end"></ion-icon>
+</ion-item>
+```
diff --git a/static/usage/v7/item/lines/react.md b/static/usage/v7/item/lines/react.md
new file mode 100644
index 00000000000..c5e2cf3f55c
--- /dev/null
+++ b/static/usage/v7/item/lines/react.md
@@ -0,0 +1,54 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { informationCircle, star } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonLabel>
+          Default Item Lines
+        </IonLabel>
+      </IonItem>
+
+      <IonItem lines="inset">
+        <IonLabel>Item Lines Inset</IonLabel>
+      </IonItem>
+
+      <IonItem lines="full">
+        <IonLabel>Item Lines Full</IonLabel>
+      </IonItem>
+
+      <IonItem lines="none">
+        <IonLabel>Item Lines None</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonIcon icon={star} slot="start"></IonIcon>
+        <IonLabel>Default Item Lines</IonLabel>
+        <IonIcon icon={informationCircle} slot="end"></IonIcon>
+      </IonItem>
+
+      <IonItem lines="inset">
+        <IonIcon icon={star} slot="start"></IonIcon>
+        <IonLabel>Item Lines Inset</IonLabel>
+        <IonIcon icon={informationCircle} slot="end"></IonIcon>
+      </IonItem>
+
+      <IonItem lines="full">
+        <IonIcon icon={star} slot="start"></IonIcon>
+        <IonLabel>Item Lines Full</IonLabel>
+        <IonIcon icon={informationCircle} slot="end"></IonIcon>
+      </IonItem>
+
+      <IonItem lines="none">
+        <IonIcon icon={star} slot="start"></IonIcon>
+        <IonLabel>Item Lines None</IonLabel>
+        <IonIcon icon={informationCircle} slot="end"></IonIcon>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/lines/vue.md b/static/usage/v7/item/lines/vue.md
new file mode 100644
index 00000000000..37c6c432ca4
--- /dev/null
+++ b/static/usage/v7/item/lines/vue.md
@@ -0,0 +1,58 @@
+```html
+<template>
+  <ion-item>
+    <ion-label>
+      Default Item Lines
+    </ion-label>
+  </ion-item>
+
+  <ion-item lines="inset">
+    <ion-label>Item Lines Inset</ion-label>
+  </ion-item>
+
+  <ion-item lines="full">
+    <ion-label>Item Lines Full</ion-label>
+  </ion-item>
+
+  <ion-item lines="none">
+    <ion-label>Item Lines None</ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-icon :icon="star" slot="start"></ion-icon>
+    <ion-label>Default Item Lines</ion-label>
+    <ion-icon :icon="informationCircle" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item lines="inset">
+    <ion-icon :icon="star" slot="start"></ion-icon>
+    <ion-label>Item Lines Inset</ion-label>
+    <ion-icon :icon="informationCircle" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item lines="full">
+    <ion-icon :icon="star" slot="start"></ion-icon>
+    <ion-label>Item Lines Full</ion-label>
+    <ion-icon :icon="informationCircle" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item lines="none">
+    <ion-icon :icon="star" slot="start"></ion-icon>
+    <ion-label>Item Lines None</ion-label>
+    <ion-icon :icon="informationCircle" slot="end"></ion-icon>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonIcon, IonItem, IonLabel } from '@ionic/vue';
+  import { informationCircle, star } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonIcon, IonItem, IonLabel },
+    setup() {
+      return { informationCircle, star };
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/item/media/angular.md b/static/usage/v7/item/media/angular.md
new file mode 100644
index 00000000000..915969f127e
--- /dev/null
+++ b/static/usage/v7/item/media/angular.md
@@ -0,0 +1,19 @@
+```html
+<ion-item>
+  <ion-avatar slot="start">
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+  </ion-avatar>
+  <ion-label>
+    Avatar Item
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-thumbnail slot="start">
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+  </ion-thumbnail>
+  <ion-label>
+    Thumbnail Item
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/media/demo.html b/static/usage/v7/item/media/demo.html
new file mode 100644
index 00000000000..451c5d6eaf1
--- /dev/null
+++ b/static/usage/v7/item/media/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-avatar slot="start">
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>
+            Avatar Item
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+          </ion-thumbnail>
+          <ion-label>
+            Thumbnail Item
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/media/index.md b/static/usage/v7/item/media/index.md
new file mode 100644
index 00000000000..c8c7d6e309c
--- /dev/null
+++ b/static/usage/v7/item/media/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/media/demo.html" />
diff --git a/static/usage/v7/item/media/javascript.md b/static/usage/v7/item/media/javascript.md
new file mode 100644
index 00000000000..915969f127e
--- /dev/null
+++ b/static/usage/v7/item/media/javascript.md
@@ -0,0 +1,19 @@
+```html
+<ion-item>
+  <ion-avatar slot="start">
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+  </ion-avatar>
+  <ion-label>
+    Avatar Item
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-thumbnail slot="start">
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+  </ion-thumbnail>
+  <ion-label>
+    Thumbnail Item
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/media/react.md b/static/usage/v7/item/media/react.md
new file mode 100644
index 00000000000..21ba7c98f65
--- /dev/null
+++ b/static/usage/v7/item/media/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonAvatar slot="start">
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </IonAvatar>
+        <IonLabel>
+          Avatar Item
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonThumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </IonThumbnail>
+        <IonLabel>
+          Thumbnail Item
+        </IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/media/vue.md b/static/usage/v7/item/media/vue.md
new file mode 100644
index 00000000000..72dd55ef587
--- /dev/null
+++ b/static/usage/v7/item/media/vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-item>
+    <ion-avatar slot="start">
+      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+    </ion-avatar>
+    <ion-label>
+      Avatar Item
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+    </ion-thumbnail>
+    <ion-label>
+      Thumbnail Item
+    </ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonAvatar, IonItem, IonLabel, IonThumbnail },
+  });
+</script>
+```
diff --git a/static/usage/v7/item/theming/colors/angular.md b/static/usage/v7/item/theming/colors/angular.md
new file mode 100644
index 00000000000..f1b6dd45e0c
--- /dev/null
+++ b/static/usage/v7/item/theming/colors/angular.md
@@ -0,0 +1,32 @@
+```html
+<ion-item>
+  <ion-label>Default Item</ion-label>
+</ion-item>
+<ion-item color="primary">
+  <ion-label>Primary Item</ion-label>
+</ion-item>
+<ion-item color="secondary">
+  <ion-label>Secondary Item</ion-label>
+</ion-item>
+<ion-item color="tertiary">
+  <ion-label>Tertiary Item</ion-label>
+</ion-item>
+<ion-item color="success">
+  <ion-label>Success Item</ion-label>
+</ion-item>
+<ion-item color="warning">
+  <ion-label>Warning Item</ion-label>
+</ion-item>
+<ion-item color="danger">
+  <ion-label>Danger Item</ion-label>
+</ion-item>
+<ion-item color="light">
+  <ion-label>Light Item</ion-label>
+</ion-item>
+<ion-item color="medium">
+  <ion-label>Medium Item</ion-label>
+</ion-item>
+<ion-item color="dark">
+  <ion-label>Dark Item</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/theming/colors/demo.html b/static/usage/v7/item/theming/colors/demo.html
new file mode 100644
index 00000000000..fbd225c988b
--- /dev/null
+++ b/static/usage/v7/item/theming/colors/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Default Item</ion-label>
+        </ion-item>
+        <ion-item color="primary">
+          <ion-label>Primary Item</ion-label>
+        </ion-item>
+        <ion-item color="secondary">
+          <ion-label>Secondary Item</ion-label>
+        </ion-item>
+        <ion-item color="tertiary">
+          <ion-label>Tertiary Item</ion-label>
+        </ion-item>
+        <ion-item color="success">
+          <ion-label>Success Item</ion-label>
+        </ion-item>
+        <ion-item color="warning">
+          <ion-label>Warning Item</ion-label>
+        </ion-item>
+        <ion-item color="danger">
+          <ion-label>Danger Item</ion-label>
+        </ion-item>
+        <ion-item color="light">
+          <ion-label>Light Item</ion-label>
+        </ion-item>
+        <ion-item color="medium">
+          <ion-label>Medium Item</ion-label>
+        </ion-item>
+        <ion-item color="dark">
+          <ion-label>Dark Item</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/theming/colors/index.md b/static/usage/v7/item/theming/colors/index.md
new file mode 100644
index 00000000000..9973f9daa33
--- /dev/null
+++ b/static/usage/v7/item/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/item/theming/colors/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v7/item/theming/colors/javascript.md b/static/usage/v7/item/theming/colors/javascript.md
new file mode 100644
index 00000000000..f1b6dd45e0c
--- /dev/null
+++ b/static/usage/v7/item/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+<ion-item>
+  <ion-label>Default Item</ion-label>
+</ion-item>
+<ion-item color="primary">
+  <ion-label>Primary Item</ion-label>
+</ion-item>
+<ion-item color="secondary">
+  <ion-label>Secondary Item</ion-label>
+</ion-item>
+<ion-item color="tertiary">
+  <ion-label>Tertiary Item</ion-label>
+</ion-item>
+<ion-item color="success">
+  <ion-label>Success Item</ion-label>
+</ion-item>
+<ion-item color="warning">
+  <ion-label>Warning Item</ion-label>
+</ion-item>
+<ion-item color="danger">
+  <ion-label>Danger Item</ion-label>
+</ion-item>
+<ion-item color="light">
+  <ion-label>Light Item</ion-label>
+</ion-item>
+<ion-item color="medium">
+  <ion-label>Medium Item</ion-label>
+</ion-item>
+<ion-item color="dark">
+  <ion-label>Dark Item</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/theming/colors/react.md b/static/usage/v7/item/theming/colors/react.md
new file mode 100644
index 00000000000..2efad83cba3
--- /dev/null
+++ b/static/usage/v7/item/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonLabel>Default Item</IonLabel>
+      </IonItem>
+      <IonItem color="primary">
+        <IonLabel>Primary Item</IonLabel>
+      </IonItem>
+      <IonItem color="secondary">
+        <IonLabel>Secondary Item</IonLabel>
+      </IonItem>
+      <IonItem color="tertiary">
+        <IonLabel>Tertiary Item</IonLabel>
+      </IonItem>
+      <IonItem color="success">
+        <IonLabel>Success Item</IonLabel>
+      </IonItem>
+      <IonItem color="warning">
+        <IonLabel>Warning Item</IonLabel>
+      </IonItem>
+      <IonItem color="danger">
+        <IonLabel>Danger Item</IonLabel>
+      </IonItem>
+      <IonItem color="light">
+        <IonLabel>Light Item</IonLabel>
+      </IonItem>
+      <IonItem color="medium">
+        <IonLabel>Medium Item</IonLabel>
+      </IonItem>
+      <IonItem color="dark">
+        <IonLabel>Dark Item</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/theming/colors/vue.md b/static/usage/v7/item/theming/colors/vue.md
new file mode 100644
index 00000000000..b98f625e479
--- /dev/null
+++ b/static/usage/v7/item/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+<template>
+  <ion-item>
+    <ion-label>Default Item</ion-label>
+  </ion-item>
+  <ion-item color="primary">
+    <ion-label>Primary Item</ion-label>
+  </ion-item>
+  <ion-item color="secondary">
+    <ion-label>Secondary Item</ion-label>
+  </ion-item>
+  <ion-item color="tertiary">
+    <ion-label>Tertiary Item</ion-label>
+  </ion-item>
+  <ion-item color="success">
+    <ion-label>Success Item</ion-label>
+  </ion-item>
+  <ion-item color="warning">
+    <ion-label>Warning Item</ion-label>
+  </ion-item>
+  <ion-item color="danger">
+    <ion-label>Danger Item</ion-label>
+  </ion-item>
+  <ion-item color="light">
+    <ion-label>Light Item</ion-label>
+  </ion-item>
+  <ion-item color="medium">
+    <ion-label>Medium Item</ion-label>
+  </ion-item>
+  <ion-item color="dark">
+    <ion-label>Dark Item</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel },
+  });
+</script>
+```
diff --git a/static/usage/v7/item/theming/css-properties/angular/example_component_css.md b/static/usage/v7/item/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..8a8b6be7f5b
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item {
+  --background: #19422d;
+  --color: #fff;
+
+  --border-color: #fff;
+  --border-style: dashed;
+  --border-width: 2px;
+
+  --border-radius: 20px;
+
+  --ripple-color: purple;
+
+  --detail-icon-color: white;
+  --detail-icon-opacity: 1;
+  --detail-icon-font-size: 20px;
+}
+```
diff --git a/static/usage/v7/item/theming/css-properties/angular/example_component_html.md b/static/usage/v7/item/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4bc8310465a
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/theming/css-properties/demo.html b/static/usage/v7/item/theming/css-properties/demo.html
new file mode 100644
index 00000000000..c255a677199
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/demo.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+
+    ion-item {
+      --background: #19422d;
+      --color: #fff;
+
+      --border-color: #fff;
+      --border-style: dashed;
+      --border-width: 2px;
+
+      --border-radius: 20px;
+
+      --ripple-color: purple;
+
+      --detail-icon-color: white;
+      --detail-icon-opacity: 1;
+      --detail-icon-font-size: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/theming/css-properties/index.md b/static/usage/v7/item/theming/css-properties/index.md
new file mode 100644
index 00000000000..f3d49f6332b
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/item/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/item/theming/css-properties/javascript.md b/static/usage/v7/item/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..d1ad4121c2d
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/javascript.md
@@ -0,0 +1,32 @@
+```html
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+
+<style>
+  ion-item {
+    --background: #19422d;
+    --color: #fff;
+
+    --border-color: #fff;
+    --border-style: dashed;
+    --border-width: 2px;
+
+    --border-radius: 20px;
+
+    --ripple-color: purple;
+
+    --detail-icon-color: white;
+    --detail-icon-opacity: 1;
+    --detail-icon-font-size: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/item/theming/css-properties/react/main_css.md b/static/usage/v7/item/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..8a8b6be7f5b
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item {
+  --background: #19422d;
+  --color: #fff;
+
+  --border-color: #fff;
+  --border-style: dashed;
+  --border-width: 2px;
+
+  --border-radius: 20px;
+
+  --ripple-color: purple;
+
+  --detail-icon-color: white;
+  --detail-icon-opacity: 1;
+  --detail-icon-font-size: 20px;
+}
+```
diff --git a/static/usage/v7/item/theming/css-properties/react/main_tsx.md b/static/usage/v7/item/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..0d8329f134a
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonItem button detail lines="full">
+        <IonLabel>Custom Item</IonLabel>
+      </IonItem>
+
+      <IonItem button detail lines="full">
+        <IonLabel>Custom Item</IonLabel>
+      </IonItem>
+
+      <IonItem button detail lines="full">
+        <IonLabel>Custom Item</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/theming/css-properties/vue.md b/static/usage/v7/item/theming/css-properties/vue.md
new file mode 100644
index 00000000000..305102b811b
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/vue.md
@@ -0,0 +1,43 @@
+```html
+<template>
+  <ion-item button detail lines="full">
+    <ion-label>Custom Item</ion-label>
+  </ion-item>
+
+  <ion-item button detail lines="full">
+    <ion-label>Custom Item</ion-label>
+  </ion-item>
+
+  <ion-item button detail lines="full">
+    <ion-label>Custom Item</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel },
+  });
+</script>
+
+<style>
+  ion-item {
+    --background: #19422d;
+    --color: #fff;
+
+    --border-color: #fff;
+    --border-style: dashed;
+    --border-width: 2px;
+
+    --border-radius: 20px;
+
+    --ripple-color: purple;
+
+    --detail-icon-color: white;
+    --detail-icon-opacity: 1;
+    --detail-icon-font-size: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..0c5e9969494
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item::part(native) {
+  background: #19422d;
+  color: #fff;
+
+  border-color: #fff;
+  border-style: dashed;
+  border-width: 2px;
+
+  border-radius: 20px;
+}
+
+ion-item::part(detail-icon) {
+  color: white;
+  opacity: 1;
+  font-size: 20px;
+}
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4bc8310465a
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/demo.html b/static/usage/v7/item/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..132c0900cb8
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/demo.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+
+    ion-item::part(native) {
+      background: #19422d;
+      color: #fff;
+
+      border-color: #fff;
+      border-style: dashed;
+      border-width: 2px;
+
+      border-radius: 20px;
+    }
+
+    ion-item::part(detail-icon) {
+      color: white;
+      opacity: 1;
+      font-size: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+
+        <ion-item button lines="full">
+          <ion-label>Custom Item</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/theming/css-shadow-parts/index.md b/static/usage/v7/item/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..10f1bfc6ba6
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/item/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/v7/item/theming/css-shadow-parts/javascript.md b/static/usage/v7/item/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..1991ad6c139
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,32 @@
+```html
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+
+<ion-item button detail lines="full">
+  <ion-label>Custom Item</ion-label>
+</ion-item>
+
+<style>
+  ion-item::part(native) {
+    background: #19422d;
+    color: #fff;
+
+    border-color: #fff;
+    border-style: dashed;
+    border-width: 2px;
+
+    border-radius: 20px;
+  }
+
+  ion-item::part(detail-icon) {
+    color: white;
+    opacity: 1;
+    font-size: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/item/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..0c5e9969494
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item::part(native) {
+  background: #19422d;
+  color: #fff;
+
+  border-color: #fff;
+  border-style: dashed;
+  border-width: 2px;
+
+  border-radius: 20px;
+}
+
+ion-item::part(detail-icon) {
+  color: white;
+  opacity: 1;
+  font-size: 20px;
+}
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/item/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..0d8329f134a
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonItem button detail lines="full">
+        <IonLabel>Custom Item</IonLabel>
+      </IonItem>
+
+      <IonItem button detail lines="full">
+        <IonLabel>Custom Item</IonLabel>
+      </IonItem>
+
+      <IonItem button detail lines="full">
+        <IonLabel>Custom Item</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/vue.md b/static/usage/v7/item/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..b0ebb030693
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/vue.md
@@ -0,0 +1,43 @@
+```html
+<template>
+  <ion-item button detail lines="full">
+    <ion-label>Custom Item</ion-label>
+  </ion-item>
+
+  <ion-item button detail lines="full">
+    <ion-label>Custom Item</ion-label>
+  </ion-item>
+
+  <ion-item button detail lines="full">
+    <ion-label>Custom Item</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel },
+  });
+</script>
+
+<style>
+  ion-item::part(native) {
+    background: #19422d;
+    color: #fff;
+
+    border-color: #fff;
+    border-style: dashed;
+    border-width: 2px;
+
+    border-radius: 20px;
+  }
+
+  ion-item::part(detail-icon) {
+    color: white;
+    opacity: 1;
+    font-size: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md b/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md
new file mode 100644
index 00000000000..5d7cfd49c7c
--- /dev/null
+++ b/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-item {
+  --highlight-height: 2px;
+  --highlight-color-focused: #43e7f3;
+  --highlight-color-valid: #6f58d8;
+  --highlight-color-invalid: #ff46be;
+}
+```
diff --git a/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md b/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md
new file mode 100644
index 00000000000..59a5e5928a9
--- /dev/null
+++ b/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+<ion-item lines="full" class="item-has-focus ion-touched">
+  <ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
+  <ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
+  <ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+```
diff --git a/static/usage/v7/item/theming/input-highlight/demo.html b/static/usage/v7/item/theming/input-highlight/demo.html
new file mode 100644
index 00000000000..2094539141e
--- /dev/null
+++ b/static/usage/v7/item/theming/input-highlight/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+
+    ion-item {
+      --highlight-height: 2px;
+      --highlight-color-focused: #43e7f3;
+      --highlight-color-valid: #6f58d8;
+      --highlight-color-invalid: #ff46be;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item lines="full" class="item-has-focus ion-touched">
+          <ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
+          <ion-input></ion-input>
+        </ion-item>
+
+        <ion-item lines="full" class="item-has-focus ion-touched ion-valid">
+          <ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
+          <ion-input></ion-input>
+        </ion-item>
+
+        <ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
+          <ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
+          <ion-input></ion-input>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/item/theming/input-highlight/index.md b/static/usage/v7/item/theming/input-highlight/index.md
new file mode 100644
index 00000000000..4782bfdd6a5
--- /dev/null
+++ b/static/usage/v7/item/theming/input-highlight/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/item/theming/input-highlight/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/item/theming/input-highlight/javascript.md b/static/usage/v7/item/theming/input-highlight/javascript.md
new file mode 100644
index 00000000000..b26cebd530e
--- /dev/null
+++ b/static/usage/v7/item/theming/input-highlight/javascript.md
@@ -0,0 +1,25 @@
+```html
+<ion-item lines="full" class="item-has-focus ion-touched">
+  <ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
+  <ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
+  <ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<style>
+  ion-item {
+    --highlight-height: 2px;
+    --highlight-color-focused: #43e7f3;
+    --highlight-color-valid: #6f58d8;
+    --highlight-color-invalid: #ff46be;
+  }
+</style>
+```
diff --git a/static/usage/v7/item/theming/input-highlight/react/main_css.md b/static/usage/v7/item/theming/input-highlight/react/main_css.md
new file mode 100644
index 00000000000..5d7cfd49c7c
--- /dev/null
+++ b/static/usage/v7/item/theming/input-highlight/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-item {
+  --highlight-height: 2px;
+  --highlight-color-focused: #43e7f3;
+  --highlight-color-valid: #6f58d8;
+  --highlight-color-invalid: #ff46be;
+}
+```
diff --git a/static/usage/v7/item/theming/input-highlight/react/main_tsx.md b/static/usage/v7/item/theming/input-highlight/react/main_tsx.md
new file mode 100644
index 00000000000..67d46a73267
--- /dev/null
+++ b/static/usage/v7/item/theming/input-highlight/react/main_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonItem lines="full" class="item-has-focus ion-touched">
+        <IonLabel position="stacked">Custom Input Highlight: Focused</IonLabel>
+        <IonInput></IonInput>
+      </IonItem>
+
+      <IonItem lines="full" class="item-has-focus ion-touched ion-valid">
+        <IonLabel position="stacked">Custom Input Highlight: Focused & Valid</IonLabel>
+        <IonInput></IonInput>
+      </IonItem>
+
+      <IonItem lines="full" class="item-has-focus ion-touched ion-invalid">
+        <IonLabel position="stacked">Custom Input Highlight: Focused & Invalid</IonLabel>
+        <IonInput></IonInput>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/theming/input-highlight/vue.md b/static/usage/v7/item/theming/input-highlight/vue.md
new file mode 100644
index 00000000000..52713eb0ca5
--- /dev/null
+++ b/static/usage/v7/item/theming/input-highlight/vue.md
@@ -0,0 +1,36 @@
+```html
+<template>
+  <ion-item lines="full" class="item-has-focus ion-touched">
+    <ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item lines="full" class="item-has-focus ion-touched ion-valid">
+    <ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
+    <ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonLabel },
+  });
+</script>
+
+<style>
+  ion-item {
+    --highlight-height: 2px;
+    --highlight-color-focused: #43e7f3;
+    --highlight-color-valid: #6f58d8;
+    --highlight-color-invalid: #ff46be;
+  }
+</style>
+```
diff --git a/static/usage/v7/label/basic/angular.md b/static/usage/v7/label/basic/angular.md
new file mode 100644
index 00000000000..c3125f70b5f
--- /dev/null
+++ b/static/usage/v7/label/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-label>Label</ion-label>
+```
diff --git a/static/usage/v7/label/basic/demo.html b/static/usage/v7/label/basic/demo.html
new file mode 100644
index 00000000000..a6bad98959e
--- /dev/null
+++ b/static/usage/v7/label/basic/demo.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Label</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-label>Label</ion-label>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/label/basic/index.md b/static/usage/v7/label/basic/index.md
new file mode 100644
index 00000000000..b9365587f5c
--- /dev/null
+++ b/static/usage/v7/label/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/label/basic/demo.html" />
diff --git a/static/usage/v7/label/basic/javascript.md b/static/usage/v7/label/basic/javascript.md
new file mode 100644
index 00000000000..c3125f70b5f
--- /dev/null
+++ b/static/usage/v7/label/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-label>Label</ion-label>
+```
diff --git a/static/usage/v7/label/basic/react.md b/static/usage/v7/label/basic/react.md
new file mode 100644
index 00000000000..8eb985452c0
--- /dev/null
+++ b/static/usage/v7/label/basic/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonLabel>Label</IonLabel>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/label/basic/vue.md b/static/usage/v7/label/basic/vue.md
new file mode 100644
index 00000000000..87f46b68110
--- /dev/null
+++ b/static/usage/v7/label/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-label>Label</ion-label>
+</template>
+
+<script lang="ts">
+  import { IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel },
+  });
+</script>
+```
diff --git a/static/usage/v7/label/input/angular.md b/static/usage/v7/label/input/angular.md
new file mode 100644
index 00000000000..75278afd44b
--- /dev/null
+++ b/static/usage/v7/label/input/angular.md
@@ -0,0 +1,31 @@
+```html
+<ion-item>
+  <ion-label>Default Label</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="fixed">Fixed Label</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="floating">Floating Label</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="stacked">Stacked Label</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label>Toggle</ion-label>
+  <ion-toggle slot="end" checked></ion-toggle>
+</ion-item>
+
+<ion-item>
+  <ion-checkbox slot="start" checked></ion-checkbox>
+  <ion-label>Checkbox</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/label/input/demo.html b/static/usage/v7/label/input/demo.html
new file mode 100644
index 00000000000..d43bb5ba712
--- /dev/null
+++ b/static/usage/v7/label/input/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Label</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Default Label</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="fixed">Fixed Label</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="floating">Floating Label</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="stacked">Stacked Label</ion-label>
+          <ion-input placeholder="Enter text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Toggle</ion-label>
+          <ion-toggle slot="end" checked></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-checkbox slot="start" checked></ion-checkbox>
+          <ion-label>Checkbox</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/label/input/index.md b/static/usage/v7/label/input/index.md
new file mode 100644
index 00000000000..a1e95d3ab95
--- /dev/null
+++ b/static/usage/v7/label/input/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/label/input/demo.html" size="medium" />
diff --git a/static/usage/v7/label/input/javascript.md b/static/usage/v7/label/input/javascript.md
new file mode 100644
index 00000000000..75278afd44b
--- /dev/null
+++ b/static/usage/v7/label/input/javascript.md
@@ -0,0 +1,31 @@
+```html
+<ion-item>
+  <ion-label>Default Label</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="fixed">Fixed Label</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="floating">Floating Label</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="stacked">Stacked Label</ion-label>
+  <ion-input placeholder="Enter text"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label>Toggle</ion-label>
+  <ion-toggle slot="end" checked></ion-toggle>
+</ion-item>
+
+<ion-item>
+  <ion-checkbox slot="start" checked></ion-checkbox>
+  <ion-label>Checkbox</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/label/input/react.md b/static/usage/v7/label/input/react.md
new file mode 100644
index 00000000000..ff11fd1f176
--- /dev/null
+++ b/static/usage/v7/label/input/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonLabel>Default Label</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="fixed">Fixed Label</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="floating">Floating Label</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel position="stacked">Stacked Label</IonLabel>
+        <IonInput placeholder="Enter text"></IonInput>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Toggle</IonLabel>
+        <IonToggle slot="end" checked></IonToggle>
+      </IonItem>
+
+      <IonItem>
+        <IonCheckbox slot="start" checked></IonCheckbox>
+        <IonLabel>Checkbox</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/label/input/vue.md b/static/usage/v7/label/input/vue.md
new file mode 100644
index 00000000000..cd05ef82b44
--- /dev/null
+++ b/static/usage/v7/label/input/vue.md
@@ -0,0 +1,42 @@
+```html
+<template>
+  <ion-item>
+    <ion-label>Default Label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="fixed">Fixed Label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Floating Label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Stacked Label</ion-label>
+    <ion-input placeholder="Enter text"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Toggle</ion-label>
+    <ion-toggle slot="end" checked></ion-toggle>
+  </ion-item>
+
+  <ion-item>
+    <ion-checkbox slot="start" checked></ion-checkbox>
+    <ion-label>Checkbox</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle },
+  });
+</script>
+```
diff --git a/static/usage/v7/label/item/angular.md b/static/usage/v7/label/item/angular.md
new file mode 100644
index 00000000000..be252b899a0
--- /dev/null
+++ b/static/usage/v7/label/item/angular.md
@@ -0,0 +1,28 @@
+```html
+<ion-item>
+  <ion-label>Default Label</ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Multi-line text that should ellipsis when it is too long
+    to fit on one line. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label class="ion-text-wrap">
+    Multi-line text that should wrap when it is too long
+    to fit on one line. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    <h1>Heading</h1>
+    <p>Paragraph</p>
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/label/item/demo.html b/static/usage/v7/label/item/demo.html
new file mode 100644
index 00000000000..67dbf234345
--- /dev/null
+++ b/static/usage/v7/label/item/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Label</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Default Label</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Multi-line text that should ellipsis when it is too long
+            to fit on one line. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit.
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            Multi-line text that should wrap when it is too long
+            to fit on one line. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit.
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h1>Heading</h1>
+            <p>Paragraph</p>
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/label/item/index.md b/static/usage/v7/label/item/index.md
new file mode 100644
index 00000000000..2c712e82183
--- /dev/null
+++ b/static/usage/v7/label/item/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/label/item/demo.html" size="medium" />
diff --git a/static/usage/v7/label/item/javascript.md b/static/usage/v7/label/item/javascript.md
new file mode 100644
index 00000000000..be252b899a0
--- /dev/null
+++ b/static/usage/v7/label/item/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-item>
+  <ion-label>Default Label</ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Multi-line text that should ellipsis when it is too long
+    to fit on one line. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label class="ion-text-wrap">
+    Multi-line text that should wrap when it is too long
+    to fit on one line. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    <h1>Heading</h1>
+    <p>Paragraph</p>
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/label/item/react.md b/static/usage/v7/label/item/react.md
new file mode 100644
index 00000000000..88e4f904deb
--- /dev/null
+++ b/static/usage/v7/label/item/react.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonLabel>Default Label</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>
+          Multi-line text that should ellipsis when it is too long
+          to fit on one line. Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit.
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel class="ion-text-wrap">
+          Multi-line text that should wrap when it is too long
+          to fit on one line. Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit.
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>
+          <h1>Heading</h1>
+          <p>Paragraph</p>
+        </IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/label/item/vue.md b/static/usage/v7/label/item/vue.md
new file mode 100644
index 00000000000..99ec3ea3d40
--- /dev/null
+++ b/static/usage/v7/label/item/vue.md
@@ -0,0 +1,39 @@
+```html
+<template>
+  <ion-item>
+    <ion-label>Default Label</ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Multi-line text that should ellipsis when it is too long
+      to fit on one line. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit.
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label class="ion-text-wrap">
+      Multi-line text that should wrap when it is too long
+      to fit on one line. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit.
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      <h1>Heading</h1>
+      <p>Paragraph</p>
+    </ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel },
+  });
+</script>
+```
diff --git a/static/usage/v7/label/theming/colors/angular.md b/static/usage/v7/label/theming/colors/angular.md
new file mode 100644
index 00000000000..1fbebb19888
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-label>Default</ion-label>
+<ion-label color="primary">Primary</ion-label>
+<ion-label color="secondary">Secondary</ion-label>
+<ion-label color="tertiary">Tertiary</ion-label>
+<ion-label color="success">Success</ion-label>
+<ion-label color="warning">Warning</ion-label>
+<ion-label color="danger">Danger</ion-label>
+<ion-label color="light">Light</ion-label>
+<ion-label color="medium">Medium</ion-label>
+<ion-label color="dark">Dark</ion-label>
+```
diff --git a/static/usage/v7/label/theming/colors/demo.html b/static/usage/v7/label/theming/colors/demo.html
new file mode 100644
index 00000000000..3444d3c2da9
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Label</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-label {
+      margin: 0 2px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-label>Default</ion-label>
+        <ion-label color="primary">Primary</ion-label>
+        <ion-label color="secondary">Secondary</ion-label>
+        <ion-label color="tertiary">Tertiary</ion-label>
+        <ion-label color="success">Success</ion-label>
+        <ion-label color="warning">Warning</ion-label>
+        <ion-label color="danger">Danger</ion-label>
+        <ion-label color="light">Light</ion-label>
+        <ion-label color="medium">Medium</ion-label>
+        <ion-label color="dark">Dark</ion-label>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/label/theming/colors/index.md b/static/usage/v7/label/theming/colors/index.md
new file mode 100644
index 00000000000..45363df63a4
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/label/theming/colors/demo.html" />
diff --git a/static/usage/v7/label/theming/colors/javascript.md b/static/usage/v7/label/theming/colors/javascript.md
new file mode 100644
index 00000000000..1fbebb19888
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-label>Default</ion-label>
+<ion-label color="primary">Primary</ion-label>
+<ion-label color="secondary">Secondary</ion-label>
+<ion-label color="tertiary">Tertiary</ion-label>
+<ion-label color="success">Success</ion-label>
+<ion-label color="warning">Warning</ion-label>
+<ion-label color="danger">Danger</ion-label>
+<ion-label color="light">Light</ion-label>
+<ion-label color="medium">Medium</ion-label>
+<ion-label color="dark">Dark</ion-label>
+```
diff --git a/static/usage/v7/label/theming/colors/react.md b/static/usage/v7/label/theming/colors/react.md
new file mode 100644
index 00000000000..6680a644fb6
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonLabel>Default</IonLabel>
+      <IonLabel color="primary">Primary</IonLabel>
+      <IonLabel color="secondary">Secondary</IonLabel>
+      <IonLabel color="tertiary">Tertiary</IonLabel>
+      <IonLabel color="success">Success</IonLabel>
+      <IonLabel color="warning">Warning</IonLabel>
+      <IonLabel color="danger">Danger</IonLabel>
+      <IonLabel color="light">Light</IonLabel>
+      <IonLabel color="medium">Medium</IonLabel>
+      <IonLabel color="dark">Dark</IonLabel>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/label/theming/colors/vue.md b/static/usage/v7/label/theming/colors/vue.md
new file mode 100644
index 00000000000..da18a00d4d1
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-label>Default</ion-label>
+  <ion-label color="primary">Primary</ion-label>
+  <ion-label color="secondary">Secondary</ion-label>
+  <ion-label color="tertiary">Tertiary</ion-label>
+  <ion-label color="success">Success</ion-label>
+  <ion-label color="warning">Warning</ion-label>
+  <ion-label color="danger">Danger</ion-label>
+  <ion-label color="light">Light</ion-label>
+  <ion-label color="medium">Medium</ion-label>
+  <ion-label color="dark">Dark</ion-label>
+</template>
+
+<script lang="ts">
+  import { IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel },
+  });
+</script>
+```
diff --git a/static/usage/v7/list-header/basic/angular.md b/static/usage/v7/list-header/basic/angular.md
new file mode 100644
index 00000000000..d2e2f3fb345
--- /dev/null
+++ b/static/usage/v7/list-header/basic/angular.md
@@ -0,0 +1,22 @@
+```html
+<ion-list>
+  <ion-list-header>
+    <ion-label>Video Games</ion-label>
+  </ion-list-header>
+  <ion-item>
+    <ion-label>Pokémon Yellow</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Mega Man X</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>The Legend of Zelda</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Pac-Man</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Super Mario World</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list-header/basic/demo.html b/static/usage/v7/list-header/basic/demo.html
new file mode 100644
index 00000000000..dae3477fac9
--- /dev/null
+++ b/static/usage/v7/list-header/basic/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-list-header>
+            <ion-label>Video Games</ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Pokémon Yellow</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Mega Man X</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>The Legend of Zelda</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Pac-Man</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Super Mario World</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/list-header/basic/index.md b/static/usage/v7/list-header/basic/index.md
new file mode 100644
index 00000000000..79b5b31a75f
--- /dev/null
+++ b/static/usage/v7/list-header/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/list-header/basic/demo.html"
+  size="325px"
+/>
diff --git a/static/usage/v7/list-header/basic/javascript.md b/static/usage/v7/list-header/basic/javascript.md
new file mode 100644
index 00000000000..d2e2f3fb345
--- /dev/null
+++ b/static/usage/v7/list-header/basic/javascript.md
@@ -0,0 +1,22 @@
+```html
+<ion-list>
+  <ion-list-header>
+    <ion-label>Video Games</ion-label>
+  </ion-list-header>
+  <ion-item>
+    <ion-label>Pokémon Yellow</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Mega Man X</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>The Legend of Zelda</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Pac-Man</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Super Mario World</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list-header/basic/react.md b/static/usage/v7/list-header/basic/react.md
new file mode 100644
index 00000000000..b48a05b05da
--- /dev/null
+++ b/static/usage/v7/list-header/basic/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonListHeader>
+        <IonLabel>Video Games</IonLabel>
+      </IonListHeader>
+      <IonItem>
+        <IonLabel>Pokémon Yellow</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Mega Man X</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>The Legend of Zelda</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Pac-Man</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Super Mario World</IonLabel>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list-header/basic/vue.md b/static/usage/v7/list-header/basic/vue.md
new file mode 100644
index 00000000000..b7d6980e400
--- /dev/null
+++ b/static/usage/v7/list-header/basic/vue.md
@@ -0,0 +1,33 @@
+```html
+<template>
+  <ion-list>
+    <ion-list-header>
+      <ion-label>Video Games</ion-label>
+    </ion-list-header>
+    <ion-item>
+      <ion-label>Pokémon Yellow</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Mega Man X</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>The Legend of Zelda</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Pac-Man</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Super Mario World</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonListHeader },
+  });
+</script>
+```
diff --git a/static/usage/v7/list-header/buttons/angular.md b/static/usage/v7/list-header/buttons/angular.md
new file mode 100644
index 00000000000..7c24d9242a2
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/angular.md
@@ -0,0 +1,23 @@
+```html
+<ion-list>
+  <ion-list-header>
+    <ion-label>Video Games</ion-label>
+    <ion-button>See All</ion-button>
+  </ion-list-header>
+  <ion-item>
+    <ion-label>Pokémon Yellow</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Mega Man X</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>The Legend of Zelda</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Pac-Man</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Super Mario World</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list-header/buttons/demo.html b/static/usage/v7/list-header/buttons/demo.html
new file mode 100644
index 00000000000..19ecb87a9a2
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-list-header>
+            <ion-label>Video Games</ion-label>
+            <ion-button>See All</ion-button>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Pokémon Yellow</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Mega Man X</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>The Legend of Zelda</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Pac-Man</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Super Mario World</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/list-header/buttons/index.md b/static/usage/v7/list-header/buttons/index.md
new file mode 100644
index 00000000000..5c724b1a8f5
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/list-header/buttons/demo.html"
+  size="325px"
+/>
diff --git a/static/usage/v7/list-header/buttons/javascript.md b/static/usage/v7/list-header/buttons/javascript.md
new file mode 100644
index 00000000000..7c24d9242a2
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/javascript.md
@@ -0,0 +1,23 @@
+```html
+<ion-list>
+  <ion-list-header>
+    <ion-label>Video Games</ion-label>
+    <ion-button>See All</ion-button>
+  </ion-list-header>
+  <ion-item>
+    <ion-label>Pokémon Yellow</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Mega Man X</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>The Legend of Zelda</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Pac-Man</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Super Mario World</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list-header/buttons/react.md b/static/usage/v7/list-header/buttons/react.md
new file mode 100644
index 00000000000..d5d45b36ab0
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonListHeader>
+        <IonLabel>Video Games</IonLabel>
+        <IonButton>See All</IonButton>
+      </IonListHeader>
+      <IonItem>
+        <IonLabel>Pokémon Yellow</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Mega Man X</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>The Legend of Zelda</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Pac-Man</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Super Mario World</IonLabel>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list-header/buttons/vue.md b/static/usage/v7/list-header/buttons/vue.md
new file mode 100644
index 00000000000..704e94f057a
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/vue.md
@@ -0,0 +1,34 @@
+```html
+<template>
+  <ion-list>
+    <ion-list-header>
+      <ion-label>Video Games</ion-label>
+      <ion-button>See All</ion-button>
+    </ion-list-header>
+    <ion-item>
+      <ion-label>Pokémon Yellow</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Mega Man X</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>The Legend of Zelda</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Pac-Man</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Super Mario World</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonItem, IonLabel, IonList, IonListHeader },
+  });
+</script>
+```
diff --git a/static/usage/v7/list-header/lines/angular.md b/static/usage/v7/list-header/lines/angular.md
new file mode 100644
index 00000000000..7feb30bd27d
--- /dev/null
+++ b/static/usage/v7/list-header/lines/angular.md
@@ -0,0 +1,37 @@
+```html
+<ion-list>
+  <ion-list-header>
+    <ion-label>Default</ion-label>
+  </ion-list-header>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+</ion-list>
+
+<ion-list>
+  <ion-list-header lines="inset">
+    <ion-label>Inset</ion-label>
+  </ion-list-header>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+</ion-list>
+
+<ion-list>
+  <ion-list-header lines="full">
+    <ion-label>Full</ion-label>
+  </ion-list-header>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list-header/lines/demo.html b/static/usage/v7/list-header/lines/demo.html
new file mode 100644
index 00000000000..dad3ebc17cb
--- /dev/null
+++ b/static/usage/v7/list-header/lines/demo.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List Header</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-list-header>
+            <ion-label>Default</ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header lines="inset">
+            <ion-label>Inset</ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header lines="full">
+            <ion-label>Full</ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/list-header/lines/index.md b/static/usage/v7/list-header/lines/index.md
new file mode 100644
index 00000000000..a8e84eddf7f
--- /dev/null
+++ b/static/usage/v7/list-header/lines/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/list-header/lines/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v7/list-header/lines/javascript.md b/static/usage/v7/list-header/lines/javascript.md
new file mode 100644
index 00000000000..7feb30bd27d
--- /dev/null
+++ b/static/usage/v7/list-header/lines/javascript.md
@@ -0,0 +1,37 @@
+```html
+<ion-list>
+  <ion-list-header>
+    <ion-label>Default</ion-label>
+  </ion-list-header>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+</ion-list>
+
+<ion-list>
+  <ion-list-header lines="inset">
+    <ion-label>Inset</ion-label>
+  </ion-list-header>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+</ion-list>
+
+<ion-list>
+  <ion-list-header lines="full">
+    <ion-label>Full</ion-label>
+  </ion-list-header>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Item</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list-header/lines/react.md b/static/usage/v7/list-header/lines/react.md
new file mode 100644
index 00000000000..9ab1c69d35e
--- /dev/null
+++ b/static/usage/v7/list-header/lines/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonList>
+        <IonListHeader>
+          <IonLabel>Default</IonLabel>
+        </IonListHeader>
+        <IonItem>
+          <IonLabel>Item</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Item</IonLabel>
+        </IonItem>
+      </IonList>
+
+      <IonList>
+        <IonListHeader lines="inset">
+          <IonLabel>Inset</IonLabel>
+        </IonListHeader>
+        <IonItem>
+          <IonLabel>Item</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Item</IonLabel>
+        </IonItem>
+      </IonList>
+
+      <IonList>
+        <IonListHeader lines="full">
+          <IonLabel>Full</IonLabel>
+        </IonListHeader>
+        <IonItem>
+          <IonLabel>Item</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Item</IonLabel>
+        </IonItem>
+      </IonList>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list-header/lines/vue.md b/static/usage/v7/list-header/lines/vue.md
new file mode 100644
index 00000000000..6ec522dd8a4
--- /dev/null
+++ b/static/usage/v7/list-header/lines/vue.md
@@ -0,0 +1,48 @@
+```html
+<template>
+  <ion-list>
+    <ion-list-header>
+      <ion-label>Default</ion-label>
+    </ion-list-header>
+    <ion-item>
+      <ion-label>Item</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Item</ion-label>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header lines="inset">
+      <ion-label>Inset</ion-label>
+    </ion-list-header>
+    <ion-item>
+      <ion-label>Item</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Item</ion-label>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header lines="full">
+      <ion-label>Full</ion-label>
+    </ion-list-header>
+    <ion-item>
+      <ion-label>Item</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Item</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonListHeader },
+  });
+</script>
+```
diff --git a/static/usage/v7/list-header/theming/colors/angular.md b/static/usage/v7/list-header/theming/colors/angular.md
new file mode 100644
index 00000000000..88d5b12d912
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/angular.md
@@ -0,0 +1,32 @@
+```html
+<ion-list-header>
+  <ion-label>Default</ion-label>
+</ion-list-header>
+<ion-list-header color="primary">
+  <ion-label>Primary</ion-label>
+</ion-list-header>
+<ion-list-header color="secondary">
+  <ion-label>Secondary</ion-label>
+</ion-list-header>
+<ion-list-header color="tertiary">
+  <ion-label>Tertiary</ion-label>
+</ion-list-header>
+<ion-list-header color="success">
+  <ion-label>Success</ion-label>
+</ion-list-header>
+<ion-list-header color="warning">
+  <ion-label>Warning</ion-label>
+</ion-list-header>
+<ion-list-header color="danger">
+  <ion-label>Danger</ion-label>
+</ion-list-header>
+<ion-list-header color="light">
+  <ion-label>Light</ion-label>
+</ion-list-header>
+<ion-list-header color="medium">
+  <ion-label>Medium</ion-label>
+</ion-list-header>
+<ion-list-header color="dark">
+  <ion-label>Dark</ion-label>
+</ion-list-header>
+```
diff --git a/static/usage/v7/list-header/theming/colors/demo.html b/static/usage/v7/list-header/theming/colors/demo.html
new file mode 100644
index 00000000000..fa36d9b0a9a
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List Header</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list-header>
+          <ion-label>Default</ion-label>
+        </ion-list-header>
+        <ion-list-header color="primary">
+          <ion-label>Primary</ion-label>
+        </ion-list-header>
+        <ion-list-header color="secondary">
+          <ion-label>Secondary</ion-label>
+        </ion-list-header>
+        <ion-list-header color="tertiary">
+          <ion-label>Tertiary</ion-label>
+        </ion-list-header>
+        <ion-list-header color="success">
+          <ion-label>Success</ion-label>
+        </ion-list-header>
+        <ion-list-header color="warning">
+          <ion-label>Warning</ion-label>
+        </ion-list-header>
+        <ion-list-header color="danger">
+          <ion-label>Danger</ion-label>
+        </ion-list-header>
+        <ion-list-header color="light">
+          <ion-label>Light</ion-label>
+        </ion-list-header>
+        <ion-list-header color="medium">
+          <ion-label>Medium</ion-label>
+        </ion-list-header>
+        <ion-list-header color="dark">
+          <ion-label>Dark</ion-label>
+        </ion-list-header>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/list-header/theming/colors/index.md b/static/usage/v7/list-header/theming/colors/index.md
new file mode 100644
index 00000000000..13af9007f88
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/list-header/theming/colors/demo.html"
+  size="650px"
+/>
diff --git a/static/usage/v7/list-header/theming/colors/javascript.md b/static/usage/v7/list-header/theming/colors/javascript.md
new file mode 100644
index 00000000000..88d5b12d912
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+<ion-list-header>
+  <ion-label>Default</ion-label>
+</ion-list-header>
+<ion-list-header color="primary">
+  <ion-label>Primary</ion-label>
+</ion-list-header>
+<ion-list-header color="secondary">
+  <ion-label>Secondary</ion-label>
+</ion-list-header>
+<ion-list-header color="tertiary">
+  <ion-label>Tertiary</ion-label>
+</ion-list-header>
+<ion-list-header color="success">
+  <ion-label>Success</ion-label>
+</ion-list-header>
+<ion-list-header color="warning">
+  <ion-label>Warning</ion-label>
+</ion-list-header>
+<ion-list-header color="danger">
+  <ion-label>Danger</ion-label>
+</ion-list-header>
+<ion-list-header color="light">
+  <ion-label>Light</ion-label>
+</ion-list-header>
+<ion-list-header color="medium">
+  <ion-label>Medium</ion-label>
+</ion-list-header>
+<ion-list-header color="dark">
+  <ion-label>Dark</ion-label>
+</ion-list-header>
+```
diff --git a/static/usage/v7/list-header/theming/colors/react.md b/static/usage/v7/list-header/theming/colors/react.md
new file mode 100644
index 00000000000..f00ce7c16d1
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonListHeader } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonListHeader>
+        <IonLabel>Default</IonLabel>
+      </IonListHeader>
+      <IonListHeader color="primary">
+        <IonLabel>Primary</IonLabel>
+      </IonListHeader>
+      <IonListHeader color="secondary">
+        <IonLabel>Secondary</IonLabel>
+      </IonListHeader>
+      <IonListHeader color="tertiary">
+        <IonLabel>Tertiary</IonLabel>
+      </IonListHeader>
+      <IonListHeader color="success">
+        <IonLabel>Success</IonLabel>
+      </IonListHeader>
+      <IonListHeader color="warning">
+        <IonLabel>Warning</IonLabel>
+      </IonListHeader>
+      <IonListHeader color="danger">
+        <IonLabel>Danger</IonLabel>
+      </IonListHeader>
+      <IonListHeader color="light">
+        <IonLabel>Light</IonLabel>
+      </IonListHeader>
+      <IonListHeader color="medium">
+        <IonLabel>Medium</IonLabel>
+      </IonListHeader>
+      <IonListHeader color="dark">
+        <IonLabel>Dark</IonLabel>
+      </IonListHeader>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list-header/theming/colors/vue.md b/static/usage/v7/list-header/theming/colors/vue.md
new file mode 100644
index 00000000000..b20672dd78f
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+<template>
+  <ion-list-header>
+    <ion-label>Default</ion-label>
+  </ion-list-header>
+  <ion-list-header color="primary">
+    <ion-label>Primary</ion-label>
+  </ion-list-header>
+  <ion-list-header color="secondary">
+    <ion-label>Secondary</ion-label>
+  </ion-list-header>
+  <ion-list-header color="tertiary">
+    <ion-label>Tertiary</ion-label>
+  </ion-list-header>
+  <ion-list-header color="success">
+    <ion-label>Success</ion-label>
+  </ion-list-header>
+  <ion-list-header color="warning">
+    <ion-label>Warning</ion-label>
+  </ion-list-header>
+  <ion-list-header color="danger">
+    <ion-label>Danger</ion-label>
+  </ion-list-header>
+  <ion-list-header color="light">
+    <ion-label>Light</ion-label>
+  </ion-list-header>
+  <ion-list-header color="medium">
+    <ion-label>Medium</ion-label>
+  </ion-list-header>
+  <ion-list-header color="dark">
+    <ion-label>Dark</ion-label>
+  </ion-list-header>
+</template>
+
+<script lang="ts">
+  import { IonLabel, IonListHeader } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonListHeader },
+  });
+</script>
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/angular/example_component_css.md b/static/usage/v7/list-header/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..9609437fd1d
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+ion-list-header {
+  --background: #19422d;
+  --color: #fff;
+
+  --border-width: 0 0 4px 0;
+  --border-color: #f24aec;
+  --border-style: double;
+}
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/angular/example_component_html.md b/static/usage/v7/list-header/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..0bf6d9fa3fe
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-list-header>
+  <ion-label>Custom List Header</ion-label>
+</ion-list-header>
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/demo.html b/static/usage/v7/list-header/theming/css-properties/demo.html
new file mode 100644
index 00000000000..133c2d8f994
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List Header</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list-header {
+      --background: #19422d;
+      --color: #fff;
+
+      --border-width: 0 0 4px 0;
+      --border-color: #f24aec;
+      --border-style: double;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list-header>
+          <ion-label>Custom List Header</ion-label>
+        </ion-list-header>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/list-header/theming/css-properties/index.md b/static/usage/v7/list-header/theming/css-properties/index.md
new file mode 100644
index 00000000000..e273cdb2b91
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/list-header/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/list-header/theming/css-properties/javascript.md b/static/usage/v7/list-header/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..5ac75dc4f0f
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+<ion-list-header>
+  <ion-label>Custom List Header</ion-label>
+</ion-list-header>
+
+<style>
+  ion-list-header {
+    --background: #19422d;
+    --color: #fff;
+
+    --border-width: 0 0 4px 0;
+    --border-color: #f24aec;
+    --border-style: double;
+  }
+</style>
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/react/main_css.md b/static/usage/v7/list-header/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..9609437fd1d
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+ion-list-header {
+  --background: #19422d;
+  --color: #fff;
+
+  --border-width: 0 0 4px 0;
+  --border-color: #f24aec;
+  --border-style: double;
+}
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/react/main_tsx.md b/static/usage/v7/list-header/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..169485b3365
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonListHeader } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonListHeader>
+      <IonLabel>Custom List Header</IonLabel>
+    </IonListHeader>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/vue.md b/static/usage/v7/list-header/theming/css-properties/vue.md
new file mode 100644
index 00000000000..c56d482c2a2
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-list-header>
+    <ion-label>Custom List Header</ion-label>
+  </ion-list-header>
+</template>
+
+<script lang="ts">
+  import { IonLabel, IonListHeader } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonListHeader },
+  });
+</script>
+
+<style scoped>
+  ion-list-header {
+    --background: #19422d;
+    --color: #fff;
+
+    --border-width: 0 0 4px 0;
+    --border-color: #f24aec;
+    --border-style: double;
+  }
+</style>
+```
diff --git a/static/usage/v7/list/basic/angular.md b/static/usage/v7/list/basic/angular.md
new file mode 100644
index 00000000000..f36481075e8
--- /dev/null
+++ b/static/usage/v7/list/basic/angular.md
@@ -0,0 +1,19 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Pokémon Yellow</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Mega Man X</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>The Legend of Zelda</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Pac-Man</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Super Mario World</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list/basic/demo.html b/static/usage/v7/list/basic/demo.html
new file mode 100644
index 00000000000..86ed4981f63
--- /dev/null
+++ b/static/usage/v7/list/basic/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Pokémon Yellow</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Mega Man X</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>The Legend of Zelda</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Pac-Man</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Super Mario World</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/list/basic/index.md b/static/usage/v7/list/basic/index.md
new file mode 100644
index 00000000000..7569f140fb9
--- /dev/null
+++ b/static/usage/v7/list/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/list/basic/demo.html" size="300px" />
diff --git a/static/usage/v7/list/basic/javascript.md b/static/usage/v7/list/basic/javascript.md
new file mode 100644
index 00000000000..f36481075e8
--- /dev/null
+++ b/static/usage/v7/list/basic/javascript.md
@@ -0,0 +1,19 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Pokémon Yellow</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Mega Man X</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>The Legend of Zelda</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Pac-Man</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Super Mario World</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list/basic/react.md b/static/usage/v7/list/basic/react.md
new file mode 100644
index 00000000000..51b30335ccd
--- /dev/null
+++ b/static/usage/v7/list/basic/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonLabel>Pokémon Yellow</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Mega Man X</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>The Legend of Zelda</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Pac-Man</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Super Mario World</IonLabel>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list/basic/vue.md b/static/usage/v7/list/basic/vue.md
new file mode 100644
index 00000000000..4f3886c0719
--- /dev/null
+++ b/static/usage/v7/list/basic/vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>Pokémon Yellow</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Mega Man X</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>The Legend of Zelda</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Pac-Man</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Super Mario World</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/list/inset/angular.md b/static/usage/v7/list/inset/angular.md
new file mode 100644
index 00000000000..d88d56e77f1
--- /dev/null
+++ b/static/usage/v7/list/inset/angular.md
@@ -0,0 +1,19 @@
+```html
+<ion-list [inset]="true">
+  <ion-item>
+    <ion-label>Pokémon Yellow</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Mega Man X</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>The Legend of Zelda</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Pac-Man</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Super Mario World</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list/inset/demo.html b/static/usage/v7/list/inset/demo.html
new file mode 100644
index 00000000000..b2cbacc4e11
--- /dev/null
+++ b/static/usage/v7/list/inset/demo.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-content {
+      --background: #f9f9f9;
+    }
+
+    .container {
+      flex-flow: column;
+      align-items: stretch;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list inset>
+          <ion-item>
+            <ion-label>Pokémon Yellow</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Mega Man X</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>The Legend of Zelda</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Pac-Man</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Super Mario World</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/list/inset/index.md b/static/usage/v7/list/inset/index.md
new file mode 100644
index 00000000000..90a7e7c6a64
--- /dev/null
+++ b/static/usage/v7/list/inset/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/list/inset/demo.html" size="350px" />
diff --git a/static/usage/v7/list/inset/javascript.md b/static/usage/v7/list/inset/javascript.md
new file mode 100644
index 00000000000..a5c6e28dd38
--- /dev/null
+++ b/static/usage/v7/list/inset/javascript.md
@@ -0,0 +1,19 @@
+```html
+<ion-list inset="true">
+  <ion-item>
+    <ion-label>Pokémon Yellow</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Mega Man X</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>The Legend of Zelda</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Pac-Man</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Super Mario World</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list/inset/react.md b/static/usage/v7/list/inset/react.md
new file mode 100644
index 00000000000..d9f00d8a4f9
--- /dev/null
+++ b/static/usage/v7/list/inset/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList inset={true}>
+      <IonItem>
+        <IonLabel>Pokémon Yellow</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Mega Man X</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>The Legend of Zelda</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Pac-Man</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Super Mario World</IonLabel>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list/inset/vue.md b/static/usage/v7/list/inset/vue.md
new file mode 100644
index 00000000000..15d801c7eae
--- /dev/null
+++ b/static/usage/v7/list/inset/vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-list :inset="true">
+    <ion-item>
+      <ion-label>Pokémon Yellow</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Mega Man X</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>The Legend of Zelda</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Pac-Man</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Super Mario World</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/list/lines/angular.md b/static/usage/v7/list/lines/angular.md
new file mode 100644
index 00000000000..b311cb8ad0a
--- /dev/null
+++ b/static/usage/v7/list/lines/angular.md
@@ -0,0 +1,37 @@
+```html
+<ion-list lines="full">
+  <ion-item>
+    <ion-label>Full Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Full Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Full Lines</ion-label>
+  </ion-item>
+</ion-list>
+
+<ion-list lines="inset">
+  <ion-item>
+    <ion-label>Inset Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Inset Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Inset Lines</ion-label>
+  </ion-item>
+</ion-list>
+
+<ion-list lines="none">
+  <ion-item>
+    <ion-label>No Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>No Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>No Lines</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list/lines/demo.html b/static/usage/v7/list/lines/demo.html
new file mode 100644
index 00000000000..259465266e1
--- /dev/null
+++ b/static/usage/v7/list/lines/demo.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>List</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      align-items: stretch;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list lines="full">
+          <ion-item>
+            <ion-label>Full Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Full Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Full Lines</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-list lines="inset">
+          <ion-item>
+            <ion-label>Inset Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Inset Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Inset Lines</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-list lines="none">
+          <ion-item>
+            <ion-label>No Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>No Lines</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>No Lines</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/list/lines/index.md b/static/usage/v7/list/lines/index.md
new file mode 100644
index 00000000000..bbf9d599ccd
--- /dev/null
+++ b/static/usage/v7/list/lines/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/list/lines/demo.html" size="500px" />
diff --git a/static/usage/v7/list/lines/javascript.md b/static/usage/v7/list/lines/javascript.md
new file mode 100644
index 00000000000..b311cb8ad0a
--- /dev/null
+++ b/static/usage/v7/list/lines/javascript.md
@@ -0,0 +1,37 @@
+```html
+<ion-list lines="full">
+  <ion-item>
+    <ion-label>Full Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Full Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Full Lines</ion-label>
+  </ion-item>
+</ion-list>
+
+<ion-list lines="inset">
+  <ion-item>
+    <ion-label>Inset Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Inset Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Inset Lines</ion-label>
+  </ion-item>
+</ion-list>
+
+<ion-list lines="none">
+  <ion-item>
+    <ion-label>No Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>No Lines</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>No Lines</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/list/lines/react.md b/static/usage/v7/list/lines/react.md
new file mode 100644
index 00000000000..16754ad804b
--- /dev/null
+++ b/static/usage/v7/list/lines/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonList lines="full">
+        <IonItem>
+          <IonLabel>Full Lines</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Full Lines</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Full Lines</IonLabel>
+        </IonItem>
+      </IonList>
+
+      <IonList lines="inset">
+        <IonItem>
+          <IonLabel>Inset Lines</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Inset Lines</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Inset Lines</IonLabel>
+        </IonItem>
+      </IonList>
+
+      <IonList lines="none">
+        <IonItem>
+          <IonLabel>No Lines</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>No Lines</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>No Lines</IonLabel>
+        </IonItem>
+      </IonList>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list/lines/vue.md b/static/usage/v7/list/lines/vue.md
new file mode 100644
index 00000000000..914ba88d980
--- /dev/null
+++ b/static/usage/v7/list/lines/vue.md
@@ -0,0 +1,48 @@
+```html
+<template>
+  <ion-list lines="full">
+    <ion-item>
+      <ion-label>Full Lines</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Full Lines</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Full Lines</ion-label>
+    </ion-item>
+  </ion-list>
+
+  <ion-list lines="inset">
+    <ion-item>
+      <ion-label>Inset Lines</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Inset Lines</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Inset Lines</ion-label>
+    </ion-item>
+  </ion-list>
+
+  <ion-list lines="none">
+    <ion-item>
+      <ion-label>No Lines</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>No Lines</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>No Lines</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/loading/controller/angular/example_component_html.md b/static/usage/v7/loading/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..f4f3d701d2f
--- /dev/null
+++ b/static/usage/v7/loading/controller/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="showLoading()">Show Loading</ion-button>
+```
diff --git a/static/usage/v7/loading/controller/angular/example_component_ts.md b/static/usage/v7/loading/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..bd4b86eef29
--- /dev/null
+++ b/static/usage/v7/loading/controller/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { LoadingController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private loadingCtrl: LoadingController) {}
+
+  async showLoading() {
+    const loading = await this.loadingCtrl.create({
+      message: 'Dismissing after 3 seconds...',
+      duration: 3000,
+    });
+
+    loading.present();
+  }
+}
+```
diff --git a/static/usage/v7/loading/controller/demo.html b/static/usage/v7/loading/controller/demo.html
new file mode 100644
index 00000000000..9a3385f7307
--- /dev/null
+++ b/static/usage/v7/loading/controller/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.loadingController = loadingController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="showLoading()">Show Loading</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const loading = document.querySelector('ion-loading');
+    const showLoading = async () => {
+      const loading = await loadingController.create({
+        message: 'Dismissing after 3 seconds...',
+        duration: 3000
+      });
+      loading.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/loading/controller/index.md b/static/usage/v7/loading/controller/index.md
new file mode 100644
index 00000000000..0b953906d7d
--- /dev/null
+++ b/static/usage/v7/loading/controller/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/loading/controller/demo.html"
+/>
diff --git a/static/usage/v7/loading/controller/javascript.md b/static/usage/v7/loading/controller/javascript.md
new file mode 100644
index 00000000000..c5507d123af
--- /dev/null
+++ b/static/usage/v7/loading/controller/javascript.md
@@ -0,0 +1,14 @@
+```html
+<ion-button onclick="showLoading()">Show Loading</ion-button>
+
+<script>
+var showLoading = async () => {
+  const loading = await loadingController.create({
+    message: 'Dismissing after 3 seconds...',
+    duration: 3000
+  });
+  
+  loading.present();
+}
+</script>
+```
diff --git a/static/usage/v7/loading/controller/react.md b/static/usage/v7/loading/controller/react.md
new file mode 100644
index 00000000000..16280a1e91a
--- /dev/null
+++ b/static/usage/v7/loading/controller/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonLoading } from '@ionic/react';
+function Example() {
+  
+  /**
+   * This example does not make use of the dismiss
+   * method returned from `useIonLoading`, but it can
+   * be used for more complex scenarios.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [present, dismiss] = useIonLoading();
+  return (
+    <IonButton onClick={() => {
+      present({
+        message: 'Dismissing after 3 seconds...',
+        duration: 3000
+      })
+    }}>
+      Show Loading
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/loading/controller/vue.md b/static/usage/v7/loading/controller/vue.md
new file mode 100644
index 00000000000..17b65b33af0
--- /dev/null
+++ b/static/usage/v7/loading/controller/vue.md
@@ -0,0 +1,26 @@
+```html
+<template>
+  <ion-button @click="showLoading">Show Loading</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, loadingController } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+    setup() {
+      const showLoading = async () => {
+        const loading = await loadingController.create({
+          message: 'Dismissing after 3 seconds...',
+          duration: 3000
+        });
+        
+        loading.present();
+      }
+      
+      return { showLoading }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/loading/spinners/angular/example_component_html.md b/static/usage/v7/loading/spinners/angular/example_component_html.md
new file mode 100644
index 00000000000..f4f3d701d2f
--- /dev/null
+++ b/static/usage/v7/loading/spinners/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="showLoading()">Show Loading</ion-button>
+```
diff --git a/static/usage/v7/loading/spinners/angular/example_component_ts.md b/static/usage/v7/loading/spinners/angular/example_component_ts.md
new file mode 100644
index 00000000000..7e522cb3a64
--- /dev/null
+++ b/static/usage/v7/loading/spinners/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { LoadingController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private loadingCtrl: LoadingController) {}
+
+  async showLoading() {
+    const loading = await this.loadingCtrl.create({
+      message: 'Loading...',
+      duration: 3000,
+      spinner: 'circles',
+    });
+
+    loading.present();
+  }
+}
+```
diff --git a/static/usage/v7/loading/spinners/demo.html b/static/usage/v7/loading/spinners/demo.html
new file mode 100644
index 00000000000..01929a4e1f2
--- /dev/null
+++ b/static/usage/v7/loading/spinners/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.loadingController = loadingController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="showLoading()">Show Loading</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const loading = document.querySelector('ion-loading');
+    const showLoading = async () => {
+      const loading = await loadingController.create({
+        message: 'Loading...',
+        duration: 3000,
+        spinner: 'circles'
+      });
+      loading.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/loading/spinners/index.md b/static/usage/v7/loading/spinners/index.md
new file mode 100644
index 00000000000..503c5a488f4
--- /dev/null
+++ b/static/usage/v7/loading/spinners/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/loading/spinners/demo.html"
+/>
diff --git a/static/usage/v7/loading/spinners/javascript.md b/static/usage/v7/loading/spinners/javascript.md
new file mode 100644
index 00000000000..09712e70a92
--- /dev/null
+++ b/static/usage/v7/loading/spinners/javascript.md
@@ -0,0 +1,15 @@
+```html
+<ion-button onclick="showLoading()">Show Loading</ion-button>
+
+<script>
+var showLoading = async () => {
+  const loading = await loadingController.create({
+    message: 'Loading...',
+    duration: 3000,
+    spinner: 'circles'
+  });
+  
+  loading.present();
+}
+</script>
+```
diff --git a/static/usage/v7/loading/spinners/react.md b/static/usage/v7/loading/spinners/react.md
new file mode 100644
index 00000000000..e2c492f1431
--- /dev/null
+++ b/static/usage/v7/loading/spinners/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonLoading } from '@ionic/react';
+function Example() {
+  
+  /**
+   * This example does not make use of the dismiss
+   * method returned from `useIonLoading`, but it can
+   * be used for more complex scenarios.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [present, dismiss] = useIonLoading();
+  return (
+    <IonButton onClick={() => {
+      present({
+        message: 'Loading...',
+        duration: 3000,
+        spinner: 'circles'
+      })
+    }}>
+      Show Loading
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/loading/spinners/vue.md b/static/usage/v7/loading/spinners/vue.md
new file mode 100644
index 00000000000..4d01e7fc869
--- /dev/null
+++ b/static/usage/v7/loading/spinners/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-button @click="showLoading">Show Loading</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, loadingController } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+    setup() {
+      const showLoading = async () => {
+        const loading = await loadingController.create({
+          message: 'Loading...',
+          duration: 3000,
+          spinner: 'circles'
+        });
+        
+        loading.present();
+      }
+      
+      return { showLoading }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/loading/theming/angular/example_component_html.md b/static/usage/v7/loading/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..f4f3d701d2f
--- /dev/null
+++ b/static/usage/v7/loading/theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="showLoading()">Show Loading</ion-button>
+```
diff --git a/static/usage/v7/loading/theming/angular/example_component_ts.md b/static/usage/v7/loading/theming/angular/example_component_ts.md
new file mode 100644
index 00000000000..800335c91ad
--- /dev/null
+++ b/static/usage/v7/loading/theming/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { LoadingController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private loadingCtrl: LoadingController) {}
+
+  async showLoading() {
+    const loading = await this.loadingCtrl.create({
+      message: 'Loading...',
+      duration: 3000,
+      cssClass: 'custom-loading',
+    });
+
+    loading.present();
+  }
+}
+```
diff --git a/static/usage/v7/loading/theming/angular/global_css.md b/static/usage/v7/loading/theming/angular/global_css.md
new file mode 100644
index 00000000000..16bf7af3522
--- /dev/null
+++ b/static/usage/v7/loading/theming/angular/global_css.md
@@ -0,0 +1,8 @@
+```css
+ion-loading.custom-loading {
+  --background: #e3edff;
+  --spinner-color: #1c6dff;
+
+  color: #1c6dff;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/loading/theming/demo.html b/static/usage/v7/loading/theming/demo.html
new file mode 100644
index 00000000000..d901557c331
--- /dev/null
+++ b/static/usage/v7/loading/theming/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.loadingController = loadingController;
+  </script>
+  <style>
+    ion-loading.custom-loading {
+      --background: #e3edff;
+      --spinner-color: #1c6dff;
+
+      color: #1c6dff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="showLoading()">Show Loading</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const loading = document.querySelector('ion-loading');
+    const showLoading = async () => {
+      const loading = await loadingController.create({
+        message: 'Loading...',
+        duration: 3000,
+        cssClass: 'custom-loading'
+      });
+      loading.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/loading/theming/index.md b/static/usage/v7/loading/theming/index.md
new file mode 100644
index 00000000000..0a36d4cd6e5
--- /dev/null
+++ b/static/usage/v7/loading/theming/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v7/loading/theming/demo.html"
+/>
diff --git a/static/usage/v7/loading/theming/javascript.md b/static/usage/v7/loading/theming/javascript.md
new file mode 100644
index 00000000000..68e0943cd3d
--- /dev/null
+++ b/static/usage/v7/loading/theming/javascript.md
@@ -0,0 +1,24 @@
+```html
+<ion-button onclick="showLoading()">Show Loading</ion-button>
+
+<script>
+var showLoading = async () => {
+  const loading = await loadingController.create({
+    message: 'Loading...',
+    duration: 3000,
+    cssClass: 'custom-loading'
+  });
+  
+  loading.present();
+}
+</script>
+
+<style>
+ion-loading.custom-loading {
+  --background: #e3edff;
+  --spinner-color: #1c6dff;
+
+  color: #1c6dff;
+}
+</style>
+```
diff --git a/static/usage/v7/loading/theming/react.md b/static/usage/v7/loading/theming/react.md
new file mode 100644
index 00000000000..e2c492f1431
--- /dev/null
+++ b/static/usage/v7/loading/theming/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonLoading } from '@ionic/react';
+function Example() {
+  
+  /**
+   * This example does not make use of the dismiss
+   * method returned from `useIonLoading`, but it can
+   * be used for more complex scenarios.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [present, dismiss] = useIonLoading();
+  return (
+    <IonButton onClick={() => {
+      present({
+        message: 'Loading...',
+        duration: 3000,
+        spinner: 'circles'
+      })
+    }}>
+      Show Loading
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/loading/theming/react/main_css.md b/static/usage/v7/loading/theming/react/main_css.md
new file mode 100644
index 00000000000..16bf7af3522
--- /dev/null
+++ b/static/usage/v7/loading/theming/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-loading.custom-loading {
+  --background: #e3edff;
+  --spinner-color: #1c6dff;
+
+  color: #1c6dff;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/loading/theming/react/main_tsx.md b/static/usage/v7/loading/theming/react/main_tsx.md
new file mode 100644
index 00000000000..cc57cc1dce8
--- /dev/null
+++ b/static/usage/v7/loading/theming/react/main_tsx.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonLoading } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  
+  /**
+   * This example does not make use of the dismiss
+   * method returned from `useIonLoading`, but it can
+   * be used for more complex scenarios.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [present, dismiss] = useIonLoading();
+  return (
+    <IonButton onClick={() => {
+      present({
+        message: 'Loading...',
+        duration: 3000,
+        cssClass: 'custom-loading'
+      })
+    }}>
+      Show Loading
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/loading/theming/vue.md b/static/usage/v7/loading/theming/vue.md
new file mode 100644
index 00000000000..6f380da3f1f
--- /dev/null
+++ b/static/usage/v7/loading/theming/vue.md
@@ -0,0 +1,35 @@
+```html
+<template>
+  <ion-button @click="showLoading()">Show Loading</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, loadingController } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+    setup() {
+      const showLoading = async () => {
+        const loading = await loadingController.create({
+          message: 'Loading...',
+          duration: 3000,
+          cssClass: 'custom-loading'
+        });
+        
+        loading.present();
+      }
+      
+      return { showLoading }
+    }
+  });
+</script>
+<style>
+  ion-loading.custom-loading {
+    --background: #e3edff;
+    --spinner-color: #1c6dff;
+
+    color: #1c6dff;
+  }
+</style>
+```
diff --git a/static/usage/v7/menu/basic/angular.md b/static/usage/v7/menu/basic/angular.md
new file mode 100644
index 00000000000..c169f35f1f4
--- /dev/null
+++ b/static/usage/v7/menu/basic/angular.md
@@ -0,0 +1,23 @@
+```html
+<ion-menu contentId="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu Content</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the menu content.</ion-content>
+</ion-menu>
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-menu-button></ion-menu-button>
+      </ion-buttons>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    Tap the button in the toolbar to open the menu.
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/menu/basic/demo.html b/static/usage/v7/menu/basic/demo.html
new file mode 100644
index 00000000000..83f3f3ac7c4
--- /dev/null
+++ b/static/usage/v7/menu/basic/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Menu</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu content-id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu Content</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">This is the menu content.</ion-content>
+    </ion-menu>
+    <div class="ion-page" id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button></ion-menu-button>
+          </ion-buttons>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        Tap the button in the toolbar to open the menu.
+      </ion-content>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/menu/basic/index.md b/static/usage/v7/menu/basic/index.md
new file mode 100644
index 00000000000..e682c266d64
--- /dev/null
+++ b/static/usage/v7/menu/basic/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/menu/basic/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/menu/basic/javascript.md b/static/usage/v7/menu/basic/javascript.md
new file mode 100644
index 00000000000..570c03c9512
--- /dev/null
+++ b/static/usage/v7/menu/basic/javascript.md
@@ -0,0 +1,23 @@
+```html
+<ion-menu content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu Content</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the menu content.</ion-content>
+</ion-menu>
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-menu-button></ion-menu-button>
+      </ion-buttons>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    Tap the button in the toolbar to open the menu.
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/menu/basic/react.md b/static/usage/v7/menu/basic/react.md
new file mode 100644
index 00000000000..71abc258aef
--- /dev/null
+++ b/static/usage/v7/menu/basic/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { 
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuButton,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonMenu contentId="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Menu Content</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">This is the menu content.</IonContent>
+      </IonMenu>
+      <IonPage id="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonButtons slot="start">
+              <IonMenuButton></IonMenuButton>
+            </IonButtons>
+            <IonTitle>Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          Tap the button in the toolbar to open the menu.
+        </IonContent>
+      </IonPage>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/menu/basic/vue.md b/static/usage/v7/menu/basic/vue.md
new file mode 100644
index 00000000000..d6e3d73d648
--- /dev/null
+++ b/static/usage/v7/menu/basic/vue.md
@@ -0,0 +1,52 @@
+```html
+<template>
+  <ion-menu content-id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Menu Content</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">This is the menu content.</ion-content>
+  </ion-menu>
+  <ion-page id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Tap the button in the toolbar to open the menu.
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import {
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonMenu,
+    IonMenuButton,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButtons,
+      IonContent,
+      IonHeader,
+      IonMenu,
+      IonMenuButton,
+      IonPage,
+      IonTitle,
+      IonToolbar
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/menu/theming/angular/example_component_css.md b/static/usage/v7/menu/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..839c8f41df5
--- /dev/null
+++ b/static/usage/v7/menu/theming/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-menu::part(backdrop) {
+  background-color: rgba(255, 0, 255, 0.5);
+}
+
+ion-menu::part(container) {
+  border-radius: 0 20px 20px 0;
+
+  box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/menu/theming/angular/example_component_html.md b/static/usage/v7/menu/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..f630cf4c378
--- /dev/null
+++ b/static/usage/v7/menu/theming/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+<ion-app>
+  <ion-menu contentId="main-content">
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-title>Menu Content</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">This is the menu content.</ion-content>
+  </ion-menu>
+  <div class="ion-page" id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Tap the button in the toolbar to open the menu.
+    </ion-content>
+  </div>
+</ion-app>
+```
diff --git a/static/usage/v7/menu/theming/demo.html b/static/usage/v7/menu/theming/demo.html
new file mode 100644
index 00000000000..e3d7c78a20f
--- /dev/null
+++ b/static/usage/v7/menu/theming/demo.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Menu</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-menu::part(backdrop) {
+      background-color: rgba(255, 0, 255, 0.5);
+    }
+
+    ion-menu::part(container) {
+      border-radius: 0 20px 20px 0;
+
+      box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu content-id="main-content">
+      <ion-header>
+        <ion-toolbar color="tertiary">
+          <ion-title>Menu Content</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">This is the menu content.</ion-content>
+    </ion-menu>
+    <div class="ion-page" id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button></ion-menu-button>
+          </ion-buttons>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        Tap the button in the toolbar to open the menu.
+      </ion-content>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/menu/theming/index.md b/static/usage/v7/menu/theming/index.md
new file mode 100644
index 00000000000..83a016b19b7
--- /dev/null
+++ b/static/usage/v7/menu/theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/menu/theming/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/menu/theming/javascript.md b/static/usage/v7/menu/theming/javascript.md
new file mode 100644
index 00000000000..a147ef68090
--- /dev/null
+++ b/static/usage/v7/menu/theming/javascript.md
@@ -0,0 +1,37 @@
+```html
+<ion-app>
+  <ion-menu content-id="main-content">
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-title>Menu Content</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">This is the menu content.</ion-content>
+  </ion-menu>
+  <div class="ion-page" id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Tap the button in the toolbar to open the menu.
+    </ion-content>
+  </div>
+</ion-app>
+
+<style>
+  ion-menu::part(backdrop) {
+    background-color: rgba(255, 0, 255, 0.5);
+  }
+
+  ion-menu::part(container) {
+    border-radius: 0 20px 20px 0;
+
+    box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+  }
+</style>
+```
diff --git a/static/usage/v7/menu/theming/react/main_css.md b/static/usage/v7/menu/theming/react/main_css.md
new file mode 100644
index 00000000000..839c8f41df5
--- /dev/null
+++ b/static/usage/v7/menu/theming/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-menu::part(backdrop) {
+  background-color: rgba(255, 0, 255, 0.5);
+}
+
+ion-menu::part(container) {
+  border-radius: 0 20px 20px 0;
+
+  box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/menu/theming/react/main_tsx.md b/static/usage/v7/menu/theming/react/main_tsx.md
new file mode 100644
index 00000000000..c935fefb33f
--- /dev/null
+++ b/static/usage/v7/menu/theming/react/main_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import { 
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuButton,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonMenu contentId="main-content">
+        <IonHeader>
+          <IonToolbar color="tertiary">
+            <IonTitle>Menu Content</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">This is the menu content.</IonContent>
+      </IonMenu>
+      <IonPage id="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonButtons slot="start">
+              <IonMenuButton></IonMenuButton>
+            </IonButtons>
+            <IonTitle>Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          Tap the button in the toolbar to open the menu.
+        </IonContent>
+      </IonPage>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/menu/theming/vue.md b/static/usage/v7/menu/theming/vue.md
new file mode 100644
index 00000000000..b9d02e48b1f
--- /dev/null
+++ b/static/usage/v7/menu/theming/vue.md
@@ -0,0 +1,64 @@
+```html
+<template>
+  <ion-menu content-id="main-content">
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-title>Menu Content</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">This is the menu content.</ion-content>
+  </ion-menu>
+  <ion-page id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Tap the button in the toolbar to open the menu.
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import {
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonMenu,
+    IonMenuButton,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButtons,
+      IonContent,
+      IonHeader,
+      IonMenu,
+      IonMenuButton,
+      IonPage,
+      IonTitle,
+      IonToolbar
+    },
+  });
+</script>
+
+<style scoped>
+  ion-menu::part(backdrop) {
+    background-color: rgba(255, 0, 255, 0.5);
+  }
+
+  ion-menu::part(container) {
+    border-radius: 0 20px 20px 0;
+
+    box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+  }
+</style>
+```
diff --git a/static/usage/v7/menu/toggle/angular.md b/static/usage/v7/menu/toggle/angular.md
new file mode 100644
index 00000000000..d2ecafc7904
--- /dev/null
+++ b/static/usage/v7/menu/toggle/angular.md
@@ -0,0 +1,26 @@
+```html
+<ion-menu contentId="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu Content</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-menu-toggle>
+      <ion-button>Click to close the menu</ion-button>
+    </ion-menu-toggle>
+  </ion-content>
+</ion-menu>
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-menu-toggle>
+      <ion-button>Click to open the menu</ion-button>
+    </ion-menu-toggle>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/menu/toggle/demo.html b/static/usage/v7/menu/toggle/demo.html
new file mode 100644
index 00000000000..6a760b44aa3
--- /dev/null
+++ b/static/usage/v7/menu/toggle/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Menu - Toggle</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu id="custom-menu" content-id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu Content</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-menu-toggle>
+          <ion-button>Click to close the menu</ion-button>
+        </ion-menu-toggle>
+      </ion-content>
+    </ion-menu>
+    <div class="ion-page" id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-menu-toggle>
+          <ion-button>Click to open the menu</ion-button>
+        </ion-menu-toggle>
+      </ion-content>
+    </div>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/menu/toggle/index.md b/static/usage/v7/menu/toggle/index.md
new file mode 100644
index 00000000000..df6df9fccbb
--- /dev/null
+++ b/static/usage/v7/menu/toggle/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/menu/toggle/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/menu/toggle/javascript.md b/static/usage/v7/menu/toggle/javascript.md
new file mode 100644
index 00000000000..660e0b4d1b6
--- /dev/null
+++ b/static/usage/v7/menu/toggle/javascript.md
@@ -0,0 +1,26 @@
+```html
+<ion-menu content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu Content</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-menu-toggle>
+      <ion-button>Click to close the menu</ion-button>
+    </ion-menu-toggle>
+  </ion-content>
+</ion-menu>
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-menu-toggle>
+      <ion-button>Click to open the menu</ion-button>
+    </ion-menu-toggle>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/menu/toggle/react.md b/static/usage/v7/menu/toggle/react.md
new file mode 100644
index 00000000000..a940b83e4af
--- /dev/null
+++ b/static/usage/v7/menu/toggle/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import { 
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuToggle,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonMenu contentId="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Menu Content</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          <IonMenuToggle>
+            <IonButton>Click to close the menu</IonButton>
+          </IonMenuToggle>  
+        </IonContent>
+      </IonMenu>
+      <IonPage id="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          <IonMenuToggle>
+            <IonButton>Click to open the menu</IonButton>
+          </IonMenuToggle>
+        </IonContent>
+      </IonPage>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/menu/toggle/vue.md b/static/usage/v7/menu/toggle/vue.md
new file mode 100644
index 00000000000..2cc4807109e
--- /dev/null
+++ b/static/usage/v7/menu/toggle/vue.md
@@ -0,0 +1,55 @@
+```html
+<template>
+  <ion-menu content-id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Menu Content</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-menu-toggle>
+        <ion-button>Click to close the menu</ion-button>
+      </ion-menu-toggle>
+    </ion-content>
+  </ion-menu>
+  <ion-page id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-menu-toggle>
+        <ion-button>Click to open the menu</ion-button>
+      </ion-menu-toggle>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import {
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonMenu,
+    IonMenuToggle,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonContent,
+      IonHeader,
+      IonMenu,
+      IonMenuToggle,
+      IonPage,
+      IonTitle,
+      IonToolbar
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/menu/type/angular/example_component_html.md b/static/usage/v7/menu/type/angular/example_component_html.md
new file mode 100644
index 00000000000..7154c645660
--- /dev/null
+++ b/static/usage/v7/menu/type/angular/example_component_html.md
@@ -0,0 +1,48 @@
+```html
+<ion-menu [type]="menuType" content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu Content</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-menu-toggle>
+      <ion-button>Click to close the menu</ion-button>
+    </ion-menu-toggle>
+  </ion-content>
+</ion-menu>
+
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h2>Select an overlay type:</h2>
+    <ion-radio-group [(ngModel)]="menuType">
+      <ion-item>
+        <ion-label>
+          <code>overlay</code>
+        </ion-label>
+        <ion-radio value="overlay"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          <code>reveal</code>
+        </ion-label>
+        <ion-radio value="reveal"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          <code>push</code>
+        </ion-label>
+        <ion-radio value="push"></ion-radio>
+      </ion-item>
+    </ion-radio-group> <br />
+    <ion-menu-toggle>
+      <ion-button>Click to open the menu</ion-button>
+    </ion-menu-toggle>
+  </ion-content>
+</div>
+```
\ No newline at end of file
diff --git a/static/usage/v7/menu/type/angular/example_component_ts.md b/static/usage/v7/menu/type/angular/example_component_ts.md
new file mode 100644
index 00000000000..5f03ec13b76
--- /dev/null
+++ b/static/usage/v7/menu/type/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  menuType: string = 'overlay';
+}
+```
diff --git a/static/usage/v7/menu/type/demo.html b/static/usage/v7/menu/type/demo.html
new file mode 100644
index 00000000000..7dbfe39cffa
--- /dev/null
+++ b/static/usage/v7/menu/type/demo.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Menu - Type</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu type="overlay" content-id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu Content</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-menu-toggle>
+          <ion-button>Click to close the menu</ion-button>
+        </ion-menu-toggle>
+      </ion-content>
+    </ion-menu>
+
+    <div class="ion-page" id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h2>Select an overlay type:</h2>
+        <ion-radio-group value="overlay">
+          <ion-item>
+            <ion-label>
+              <code>overlay</code>
+            </ion-label>
+            <ion-radio value="overlay"></ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-label>
+              <code>reveal</code>
+            </ion-label>
+            <ion-radio value="reveal"></ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-label>
+              <code>push</code>
+            </ion-label>
+            <ion-radio value="push"></ion-radio>
+          </ion-item>
+        </ion-radio-group> <br />
+        <ion-menu-toggle>
+          <ion-button>Click to open the menu</ion-button>
+        </ion-menu-toggle>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const menu = document.querySelector('ion-menu');
+    const radioGroup = document.querySelector('ion-radio-group');
+
+    radioGroup.addEventListener('ionChange', (ev) => {
+      menu.type = ev.detail.value;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/menu/type/index.md b/static/usage/v7/menu/type/index.md
new file mode 100644
index 00000000000..d0fc312baa1
--- /dev/null
+++ b/static/usage/v7/menu/type/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/menu/type/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/menu/type/javascript.md b/static/usage/v7/menu/type/javascript.md
new file mode 100644
index 00000000000..24dc49cf906
--- /dev/null
+++ b/static/usage/v7/menu/type/javascript.md
@@ -0,0 +1,57 @@
+```html
+<ion-menu type="overlay" content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu Content</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-menu-toggle>
+      <ion-button>Click to close the menu</ion-button>
+    </ion-menu-toggle>
+  </ion-content>
+</ion-menu>
+
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h2>Select an overlay type:</h2>
+    <ion-radio-group value="overlay">
+      <ion-item>
+        <ion-label>
+          <code>overlay</code>
+        </ion-label>
+        <ion-radio value="overlay"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          <code>reveal</code>
+        </ion-label>
+        <ion-radio value="reveal"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          <code>push</code>
+        </ion-label>
+        <ion-radio value="push"></ion-radio>
+      </ion-item>
+    </ion-radio-group> <br />
+    <ion-menu-toggle>
+      <ion-button>Click to open the menu</ion-button>
+    </ion-menu-toggle>
+  </ion-content>
+</div>
+
+<script>
+  const menu = document.querySelector('ion-menu');
+  const radioGroup = document.querySelector('ion-radio-group');
+
+  radioGroup.addEventListener('ionChange', (ev) => {
+    menu.type = ev.detail.value;
+  });
+</script>
+```
diff --git a/static/usage/v7/menu/type/react.md b/static/usage/v7/menu/type/react.md
new file mode 100644
index 00000000000..806e67e21a2
--- /dev/null
+++ b/static/usage/v7/menu/type/react.md
@@ -0,0 +1,78 @@
+```tsx
+import React, { useState } from 'react';
+import { 
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonMenu,
+  IonMenuToggle,
+  IonPage,
+  IonRadio,
+  IonRadioGroup,
+  IonTitle,
+  IonToolbar
+} from '@ionic/react';
+import type { RadioGroupCustomEvent } from '@ionic/react';
+
+function Example() {
+  const [menuType, setMenuType] = useState('overlay');
+
+  return (
+    <>
+      <IonMenu type={menuType} contentId="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Menu Content</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          <IonMenuToggle>
+            <IonButton>Click to close the menu</IonButton>
+          </IonMenuToggle>  
+        </IonContent>
+      </IonMenu>
+      <IonPage id="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          <h2>Select an overlay type:</h2>
+          <IonRadioGroup
+            value={menuType}
+            onIonChange={(ev: RadioGroupCustomEvent) => {
+              setMenuType(ev.detail.value);
+            }}
+          >
+            <IonItem>
+              <IonLabel>
+                <code>overlay</code>
+              </IonLabel>
+              <IonRadio value="overlay"></IonRadio>
+            </IonItem>
+            <IonItem>
+              <IonLabel>
+                <code>reveal</code>
+              </IonLabel>
+              <IonRadio value="reveal"></IonRadio>
+            </IonItem>
+            <IonItem>
+              <IonLabel>
+                <code>push</code>
+              </IonLabel>
+              <IonRadio value="push"></IonRadio>
+            </IonItem>
+          </IonRadioGroup> <br />
+          <IonMenuToggle>
+            <IonButton>Click to open the menu</IonButton>
+          </IonMenuToggle>
+        </IonContent>
+      </IonPage>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/menu/type/vue.md b/static/usage/v7/menu/type/vue.md
new file mode 100644
index 00000000000..2abcb137577
--- /dev/null
+++ b/static/usage/v7/menu/type/vue.md
@@ -0,0 +1,90 @@
+```html
+<template>
+  <ion-menu :type="menuType" content-id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Menu Content</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-menu-toggle>
+        <ion-button>Click to close the menu</ion-button>
+      </ion-menu-toggle>
+    </ion-content>
+  </ion-menu>
+  
+  <div class="ion-page" id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h2>Select an overlay type:</h2>
+      <ion-radio-group value="overlay" v-model="menuType">
+        <ion-item>
+          <ion-label>
+            <code>overlay</code>
+          </ion-label>
+          <ion-radio value="overlay"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <code>reveal</code>
+          </ion-label>
+          <ion-radio value="reveal"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <code>push</code>
+          </ion-label>
+          <ion-radio value="push"></ion-radio>
+        </ion-item>
+      </ion-radio-group> <br />
+      <ion-menu-toggle>
+        <ion-button>Click to open the menu</ion-button>
+      </ion-menu-toggle>
+    </ion-content>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonMenu,
+    IonMenuToggle,
+    IonPage,
+    IonRadio,
+    IonRadioGroup,
+    IonTitle,
+    IonToolbar
+  } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonContent,
+      IonHeader,
+      IonItem,
+      IonLabel,
+      IonMenu,
+      IonMenuToggle,
+      IonPage,
+      IonRadio,
+      IonRadioGroup,
+      IonTitle,
+      IonToolbar
+    },
+    setup() {
+      const menuType = ref('overlay');
+      
+      return { menuType };
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md
new file mode 100644
index 00000000000..60d566d3437
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md
@@ -0,0 +1,31 @@
+```html
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open</ion-button>
+    <ion-modal #modal trigger="open-modal" [canDismiss]="canDismiss" [presentingElement]="presentingElement">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="modal.dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
+          <ion-item>
+            <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+            <ion-checkbox id="terms" (ionChange)="onTermsChanged($event)" [checked]="canDismiss"></ion-checkbox>
+          </ion-item>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md
new file mode 100644
index 00000000000..b13c147dc2d
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { CheckboxCustomEvent } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  canDismiss = false;
+
+  presentingElement = null;
+
+  ngOnInit() {
+    this.presentingElement = document.querySelector('.ion-page');
+  }
+
+  onTermsChanged(event: Event) {
+    const ev = event as CheckboxCustomEvent;
+    this.canDismiss = ev.detail.checked;
+  }
+}
+```
diff --git a/static/usage/v7/modal/can-dismiss/boolean/demo.html b/static/usage/v7/modal/can-dismiss/boolean/demo.html
new file mode 100644
index 00000000000..d548f1c9e61
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/boolean/demo.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Can Dismiss</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>App</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-modal" expand="block">Open</ion-button>
+
+        <ion-modal trigger="open-modal">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Modal</ion-title>
+              <ion-buttons slot="end">
+                <ion-button onclick="dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
+            <ion-item>
+              <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+              <ion-checkbox id="terms"></ion-checkbox>
+            </ion-item>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.canDismiss = false;
+    modal.presentingElement = document.querySelector('.ion-page');
+
+    function dismiss() {
+      modal.dismiss();
+    }
+
+    modal.addEventListener('didPresent', () => {
+      const terms = document.getElementById('terms');
+      terms.addEventListener('ionChange', ev => {
+        modal.canDismiss = ev.detail.checked;
+      });
+    });
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/can-dismiss/boolean/index.md b/static/usage/v7/modal/can-dismiss/boolean/index.md
new file mode 100644
index 00000000000..325ad4b1645
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/boolean/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/modal/can-dismiss/boolean/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/javascript.md b/static/usage/v7/modal/can-dismiss/boolean/javascript.md
new file mode 100644
index 00000000000..845ff0ec8c5
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/boolean/javascript.md
@@ -0,0 +1,48 @@
+```html
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open</ion-button>
+
+    <ion-modal trigger="open-modal">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="dismiss()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
+        <ion-item>
+          <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+          <ion-checkbox id="terms"></ion-checkbox>
+        </ion-item>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</div>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  modal.canDismiss = false;
+  modal.presentingElement = document.querySelector('.ion-page');
+
+  function dismiss() {
+    modal.dismiss();
+  }
+
+  modal.addEventListener('didPresent', () => {
+    var terms = document.getElementById('terms');
+    terms.addEventListener('ionChange', (ev) => {
+      modal.canDismiss = ev.detail.checked;
+    });
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/can-dismiss/boolean/react.md b/static/usage/v7/modal/can-dismiss/boolean/react.md
new file mode 100644
index 00000000000..22a72819b2b
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/boolean/react.md
@@ -0,0 +1,74 @@
+```tsx
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  IonButtons,
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonItem,
+  IonLabel,
+  IonCheckbox,
+} from '@ionic/react';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+  const page = useRef(undefined);
+
+  const [canDismiss, setCanDismiss] = useState(false);
+  const [presentingElement, setPresentingElement] = useState<HTMLElement | undefined>(undefined);
+
+  useEffect(() => {
+    setPresentingElement(page.current);
+  }, []);
+
+  function dismiss() {
+    modal.current?.dismiss();
+  }
+
+  return (
+    <IonPage ref={page}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open
+        </IonButton>
+        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={presentingElement}>
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={() => dismiss()}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent>
+            <p className="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
+            <IonItem>
+              <IonLabel className="ion-text-wrap" {...{ for: 'terms' }}>
+                Do you accept the terms and conditions?
+              </IonLabel>
+              <IonCheckbox
+                id="terms"
+                checked={canDismiss}
+                onIonChange={(ev) => {
+                  setCanDismiss(ev.detail.checked);
+                }}
+              ></IonCheckbox>
+            </IonItem>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/can-dismiss/boolean/vue.md b/static/usage/v7/modal/can-dismiss/boolean/vue.md
new file mode 100644
index 00000000000..4aeded0aef7
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/boolean/vue.md
@@ -0,0 +1,83 @@
+```html
+<template>
+  <ion-page ref="page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open</ion-button>
+
+      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="presentingElement">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
+          <ion-item>
+            <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+            <ion-checkbox id="terms" @ionChange="onTermsChanged" :checked="canDismiss"></ion-checkbox>
+          </ion-item>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import {
+    CheckboxCustomEvent,
+    IonButtons,
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+    IonItem,
+    IonCheckbox,
+    IonLabel,
+    IonPage,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButtons,
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+      IonItem,
+      IonCheckbox,
+      IonLabel,
+      IonPage,
+    },
+    data() {
+      return {
+        canDismiss: false,
+        presentingElement: undefined,
+      };
+    },
+    methods: {
+      dismiss() {
+        this.$refs.modal.$el.dismiss();
+      },
+      onTermsChanged(ev: CheckboxCustomEvent) {
+        this.canDismiss = ev.detail.checked;
+      },
+    },
+    mounted() {
+      this.presentingElement = this.$refs.page.$el;
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/can-dismiss/function/angular/example_component_html.md b/static/usage/v7/modal/can-dismiss/function/angular/example_component_html.md
new file mode 100644
index 00000000000..fa9ea513674
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/function/angular/example_component_html.md
@@ -0,0 +1,27 @@
+```html
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open</ion-button>
+    <ion-modal #modal trigger="open-modal" [canDismiss]="canDismiss" [presentingElement]="presentingElement">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="modal.dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <p>You will be prompted when closing this modal.</p>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/modal/can-dismiss/function/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/function/angular/example_component_ts.md
new file mode 100644
index 00000000000..a62465cfee3
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/function/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ActionSheetController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  presentingElement = undefined;
+
+  constructor(private actionSheetCtrl: ActionSheetController) {}
+
+  ngOnInit() {
+    this.presentingElement = document.querySelector('.ion-page');
+  }
+
+  canDismiss = async () => {
+    const actionSheet = await this.actionSheetCtrl.create({
+      header: 'Are you sure?',
+      buttons: [
+        {
+          text: 'Yes',
+          role: 'confirm',
+        },
+        {
+          text: 'No',
+          role: 'cancel',
+        },
+      ],
+    });
+
+    actionSheet.present();
+
+    const { role } = await actionSheet.onWillDismiss();
+
+    return role === 'confirm';
+  };
+}
+```
diff --git a/static/usage/v7/modal/can-dismiss/function/demo.html b/static/usage/v7/modal/can-dismiss/function/demo.html
new file mode 100644
index 00000000000..0f97193113f
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/function/demo.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Can Dismiss</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>App</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-modal" expand="block">Open</ion-button>
+
+        <ion-modal trigger="open-modal">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Modal</ion-title>
+              <ion-buttons slot="end">
+                <ion-button onclick="dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content class="ion-padding">
+            <p>You will be prompted when closing this modal.</p>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.canDismiss = promptClose;
+    modal.presentingElement = document.querySelector('.ion-page');
+
+    function dismiss() {
+      modal.dismiss();
+    }
+
+    async function promptClose() {
+      const actionSheet = document.createElement('ion-action-sheet');
+
+      actionSheet.header = 'Are you sure?';
+      actionSheet.buttons = [{
+        text: 'Yes',
+        role: 'confirm'
+      }, {
+        text: 'No',
+        role: 'cancel'
+      }];
+      document.body.appendChild(actionSheet);
+      await actionSheet.present();
+
+      const { role } = await actionSheet.onWillDismiss();
+
+      return role === 'confirm';
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/can-dismiss/function/index.md b/static/usage/v7/modal/can-dismiss/function/index.md
new file mode 100644
index 00000000000..a0b934f8e7e
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/function/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/modal/can-dismiss/function/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/modal/can-dismiss/function/javascript.md b/static/usage/v7/modal/can-dismiss/function/javascript.md
new file mode 100644
index 00000000000..e48c06bacb5
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/function/javascript.md
@@ -0,0 +1,59 @@
+```html
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open</ion-button>
+
+    <ion-modal trigger="open-modal" swipe-to-close="true">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="dismiss()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <p>You will be prompted when closing this modal.</p>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</div>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  modal.canDismiss = promptClose;
+  modal.presentingElement = document.querySelector('.ion-page');
+
+  function dismiss() {
+    modal.dismiss();
+  }
+
+  async function promptClose() {
+    const actionSheet = document.createElement('ion-action-sheet');
+
+    actionSheet.header = 'Are you sure?';
+    actionSheet.buttons = [
+      {
+        text: 'Yes',
+        role: 'confirm',
+      },
+      {
+        text: 'No',
+        role: 'cancel',
+      },
+    ];
+    document.body.appendChild(actionSheet);
+    await actionSheet.present();
+
+    const { role } = await actionSheet.onDidDismiss();
+
+    return role === 'confirm';
+  }
+</script>
+```
diff --git a/static/usage/v7/modal/can-dismiss/function/react.md b/static/usage/v7/modal/can-dismiss/function/react.md
new file mode 100644
index 00000000000..9ef7f6f682b
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/function/react.md
@@ -0,0 +1,85 @@
+```tsx
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  IonButtons,
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  useIonActionSheet,
+} from '@ionic/react';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+  const page = useRef(null);
+
+  const [presentingElement, setPresentingElement] = useState<HTMLElement | null>(null);
+  const [present] = useIonActionSheet();
+
+  useEffect(() => {
+    setPresentingElement(page.current);
+  }, []);
+
+  function dismiss() {
+    modal.current?.dismiss();
+  }
+
+  function canDismiss() {
+    return new Promise<boolean>((resolve, reject) => {
+      present({
+        header: 'Are you sure?',
+        buttons: [
+          {
+            text: 'Yes',
+            role: 'confirm',
+          },
+          {
+            text: 'No',
+            role: 'cancel',
+          },
+        ],
+        onWillDismiss: (ev) => {
+          if (ev.detail.role === 'confirm') {
+            resolve(true);
+          } else {
+            reject();
+          }
+        },
+      });
+    });
+  }
+
+  return (
+    <IonPage ref={page}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open
+        </IonButton>
+        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={presentingElement!}>
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={() => dismiss()}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent className="ion-padding">
+            <p>You will be prompted when closing this modal.</p>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/can-dismiss/function/vue.md b/static/usage/v7/modal/can-dismiss/function/vue.md
new file mode 100644
index 00000000000..cdf51c892ac
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/function/vue.md
@@ -0,0 +1,78 @@
+```html
+<template>
+  <ion-page ref="page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open</ion-button>
+
+      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="presentingElement">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <p>You will be prompted when closing this modal.</p>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import {
+    IonButtons,
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+    IonPage,
+    actionSheetController,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage },
+    data() {
+      return {
+        presentingElement: undefined,
+      };
+    },
+    methods: {
+      dismiss() {
+        this.$refs.modal.$el.dismiss();
+      },
+      async canDismiss() {
+        const actionSheet = await actionSheetController.create({
+          header: 'Are you sure?',
+          buttons: [
+            {
+              text: 'Yes',
+              role: 'confirm',
+            },
+            {
+              text: 'No',
+              role: 'cancel',
+            },
+          ],
+        });
+        actionSheet.present();
+        const { role } = await actionSheet.onWillDismiss();
+        return role === 'confirm';
+      },
+    },
+    mounted() {
+      this.presentingElement = this.$refs.page.$el;
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/card/basic/angular/example_component_html.md b/static/usage/v7/modal/card/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..e292718e706
--- /dev/null
+++ b/static/usage/v7/modal/card/basic/angular/example_component_html.md
@@ -0,0 +1,65 @@
+```html
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open Card Modal</ion-button>
+
+    <ion-modal #modal trigger="open-modal" [presentingElement]="presentingElement">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="modal.dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Connor Smith</h2>
+                <p>Sales Rep</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Daniel Smith</h2>
+                <p>Product Designer</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Greg Smith</h2>
+                <p>Director of Operations</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Zoey Smith</h2>
+                <p>CEO</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/modal/card/basic/angular/example_component_ts.md b/static/usage/v7/modal/card/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..5a28a156a32
--- /dev/null
+++ b/static/usage/v7/modal/card/basic/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  // Typically referenced to your ion-router-outlet
+  presentingElement = null;
+
+  ngOnInit() {
+    this.presentingElement = document.querySelector('.ion-page');
+  }
+}
+```
diff --git a/static/usage/v7/modal/card/basic/demo.html b/static/usage/v7/modal/card/basic/demo.html
new file mode 100644
index 00000000000..ea2200494f8
--- /dev/null
+++ b/static/usage/v7/modal/card/basic/demo.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Card</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>App</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-modal" expand="block">Open Card Modal</ion-button>
+
+        <ion-modal trigger="open-modal">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Modal</ion-title>
+              <ion-buttons slot="end">
+                <ion-button onclick="modal.dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <ion-list>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=b" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Connor Smith</h2>
+                  <p>Sales Rep</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=a" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Daniel Smith</h2>
+                  <p>Product Designer</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=d" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Greg Smith</h2>
+                  <p>Director of Operations</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=e" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Zoey Smith</h2>
+                  <p>CEO</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.presentingElement = document.querySelector('.ion-page');
+
+    function dismiss() {
+      modal.dismiss();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/card/basic/index.md b/static/usage/v7/modal/card/basic/index.md
new file mode 100644
index 00000000000..782938e1d2f
--- /dev/null
+++ b/static/usage/v7/modal/card/basic/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/modal/card/basic/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/modal/card/basic/javascript.md b/static/usage/v7/modal/card/basic/javascript.md
new file mode 100644
index 00000000000..73a5f6de911
--- /dev/null
+++ b/static/usage/v7/modal/card/basic/javascript.md
@@ -0,0 +1,73 @@
+```html
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open Card Modal</ion-button>
+
+    <ion-modal trigger="open-modal">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="modal.dismiss()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b" />
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a" />
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d" />
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e" />
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</div>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  modal.presentingElement = document.querySelector('.ion-page');
+
+  function dismiss() {
+    modal.dismiss();
+  }
+</script>
+```
diff --git a/static/usage/v7/modal/card/basic/react.md b/static/usage/v7/modal/card/basic/react.md
new file mode 100644
index 00000000000..fe17098f437
--- /dev/null
+++ b/static/usage/v7/modal/card/basic/react.md
@@ -0,0 +1,100 @@
+```tsx
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  IonButtons,
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonAvatar,
+  IonImg,
+} from '@ionic/react';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+  const page = useRef(null);
+
+  const [presentingElement, setPresentingElement] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setPresentingElement(page.current);
+  }, []);
+
+  function dismiss() {
+    modal.current?.dismiss();
+  }
+
+  return (
+    <IonPage ref={page}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open
+        </IonButton>
+        <IonModal ref={modal} trigger="open-modal" presentingElement={presentingElement!}>
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={() => dismiss()}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent className="ion-padding">
+            <IonList>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=b" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Connor Smith</h2>
+                  <p>Sales Rep</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=a" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Daniel Smith</h2>
+                  <p>Product Designer</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=d" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Greg Smith</h2>
+                  <p>Director of Operations</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=e" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Zoey Smith</h2>
+                  <p>CEO</p>
+                </IonLabel>
+              </IonItem>
+            </IonList>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/card/basic/vue.md b/static/usage/v7/modal/card/basic/vue.md
new file mode 100644
index 00000000000..efd959cdd90
--- /dev/null
+++ b/static/usage/v7/modal/card/basic/vue.md
@@ -0,0 +1,115 @@
+```html
+<template>
+  <ion-page ref="page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open</ion-button>
+
+      <ion-modal ref="modal" trigger="open-modal" :presenting-element="presentingElement">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <ion-list>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Connor Smith</h2>
+                <p>Sales Rep</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Daniel Smith</h2>
+                <p>Product Designer</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Greg Smith</h2>
+                <p>Director of Operations</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Zoey Smith</h2>
+                <p>CEO</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import {
+    IonButtons,
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+    IonItem,
+    IonList,
+    IonAvatar,
+    IonImg,
+    IonLabel,
+    IonPage,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButtons,
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+      IonItem,
+      IonList,
+      IonAvatar,
+      IonImg,
+      IonLabel,
+      IonPage,
+    },
+    data() {
+      return {
+        presentingElement: null,
+      };
+    },
+    methods: {
+      dismiss() {
+        this.$refs.modal.$el.dismiss();
+      },
+    },
+    mounted() {
+      this.presentingElement = this.$refs.page.$el;
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/controller/angular/app_module_ts.md b/static/usage/v7/modal/controller/angular/app_module_ts.md
new file mode 100644
index 00000000000..e9e4f00dff3
--- /dev/null
+++ b/static/usage/v7/modal/controller/angular/app_module_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { ModalExampleComponent } from './modal-example.component';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent, ModalExampleComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/modal/controller/angular/example_component_html.md b/static/usage/v7/modal/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..1920bb7a4a0
--- /dev/null
+++ b/static/usage/v7/modal/controller/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Controller Modal</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button expand="block" (click)="openModal()">Open</ion-button>
+  <p>{{ message }}</p>
+</ion-content>
+```
diff --git a/static/usage/v7/modal/controller/angular/example_component_ts.md b/static/usage/v7/modal/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..920a2335257
--- /dev/null
+++ b/static/usage/v7/modal/controller/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ModalController } from '@ionic/angular';
+import { ModalExampleComponent } from './modal-example.component';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  message = 'This modal example uses the modalController to present and dismiss modals.';
+
+  constructor(private modalCtrl: ModalController) {}
+
+  async openModal() {
+    const modal = await this.modalCtrl.create({
+      component: ModalExampleComponent,
+    });
+    modal.present();
+
+    const { data, role } = await modal.onWillDismiss();
+
+    if (role === 'confirm') {
+      this.message = `Hello, ${data}!`;
+    }
+  }
+}
+```
diff --git a/static/usage/v7/modal/controller/angular/modal-example_component_html.md b/static/usage/v7/modal/controller/angular/modal-example_component_html.md
new file mode 100644
index 00000000000..34387a14d75
--- /dev/null
+++ b/static/usage/v7/modal/controller/angular/modal-example_component_html.md
@@ -0,0 +1,19 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button color="medium" (click)="cancel()">Cancel</ion-button>
+    </ion-buttons>
+    <ion-title>Welcome</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="confirm()">Confirm</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-item>
+    <ion-label position="stacked">Your name</ion-label>
+    <ion-input [(ngModel)]="name" placeholder="Your name"></ion-input>
+  </ion-item>
+</ion-content>
+```
diff --git a/static/usage/v7/modal/controller/angular/modal-example_component_ts.md b/static/usage/v7/modal/controller/angular/modal-example_component_ts.md
new file mode 100644
index 00000000000..621996015b4
--- /dev/null
+++ b/static/usage/v7/modal/controller/angular/modal-example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-modal-example',
+  templateUrl: 'modal-example.component.html',
+})
+export class ModalExampleComponent {
+  name: string;
+
+  constructor(private modalCtrl: ModalController) {}
+
+  cancel() {
+    return this.modalCtrl.dismiss(null, 'cancel');
+  }
+
+  confirm() {
+    return this.modalCtrl.dismiss(this.name, 'confirm');
+  }
+}
+```
diff --git a/static/usage/v7/modal/controller/demo.html b/static/usage/v7/modal/controller/demo.html
new file mode 100644
index 00000000000..67c8cd24fc6
--- /dev/null
+++ b/static/usage/v7/modal/controller/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Controller</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.modalController = modalController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Controller Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button expand="block" onclick="openModal()">Open</ion-button>
+      <p id="message">This modal example uses the modalController to present and dismiss modals.</p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const openModal = async () => {
+      const div = document.createElement('div');
+      div.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button color="medium" onclick="cancel()">Cancel</ion-button>
+          </ion-buttons>
+          <ion-title>Welcome</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="confirm()">Confirm</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-item>
+          <ion-label position="stacked">Enter your name</ion-label>
+          <ion-input type="text" placeholder="Your name"></ion-input>
+        </ion-item>
+      </ion-content>
+      `;
+
+      const modal = await modalController.create({
+        component: div,
+      });
+
+      modal.present();
+
+      const { data, role } = await modal.onWillDismiss();
+
+      if (role === 'confirm') {
+        document.querySelector('#message').innerHTML = `Hello, ${data}!`;
+      }
+    }
+
+    function cancel() {
+      modalController.dismiss(null, 'cancel');
+    }
+
+    function confirm() {
+      const input = document.querySelector('ion-input');
+      modalController.dismiss(input.value, 'confirm');
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/controller/index.md b/static/usage/v7/modal/controller/index.md
new file mode 100644
index 00000000000..750bbe53efb
--- /dev/null
+++ b/static/usage/v7/modal/controller/index.md
@@ -0,0 +1,39 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_modal from './vue/modal_vue.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_modal_example_component_ts from './angular/modal-example_component_ts.md';
+import angular_modal_example_component_html from './angular/modal-example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/Modal.vue': vue_modal,
+      },
+    },
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/modal-example.component.html': angular_modal_example_component_html,
+        'src/app/modal-example.component.ts': angular_modal_example_component_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+      },
+    },
+  }}
+  src="usage/v7/modal/controller/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/modal/controller/javascript.md b/static/usage/v7/modal/controller/javascript.md
new file mode 100644
index 00000000000..dc4786be8cf
--- /dev/null
+++ b/static/usage/v7/modal/controller/javascript.md
@@ -0,0 +1,57 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Controller Modal</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button expand="block" onclick="openModal()">Open</ion-button>
+  <p id="message">This modal example uses the modalController to present and dismiss modals.</p>
+</ion-content>
+
+<script>
+  var openModal = async () => {
+    const div = document.createElement('div');
+    div.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button color="medium" onclick="cancel()">Cancel</ion-button>
+          </ion-buttons>
+          <ion-title>Welcome</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="confirm()">Confirm</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-item>
+          <ion-label position="stacked">Enter your name</ion-label>
+          <ion-input type="text" placeholder="Your name"></ion-input>
+        </ion-item>
+      </ion-content>
+      `;
+
+    const modal = await modalController.create({
+      component: div,
+    });
+
+    modal.present();
+
+    const { data, role } = await modal.onWillDismiss();
+
+    if (role === 'confirm') {
+      document.querySelector('#message').innerHTML = `Hello, ${data}!`;
+    }
+  };
+
+  function cancel() {
+    modalController.dismiss(null, 'cancel');
+  }
+
+  function confirm() {
+    const input = document.querySelector('ion-input');
+    modalController.dismiss(input.value, 'confirm');
+  }
+</script>
+```
diff --git a/static/usage/v7/modal/controller/react.md b/static/usage/v7/modal/controller/react.md
new file mode 100644
index 00000000000..8af5d61f855
--- /dev/null
+++ b/static/usage/v7/modal/controller/react.md
@@ -0,0 +1,83 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import {
+  IonButtons,
+  IonButton,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonItem,
+  IonLabel,
+  IonInput,
+  useIonModal,
+} from '@ionic/react';
+import { OverlayEventDetail } from '@ionic/core/components';
+
+const ModalExample = ({
+  onDismiss,
+}: {
+  onDismiss: (data?: string | null | undefined | number, role?: string) => void;
+}) => {
+  const inputRef = useRef<HTMLIonInputElement>(null);
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton color="medium" onClick={() => onDismiss(null, 'cancel')}>
+              Cancel
+            </IonButton>
+          </IonButtons>
+          <IonTitle>Welcome</IonTitle>
+          <IonButtons slot="end">
+            <IonButton onClick={() => onDismiss(inputRef.current?.value, 'confirm')}>Confirm</IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonItem>
+          <IonLabel position="stacked">Enter your name</IonLabel>
+          <IonInput ref={inputRef} placeholder="Your name" />
+        </IonItem>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+function Example() {
+  const [present, dismiss] = useIonModal(ModalExample, {
+    onDismiss: (data: string, role: string) => dismiss(data, role),
+  });
+  const [message, setMessage] = useState('This modal example uses the modalController to present and dismiss modals.');
+
+  function openModal() {
+    present({
+      onWillDismiss: (ev: CustomEvent<OverlayEventDetail>) => {
+        if (ev.detail.role === 'confirm') {
+          setMessage(`Hello, ${ev.detail.data}!`);
+        }
+      },
+    });
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Controller Modal</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton expand="block" onClick={() => openModal()}>
+          Open
+        </IonButton>
+        <p>{message}</p>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/controller/vue/example_vue.md b/static/usage/v7/modal/controller/vue/example_vue.md
new file mode 100644
index 00000000000..1b98547ac47
--- /dev/null
+++ b/static/usage/v7/modal/controller/vue/example_vue.md
@@ -0,0 +1,43 @@
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Controller Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button expand="block" @click="openModal">Open Modal</ion-button>
+      <p>{{ message }}</p>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonPage, IonHeader, IonToolbar, IonTitle, modalController } from '@ionic/vue';
+  import Modal from './Modal.vue';
+
+  export default {
+    components: { IonButton, IonContent, IonPage, IonHeader, IonToolbar, IonTitle },
+    data() {
+      return {
+        message: 'This modal example uses the modalController to present and dismiss modals.',
+      };
+    },
+    methods: {
+      async openModal() {
+        const modal = await modalController.create({
+          component: Modal,
+        });
+        modal.present();
+
+        const { data, role } = await modal.onWillDismiss();
+
+        if (role === 'confirm') {
+          this.message = `Hello, ${data}!`;
+        }
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/modal/controller/vue/modal_vue.md b/static/usage/v7/modal/controller/vue/modal_vue.md
new file mode 100644
index 00000000000..fb25c458a6e
--- /dev/null
+++ b/static/usage/v7/modal/controller/vue/modal_vue.md
@@ -0,0 +1,50 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button color="medium" @click="cancel">Cancel</ion-button>
+      </ion-buttons>
+      <ion-title>Modal</ion-title>
+      <ion-buttons slot="end">
+        <ion-button @click="confirm">Confirm</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-item>
+      <ion-label position="stacked">Your name</ion-label>
+      <ion-input v-model="name" placeholder="Your name"></ion-input>
+    </ion-item>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    IonButtons,
+    IonButton,
+    IonItem,
+    IonLabel,
+    IonInput,
+    modalController,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'Modal',
+    components: { IonContent, IonHeader, IonTitle, IonToolbar, IonButtons, IonButton, IonItem, IonLabel, IonInput },
+    methods: {
+      cancel() {
+        return modalController.dismiss(null, 'cancel');
+      },
+      confirm() {
+        return modalController.dismiss(this.name, 'confirm');
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/custom-dialogs/angular/example_component_html.md b/static/usage/v7/modal/custom-dialogs/angular/example_component_html.md
new file mode 100644
index 00000000000..d8f43b4b55d
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/angular/example_component_html.md
@@ -0,0 +1,33 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-custom-dialog" expand="block">Open Custom Dialog</ion-button>
+
+  <ion-modal id="example-modal" #modal trigger="open-custom-dialog">
+    <ng-template>
+      <div class="wrapper">
+        <h1>Dialog header</h1>
+
+        <ion-list lines="none">
+          <ion-item button="true" detail="false" (click)="modal.dismiss()">
+            <ion-icon name="person-circle"></ion-icon>
+            <ion-label>Item 1</ion-label>
+          </ion-item>
+          <ion-item button="true" detail="false" (click)="modal.dismiss()">
+            <ion-icon name="person-circle"></ion-icon>
+            <ion-label>Item 2</ion-label>
+          </ion-item>
+          <ion-item button="true" detail="false" (click)="modal.dismiss()">
+            <ion-icon name="person-circle"></ion-icon>
+            <ion-label>Item 3</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/modal/custom-dialogs/angular/global_css.md b/static/usage/v7/modal/custom-dialogs/angular/global_css.md
new file mode 100644
index 00000000000..3edb76f1e97
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/angular/global_css.md
@@ -0,0 +1,28 @@
+```css
+ion-modal#example-modal {
+  --width: fit-content;
+  --min-width: 250px;
+  --height: fit-content;
+  --border-radius: 6px;
+  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+}
+
+ion-modal#example-modal h1 {
+  margin: 20px 20px 10px 20px;
+}
+
+ion-modal#example-modal ion-icon {
+  margin-right: 6px;
+
+  width: 48px;
+  height: 48px;
+
+  padding: 4px 0;
+
+  color: #aaaaaa;
+}
+
+ion-modal#example-modal .wrapper {
+  margin-bottom: 10px;
+}
+```
diff --git a/static/usage/v7/modal/custom-dialogs/demo.html b/static/usage/v7/modal/custom-dialogs/demo.html
new file mode 100644
index 00000000000..95149828ba7
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/demo.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Custom Dialog</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@ionic/core@6.1.15-dev.11657743655.1e3dcc3c/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@ionic/core@6.1.15-dev.11657743655.1e3dcc3c/css/ionic.bundle.css" />
+  <style>
+    ion-modal {
+      --width: fit-content;
+      --min-width: 250px;
+      --height: fit-content;
+      --border-radius: 6px;
+      --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+    }
+
+    ion-modal h1 {
+      margin: 20px 20px 10px 20px;
+    }
+
+    ion-modal ion-icon {
+      margin-right: 6px;
+
+      width: 48px;
+      height: 48px;
+
+      padding: 4px 0;
+
+      color: #aaaaaa;
+    }
+
+    ion-modal .wrapper {
+      margin-bottom: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="custom-modal" expand="block">Open Custom Dialog</ion-button>
+
+      <ion-modal trigger="custom-modal">
+        <div class="wrapper">
+          <h1>Dialog header</h1>
+
+          <ion-list lines="none">
+            <ion-item button="true" detail="false" onclick="dismiss()">
+              <ion-icon name="person-circle"></ion-icon>
+              <ion-label>Item 1</ion-label>
+            </ion-item>
+            <ion-item button="true" detail="false" onclick="dismiss()">
+              <ion-icon name="person-circle"></ion-icon>
+              <ion-label>Item 2</ion-label>
+            </ion-item>
+            <ion-item button="true" detail="false" onclick="dismiss()">
+              <ion-icon name="person-circle"></ion-icon>
+              <ion-label>Item 3</ion-label>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+    const dismiss = () => modal.dismiss();
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/custom-dialogs/index.md b/static/usage/v7/modal/custom-dialogs/index.md
new file mode 100644
index 00000000000..2aec2d39f33
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_global_css from './angular/global_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    vue,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v7/modal/custom-dialogs/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/modal/custom-dialogs/javascript.md b/static/usage/v7/modal/custom-dialogs/javascript.md
new file mode 100644
index 00000000000..b465debd41b
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/javascript.md
@@ -0,0 +1,67 @@
+```html
+<style>
+  ion-modal#example-modal {
+    --width: fit-content;
+    --min-width: 250px;
+    --height: fit-content;
+    --border-radius: 6px;
+    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+  }
+
+  ion-modal#example-modal h1 {
+    margin: 20px 20px 10px 20px;
+  }
+
+  ion-modal#example-modal ion-icon {
+    margin-right: 6px;
+
+    width: 48px;
+    height: 48px;
+
+    padding: 4px 0;
+
+    color: #aaaaaa;
+  }
+
+  ion-modal#example-modal .wrapper {
+    margin-bottom: 10px;
+  }
+</style>
+
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-custom-dialog" expand="block">Open Custom Dialog</ion-button>
+
+  <ion-modal id="example-modal" trigger="open-custom-dialog">
+    <div class="wrapper">
+      <h1>Dialog header</h1>
+
+      <ion-list lines="none">
+        <ion-item button="true" detail="false" onclick="dismiss()">
+          <ion-icon name="person-circle"></ion-icon>
+          <ion-label>Item 1</ion-label>
+        </ion-item>
+        <ion-item button="true" detail="false" onclick="dismiss()">
+          <ion-icon name="person-circle"></ion-icon>
+          <ion-label>Item 2</ion-label>
+        </ion-item>
+        <ion-item button="true" detail="false" onclick="dismiss()">
+          <ion-icon name="person-circle"></ion-icon>
+          <ion-label>Item 3</ion-label>
+        </ion-item>
+      </ion-list>
+    </div>
+  </ion-modal>
+</ion-content>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+  function dismiss() {
+    modal.dismiss();
+  }
+</script>
+```
diff --git a/static/usage/v7/modal/custom-dialogs/react/main_css.md b/static/usage/v7/modal/custom-dialogs/react/main_css.md
new file mode 100644
index 00000000000..3edb76f1e97
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/react/main_css.md
@@ -0,0 +1,28 @@
+```css
+ion-modal#example-modal {
+  --width: fit-content;
+  --min-width: 250px;
+  --height: fit-content;
+  --border-radius: 6px;
+  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+}
+
+ion-modal#example-modal h1 {
+  margin: 20px 20px 10px 20px;
+}
+
+ion-modal#example-modal ion-icon {
+  margin-right: 6px;
+
+  width: 48px;
+  height: 48px;
+
+  padding: 4px 0;
+
+  color: #aaaaaa;
+}
+
+ion-modal#example-modal .wrapper {
+  margin-bottom: 10px;
+}
+```
diff --git a/static/usage/v7/modal/custom-dialogs/react/main_tsx.md b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md
new file mode 100644
index 00000000000..b60d3f275ab
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md
@@ -0,0 +1,64 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonIcon,
+} from '@ionic/react';
+import { personCircle } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  function dismiss() {
+    modal.current?.dismiss();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <IonButton id="open-custom-dialog" expand="block">
+          Open Custom Dialog
+        </IonButton>
+        <IonModal id="example-modal" ref={modal} trigger="open-custom-dialog">
+          <div className="wrapper">
+            <h1>Dialog header</h1>
+        
+            <IonList lines="none">
+              <IonItem button={true} detail={false} onClick={dismiss}>
+                <IonIcon icon={personCircle}></IonIcon>
+                <IonLabel>Item 1</IonLabel>
+              </IonItem>
+              <IonItem button={true} detail={false} onClick={dismiss}>
+                <IonIcon icon={personCircle}></IonIcon>
+                <IonLabel>Item 2</IonLabel>
+              </IonItem>
+              <IonItem button={true} detail={false} onClick={dismiss}>
+                <IonIcon icon={personCircle}></IonIcon>
+                <IonLabel>Item 3</IonLabel>
+              </IonItem>
+            </IonList>
+          </div>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/custom-dialogs/vue.md b/static/usage/v7/modal/custom-dialogs/vue.md
new file mode 100644
index 00000000000..f910bc061e4
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/vue.md
@@ -0,0 +1,102 @@
+```html
+<style>
+  ion-modal#example-modal {
+    --width: fit-content;
+    --min-width: 250px;
+    --height: fit-content;
+    --border-radius: 6px;
+    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+  }
+  
+  ion-modal#example-modal h1 {
+    margin: 20px 20px 10px 20px;
+  }
+  
+  ion-modal#example-modal ion-icon {
+    margin-right: 6px;
+  
+    width: 48px;
+    height: 48px;
+  
+    padding: 4px 0;
+  
+    color: #aaaaaa;
+  }
+  
+  ion-modal#example-modal .wrapper {
+    margin-bottom: 10px;
+  }
+</style>
+
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-custom-dialog" expand="block">Open Custom Dialog</ion-button>
+    
+    <ion-modal id="example-modal" ref="modal" trigger="open-custom-dialog">
+      <div class="wrapper">
+        <h1>Dialog header</h1>
+    
+        <ion-list lines="none">
+          <ion-item :button="true" :detail="false" @click="dismiss()">
+            <ion-icon :icon="personCircle"></ion-icon>
+            <ion-label>Item 1</ion-label>
+          </ion-item>
+          <ion-item :button="true" :detail="false" @click="dismiss()">
+            <ion-icon :icon="personCircle"></ion-icon>
+            <ion-label>Item 2</ion-label>
+          </ion-item>
+          <ion-item :button="true" :detail="false" @click="dismiss()">
+            <ion-icon :icon="personCircle"></ion-icon>
+            <ion-label>Item 3</ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+    IonItem,
+    IonList,
+    IonLabel,
+    IonIcon,
+  } from '@ionic/vue';
+  import { personCircle } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+      IonItem,
+      IonList,
+      IonLabel,
+      IonIcon,
+    },
+    methods: {
+      dismiss() {
+        this.$refs.modal.$el.dismiss();
+      },
+    },
+    setup() {
+      return { personCircle };
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_html.md b/static/usage/v7/modal/inline/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..d89c7626f3d
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Inline Modal</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open</ion-button>
+  <p>{{ message }}</p>
+  <ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button (click)="cancel()">Cancel</ion-button>
+          </ion-buttons>
+          <ion-title>Welcome</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-item>
+          <ion-label position="stacked">Enter your name</ion-label>
+          <ion-input type="text" placeholder="Your name" [(ngModel)]="name"></ion-input>
+        </ion-item>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_ts.md b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..a21954ec5f1
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md
@@ -0,0 +1,31 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonModal } from '@ionic/angular';
+import { OverlayEventDetail } from '@ionic/core/components';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild(IonModal) modal: IonModal;
+
+  message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';
+  name: string;
+
+  cancel() {
+    this.modal.dismiss(null, 'cancel');
+  }
+
+  confirm() {
+    this.modal.dismiss(this.name, 'confirm');
+  }
+
+  onWillDismiss(event: Event) {
+    const ev = event as CustomEvent<OverlayEventDetail<string>>;
+    if (ev.detail.role === 'confirm') {
+      this.message = `Hello, ${ev.detail.data}!`;
+    }
+  }
+}
+```
diff --git a/static/usage/v7/modal/inline/basic/demo.html b/static/usage/v7/modal/inline/basic/demo.html
new file mode 100644
index 00000000000..4007d9fc2be
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/demo.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Inline</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Inline Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open</ion-button>
+      <p id="message">This modal example uses triggers to automatically open a modal when the button is clicked.</p>
+      <ion-modal trigger="open-modal">
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-button onclick="cancel()">Cancel</ion-button>
+            </ion-buttons>
+            <ion-title>Welcome</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="confirm()" strong="true">Confirm
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <ion-item>
+            <ion-label position="stacked">Enter your name</ion-label>
+            <ion-input type="text" placeholder="Your name"></ion-input>
+          </ion-item>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    function cancel() {
+      modal.dismiss(null, 'cancel');
+    }
+
+    function confirm() {
+      const input = document.querySelector('ion-input');
+      modal.dismiss(input.value, 'confirm');
+    }
+
+    modal.addEventListener('willDismiss', ev => {
+      if (ev.detail.role === 'confirm') {
+        const message = document.querySelector('#message');
+        message.textContent = `Hello ${ev.detail.data}!`;
+      }
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/inline/basic/index.md b/static/usage/v7/modal/inline/basic/index.md
new file mode 100644
index 00000000000..1406cd29c09
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/modal/inline/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/modal/inline/basic/javascript.md b/static/usage/v7/modal/inline/basic/javascript.md
new file mode 100644
index 00000000000..cffa297eebd
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/javascript.md
@@ -0,0 +1,50 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Inline Modal</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open</ion-button>
+  <p id="message">This modal example uses triggers to automatically open a modal when the button is clicked.</p>
+  <ion-modal trigger="open-modal">
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button onclick="cancel()">Cancel</ion-button>
+        </ion-buttons>
+        <ion-title>Welcome</ion-title>
+        <ion-buttons slot="end">
+          <ion-button onclick="confirm()" strong="true">Confirm</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-item>
+        <ion-label position="stacked">Enter your name</ion-label>
+        <ion-input type="text" placeholder="Your name"></ion-input>
+      </ion-item>
+    </ion-content>
+  </ion-modal>
+</ion-content>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  function cancel() {
+    modal.dismiss(null, 'cancel');
+  }
+
+  function confirm() {
+    const input = document.querySelector('ion-input');
+    modal.dismiss(input.value, 'confirm');
+  }
+
+  modal.addEventListener('willDismiss', (ev) => {
+    if (ev.detail.role === 'confirm') {
+      const message = document.querySelector('#message');
+      message.textContent = `Hello ${ev.detail.data}!`;
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/inline/basic/react.md b/static/usage/v7/modal/inline/basic/react.md
new file mode 100644
index 00000000000..aa465052e4c
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/react.md
@@ -0,0 +1,75 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import {
+  IonButtons,
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonItem,
+  IonLabel,
+  IonInput,
+} from '@ionic/react';
+import { OverlayEventDetail } from '@ionic/core/components';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+  const input = useRef<HTMLIonInputElement>(null);
+
+  const [message, setMessage] = useState(
+    'This modal example uses triggers to automatically open a modal when the button is clicked.'
+  );
+
+  function confirm() {
+    modal.current?.dismiss(input.current?.value, 'confirm');
+  }
+
+  function onWillDismiss(ev: CustomEvent<OverlayEventDetail>) {
+    if (ev.detail.role === 'confirm') {
+      setMessage(`Hello, ${ev.detail.data}!`);
+    }
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Inline Modal</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open
+        </IonButton>
+        <p>{message}</p>
+        <IonModal ref={modal} trigger="open-modal" onWillDismiss={(ev) => onWillDismiss(ev)}>
+          <IonHeader>
+            <IonToolbar>
+              <IonButtons slot="start">
+                <IonButton onClick={() => modal.current?.dismiss()}>Cancel</IonButton>
+              </IonButtons>
+              <IonTitle>Welcome</IonTitle>
+              <IonButtons slot="end">
+                <IonButton strong={true} onClick={() => confirm()}>
+                  Confirm
+                </IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent className="ion-padding">
+            <IonItem>
+              <IonLabel position="stacked">Enter your name</IonLabel>
+              <IonInput ref={input} type="text" placeholder="Your name" />
+            </IonItem>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md
new file mode 100644
index 00000000000..2e0b1c4746c
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/vue.md
@@ -0,0 +1,83 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Inline Modal</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open</ion-button>
+    <p>{{ message }}</p>
+    <ion-modal ref="modal" trigger="open-modal" @willDismiss="onWillDismiss">
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button @click="cancel()">Cancel</ion-button>
+          </ion-buttons>
+          <ion-title>Welcome</ion-title>
+          <ion-buttons slot="end">
+            <ion-button :strong="true" @click="confirm()">Confirm</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-item>
+          <ion-label position="stacked">Enter your name</ion-label>
+          <ion-input ref="input" type="text" placeholder="Your name"></ion-input>
+        </ion-item>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonButtons,
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+    IonItem,
+    IonInput,
+    IonLabel,
+  } from '@ionic/vue';
+  import { OverlayEventDetail } from '@ionic/core/components';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButtons,
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+      IonItem,
+      IonInput,
+      IonLabel,
+    },
+    data() {
+      return {
+        message: 'This modal example uses triggers to automatically open a modal when the button is clicked.',
+      };
+    },
+    methods: {
+      cancel() {
+        this.$refs.modal.$el.dismiss(null, 'cancel');
+      },
+      confirm() {
+        const name = this.$refs.input.$el.value;
+        this.$refs.modal.$el.dismiss(name, 'confirm');
+      },
+      onWillDismiss(ev: CustomEvent<OverlayEventDetail>) {
+        if (ev.detail.role === 'confirm') {
+          this.message = `Hello, ${ev.detail.data}!`;
+        }
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/inline/is-open/angular/example_component_html.md b/static/usage/v7/modal/inline/is-open/angular/example_component_html.md
new file mode 100644
index 00000000000..b3be96215c3
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/angular/example_component_html.md
@@ -0,0 +1,29 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Inline Modal</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button expand="block" (click)="setOpen(true)">Open</ion-button>
+  <ion-modal [isOpen]="isModalOpen">
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="setOpen(false)">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+          reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
+          dicta.
+        </p>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v7/modal/inline/is-open/angular/example_component_ts.md
new file mode 100644
index 00000000000..321577939a9
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/angular/example_component_ts.md
@@ -0,0 +1,15 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  isModalOpen = false;
+
+  setOpen(isOpen: boolean) {
+    this.isModalOpen = isOpen;
+  }
+}
+```
diff --git a/static/usage/v7/modal/inline/is-open/demo.html b/static/usage/v7/modal/inline/is-open/demo.html
new file mode 100644
index 00000000000..ed5f3494869
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Inline</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Inline Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button expand="block" onclick="modal.isOpen = true">Open</ion-button>
+      <ion-modal>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="modal.isOpen = false">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+            reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
+            dicta.</p>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/inline/is-open/index.md b/static/usage/v7/modal/inline/is-open/index.md
new file mode 100644
index 00000000000..b77d9dd8a7a
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/modal/inline/is-open/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/modal/inline/is-open/javascript.md b/static/usage/v7/modal/inline/is-open/javascript.md
new file mode 100644
index 00000000000..1893f105d79
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/javascript.md
@@ -0,0 +1,31 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Inline Modal</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button expand="block" onclick="modal.isOpen = true">Open</ion-button>
+  <ion-modal>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal</ion-title>
+        <ion-buttons slot="end">
+          <ion-button onclick="modal.isOpen = false">Close</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+        reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
+        dicta.
+      </p>
+    </ion-content>
+  </ion-modal>
+</ion-content>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+</script>
+```
diff --git a/static/usage/v7/modal/inline/is-open/react.md b/static/usage/v7/modal/inline/is-open/react.md
new file mode 100644
index 00000000000..7b337e8f4cc
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+
+function Example() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Inline Modal</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton expand="block" onClick={() => setIsOpen(true)}>
+          Open
+        </IonButton>
+        <IonModal isOpen={isOpen}>
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={() => setIsOpen(false)}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent className="ion-padding">
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+              reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui.
+              Eaque, dicta.
+            </p>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/inline/is-open/vue.md b/static/usage/v7/modal/inline/is-open/vue.md
new file mode 100644
index 00000000000..c09025c1967
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Inline Modal</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button expand="block" @click="setOpen(true)">Open</ion-button>
+
+    <ion-modal :is-open="isOpen">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button @click="setOpen(false)">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+          reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
+          dicta.
+        </p>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButtons, IonButton, IonModal, IonHeader, IonToolbar, IonContent, IonTitle } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle },
+    data() {
+      return {
+        isOpen: false,
+      };
+    },
+    methods: {
+      setOpen(isOpen: boolean) {
+        this.isOpen = isOpen;
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/performance/mount/angular.md b/static/usage/v7/modal/performance/mount/angular.md
new file mode 100644
index 00000000000..3afd202d33b
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/angular.md
@@ -0,0 +1,25 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Example</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+  <ion-modal [keepContentsMounted]="true" trigger="open-modal" #modal>
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button (click)="modal.dismiss()">Cancel</ion-button>
+          </ion-buttons>
+          <ion-title>Modal</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        This content was mounted as soon as the modal was created.
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/modal/performance/mount/demo.html b/static/usage/v7/modal/performance/mount/demo.html
new file mode 100644
index 00000000000..03d47899733
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Performance</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.modalController = modalController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Example</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+      <ion-modal trigger="open-modal">
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-button id="close">Close</ion-button>
+            </ion-buttons>
+            <ion-title>Modal</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          This content was mounted as soon as the modal was created.
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    const closeBtn = document.querySelector('#close');
+    closeBtn.addEventListener('click', () => close());
+
+    const close = () => {
+      modal.dismiss();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/performance/mount/index.md b/static/usage/v7/modal/performance/mount/index.md
new file mode 100644
index 00000000000..16018d41230
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/index.md
@@ -0,0 +1,19 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/modal/performance/mount/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/modal/performance/mount/javascript.md b/static/usage/v7/modal/performance/mount/javascript.md
new file mode 100644
index 00000000000..a7dd685dad4
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/javascript.md
@@ -0,0 +1,32 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Example</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+  <ion-modal trigger="open-modal">
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button id="close">Close</ion-button>
+        </ion-buttons>
+        <ion-title>Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding"> This content was mounted as soon as the modal was created. </ion-content>
+  </ion-modal>
+</ion-content>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  var closeBtn = document.querySelector('#close');
+  closeBtn.addEventListener('click', () => close());
+
+  var close = () => {
+    modal.dismiss();
+  };
+</script>
+```
diff --git a/static/usage/v7/modal/performance/mount/react.md b/static/usage/v7/modal/performance/mount/react.md
new file mode 100644
index 00000000000..5b50612291b
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  IonButtons,
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+} from '@ionic/react';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Example</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open Modal
+        </IonButton>
+        <IonModal ref={modal} keepContentsMounted={true} trigger="open-modal">
+          <IonHeader>
+            <IonToolbar>
+              <IonButtons slot="start">
+                <IonButton onClick={() => modal.current?.dismiss()}>Close</IonButton>
+              </IonButtons>
+              <IonTitle>Modal</IonTitle>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent className="ion-padding">
+            This content was mounted as soon as the modal was created.
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/performance/mount/vue.md b/static/usage/v7/modal/performance/mount/vue.md
new file mode 100644
index 00000000000..515229dde25
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/vue.md
@@ -0,0 +1,55 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Example</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+    <ion-modal ref="modal" :keep-contents-mounted="true" trigger="open-modal">
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button @click="close()">Cancel</ion-button>
+          </ion-buttons>
+          <ion-title>Modal</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        This content was mounted as soon as the modal was created.
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonButtons,
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+  } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButtons,
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+    },
+    methods: {
+      close() {
+        this.$refs.modal.$el.dismiss();
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/sheet/background-content/angular/example_component_css.md b/static/usage/v7/modal/sheet/background-content/angular/example_component_css.md
new file mode 100644
index 00000000000..8730cae2d21
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+.counter__section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+```
diff --git a/static/usage/v7/modal/sheet/background-content/angular/example_component_html.md b/static/usage/v7/modal/sheet/background-content/angular/example_component_html.md
new file mode 100644
index 00000000000..286c8e66487
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/angular/example_component_html.md
@@ -0,0 +1,72 @@
+```html
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <p>You can interact with the +/- buttons until the sheet is fully expanded.</p>
+
+    <div class="counter__section">
+      <ion-button (click)="decrement()">-</ion-button>
+      <p>{{count }}</p>
+      <ion-button (click)="increment()">+</ion-button>
+    </div>
+
+    <ion-modal
+      #modal
+      trigger="open-modal"
+      [isOpen]="true"
+      [initialBreakpoint]="0.25"
+      [breakpoints]="[0.25, 0.5, 0.75]"
+      [backdropDismiss]="false"
+      [backdropBreakpoint]="0.5"
+    >
+      <ng-template>
+        <ion-content class="ion-padding">
+          <ion-searchbar placeholder="Search" (click)="modal.setCurrentBreakpoint(0.75)"></ion-searchbar>
+          <ion-list>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Connor Smith</h2>
+                <p>Sales Rep</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Daniel Smith</h2>
+                <p>Product Designer</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Greg Smith</h2>
+                <p>Director of Operations</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+              </ion-avatar>
+              <ion-label>
+                <h2>Zoey Smith</h2>
+                <p>CEO</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/modal/sheet/background-content/angular/example_component_ts.md b/static/usage/v7/modal/sheet/background-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..e132d2f84c7
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+
+  decrement() {
+    this.count--;
+  }
+}
+```
diff --git a/static/usage/v7/modal/sheet/background-content/demo.html b/static/usage/v7/modal/sheet/background-content/demo.html
new file mode 100644
index 00000000000..9ba868a9e1e
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/demo.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .counter__section {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+
+      <p>You can interact with the +/- buttons until the sheet is fully expanded.</p>
+
+      <div class="counter__section">
+        <ion-button id="decrement" onclick="decrement()">-</ion-button>
+        <p id="counter">0</p>
+        <ion-button id="increment" onclick="increment()">+</ion-button>
+      </div>
+
+      <ion-modal is-open="true" initial-breakpoint="0.25" backdrop-dismiss="false" backdrop-breakpoint="0.5">
+        <ion-content>
+          <ion-searchbar placeholder="Search"></ion-searchbar>
+          <ion-list>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=b" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Connor Smith</h2>
+                <p>Sales Rep</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=a" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Daniel Smith</h2>
+                <p>Product Designer</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=d" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Greg Smith</h2>
+                <p>Director of Operations</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=e" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Zoey Smith</h2>
+                <p>CEO</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+    const searchBar = document.querySelector('ion-searchbar');
+
+    modal.breakpoints = [0, 0.25, 0.5, 0.75];
+
+    searchBar.addEventListener('click', () => {
+      modal.setCurrentBreakpoint(0.75);
+    });
+
+    function increment() {
+      const counter = document.querySelector('#counter');
+      counter.innerHTML = parseInt(counter.innerText) + 1;
+    }
+
+    function decrement() {
+      const counter = document.querySelector('#counter');
+      counter.innerHTML = parseInt(counter.innerText) - 1;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/sheet/background-content/index.md b/static/usage/v7/modal/sheet/background-content/index.md
new file mode 100644
index 00000000000..5cd5560d122
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/index.md
@@ -0,0 +1,28 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/modal/sheet/background-content/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/modal/sheet/background-content/javascript.md b/static/usage/v7/modal/sheet/background-content/javascript.md
new file mode 100644
index 00000000000..7d58104e6dd
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/javascript.md
@@ -0,0 +1,89 @@
+```html
+<style>
+  .counter__section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+</style>
+
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <p>You can interact with the +/- buttons until the sheet is fully expanded.</p>
+
+  <div class="counter__section">
+    <ion-button id="decrement" onclick="decrement()">-</ion-button>
+    <p id="counter">0</p>
+    <ion-button id="increment" onclick="increment()">+</ion-button>
+  </div>
+
+  <ion-modal is-open="true" initial-breakpoint="0.25" backdrop-dismiss="false" backdrop-breakpoint="0.5">
+    <ion-content>
+      <ion-searchbar placeholder="Search"></ion-searchbar>
+      <ion-list>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=b" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Connor Smith</h2>
+            <p>Sales Rep</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=a" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Daniel Smith</h2>
+            <p>Product Designer</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=d" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Greg Smith</h2>
+            <p>Director of Operations</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=e" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Zoey Smith</h2>
+            <p>CEO</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-modal>
+</ion-content>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+  var searchBar = document.querySelector('ion-searchbar');
+
+  modal.breakpoints = [0, 0.25, 0.5, 0.75];
+
+  searchBar.addEventListener('click', () => {
+    modal.setCurrentBreakpoint(0.75);
+  });
+
+  function increment() {
+    const counter = document.querySelector('#counter');
+    counter.innerHTML = parseInt(counter.innerText) + 1;
+  }
+
+  function decrement() {
+    const counter = document.querySelector('#counter');
+    counter.innerHTML = parseInt(counter.innerText) - 1;
+  }
+</script>
+```
diff --git a/static/usage/v7/modal/sheet/background-content/react.md b/static/usage/v7/modal/sheet/background-content/react.md
new file mode 100644
index 00000000000..e6325909f99
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/react.md
@@ -0,0 +1,100 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import {
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonAvatar,
+  IonImg,
+  IonSearchbar,
+} from '@ionic/react';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+  const [count, setCount] = useState(0);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <p>You can interact with the +/- buttons until the sheet is fully expanded.</p>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <IonButton onClick={() => setCount(count - 1)}>-</IonButton>
+          <p>{count}</p>
+          <IonButton onClick={() => setCount(count + 1)}>+</IonButton>
+        </div>
+        <IonModal
+          ref={modal}
+          trigger="open-modal"
+          isOpen={true}
+          initialBreakpoint={0.25}
+          breakpoints={[0.25, 0.5, 0.75]}
+          backdropDismiss={false}
+          backdropBreakpoint={0.5}
+        >
+          <IonContent className="ion-padding">
+            <IonSearchbar onClick={() => modal.current?.setCurrentBreakpoint(0.75)} placeholder="Search"></IonSearchbar>
+            <IonList>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=b" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Connor Smith</h2>
+                  <p>Sales Rep</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=a" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Daniel Smith</h2>
+                  <p>Product Designer</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=d" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Greg Smith</h2>
+                  <p>Director of Operations</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=e" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Zoey Smith</h2>
+                  <p>CEO</p>
+                </IonLabel>
+              </IonItem>
+            </IonList>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/sheet/background-content/vue.md b/static/usage/v7/modal/sheet/background-content/vue.md
new file mode 100644
index 00000000000..e2647c4902c
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/vue.md
@@ -0,0 +1,126 @@
+```html
+<style>
+  .counter__section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+</style>
+
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <p>You can interact with the +/- buttons until the sheet is fully expanded.</p>
+
+    <div class="counter__section">
+      <ion-button id="decrement" @click="decrement()">-</ion-button>
+      <p>{{count}}</p>
+      <ion-button id="increment" @click="increment()">+</ion-button>
+    </div>
+
+    <ion-modal
+      ref="modal"
+      trigger="open-modal"
+      :is-open="true"
+      :initial-breakpoint="0.25"
+      :breakpoints="[0.25, 0.5, 0.75]"
+      :backdrop-dismiss="false"
+      :backdrop-breakpoint="0.5"
+    >
+      <ion-content class="ion-padding">
+        <ion-searchbar @click="$refs.modal.$el.setCurrentBreakpoint(0.75)" placeholder="Search"></ion-searchbar>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+    IonItem,
+    IonList,
+    IonAvatar,
+    IonImg,
+    IonLabel,
+    IonSearchbar,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+      IonItem,
+      IonList,
+      IonAvatar,
+      IonImg,
+      IonLabel,
+      IonSearchbar,
+    },
+    data() {
+      return {
+        count: 0,
+      };
+    },
+    methods: {
+      increment() {
+        this.count++;
+      },
+      decrement() {
+        this.count--;
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/sheet/basic/angular.md b/static/usage/v7/modal/sheet/basic/angular.md
new file mode 100644
index 00000000000..6561e311463
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/angular.md
@@ -0,0 +1,56 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal #modal trigger="open-modal" [initialBreakpoint]="0.25" [breakpoints]="[0, 0.25, 0.5, 0.75]">
+    <ng-template>
+      <ion-content>
+        <ion-searchbar placeholder="Search" (click)="modal.setCurrentBreakpoint(0.75)"></ion-searchbar>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/modal/sheet/basic/demo.html b/static/usage/v7/modal/sheet/basic/demo.html
new file mode 100644
index 00000000000..65be6a2ceab
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/demo.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+      <ion-modal trigger="open-modal" initial-breakpoint="0.25">
+        <ion-content>
+          <ion-searchbar placeholder="Search"></ion-searchbar>
+          <ion-list>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=b" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Connor Smith</h2>
+                <p>Sales Rep</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=a" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Daniel Smith</h2>
+                <p>Product Designer</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=d" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Greg Smith</h2>
+                <p>Director of Operations</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=e" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Zoey Smith</h2>
+                <p>CEO</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+    const searchBar = document.querySelector('ion-searchbar');
+
+    modal.breakpoints = [0, 0.25, 0.5, 0.75];
+
+    searchBar.addEventListener('click', () => {
+      modal.setCurrentBreakpoint(0.75);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/sheet/basic/index.md b/static/usage/v7/modal/sheet/basic/index.md
new file mode 100644
index 00000000000..837a75b0494
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/index.md
@@ -0,0 +1,19 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/modal/sheet/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/modal/sheet/basic/javascript.md b/static/usage/v7/modal/sheet/basic/javascript.md
new file mode 100644
index 00000000000..2fb52ea2242
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/javascript.md
@@ -0,0 +1,65 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal trigger="open-modal" initial-breakpoint="0.25">
+    <ion-content>
+      <ion-searchbar placeholder="Search"></ion-searchbar>
+      <ion-list>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=b" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Connor Smith</h2>
+            <p>Sales Rep</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=a" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Daniel Smith</h2>
+            <p>Product Designer</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=d" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Greg Smith</h2>
+            <p>Director of Operations</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=e" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Zoey Smith</h2>
+            <p>CEO</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-modal>
+</ion-content>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+  var searchBar = document.querySelector('ion-searchbar');
+
+  modal.breakpoints = [0, 0.25, 0.5, 0.75];
+
+  searchBar.addEventListener('click', () => {
+    modal.setCurrentBreakpoint(0.75);
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/sheet/basic/react.md b/static/usage/v7/modal/sheet/basic/react.md
new file mode 100644
index 00000000000..4d813d1783f
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/react.md
@@ -0,0 +1,82 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonAvatar,
+  IonImg,
+  IonSearchbar,
+} from '@ionic/react';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open Sheet Modal
+        </IonButton>
+        <IonModal ref={modal} trigger="open-modal" initialBreakpoint={0.25} breakpoints={[0, 0.25, 0.5, 0.75]}>
+          <IonContent className="ion-padding">
+            <IonSearchbar onClick={() => modal.current?.setCurrentBreakpoint(0.75)} placeholder="Search"></IonSearchbar>
+            <IonList>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=b" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Connor Smith</h2>
+                  <p>Sales Rep</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=a" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Daniel Smith</h2>
+                  <p>Product Designer</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=d" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Greg Smith</h2>
+                  <p>Director of Operations</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=e" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Zoey Smith</h2>
+                  <p>CEO</p>
+                </IonLabel>
+              </IonItem>
+            </IonList>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/sheet/basic/vue.md b/static/usage/v7/modal/sheet/basic/vue.md
new file mode 100644
index 00000000000..69ac1179b2e
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/vue.md
@@ -0,0 +1,91 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+    <ion-modal ref="modal" trigger="open-modal" :initial-breakpoint="0.25" :breakpoints="[0, 0.25, 0.5, 0.75]">
+      <ion-content class="ion-padding">
+        <ion-searchbar @click="$refs.modal.$el.setCurrentBreakpoint(0.75)" placeholder="Search"></ion-searchbar>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+    IonItem,
+    IonList,
+    IonAvatar,
+    IonImg,
+    IonLabel,
+    IonSearchbar,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+      IonItem,
+      IonList,
+      IonAvatar,
+      IonImg,
+      IonLabel,
+      IonSearchbar,
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/sheet/handle-behavior/angular.md b/static/usage/v7/modal/sheet/handle-behavior/angular.md
new file mode 100644
index 00000000000..d6f30b1ca8f
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/angular.md
@@ -0,0 +1,25 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal
+    trigger="open-modal"
+    [initialBreakpoint]="0.25"
+    [breakpoints]="[0, 0.25, 0.5, 0.75]"
+    handleBehavior="cycle"
+  >
+    <ng-template>
+      <ion-content class="ion-padding">
+        <div class="ion-margin-top">
+          <ion-label>Click the handle above to advance to the next breakpoint.</ion-label>
+        </div>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/modal/sheet/handle-behavior/demo.html b/static/usage/v7/modal/sheet/handle-behavior/demo.html
new file mode 100644
index 00000000000..c89417e7ecf
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+      <ion-modal trigger="open-modal" initial-breakpoint="0.25" handle-behavior="cycle">
+        <ion-content class="ion-padding">
+          <div class="ion-margin-top">
+            <ion-label>Click the handle above to advance to the next breakpoint.</ion-label>
+          </div>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.breakpoints = [0, 0.25, 0.5, 0.75];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/sheet/handle-behavior/index.md b/static/usage/v7/modal/sheet/handle-behavior/index.md
new file mode 100644
index 00000000000..11ed9f04493
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/index.md
@@ -0,0 +1,19 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/modal/sheet/handle-behavior/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/modal/sheet/handle-behavior/javascript.md b/static/usage/v7/modal/sheet/handle-behavior/javascript.md
new file mode 100644
index 00000000000..8215dd69636
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/javascript.md
@@ -0,0 +1,24 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal trigger="open-modal" initial-breakpoint="0.25" handle-behavior="cycle">
+    <ion-content class="ion-padding">
+      <div class="ion-margin-top">
+        <ion-label>Click the handle above to advance to the next breakpoint.</ion-label>
+      </div>
+    </ion-content>
+  </ion-modal>
+</ion-content>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  modal.breakpoints = [0, 0.25, 0.5, 0.75];
+</script>
+```
diff --git a/static/usage/v7/modal/sheet/handle-behavior/react.md b/static/usage/v7/modal/sheet/handle-behavior/react.md
new file mode 100644
index 00000000000..bb415ae6bb2
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonLabel } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open Sheet Modal
+        </IonButton>
+        <IonModal
+          trigger="open-modal"
+          initialBreakpoint={0.25}
+          breakpoints={[0, 0.25, 0.5, 0.75]}
+          handleBehavior="cycle"
+        >
+          <IonContent className="ion-padding">
+            <div className="ion-margin-top">
+              <IonLabel>Click the handle above to advance to the next breakpoint.</IonLabel>
+            </div>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/sheet/handle-behavior/vue.md b/static/usage/v7/modal/sheet/handle-behavior/vue.md
new file mode 100644
index 00000000000..e40321f52b8
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/vue.md
@@ -0,0 +1,42 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+    <ion-modal
+      trigger="open-modal"
+      :initial-breakpoint="0.25"
+      :breakpoints="[0, 0.25, 0.5, 0.75]"
+      handle-behavior="cycle"
+    >
+      <ion-content class="ion-padding">
+        <div class="ion-margin-top">
+          <ion-label>Click the handle above to advance to the next breakpoint.</ion-label>
+        </div>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+      IonLabel,
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/styling/animations/angular/example_component_html.md b/static/usage/v7/modal/styling/animations/angular/example_component_html.md
new file mode 100644
index 00000000000..befb0873d45
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/angular/example_component_html.md
@@ -0,0 +1,63 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+
+  <ion-modal #modal trigger="open-modal" [enterAnimation]="enterAnimation" [leaveAnimation]="leaveAnimation">
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="modal.dismiss()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/modal/styling/animations/angular/example_component_ts.md b/static/usage/v7/modal/styling/animations/angular/example_component_ts.md
new file mode 100644
index 00000000000..c4a743b2745
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/angular/example_component_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { Component } from '@angular/core';
+import { AnimationController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private animationCtrl: AnimationController) {}
+
+  enterAnimation = (baseEl: HTMLElement) => {
+    const root = baseEl.shadowRoot;
+
+    const backdropAnimation = this.animationCtrl
+      .create()
+      .addElement(root.querySelector('ion-backdrop')!)
+      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+    const wrapperAnimation = this.animationCtrl
+      .create()
+      .addElement(root.querySelector('.modal-wrapper')!)
+      .keyframes([
+        { offset: 0, opacity: '0', transform: 'scale(0)' },
+        { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+      ]);
+
+    return this.animationCtrl
+      .create()
+      .addElement(baseEl)
+      .easing('ease-out')
+      .duration(500)
+      .addAnimation([backdropAnimation, wrapperAnimation]);
+  };
+
+  leaveAnimation = (baseEl: HTMLElement) => {
+    return this.enterAnimation(baseEl).direction('reverse');
+  };
+}
+```
diff --git a/static/usage/v7/modal/styling/animations/demo.html b/static/usage/v7/modal/styling/animations/demo.html
new file mode 100644
index 00000000000..555667996c4
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/demo.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Animations</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.createAnimation = createAnimation;
+  </script>
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+
+      <ion-modal trigger="open-modal">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="modal.dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=b" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Connor Smith</h2>
+                <p>Sales Rep</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=a" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Daniel Smith</h2>
+                <p>Product Designer</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=d" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Greg Smith</h2>
+                <p>Director of Operations</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=e" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Zoey Smith</h2>
+                <p>CEO</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    const enterAnimation = (baseEl) => {
+      const root = baseEl.shadowRoot;
+
+      const backdropAnimation = createAnimation()
+        .addElement(root.querySelector('ion-backdrop'))
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = createAnimation()
+        .addElement(root.querySelector('.modal-wrapper'))
+        .keyframes([
+          { offset: 0, opacity: '0', transform: 'scale(0)' },
+          { offset: 1, opacity: '0.99', transform: 'scale(1)' }
+        ]);
+
+      return createAnimation()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl) => enterAnimation(baseEl).direction('reverse');
+
+    modal.enterAnimation = enterAnimation;
+    modal.leaveAnimation = leaveAnimation;
+
+    function dismiss() {
+      modal.dismiss();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/styling/animations/index.md b/static/usage/v7/modal/styling/animations/index.md
new file mode 100644
index 00000000000..71a8d6519dd
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import vue from './vue.md';
+import react from './react.md';
+
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/modal/styling/animations/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/modal/styling/animations/javascript/index_html.md b/static/usage/v7/modal/styling/animations/javascript/index_html.md
new file mode 100644
index 00000000000..0eb4709069f
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/javascript/index_html.md
@@ -0,0 +1,106 @@
+```html
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/core.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>App</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+
+        <ion-modal trigger="open-modal">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Modal</ion-title>
+              <ion-buttons slot="end">
+                <ion-button onclick="modal.dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <ion-list>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=b" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Connor Smith</h2>
+                  <p>Sales Rep</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=a" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Daniel Smith</h2>
+                  <p>Product Designer</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=d" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Greg Smith</h2>
+                  <p>Director of Operations</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=e" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Zoey Smith</h2>
+                  <p>CEO</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      var modal = document.querySelector('ion-modal');
+
+      const enterAnimation = (baseEl) => {
+        const root = baseEl.shadowRoot;
+
+        const backdropAnimation = createAnimation()
+          .addElement(root.querySelector('ion-backdrop'))
+          .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+        const wrapperAnimation = createAnimation()
+          .addElement(root.querySelector('.modal-wrapper'))
+          .keyframes([
+            { offset: 0, opacity: '0', transform: 'scale(0)' },
+            { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+          ]);
+
+        return createAnimation()
+          .addElement(baseEl)
+          .easing('ease-out')
+          .duration(500)
+          .addAnimation([backdropAnimation, wrapperAnimation]);
+      };
+
+      const leaveAnimation = (baseEl) => enterAnimation(baseEl).direction('reverse');
+
+      modal.enterAnimation = enterAnimation;
+      modal.leaveAnimation = leaveAnimation;
+
+      function dismiss() {
+        modal.dismiss();
+      }
+    </script>
+  </body>
+</html>
+```
diff --git a/static/usage/v7/modal/styling/animations/javascript/index_ts.md b/static/usage/v7/modal/styling/animations/javascript/index_ts.md
new file mode 100644
index 00000000000..c2f8d9eb485
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/javascript/index_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { createAnimation } from '@ionic/core';
+
+defineCustomElements();
+
+(window as any).createAnimation = createAnimation;
+```
diff --git a/static/usage/v7/modal/styling/animations/react.md b/static/usage/v7/modal/styling/animations/react.md
new file mode 100644
index 00000000000..06dfa9d70ff
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/react.md
@@ -0,0 +1,123 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  createAnimation,
+  IonButtons,
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonAvatar,
+  IonImg,
+} from '@ionic/react';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  function dismiss() {
+    modal.current?.dismiss();
+  }
+
+  const enterAnimation = (baseEl: HTMLElement) => {
+    const root = baseEl.shadowRoot;
+
+    const backdropAnimation = createAnimation()
+      .addElement(root?.querySelector('ion-backdrop')!)
+      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+    const wrapperAnimation = createAnimation()
+      .addElement(root?.querySelector('.modal-wrapper')!)
+      .keyframes([
+        { offset: 0, opacity: '0', transform: 'scale(0)' },
+        { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+      ]);
+
+    return createAnimation()
+      .addElement(baseEl)
+      .easing('ease-out')
+      .duration(500)
+      .addAnimation([backdropAnimation, wrapperAnimation]);
+  };
+
+  const leaveAnimation = (baseEl: HTMLElement) => {
+    return enterAnimation(baseEl).direction('reverse');
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open Modal
+        </IonButton>
+        <IonModal
+          id="example-modal"
+          ref={modal}
+          trigger="open-modal"
+          enterAnimation={enterAnimation}
+          leaveAnimation={leaveAnimation}
+        >
+          <IonContent>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={() => dismiss()}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+            <IonList>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=b" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Connor Smith</h2>
+                  <p>Sales Rep</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=a" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Daniel Smith</h2>
+                  <p>Product Designer</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=d" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Greg Smith</h2>
+                  <p>Director of Operations</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=e" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Zoey Smith</h2>
+                  <p>CEO</p>
+                </IonLabel>
+              </IonItem>
+            </IonList>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/styling/animations/vue.md b/static/usage/v7/modal/styling/animations/vue.md
new file mode 100644
index 00000000000..8a15e8444fc
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/vue.md
@@ -0,0 +1,129 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+
+    <ion-modal ref="modal" trigger="open-modal" :enter-animation="enterAnimation" :leave-animation="leaveAnimation">
+      <ion-content>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button @click="dismiss()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    createAnimation,
+    IonButtons,
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+    IonItem,
+    IonList,
+    IonAvatar,
+    IonImg,
+    IonLabel,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButtons,
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+      IonItem,
+      IonList,
+      IonAvatar,
+      IonImg,
+      IonLabel,
+    },
+    setup() {
+      const enterAnimation = (baseEl: HTMLElement) => {
+        const root = baseEl.shadowRoot;
+
+        const backdropAnimation = createAnimation()
+          .addElement(root.querySelector('ion-backdrop'))
+          .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+        const wrapperAnimation = createAnimation()
+          .addElement(root.querySelector('.modal-wrapper'))
+          .keyframes([
+            { offset: 0, opacity: '0', transform: 'scale(0)' },
+            { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+          ]);
+
+        return createAnimation()
+          .addElement(baseEl)
+          .easing('ease-out')
+          .duration(500)
+          .addAnimation([backdropAnimation, wrapperAnimation]);
+      };
+
+      const leaveAnimation = (baseEl) => {
+        return enterAnimation(baseEl).direction('reverse');
+      };
+      return { enterAnimation, leaveAnimation };
+    },
+    methods: {
+      dismiss() {
+        this.$refs.modal.$el.dismiss();
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/styling/theming/angular/example_component_html.md b/static/usage/v7/modal/styling/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..2d18a6f26d9
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/angular/example_component_html.md
@@ -0,0 +1,61 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+
+  <ion-modal #modal trigger="open-modal">
+    <ng-template>
+      <ion-content>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button color="light" (click)="modal.dismiss()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/modal/styling/theming/angular/global_css.md b/static/usage/v7/modal/styling/theming/angular/global_css.md
new file mode 100644
index 00000000000..00b7c80f86d
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/angular/global_css.md
@@ -0,0 +1,17 @@
+```css
+ion-modal {
+  --height: 50%;
+  --border-radius: 16px;
+  --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+ion-modal::part(backdrop) {
+  background: rgba(209, 213, 219);
+  opacity: 1;
+}
+
+ion-modal ion-toolbar {
+  --background: rgb(14 116 144);
+  --color: white;
+}
+```
diff --git a/static/usage/v7/modal/styling/theming/demo.html b/static/usage/v7/modal/styling/theming/demo.html
new file mode 100644
index 00000000000..f0c3f00bbe4
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/demo.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Theming</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-modal {
+      --height: 50%;
+      --border-radius: 16px;
+      --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    }
+
+    ion-modal::part(backdrop) {
+      background: rgba(209, 213, 219);
+      opacity: 1;
+    }
+
+    ion-modal ion-toolbar {
+      --background: rgb(14 116 144);
+      --color: white;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+
+      <ion-modal trigger="open-modal">
+        <ion-content>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button color="light" onclick="modal.dismiss()">Close
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-list>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=b" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Connor Smith</h2>
+                <p>Sales Rep</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=a" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Daniel Smith</h2>
+                <p>Product Designer</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=d" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Greg Smith</h2>
+                <p>Director of Operations</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-avatar slot="start">
+                <ion-img src="https://i.pravatar.cc/300?u=e" />
+              </ion-avatar>
+              <ion-label>
+                <h2>Zoey Smith</h2>
+                <p>CEO</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    function dismiss() {
+      modal.dismiss();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/styling/theming/index.md b/static/usage/v7/modal/styling/theming/index.md
new file mode 100644
index 00000000000..3d0ebd17096
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_global_css from './angular/global_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    vue,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v7/modal/styling/theming/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/modal/styling/theming/javascript.md b/static/usage/v7/modal/styling/theming/javascript.md
new file mode 100644
index 00000000000..cb63f145ad9
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/javascript.md
@@ -0,0 +1,87 @@
+```html
+<style>
+  ion-modal {
+    --height: 50%;
+    --border-radius: 16px;
+    --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+
+  ion-modal::part(backdrop) {
+    background: rgba(209, 213, 219);
+    opacity: 1;
+  }
+
+  ion-modal ion-toolbar {
+    --background: rgb(14 116 144);
+    --color: white;
+  }
+</style>
+
+<ion-app>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+
+    <ion-modal trigger="open-modal">
+      <ion-content>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button color="light" onclick="modal.dismiss()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b" />
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a" />
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d" />
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e" />
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</ion-app>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  function dismiss() {
+    modal.dismiss();
+  }
+</script>
+```
diff --git a/static/usage/v7/modal/styling/theming/react/main_css.md b/static/usage/v7/modal/styling/theming/react/main_css.md
new file mode 100644
index 00000000000..c1d585b8f72
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+ion-modal#example-modal {
+  --height: 50%;
+  --border-radius: 16px;
+  --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+ion-modal#example-modal::part(backdrop) {
+  background: rgba(209, 213, 219);
+  opacity: 1;
+}
+
+ion-modal#example-modal ion-toolbar {
+  --background: rgb(14 116 144);
+  --color: white;
+}
+```
diff --git a/static/usage/v7/modal/styling/theming/react/main_tsx.md b/static/usage/v7/modal/styling/theming/react/main_tsx.md
new file mode 100644
index 00000000000..7c8509879ab
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/react/main_tsx.md
@@ -0,0 +1,95 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  IonButtons,
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonAvatar,
+  IonImg,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  function dismiss() {
+    modal.current?.dismiss();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open Modal
+        </IonButton>
+        <IonModal id="example-modal" ref={modal} trigger="open-modal">
+          <IonContent>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton color="light" onClick={() => dismiss()}>
+                  Close
+                </IonButton>
+              </IonButtons>
+            </IonToolbar>
+            <IonList>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=b" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Connor Smith</h2>
+                  <p>Sales Rep</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=a" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Daniel Smith</h2>
+                  <p>Product Designer</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=d" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Greg Smith</h2>
+                  <p>Director of Operations</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=e" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Zoey Smith</h2>
+                  <p>CEO</p>
+                </IonLabel>
+              </IonItem>
+            </IonList>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/styling/theming/vue.md b/static/usage/v7/modal/styling/theming/vue.md
new file mode 100644
index 00000000000..7dc80157056
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/vue.md
@@ -0,0 +1,119 @@
+```html
+<style>
+  ion-modal {
+    --height: 50%;
+    --border-radius: 16px;
+    --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+
+  ion-modal::part(backdrop) {
+    background: rgba(209, 213, 219);
+    opacity: 1;
+  }
+
+  ion-modal ion-toolbar {
+    --background: rgb(14 116 144);
+    --color: white;
+  }
+</style>
+
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+
+    <ion-modal ref="modal" trigger="open-modal">
+      <ion-content>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button color="light" @click="dismiss()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonButtons,
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+    IonItem,
+    IonList,
+    IonAvatar,
+    IonImg,
+    IonLabel,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButtons,
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+      IonItem,
+      IonList,
+      IonAvatar,
+      IonImg,
+      IonLabel,
+    },
+    methods: {
+      dismiss() {
+        this.$refs.modal.$el.dismiss();
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md b/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md
new file mode 100644
index 00000000000..d3b8b44f6ce
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+import { PageThreeComponent } from './page-three.component';
+
+@NgModule({
+  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/example_component_html.md b/static/usage/v7/nav/modal-navigation/angular/example_component_html.md
new file mode 100644
index 00000000000..06d46334df5
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Modal Navigation</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="openModal">Open Modal</ion-button>
+  <ion-modal #modal trigger="openModal" (willPresent)="onWillPresent()">
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="modal.dismiss()"> Close </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-nav #nav></ion-nav>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
new file mode 100644
index 00000000000..366dc7e246d
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild('nav') private nav: IonNav;
+
+  onWillPresent() {
+    this.nav.setRoot(PageOneComponent);
+  }
+}
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..3c9ec863d04
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <ion-button (click)="navigateToPageTwo()">Go to Page Two</ion-button>
+    </ion-content>
+  `,
+})
+export class PageOneComponent {
+  constructor(private nav: IonNav) {}
+
+  navigateToPageTwo() {
+    this.nav.push(PageTwoComponent);
+  }
+}
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..5b1b70c3474
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-content class="ion-padding">
+      <h1>Page Three</h1>
+      <ion-button (click)="navigateBack()">Go Back</ion-button>
+      <ion-button (click)="navigateToRoot()">Go to Root</ion-button>
+    </ion-content>
+  `,
+})
+export class PageThreeComponent {
+  constructor(private nav: IonNav) {}
+
+  navigateBack() {
+    this.nav.pop();
+  }
+
+  navigateToRoot() {
+    this.nav.popToRoot();
+  }
+}
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..0cd5713c062
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <ion-button (click)="navigateToPageThree()">Go to Page Three</ion-button>
+    </ion-content>
+  `,
+})
+export class PageTwoComponent {
+  component = PageThreeComponent;
+
+  constructor(private nav: IonNav) {}
+
+  navigateToPageThree() {
+    this.nav.push(PageThreeComponent);
+  }
+}
+```
diff --git a/static/usage/v7/nav/modal-navigation/demo.html b/static/usage/v7/nav/modal-navigation/demo.html
new file mode 100644
index 00000000000..0d099f1e3cc
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/demo.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Nav | Modal Navigation</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Navigation</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="openModal">Open Modal</ion-button>
+      <ion-modal trigger="openModal">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="dismiss()">
+                Close
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-nav></ion-nav>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+    const nav = document.querySelector('ion-nav');
+
+    modal.addEventListener('willPresent', () => {
+      nav.setRoot('page-one');
+    });
+
+    const dismiss = () => modal.dismiss();
+
+    const navigate = (component) => {
+      nav.push(component);
+    }
+
+    const navigateBack = () => {
+      nav.pop();
+    }
+
+    const navigateToRoot = () => {
+      nav.popToRoot();
+    }
+
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-button onclick="navigate('page-two')">Go to Page Two</ion-button>
+        </ion-content>
+      `;
+      }
+    }
+
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <ion-button onclick="navigate('page-three')">Go to Page Three</ion-button>
+        </ion-content>
+      `;
+      }
+    }
+
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+          <ion-button onclick="navigateBack()">Go Back</ion-button>
+          <ion-button onclick="navigateToRoot()">Go to Root</ion-button>
+        </ion-content>
+      `;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/nav/modal-navigation/index.md b/static/usage/v7/nav/modal-navigation/index.md
new file mode 100644
index 00000000000..73ce3215f66
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/index.md
@@ -0,0 +1,56 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/page-one.component.ts': angular_page_one_component_ts,
+        'src/app/page-two.component.ts': angular_page_two_component_ts,
+        'src/app/page-three.component.ts': angular_page_three_component_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/page-one.tsx': react_page_one_tsx,
+        'src/page-two.tsx': react_page_two_tsx,
+        'src/page-three.tsx': react_page_three_tsx,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+        'src/components/PageThree.vue': vue_page_three,
+      },
+    },
+  }}
+  src="usage/v7/nav/modal-navigation/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/nav/modal-navigation/javascript.md b/static/usage/v7/nav/modal-navigation/javascript.md
new file mode 100644
index 00000000000..5fd4e9ef13a
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/javascript.md
@@ -0,0 +1,86 @@
+```html
+<ion-app>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Modal Navigation</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="openModal">Open Modal</ion-button>
+    <ion-modal trigger="openModal">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="dismiss()"> Close </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-nav></ion-nav>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</ion-app>
+
+<script>
+  const modal = document.querySelector('ion-modal');
+  const nav = document.querySelector('ion-nav');
+
+  modal.addEventListener('willPresent', () => {
+    nav.setRoot('page-one');
+  });
+
+  var dismiss = () => modal.dismiss();
+
+  var navigate = (component) => {
+    nav.push(component);
+  };
+
+  var navigateBack = () => {
+    nav.pop();
+  };
+
+  var navigateToRoot = () => {
+    nav.popToRoot();
+  };
+
+  class PageOne extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-button onclick="navigate('page-two')">Go to Page Two</ion-button>
+        </ion-content>
+      `;
+    }
+  }
+
+  class PageTwo extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <ion-button onclick="navigate('page-three')">Go to Page Three</ion-button>
+        </ion-content>
+      `;
+    }
+  }
+
+  class PageThree extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+          <ion-button onclick="navigateBack()">Go Back</ion-button>
+          <ion-button onclick="navigateToRoot()">Go to Root</ion-button>
+        </ion-content>
+      `;
+    }
+  }
+
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+  customElements.define('page-three', PageThree);
+</script>
+```
diff --git a/static/usage/v7/nav/modal-navigation/react/main_tsx.md b/static/usage/v7/nav/modal-navigation/react/main_tsx.md
new file mode 100644
index 00000000000..fc6901b3d6d
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/react/main_tsx.md
@@ -0,0 +1,60 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  IonNav,
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonModal,
+} from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+  const nav = useRef<HTMLIonNavElement>(null);
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  const didPresent = () => {
+    if (nav.current) {
+      nav.current.setRoot(PageOne, { nav: nav.current });
+    }
+  };
+
+  const dismiss = () => {
+    if (modal.current) {
+      modal.current.dismiss();
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Modal Navigation</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="openModal">Open Modal</IonButton>
+        <IonModal ref={modal} trigger="openModal" onDidPresent={didPresent}>
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={dismiss}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent>
+            <IonNav ref={nav}></IonNav>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/nav/modal-navigation/react/page_one_tsx.md b/static/usage/v7/nav/modal-navigation/react/page_one_tsx.md
new file mode 100644
index 00000000000..ce5c266e21b
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/react/page_one_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne({ nav }: { nav: HTMLIonNavElement }) {
+  const navigateToPageTwo = () => nav.push(PageTwo, { nav });
+  return (
+    <IonContent class="ion-padding">
+      <h1>Page One</h1>
+      <IonButton onClick={navigateToPageTwo}>Go to Page Two</IonButton>
+    </IonContent>
+  );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v7/nav/modal-navigation/react/page_three_tsx.md b/static/usage/v7/nav/modal-navigation/react/page_three_tsx.md
new file mode 100644
index 00000000000..3613967edfd
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/react/page_three_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function PageThree({ nav }: { nav: HTMLIonNavElement }) {
+  const navigateBack = () => nav.pop();
+  const navigateToRoot = () => nav.popToRoot();
+
+  return (
+    <IonContent class="ion-padding">
+      <h1>Page Three</h1>
+      <IonButton onClick={navigateBack}>Go Back</IonButton>
+      <IonButton onClick={navigateToRoot}>Go to Root</IonButton>
+    </IonContent>
+  );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/v7/nav/modal-navigation/react/page_two_tsx.md b/static/usage/v7/nav/modal-navigation/react/page_two_tsx.md
new file mode 100644
index 00000000000..48562bd23cd
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/react/page_two_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo({ nav }: { nav: HTMLIonNavElement }) {
+  const navigateToPageThree = () => nav.push(PageThree, { nav });
+
+  return (
+    <IonContent class="ion-padding">
+      <h1>Page Two</h1>
+      <IonButton onClick={navigateToPageThree}>Go to Page Three</IonButton>
+    </IonContent>
+  );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v7/nav/modal-navigation/vue/example_vue.md b/static/usage/v7/nav/modal-navigation/vue/example_vue.md
new file mode 100644
index 00000000000..ad5242e5c06
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/vue/example_vue.md
@@ -0,0 +1,60 @@
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Navigation</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="openModal">Open Modal</ion-button>
+      <ion-modal ref="modal" trigger="openModal" @will-present="onWillPresent">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss"> Close </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-nav ref="nav"></ion-nav>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { nextTick } from 'vue';
+  import {
+    IonNav,
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonButton,
+    IonModal,
+    IonButtons,
+  } from '@ionic/vue';
+  import PageOne from './PageOne.vue';
+
+  export default {
+    components: { IonNav, IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonModal, IonButtons },
+    methods: {
+      dismiss() {
+        this.$refs.modal.$el.dismiss();
+      },
+      async onWillPresent() {
+        // Need to wait two ticks before the ref is set
+        await nextTick();
+        await nextTick();
+
+        const nav = this.$refs.nav.$el;
+        nav.setRoot(PageOne, { nav });
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/nav/modal-navigation/vue/page_one_vue.md b/static/usage/v7/nav/modal-navigation/vue/page_one_vue.md
new file mode 100644
index 00000000000..94613725139
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/vue/page_one_vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Page One</h1>
+    <ion-button @click="navigateToPageTwo">Go to Page Two</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonButton } from '@ionic/vue';
+  import PageTwo from './PageTwo.vue';
+
+  export default {
+    components: { IonContent, IonButton },
+    props: ['nav'],
+    methods: {
+      navigateToPageTwo() {
+        const { nav } = this;
+        nav.push(PageTwo, { nav });
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/nav/modal-navigation/vue/page_three_vue.md b/static/usage/v7/nav/modal-navigation/vue/page_three_vue.md
new file mode 100644
index 00000000000..9dde8817996
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/vue/page_three_vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Page Three</h1>
+    <ion-button @click="navigateBack">Go Back</ion-button>
+    <ion-button @click="navigateToRoot">Go to Root</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonButton } from '@ionic/vue';
+
+  export default {
+    components: { IonContent, IonButton },
+    props: ['nav'],
+    methods: {
+      navigateBack() {
+        const { nav } = this;
+        nav.pop();
+      },
+      navigateToRoot() {
+        const { nav } = this;
+        nav.popToRoot();
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/nav/modal-navigation/vue/page_two_vue.md b/static/usage/v7/nav/modal-navigation/vue/page_two_vue.md
new file mode 100644
index 00000000000..737fa71158b
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/vue/page_two_vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Page Two</h1>
+    <ion-button @click="navigateToPageThree">Go to Page Three</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonButton } from '@ionic/vue';
+  import PageThree from './PageThree.vue';
+
+  export default {
+    components: { IonContent, IonButton },
+    props: ['nav'],
+    methods: {
+      navigateToPageThree() {
+        const { nav } = this;
+        nav.push(PageThree, { nav });
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/nav/nav-link/angular/app_module_ts.md b/static/usage/v7/nav/nav-link/angular/app_module_ts.md
new file mode 100644
index 00000000000..d3b8b44f6ce
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/app_module_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+import { PageThreeComponent } from './page-three.component';
+
+@NgModule({
+  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/nav/nav-link/angular/example_component_html.md b/static/usage/v7/nav/nav-link/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-nav [root]="component"></ion-nav>
+```
diff --git a/static/usage/v7/nav/nav-link/angular/example_component_ts.md b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  component = PageOneComponent;
+}
+```
diff --git a/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..06c42b342cf
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Page One</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <ion-nav-link router-direction="forward" [component]="component">
+        <ion-button>Go to Page Two</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  `,
+})
+export class PageOneComponent {
+  component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..d9e95ed7218
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Three</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Three</h1>
+    </ion-content>
+  `,
+})
+export class PageThreeComponent {}
+```
diff --git a/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..d6edd90a593
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Two</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <div>
+        <ion-nav-link router-direction="forward" [component]="component">
+          <ion-button>Go to Page Three</ion-button>
+        </ion-nav-link>
+      </div>
+    </ion-content>
+  `,
+})
+export class PageTwoComponent {
+  component = PageThreeComponent;
+}
+```
diff --git a/static/usage/v7/nav/nav-link/demo.html b/static/usage/v7/nav/nav-link/demo.html
new file mode 100644
index 00000000000..9d8aa06c58f
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/demo.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Nav | NavLink</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-nav root="page-one"></ion-nav>
+  </ion-app>
+
+  <script>
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Go to Page Two</ion-button>
+          </ion-nav-link>
+        </ion-content>
+      `;
+      }
+    }
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <div>
+            <ion-nav-link router-direction="forward" component="page-three">
+              <ion-button>Go to Page Three</ion-button>
+            </ion-nav-link>
+          </div>
+        </ion-content>
+      `;
+      }
+    }
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+      }
+    }
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/nav/nav-link/index.md b/static/usage/v7/nav/nav-link/index.md
new file mode 100644
index 00000000000..de4e4e01562
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/index.md
@@ -0,0 +1,55 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/page-one.component.ts': angular_page_one_component_ts,
+        'src/app/page-two.component.ts': angular_page_two_component_ts,
+        'src/app/page-three.component.ts': angular_page_three_component_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/page-one.tsx': react_page_one_tsx,
+        'src/page-two.tsx': react_page_two_tsx,
+        'src/page-three.tsx': react_page_three_tsx,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+        'src/components/PageThree.vue': vue_page_three,
+      },
+    },
+  }}
+  src="usage/v7/nav/nav-link/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/nav/nav-link/javascript.md b/static/usage/v7/nav/nav-link/javascript.md
new file mode 100644
index 00000000000..faf19dc3ca7
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/javascript.md
@@ -0,0 +1,67 @@
+```html
+<ion-app>
+  <ion-nav root="page-one"></ion-nav>
+</ion-app>
+
+<script>
+  class PageOne extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Go to Page Two</ion-button>
+          </ion-nav-link>
+        </ion-content>
+      `;
+    }
+  }
+  class PageTwo extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <div>
+            <ion-nav-link router-direction="forward" component="page-three">
+              <ion-button>Go to Page Three</ion-button>
+            </ion-nav-link>
+          </div>
+        </ion-content>
+      `;
+    }
+  }
+  class PageThree extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+    }
+  }
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+  customElements.define('page-three', PageThree);
+</script>
+```
diff --git a/static/usage/v7/nav/nav-link/react/main_tsx.md b/static/usage/v7/nav/nav-link/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonNav } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+  return <IonNav root={() => <PageOne />}></IonNav>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/nav/nav-link/react/page_one_tsx.md b/static/usage/v7/nav/nav-link/react/page_one_tsx.md
new file mode 100644
index 00000000000..303ad18547a
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/react/page_one_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Page One</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page One</h1>
+        <IonNavLink routerDirection="forward" component={() => <PageTwo />}>
+          <IonButton>Go to Page Two</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v7/nav/nav-link/react/page_three_tsx.md b/static/usage/v7/nav/nav-link/react/page_three_tsx.md
new file mode 100644
index 00000000000..451d30db85d
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/react/page_three_tsx.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+
+function PageThree() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Page Three</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page Three</h1>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/v7/nav/nav-link/react/page_two_tsx.md b/static/usage/v7/nav/nav-link/react/page_two_tsx.md
new file mode 100644
index 00000000000..fd3f8764873
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/react/page_two_tsx.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import {
+  IonBackButton,
+  IonButtons,
+  IonButton,
+  IonHeader,
+  IonContent,
+  IonNavLink,
+  IonToolbar,
+  IonTitle,
+} from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Page Two</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page Two</h1>
+        <IonNavLink routerDirection="forward" component={() => <PageThree />}>
+          <IonButton>Go to Page Three</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v7/nav/nav-link/vue/example_vue.md b/static/usage/v7/nav/nav-link/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/vue/example_vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-nav :root="component"></ion-nav>
+</template>
+
+<script lang="ts">
+  import { IonNav } from '@ionic/vue';
+  import PageOne from './PageOne.vue';
+
+  export default {
+    components: { IonNav },
+    data() {
+      return {
+        component: PageOne,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/nav/nav-link/vue/page_one_vue.md b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
new file mode 100644
index 00000000000..f3635e1db37
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
@@ -0,0 +1,29 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Page One</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page One</h1>
+    <ion-nav-link router-direction="forward" :component="component">
+      <ion-button>Go to Page Two</ion-button>
+    </ion-nav-link>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
+  import PageTwo from './PageTwo.vue';
+
+  export default {
+    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
+    data() {
+      return {
+        component: PageTwo,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/nav/nav-link/vue/page_three_vue.md b/static/usage/v7/nav/nav-link/vue/page_three_vue.md
new file mode 100644
index 00000000000..54d6acf24c9
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/vue/page_three_vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Page Three</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page Three</h1>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
+
+  export default {
+    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
+  };
+</script>
+```
diff --git a/static/usage/v7/nav/nav-link/vue/page_two_vue.md b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
new file mode 100644
index 00000000000..0d736d69c88
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
@@ -0,0 +1,50 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Page Two</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page Two</h1>
+    <ion-nav-link router-direction="forward" :component="component">
+      <ion-button>Go to Page Three</ion-button>
+    </ion-nav-link>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    IonContent,
+    IonNavLink,
+    IonButton,
+    IonButtons,
+    IonBackButton,
+  } from '@ionic/vue';
+  import PageThree from './PageThree.vue';
+
+  export default {
+    components: {
+      IonHeader,
+      IonTitle,
+      IonToolbar,
+      IonContent,
+      IonNavLink,
+      IonButton,
+      IonButtons,
+      IonBackButton,
+    },
+    data() {
+      return {
+        component: PageThree,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/note/basic/angular.md b/static/usage/v7/note/basic/angular.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/v7/note/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-note>Default Note</ion-note>
+```
diff --git a/static/usage/v7/note/basic/demo.html b/static/usage/v7/note/basic/demo.html
new file mode 100644
index 00000000000..ae5b7ce7f04
--- /dev/null
+++ b/static/usage/v7/note/basic/demo.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Note</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-note>Default Note</ion-note>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/note/basic/index.md b/static/usage/v7/note/basic/index.md
new file mode 100644
index 00000000000..c1ff54b6c74
--- /dev/null
+++ b/static/usage/v7/note/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/note/basic/demo.html" />
diff --git a/static/usage/v7/note/basic/javascript.md b/static/usage/v7/note/basic/javascript.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/v7/note/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-note>Default Note</ion-note>
+```
diff --git a/static/usage/v7/note/basic/react.md b/static/usage/v7/note/basic/react.md
new file mode 100644
index 00000000000..9f1cdb45225
--- /dev/null
+++ b/static/usage/v7/note/basic/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonNote } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonNote>Default Note</IonNote>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/note/basic/vue.md b/static/usage/v7/note/basic/vue.md
new file mode 100644
index 00000000000..dffb1348fc9
--- /dev/null
+++ b/static/usage/v7/note/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-note>Default Note</ion-note>
+</template>
+
+<script lang="ts">
+  import { IonNote } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonNote },
+  });
+</script>
+```
diff --git a/static/usage/v7/note/item/angular.md b/static/usage/v7/note/item/angular.md
new file mode 100644
index 00000000000..0d26cf33b27
--- /dev/null
+++ b/static/usage/v7/note/item/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-item>
+  <ion-label>Label</ion-label>
+  <ion-note slot="end">Note (End)</ion-note>
+</ion-item>
+
+<ion-item>
+  <ion-note slot="start">Note (Start)</ion-note>
+  <ion-label>Label</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/note/item/demo.html b/static/usage/v7/note/item/demo.html
new file mode 100644
index 00000000000..3aea8507aa8
--- /dev/null
+++ b/static/usage/v7/note/item/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Note</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Label</ion-label>
+          <ion-note slot="end">Note (End)</ion-note>
+        </ion-item>
+
+        <ion-item>
+          <ion-note slot="start">Note (Start)</ion-note>
+          <ion-label>Label</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/note/item/index.md b/static/usage/v7/note/item/index.md
new file mode 100644
index 00000000000..5c32457e008
--- /dev/null
+++ b/static/usage/v7/note/item/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/note/item/demo.html" />
diff --git a/static/usage/v7/note/item/javascript.md b/static/usage/v7/note/item/javascript.md
new file mode 100644
index 00000000000..0d26cf33b27
--- /dev/null
+++ b/static/usage/v7/note/item/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-item>
+  <ion-label>Label</ion-label>
+  <ion-note slot="end">Note (End)</ion-note>
+</ion-item>
+
+<ion-item>
+  <ion-note slot="start">Note (Start)</ion-note>
+  <ion-label>Label</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/note/item/react.md b/static/usage/v7/note/item/react.md
new file mode 100644
index 00000000000..422ba6eff85
--- /dev/null
+++ b/static/usage/v7/note/item/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonNote } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonLabel>Label</IonLabel>
+        <IonNote slot="end">Note (End)</IonNote>
+      </IonItem>
+
+      <IonItem>
+        <IonNote slot="start">Note (Start)</IonNote>
+        <IonLabel>Label</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/note/item/vue.md b/static/usage/v7/note/item/vue.md
new file mode 100644
index 00000000000..24b7add1ed1
--- /dev/null
+++ b/static/usage/v7/note/item/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-item>
+    <ion-label>Label</ion-label>
+    <ion-note slot="end">Note (End)</ion-note>
+  </ion-item>
+
+  <ion-item>
+    <ion-note slot="start">Note (Start)</ion-note>
+    <ion-label>Label</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonNote } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonNote },
+  });
+</script>
+```
diff --git a/static/usage/v7/note/theming/colors/angular.md b/static/usage/v7/note/theming/colors/angular.md
new file mode 100644
index 00000000000..2740648d5ad
--- /dev/null
+++ b/static/usage/v7/note/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-note>Default Note</ion-note>
+<ion-note color="primary">Primary Note</ion-note>
+<ion-note color="secondary">Secondary Note</ion-note>
+<ion-note color="tertiary">Tertiary Note</ion-note>
+<ion-note color="success">Success Note</ion-note>
+<ion-note color="warning">Warning Note</ion-note>
+<ion-note color="danger">Danger Note</ion-note>
+<ion-note color="light">Light Note</ion-note>
+<ion-note color="medium">Medium Note</ion-note>
+<ion-note color="dark">Dark Note</ion-note>
+```
diff --git a/static/usage/v7/note/theming/colors/demo.html b/static/usage/v7/note/theming/colors/demo.html
new file mode 100644
index 00000000000..2564a686b1a
--- /dev/null
+++ b/static/usage/v7/note/theming/colors/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Note</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .flex-items {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      max-width: 440px;
+    }
+
+    ion-note {
+      margin: 0 2px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="flex-items">
+          <ion-note>Default Note</ion-note>
+          <ion-note color="primary">Primary Note</ion-note>
+          <ion-note color="secondary">Secondary Note</ion-note>
+          <ion-note color="tertiary">Tertiary Note</ion-note>
+          <ion-note color="success">Success Note</ion-note>
+          <ion-note color="warning">Warning Note</ion-note>
+          <ion-note color="danger">Danger Note</ion-note>
+          <ion-note color="light">Light Note</ion-note>
+          <ion-note color="medium">Medium Note</ion-note>
+          <ion-note color="dark">Dark Note</ion-note>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/note/theming/colors/index.md b/static/usage/v7/note/theming/colors/index.md
new file mode 100644
index 00000000000..daadf060f1e
--- /dev/null
+++ b/static/usage/v7/note/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/note/theming/colors/demo.html" />
diff --git a/static/usage/v7/note/theming/colors/javascript.md b/static/usage/v7/note/theming/colors/javascript.md
new file mode 100644
index 00000000000..2740648d5ad
--- /dev/null
+++ b/static/usage/v7/note/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-note>Default Note</ion-note>
+<ion-note color="primary">Primary Note</ion-note>
+<ion-note color="secondary">Secondary Note</ion-note>
+<ion-note color="tertiary">Tertiary Note</ion-note>
+<ion-note color="success">Success Note</ion-note>
+<ion-note color="warning">Warning Note</ion-note>
+<ion-note color="danger">Danger Note</ion-note>
+<ion-note color="light">Light Note</ion-note>
+<ion-note color="medium">Medium Note</ion-note>
+<ion-note color="dark">Dark Note</ion-note>
+```
diff --git a/static/usage/v7/note/theming/colors/react.md b/static/usage/v7/note/theming/colors/react.md
new file mode 100644
index 00000000000..0f17783c5c6
--- /dev/null
+++ b/static/usage/v7/note/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonNote } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonNote>Default Note</IonNote>
+      <IonNote color="primary">Primary Note</IonNote>
+      <IonNote color="secondary">Secondary Note</IonNote>
+      <IonNote color="tertiary">Tertiary Note</IonNote>
+      <IonNote color="success">Success Note</IonNote>
+      <IonNote color="warning">Warning Note</IonNote>
+      <IonNote color="danger">Danger Note</IonNote>
+      <IonNote color="light">Light Note</IonNote>
+      <IonNote color="medium">Medium Note</IonNote>
+      <IonNote color="dark">Dark Note</IonNote>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/note/theming/colors/vue.md b/static/usage/v7/note/theming/colors/vue.md
new file mode 100644
index 00000000000..77e767a5e5f
--- /dev/null
+++ b/static/usage/v7/note/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-note>Default Note</ion-note>
+  <ion-note color="primary">Primary Note</ion-note>
+  <ion-note color="secondary">Secondary Note</ion-note>
+  <ion-note color="tertiary">Tertiary Note</ion-note>
+  <ion-note color="success">Success Note</ion-note>
+  <ion-note color="warning">Warning Note</ion-note>
+  <ion-note color="danger">Danger Note</ion-note>
+  <ion-note color="light">Light Note</ion-note>
+  <ion-note color="medium">Medium Note</ion-note>
+  <ion-note color="dark">Dark Note</ion-note>
+</template>
+
+<script lang="ts">
+  import { IonNote } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonNote },
+  });
+</script>
+```
diff --git a/static/usage/v7/note/theming/css-properties/angular/example_component_css.md b/static/usage/v7/note/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..5f39ab9c48f
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-note {
+  --color: #54dc98;
+}
+```
diff --git a/static/usage/v7/note/theming/css-properties/angular/example_component_html.md b/static/usage/v7/note/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-note>Default Note</ion-note>
+```
diff --git a/static/usage/v7/note/theming/css-properties/demo.html b/static/usage/v7/note/theming/css-properties/demo.html
new file mode 100644
index 00000000000..400d4bf0b10
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Note</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-note {
+      --color: #54dc98;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-note>Default Note</ion-note>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/note/theming/css-properties/index.md b/static/usage/v7/note/theming/css-properties/index.md
new file mode 100644
index 00000000000..07c1802c04b
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/note/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/note/theming/css-properties/javascript.md b/static/usage/v7/note/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..cc1bdeec421
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/javascript.md
@@ -0,0 +1,9 @@
+```html
+<style>
+  ion-note {
+    --color: #54dc98;
+  }
+</style>
+
+<ion-note>Default Note</ion-note>
+```
diff --git a/static/usage/v7/note/theming/css-properties/react/main_css.md b/static/usage/v7/note/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..5f39ab9c48f
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-note {
+  --color: #54dc98;
+}
+```
diff --git a/static/usage/v7/note/theming/css-properties/react/main_tsx.md b/static/usage/v7/note/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..798b6ab90d1
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonNote } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonNote>Default Note</IonNote>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/note/theming/css-properties/vue.md b/static/usage/v7/note/theming/css-properties/vue.md
new file mode 100644
index 00000000000..77e8b361f2c
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/vue.md
@@ -0,0 +1,20 @@
+```html
+<template>
+  <ion-note>Default Note</ion-note>
+</template>
+
+<script lang="ts">
+  import { IonNote } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonNote },
+  });
+</script>
+
+<style>
+  ion-note {
+    --color: #54dc98;
+  }
+</style>
+```
diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_html.md b/static/usage/v7/picker/multiple-column/angular/example_component_html.md
new file mode 100644
index 00000000000..1e25fa99c40
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="openPicker()">Open</ion-button>
+```
diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md
new file mode 100644
index 00000000000..ce535b1391a
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md
@@ -0,0 +1,84 @@
+```ts
+import { Component } from '@angular/core';
+import { PickerController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private pickerCtrl: PickerController) {}
+
+  async openPicker() {
+    const picker = await this.pickerCtrl.create({
+      columns: [
+        {
+          name: 'meat',
+          options: [
+            {
+              text: 'Pepperoni',
+              value: 'pepperoni',
+            },
+            {
+              text: 'Smoked Ham',
+              value: 'smoked-ham',
+            },
+            {
+              text: 'Crispy Bacon',
+              value: 'bacon',
+            },
+          ],
+        },
+        {
+          name: 'veggies',
+          options: [
+            {
+              text: 'Red onion',
+              value: 'red-onion',
+            },
+            {
+              text: 'Peppers',
+              value: 'peppers',
+            },
+            {
+              text: 'Black olives',
+              value: 'black-olives',
+            },
+          ],
+        },
+        {
+          name: 'crust',
+          options: [
+            {
+              text: 'Pan style',
+              value: 'pan',
+            },
+            {
+              text: 'Hand tossed',
+              value: 'hand-tossed',
+            },
+            {
+              text: 'Stuffed crust',
+              value: 'stuffed-crust',
+            },
+          ],
+        },
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Confirm',
+          handler: (value) => {
+            window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+          },
+        },
+      ],
+    });
+
+    await picker.present();
+  }
+}
+```
diff --git a/static/usage/v7/picker/multiple-column/demo.html b/static/usage/v7/picker/multiple-column/demo.html
new file mode 100644
index 00000000000..50b673172e2
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/demo.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Picker | Multiple Columns</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.pickerController = pickerController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="openPicker()">Open</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    async function openPicker() {
+      const picker = await pickerController.create({
+        columns: [{
+          name: 'meat',
+          options: [
+            {
+              text: 'Pepperoni',
+              value: 'pepperoni'
+            }, {
+              text: 'Smoked Ham',
+              value: 'smoked-ham'
+            }, {
+              text: 'Crispy Bacon',
+              value: 'bacon'
+            }
+          ]
+        }, {
+          name: 'veggies',
+          options: [
+            {
+              text: 'Red onion',
+              value: 'red-onion'
+            }, {
+              text: 'Peppers',
+              value: 'peppers'
+            }, {
+              text: 'Black olives',
+              value: 'black-olives'
+            }
+          ]
+        }, {
+          name: 'crust',
+          options: [
+            {
+              text: 'Pan style',
+              value: 'pan'
+            }, {
+              text: 'Hand tossed',
+              value: 'hand-tossed'
+            }, {
+              text: 'Stuffed crust',
+              value: 'stuffed-crust'
+            }
+          ]
+        }],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel'
+          },
+          {
+            text: 'Confirm',
+            handler: (value) => {
+              window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+            }
+          }
+        ]
+      });
+      await picker.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/picker/multiple-column/index.md b/static/usage/v7/picker/multiple-column/index.md
new file mode 100644
index 00000000000..48a6d1202fa
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/picker/multiple-column/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/picker/multiple-column/javascript.md b/static/usage/v7/picker/multiple-column/javascript.md
new file mode 100644
index 00000000000..5024f90a43f
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/javascript.md
@@ -0,0 +1,76 @@
+```html
+<ion-button onclick="openPicker()">Open</ion-button>
+
+<script>
+  async function openPicker() {
+    const picker = await pickerController.create({
+      columns: [
+        {
+          name: 'meat',
+          options: [
+            {
+              text: 'Pepperoni',
+              value: 'pepperoni',
+            },
+            {
+              text: 'Smoked Ham',
+              value: 'smoked-ham',
+            },
+            {
+              text: 'Crispy Bacon',
+              value: 'bacon',
+            },
+          ],
+        },
+        {
+          name: 'veggies',
+          options: [
+            {
+              text: 'Red onion',
+              value: 'red-onion',
+            },
+            {
+              text: 'Peppers',
+              value: 'peppers',
+            },
+            {
+              text: 'Black olives',
+              value: 'black-olives',
+            },
+          ],
+        },
+        {
+          name: 'crust',
+          options: [
+            {
+              text: 'Pan style',
+              value: 'pan',
+            },
+            {
+              text: 'Hand tossed',
+              value: 'hand-tossed',
+            },
+            {
+              text: 'Stuffed crust',
+              value: 'stuffed-crust',
+            },
+          ],
+        },
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Confirm',
+          handler: (value) => {
+            window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+          },
+        },
+      ],
+    });
+    await picker.present();
+  }
+</script>
+```
diff --git a/static/usage/v7/picker/multiple-column/react.md b/static/usage/v7/picker/multiple-column/react.md
new file mode 100644
index 00000000000..1d0a47e178c
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/react.md
@@ -0,0 +1,82 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonPicker } from '@ionic/react';
+
+function Example() {
+  const [present] = useIonPicker();
+
+  const openPicker = async () => {
+    present({
+      columns: [
+        {
+          name: 'meat',
+          options: [
+            {
+              text: 'Pepperoni',
+              value: 'pepperoni',
+            },
+            {
+              text: 'Smoked Ham',
+              value: 'smoked-ham',
+            },
+            {
+              text: 'Crispy Bacon',
+              value: 'bacon',
+            },
+          ],
+        },
+        {
+          name: 'veggies',
+          options: [
+            {
+              text: 'Red onion',
+              value: 'red-onion',
+            },
+            {
+              text: 'Peppers',
+              value: 'peppers',
+            },
+            {
+              text: 'Black olives',
+              value: 'black-olives',
+            },
+          ],
+        },
+        {
+          name: 'crust',
+          options: [
+            {
+              text: 'Pan style',
+              value: 'pan',
+            },
+            {
+              text: 'Hand tossed',
+              value: 'hand-tossed',
+            },
+            {
+              text: 'Stuffed crust',
+              value: 'stuffed-crust',
+            },
+          ],
+        },
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Confirm',
+          handler: (value) => {
+            window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+          },
+        },
+      ],
+    });
+  };
+
+  return <IonButton onClick={openPicker}>Open</IonButton>;
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/picker/multiple-column/vue.md b/static/usage/v7/picker/multiple-column/vue.md
new file mode 100644
index 00000000000..07418f16bbf
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/vue.md
@@ -0,0 +1,93 @@
+```html
+<template>
+  <ion-button @click="openPicker()">Open</ion-button>
+</template>
+
+<script>
+  import { IonButton, pickerController } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+    data() {
+      return {
+        message: '',
+      };
+    },
+    methods: {
+      async openPicker() {
+        const picker = await pickerController.create({
+          columns: [
+            {
+              name: 'meat',
+              options: [
+                {
+                  text: 'Pepperoni',
+                  value: 'pepperoni',
+                },
+                {
+                  text: 'Smoked Ham',
+                  value: 'smoked-ham',
+                },
+                {
+                  text: 'Crispy Bacon',
+                  value: 'bacon',
+                },
+              ],
+            },
+            {
+              name: 'veggies',
+              options: [
+                {
+                  text: 'Red onion',
+                  value: 'red-onion',
+                },
+                {
+                  text: 'Peppers',
+                  value: 'peppers',
+                },
+                {
+                  text: 'Black olives',
+                  value: 'black-olives',
+                },
+              ],
+            },
+            {
+              name: 'crust',
+              options: [
+                {
+                  text: 'Pan style',
+                  value: 'pan',
+                },
+                {
+                  text: 'Hand tossed',
+                  value: 'hand-tossed',
+                },
+                {
+                  text: 'Stuffed crust',
+                  value: 'stuffed-crust',
+                },
+              ],
+            },
+          ],
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+            },
+            {
+              text: 'Confirm',
+              handler: (value) => {
+                window.alert(
+                  `You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`
+                );
+              },
+            },
+          ],
+        });
+        await picker.present();
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/picker/single-column/angular/example_component_html.md b/static/usage/v7/picker/single-column/angular/example_component_html.md
new file mode 100644
index 00000000000..1e25fa99c40
--- /dev/null
+++ b/static/usage/v7/picker/single-column/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="openPicker()">Open</ion-button>
+```
diff --git a/static/usage/v7/picker/single-column/angular/example_component_ts.md b/static/usage/v7/picker/single-column/angular/example_component_ts.md
new file mode 100644
index 00000000000..849da3f0f16
--- /dev/null
+++ b/static/usage/v7/picker/single-column/angular/example_component_ts.md
@@ -0,0 +1,54 @@
+```ts
+import { Component } from '@angular/core';
+import { PickerController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private pickerCtrl: PickerController) {}
+
+  async openPicker() {
+    const picker = await this.pickerCtrl.create({
+      columns: [
+        {
+          name: 'languages',
+          options: [
+            {
+              text: 'JavaScript',
+              value: 'javascript',
+            },
+            {
+              text: 'TypeScript',
+              value: 'typescript',
+            },
+            {
+              text: 'Rust',
+              value: 'rust',
+            },
+            {
+              text: 'C#',
+              value: 'c#',
+            },
+          ],
+        },
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Confirm',
+          handler: (value) => {
+            window.alert(`You selected: ${value.languages.value}`);
+          },
+        },
+      ],
+    });
+
+    await picker.present();
+  }
+}
+```
diff --git a/static/usage/v7/picker/single-column/demo.html b/static/usage/v7/picker/single-column/demo.html
new file mode 100644
index 00000000000..6f81b1c6e8f
--- /dev/null
+++ b/static/usage/v7/picker/single-column/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Picker | Single Column</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module">
+    import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.pickerController = pickerController;
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="openPicker()">Open</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    async function openPicker() {
+      const picker = await pickerController.create({
+        columns: [{
+          name: 'languages',
+          options: [
+            {
+              text: 'JavaScript',
+              value: 'javascript'
+            }, {
+              text: 'TypeScript',
+              value: 'typescript'
+            }, {
+              text: 'Rust',
+              value: 'rust'
+            }, {
+              text: 'C#',
+              value: 'c#'
+            }
+          ]
+        }],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel'
+          },
+          {
+            text: 'Confirm',
+            handler: (value) => {
+              window.alert(`You selected: ${value.languages.value}`);
+            }
+          }
+        ]
+      });
+      await picker.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/picker/single-column/index.md b/static/usage/v7/picker/single-column/index.md
new file mode 100644
index 00000000000..2632a11802c
--- /dev/null
+++ b/static/usage/v7/picker/single-column/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/picker/single-column/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/picker/single-column/javascript.md b/static/usage/v7/picker/single-column/javascript.md
new file mode 100644
index 00000000000..ca15ad55132
--- /dev/null
+++ b/static/usage/v7/picker/single-column/javascript.md
@@ -0,0 +1,46 @@
+```html
+<ion-button onclick="openPicker()">Open</ion-button>
+
+<script>
+  async function openPicker() {
+    const picker = await pickerController.create({
+      columns: [
+        {
+          name: 'languages',
+          options: [
+            {
+              text: 'JavaScript',
+              value: 'javascript',
+            },
+            {
+              text: 'TypeScript',
+              value: 'typescript',
+            },
+            {
+              text: 'Rust',
+              value: 'rust',
+            },
+            {
+              text: 'C#',
+              value: 'c#',
+            },
+          ],
+        },
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Confirm',
+          handler: (value) => {
+            window.alert(`You selected: ${value.languages.value}`);
+          },
+        },
+      ],
+    });
+    await picker.present();
+  }
+</script>
+```
diff --git a/static/usage/v7/picker/single-column/react.md b/static/usage/v7/picker/single-column/react.md
new file mode 100644
index 00000000000..d0c351a9368
--- /dev/null
+++ b/static/usage/v7/picker/single-column/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonPicker } from '@ionic/react';
+
+function Example() {
+  const [present] = useIonPicker();
+
+  const openPicker = async () => {
+    present({
+      columns: [
+        {
+          name: 'languages',
+          options: [
+            {
+              text: 'JavaScript',
+              value: 'javascript',
+            },
+            {
+              text: 'TypeScript',
+              value: 'typescript',
+            },
+            {
+              text: 'Rust',
+              value: 'rust',
+            },
+            {
+              text: 'C#',
+              value: 'c#',
+            },
+          ],
+        },
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Confirm',
+          handler: (value) => {
+            window.alert(`You selected: ${value.languages.value}`);
+          },
+        },
+      ],
+    });
+  };
+
+  return <IonButton onClick={openPicker}>Open</IonButton>;
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/picker/single-column/vue.md b/static/usage/v7/picker/single-column/vue.md
new file mode 100644
index 00000000000..71660c96aeb
--- /dev/null
+++ b/static/usage/v7/picker/single-column/vue.md
@@ -0,0 +1,61 @@
+```html
+<template>
+  <ion-button @click="openPicker()">Open</ion-button>
+</template>
+
+<script>
+  import { IonButton, pickerController } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+    data() {
+      return {
+        message: '',
+      };
+    },
+    methods: {
+      async openPicker() {
+        const picker = await pickerController.create({
+          columns: [
+            {
+              name: 'languages',
+              options: [
+                {
+                  text: 'JavaScript',
+                  value: 'javascript',
+                },
+                {
+                  text: 'TypeScript',
+                  value: 'typescript',
+                },
+                {
+                  text: 'Rust',
+                  value: 'rust',
+                },
+                {
+                  text: 'C#',
+                  value: 'c#',
+                },
+              ],
+            },
+          ],
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+            },
+            {
+              text: 'Confirm',
+              handler: (value) => {
+                window.alert(`You selected: ${value.languages.value}`);
+              },
+            },
+          ],
+        });
+        await picker.present();
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_css.md b/static/usage/v7/popover/customization/positioning/angular/example_component_css.md
new file mode 100644
index 00000000000..c92d80212a7
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-popover {
+  --width: 80px;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 80px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_html.md b/static/usage/v7/popover/customization/positioning/angular/example_component_html.md
new file mode 100644
index 00000000000..a0036bd9ef9
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/angular/example_component_html.md
@@ -0,0 +1,31 @@
+```html
+<div class="container">
+  <ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
+  <ion-popover trigger="top-center" side="top" alignment="center">
+    <ng-template>
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ng-template>
+  </ion-popover>
+
+  <ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
+  <ion-popover trigger="bottom-start" side="bottom" alignment="start">
+    <ng-template>
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ng-template>
+  </ion-popover>
+
+  <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
+  <ion-popover trigger="left-start" side="left" alignment="start">
+    <ng-template>  
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ng-template>
+  </ion-popover>
+
+  <ion-button id="right-end">Side=Right, Alignment=End</ion-button>
+  <ion-popover trigger="right-end" side="right" alignment="end">
+    <ng-template>
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ng-template>
+  </ion-popover>
+</div>
+```
diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md
new file mode 100644
index 00000000000..4db53a836a9
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/customization/positioning/demo.html b/static/usage/v7/popover/customization/positioning/demo.html
new file mode 100644
index 00000000000..71a74fb45e9
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/demo.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    ion-popover {
+      --width: 80px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
+        <ion-popover trigger="top-center" side="top" alignment="center">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
+        <ion-popover trigger="bottom-start" side="bottom" alignment="start">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
+        <ion-popover trigger="left-start" side="left" alignment="start">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="right-end">Side=Right, Alignment=End</ion-button>
+        <ion-popover trigger="right-end" side="right" alignment="end">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/positioning/index.md b/static/usage/v7/popover/customization/positioning/index.md
new file mode 100644
index 00000000000..b39363d2a7f
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="400px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/popover/customization/positioning/demo.html"
+/>
diff --git a/static/usage/v7/popover/customization/positioning/javascript.md b/static/usage/v7/popover/customization/positioning/javascript.md
new file mode 100644
index 00000000000..28ef3451cac
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/javascript.md
@@ -0,0 +1,36 @@
+```html
+<div class="container">
+  <ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
+  <ion-popover trigger="top-center" side="top" alignment="center">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+
+  <ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
+  <ion-popover trigger="bottom-start" side="bottom" alignment="start">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+
+  <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
+  <ion-popover trigger="left-start" side="left" alignment="start">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+
+  <ion-button id="right-end">Side=Right, Alignment=End</ion-button>
+  <ion-popover trigger="right-end" side="right" alignment="end">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+</div>
+
+<style>
+  ion-popover {
+    --width: 80px;
+  }
+
+  .container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    padding: 80px;
+  }
+</style>
+```
diff --git a/static/usage/v7/popover/customization/positioning/react/main_css.md b/static/usage/v7/popover/customization/positioning/react/main_css.md
new file mode 100644
index 00000000000..c92d80212a7
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+ion-popover {
+  --width: 80px;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 80px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/positioning/react/main_tsx.md b/static/usage/v7/popover/customization/positioning/react/main_tsx.md
new file mode 100644
index 00000000000..54235b0f593
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/react/main_tsx.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <div className="container">
+      <IonButton id="top-center">Side=Top, Alignment=Center</IonButton>
+      <IonPopover trigger="top-center" side="top" alignment="center">
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+
+      <IonButton id="bottom-start">Side=Bottom, Alignment=Start</IonButton>
+      <IonPopover trigger="bottom-start" side="bottom" alignment="start">
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+
+      <IonButton id="left-start">Side=Left, Alignment=Start</IonButton>
+      <IonPopover trigger="left-start" side="left" alignment="start">
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+
+      <IonButton id="right-end">Side=Right, Alignment=End</IonButton>
+      <IonPopover trigger="right-end" side="right" alignment="end">
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+    </div>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/customization/positioning/vue.md b/static/usage/v7/popover/customization/positioning/vue.md
new file mode 100644
index 00000000000..b658de342a4
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/vue.md
@@ -0,0 +1,47 @@
+```html
+<template>
+  <div class="container">
+    <ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
+    <ion-popover trigger="top-center" side="top" alignment="center">
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ion-popover>
+
+    <ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
+    <ion-popover trigger="bottom-start" side="bottom" alignment="start">
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ion-popover>
+
+    <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
+    <ion-popover trigger="left-start" side="left" alignment="start">
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ion-popover>
+
+    <ion-button id="right-end">Side=Right, Alignment=End</ion-button>
+    <ion-popover trigger="right-end" side="right" alignment="end">
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ion-popover>
+  </div>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonPopover } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent, IonPopover },
+  });
+</script>
+
+<style>
+  ion-popover {
+    --width: 80px;
+  }
+
+  .container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    padding: 80px;
+  }
+</style>
+```
diff --git a/static/usage/v7/popover/customization/sizing/angular.md b/static/usage/v7/popover/customization/sizing/angular.md
new file mode 100644
index 00000000000..ca06883d451
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/angular.md
@@ -0,0 +1,15 @@
+```html
+<ion-button id="auto-trigger">Size=Auto</ion-button>
+<ion-popover trigger="auto-trigger" size="auto">
+  <ng-template>
+    <ion-content class="ion-padding">Hello!</ion-content>
+  </ng-template>
+</ion-popover>
+
+<ion-button id="cover-trigger">Size=Cover</ion-button>
+<ion-popover trigger="cover-trigger" size="cover">
+  <ng-template>
+    <ion-content class="ion-padding">Hello!</ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/customization/sizing/demo.html b/static/usage/v7/popover/customization/sizing/demo.html
new file mode 100644
index 00000000000..b85d71034f8
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="auto-trigger">Size=Auto</ion-button>
+        <ion-popover trigger="auto-trigger" size="auto">
+          <ion-content class="ion-padding">Hello!</ion-content>
+        </ion-popover>
+
+        <ion-button id="cover-trigger">Size=Cover</ion-button>
+        <ion-popover trigger="cover-trigger" size="cover">
+          <ion-content class="ion-padding">Hello!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/sizing/index.md b/static/usage/v7/popover/customization/sizing/index.md
new file mode 100644
index 00000000000..3eb127648dc
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/popover/customization/sizing/demo.html"
+/>
diff --git a/static/usage/v7/popover/customization/sizing/javascript.md b/static/usage/v7/popover/customization/sizing/javascript.md
new file mode 100644
index 00000000000..3b25241cd51
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-button id="auto-trigger">Size=Auto</ion-button>
+<ion-popover trigger="auto-trigger" size="auto">
+  <ion-content class="ion-padding">Hello!</ion-content>
+</ion-popover>
+
+<ion-button id="cover-trigger">Size=Cover</ion-button>
+<ion-popover trigger="cover-trigger" size="cover">
+  <ion-content class="ion-padding">Hello!</ion-content>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/customization/sizing/react.md b/static/usage/v7/popover/customization/sizing/react.md
new file mode 100644
index 00000000000..35b60534df6
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonButton id="auto-trigger">Size=Auto</IonButton>
+      <IonPopover trigger="auto-trigger" size="auto">
+        <IonContent class="ion-padding">Hello!</IonContent>
+      </IonPopover>
+
+      <IonButton id="cover-trigger">Size=Cover</IonButton>
+      <IonPopover trigger="cover-trigger" size="cover">
+        <IonContent class="ion-padding">Hello!</IonContent>
+      </IonPopover>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/customization/sizing/vue.md b/static/usage/v7/popover/customization/sizing/vue.md
new file mode 100644
index 00000000000..72d20c9fa77
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-button id="auto-trigger">Size=Auto</ion-button>
+  <ion-popover trigger="auto-trigger" size="auto">
+    <ion-content class="ion-padding">Hello!</ion-content>
+  </ion-popover>
+
+  <ion-button id="cover-trigger">Size=Cover</ion-button>
+  <ion-popover trigger="cover-trigger" size="cover">
+    <ion-content class="ion-padding">Hello!</ion-content>
+  </ion-popover>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonPopover } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonPopover },
+  });
+</script>
+```
diff --git a/static/usage/v7/popover/customization/styling/angular/example_component_html.md b/static/usage/v7/popover/customization/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..03df30e973a
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+<ion-button id="trigger-button">Click Me</ion-button>
+<ion-popover trigger="trigger-button">
+  <ng-template>
+    <ion-content class="ion-padding">Hello Styled World!</ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/customization/styling/angular/global_css.md b/static/usage/v7/popover/customization/styling/angular/global_css.md
new file mode 100644
index 00000000000..25890b90538
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/angular/global_css.md
@@ -0,0 +1,17 @@
+```css
+ion-popover {
+  --background: rgba(40, 173, 218, 0.6);
+  --backdrop-opacity: 0.6;
+  --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
+  --color: white;
+  --width: 300px;
+}
+
+ion-popover ion-content {
+  --background: rgba(40, 173, 218, 0.6);
+}
+
+ion-popover::part(backdrop) {
+  background-color: rgb(6, 14, 106);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/styling/demo.html b/static/usage/v7/popover/customization/styling/demo.html
new file mode 100644
index 00000000000..6d858b14659
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/demo.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-popover {
+      --background: rgba(40, 173, 218, 0.6);
+      --backdrop-opacity: 0.6;
+      --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
+      --color: white;
+      --width: 300px;
+    }
+
+    ion-popover ion-content {
+      --background: rgba(40, 173, 218, 0.6);
+    }
+
+    ion-popover::part(backdrop) {
+      background-color: rgb(6, 14, 106);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="trigger-button">Click Me</ion-button>
+        <ion-popover trigger="trigger-button">
+          <ion-content class="ion-padding">Hello Styled World!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/styling/index.md b/static/usage/v7/popover/customization/styling/index.md
new file mode 100644
index 00000000000..658ef72d45a
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v7/popover/customization/styling/demo.html"
+/>
diff --git a/static/usage/v7/popover/customization/styling/javascript.md b/static/usage/v7/popover/customization/styling/javascript.md
new file mode 100644
index 00000000000..2666638cc1e
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/javascript.md
@@ -0,0 +1,24 @@
+```html
+<ion-button id="trigger-button">Click Me</ion-button>
+<ion-popover trigger="trigger-button">
+  <ion-content class="ion-padding">Hello Styled World!</ion-content>
+</ion-popover>
+
+<style>
+  ion-popover {
+    --background: rgba(40, 173, 218, 0.6);
+    --backdrop-opacity: 0.6;
+    --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
+    --color: white;
+    --width: 300px;
+  }
+
+  ion-popover ion-content {
+    --background: rgba(40, 173, 218, 0.6);
+  }
+
+  ion-popover::part(backdrop) {
+    background-color: rgb(6, 14, 106);
+  }
+</style>
+```
diff --git a/static/usage/v7/popover/customization/styling/react/main_css.md b/static/usage/v7/popover/customization/styling/react/main_css.md
new file mode 100644
index 00000000000..25890b90538
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+ion-popover {
+  --background: rgba(40, 173, 218, 0.6);
+  --backdrop-opacity: 0.6;
+  --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
+  --color: white;
+  --width: 300px;
+}
+
+ion-popover ion-content {
+  --background: rgba(40, 173, 218, 0.6);
+}
+
+ion-popover::part(backdrop) {
+  background-color: rgb(6, 14, 106);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/styling/react/main_tsx.md b/static/usage/v7/popover/customization/styling/react/main_tsx.md
new file mode 100644
index 00000000000..1a905f8056d
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonButton id="trigger-button">Click Me</IonButton>
+      <IonPopover trigger="trigger-button">
+        <IonContent className="ion-padding">Hello Styled World!</IonContent>
+      </IonPopover>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/customization/styling/vue.md b/static/usage/v7/popover/customization/styling/vue.md
new file mode 100644
index 00000000000..964eeb09bfc
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/vue.md
@@ -0,0 +1,35 @@
+```html
+<template>
+  <ion-button id="trigger-button">Click Me</ion-button>
+  <ion-popover trigger="trigger-button">
+    <ion-content>Hello Styled World!</ion-content>
+  </ion-popover>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonPopover } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonPopover },
+  });
+</script>
+
+<style>
+  ion-popover {
+    --background: rgba(40, 173, 218, 0.6);
+    --backdrop-opacity: 0.6;
+    --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
+    --color: white;
+    --width: 300px;
+  }
+
+  ion-popover ion-content {
+    --background: rgba(40, 173, 218, 0.6);
+  }
+
+  ion-popover::part(backdrop) {
+    background-color: rgb(6, 14, 106);
+  }
+</style>
+```
diff --git a/static/usage/v7/popover/nested/angular.md b/static/usage/v7/popover/nested/angular.md
new file mode 100644
index 00000000000..cdbe68f341f
--- /dev/null
+++ b/static/usage/v7/popover/nested/angular.md
@@ -0,0 +1,24 @@
+```html
+<ion-button id="popover-button">Open Menu</ion-button>
+<ion-popover trigger="popover-button" [dismissOnSelect]="true">
+  <ng-template>
+    <ion-content>
+      <ion-list>
+        <ion-item [button]="true" [detail]="false">Option 1</ion-item>
+        <ion-item [button]="true" [detail]="false">Option 2</ion-item>
+        <ion-item [button]="true" id="nested-trigger">More options...</ion-item>
+
+        <ion-popover trigger="nested-trigger" [dismissOnSelect]="true" side="end">
+          <ng-template>
+            <ion-content>
+              <ion-list>
+                <ion-item [button]="true" [detail]="false">Nested option</ion-item>
+              </ion-list>
+            </ion-content>
+          </ng-template>
+        </ion-popover>
+      </ion-list>
+    </ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/nested/demo.html b/static/usage/v7/popover/nested/demo.html
new file mode 100644
index 00000000000..ab52c1d5540
--- /dev/null
+++ b/static/usage/v7/popover/nested/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="popover-button">Open Menu</ion-button>
+        <ion-popover trigger="popover-button" dismiss-on-select="true">
+          <ion-content>
+            <ion-list>
+              <ion-item button="true" detail="false">Option 1</ion-item>
+              <ion-item button="true" detail="false">Option 2</ion-item>
+              <ion-item button="true" id="nested-trigger">More options...</ion-item>
+
+              <ion-popover trigger="nested-trigger" dismiss-on-select="true" side="end">
+                <ion-content>
+                  <ion-list>
+                    <ion-item button="true" detail="false">Nested option</ion-item>
+                  </ion-list>
+                </ion-content>
+              </ion-popover>
+            </ion-list>
+          </ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/popover/nested/index.md b/static/usage/v7/popover/nested/index.md
new file mode 100644
index 00000000000..cb8a824edb0
--- /dev/null
+++ b/static/usage/v7/popover/nested/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/popover/nested/demo.html"
+/>
diff --git a/static/usage/v7/popover/nested/javascript.md b/static/usage/v7/popover/nested/javascript.md
new file mode 100644
index 00000000000..6f3848538f5
--- /dev/null
+++ b/static/usage/v7/popover/nested/javascript.md
@@ -0,0 +1,20 @@
+```html
+<ion-button id="popover-button">Open Menu</ion-button>
+<ion-popover trigger="popover-button" dismiss-on-select="true">
+  <ion-content>
+    <ion-list>
+      <ion-item button="true" detail="false">Option 1</ion-item>
+      <ion-item button="true" detail="false">Option 2</ion-item>
+      <ion-item button="true" id="nested-trigger">More options...</ion-item>
+
+      <ion-popover trigger="nested-trigger" dismiss-on-select="true" side="end">
+        <ion-content>
+          <ion-list>
+            <ion-item button="true" detail="false">Nested option</ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-popover>
+    </ion-list>
+  </ion-content>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/nested/react.md b/static/usage/v7/popover/nested/react.md
new file mode 100644
index 00000000000..eb84d67effb
--- /dev/null
+++ b/static/usage/v7/popover/nested/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonButton id="popover-button">Open Menu</IonButton>
+      <IonPopover trigger="popover-button" dismissOnSelect={true}>
+        <IonContent>
+          <IonList>
+            <IonItem button={true} detail={false}>
+              Option 1
+            </IonItem>
+            <IonItem button={true} detail={false}>
+              Option 2
+            </IonItem>
+            <IonItem button={true} id="nested-trigger">
+              More options...
+            </IonItem>
+
+            <IonPopover trigger="nested-trigger" dismissOnSelect={true} side="end">
+              <IonContent>
+                <IonList>
+                  <IonItem button={true} detail={false}>
+                    Nested option
+                  </IonItem>
+                </IonList>
+              </IonContent>
+            </IonPopover>
+          </IonList>
+        </IonContent>
+      </IonPopover>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/nested/vue.md b/static/usage/v7/popover/nested/vue.md
new file mode 100644
index 00000000000..04a7b6d7e36
--- /dev/null
+++ b/static/usage/v7/popover/nested/vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-button id="popover-button">Open Menu</ion-button>
+  <ion-popover trigger="popover-button" :dismiss-on-select="true">
+    <ion-content>
+      <ion-list>
+        <ion-item :button="true" :detail="false">Option 1</ion-item>
+        <ion-item :button="true" :detail="false">Option 2</ion-item>
+        <ion-item :button="true" id="nested-trigger">More options...</ion-item>
+
+        <ion-popover trigger="nested-trigger" :dismiss-on-select="true" side="end">
+          <ion-content>
+            <ion-list>
+              <ion-item :button="true" :detail="false">Nested option</ion-item>
+            </ion-list>
+          </ion-content>
+        </ion-popover>
+      </ion-list>
+    </ion-content>
+  </ion-popover>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonItem, IonList, IonPopover } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonItem, IonList, IonPopover },
+  });
+</script>
+```
diff --git a/static/usage/v7/popover/performance/mount/angular.md b/static/usage/v7/popover/performance/mount/angular.md
new file mode 100644
index 00000000000..b8a696ab948
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-button id="open-popover">Open Popover</ion-button>
+<ion-popover [keepContentsMounted]="true" trigger="open-popover">
+  <ng-template>
+    <ion-content class="ion-padding">This content was mounted as soon as the popover was created.</ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/performance/mount/demo.html b/static/usage/v7/popover/performance/mount/demo.html
new file mode 100644
index 00000000000..053883d5e75
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="open-popover">Open Popover</ion-button>
+        <ion-popover keep-contents-mounted="true" trigger="open-popover">
+          <ion-content class="ion-padding">This content was mounted as soon as the popover was created.</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/popover/performance/mount/index.md b/static/usage/v7/popover/performance/mount/index.md
new file mode 100644
index 00000000000..9c846cc784b
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/index.md
@@ -0,0 +1,18 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  size="medium"
+  src="usage/v7/popover/performance/mount/demo.html"
+/>
diff --git a/static/usage/v7/popover/performance/mount/javascript.md b/static/usage/v7/popover/performance/mount/javascript.md
new file mode 100644
index 00000000000..5dd5f8a624e
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-button id="open-popover">Open Popover</ion-button>
+<ion-popover keep-contents-mounted="true" trigger="open-popover">
+  <ion-content class="ion-padding">This content was mounted as soon as the popover was created.</ion-content>
+</ion-popover>
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/performance/mount/react.md b/static/usage/v7/popover/performance/mount/react.md
new file mode 100644
index 00000000000..24e7230d966
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+function Example() {
+  return (
+    <IonContent>
+      <IonButton id="open-popover">Open Popover</IonButton>
+      <IonPopover keepContentsMounted={true} trigger="open-popover">
+        <IonContent class="ion-padding">This content was mounted as soon as the popover was created.</IonContent>
+      </IonPopover>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/performance/mount/vue.md b/static/usage/v7/popover/performance/mount/vue.md
new file mode 100644
index 00000000000..bc54f345bfe
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-content>
+    <ion-button id="open-popover">Open Popover</ion-button>
+    <ion-popover :keep-contents-mounted="true" trigger="open-popover">
+      <ion-content class="ion-padding">This content was mounted as soon as the popover was created.</ion-content>
+    </ion-popover>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonPopover } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent, IonPopover },
+  });
+</script>
+```
diff --git a/static/usage/v7/popover/presenting/controller/angular/app_module_ts.md b/static/usage/v7/popover/presenting/controller/angular/app_module_ts.md
new file mode 100644
index 00000000000..887ca3acf89
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/angular/app_module_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PopoverComponent } from './popover.component';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent, PopoverComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_html.md b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..da857f78745
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-button (click)="presentPopover($event)">Click Me</ion-button>
+<p>{{ roleMsg }}</p>
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..bf0e0165d78
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+import { PopoverController } from '@ionic/angular';
+
+import { PopoverComponent } from './popover.component';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  roleMsg = '';
+
+  constructor(public popoverController: PopoverController) {}
+
+  async presentPopover(e: Event) {
+    const popover = await this.popoverController.create({
+      component: PopoverComponent,
+      event: e,
+    });
+
+    await popover.present();
+
+    const { role } = await popover.onDidDismiss();
+    this.roleMsg = `Popover dismissed with role: ${role}`;
+  }
+}
+```
diff --git a/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md
new file mode 100644
index 00000000000..74cbf83fec4
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-content class="ion-padding">Hello World!</ion-content>
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md
new file mode 100644
index 00000000000..2900a32240c
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+import { PopoverController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-popover',
+  templateUrl: 'popover.component.html',
+})
+export class PopoverComponent {}
+```
diff --git a/static/usage/v7/popover/presenting/controller/demo.html b/static/usage/v7/popover/presenting/controller/demo.html
new file mode 100644
index 00000000000..0a235d3c41d
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/demo.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Click Me</ion-button>
+        <p></p>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const output = document.querySelector('p');
+
+    class PopoverPage extends HTMLElement {
+      constructor() {
+        super();
+      }
+
+      connectedCallback() {
+        this.innerHTML = `<ion-content class="ion-padding">Hello World!</ion-content>`;
+      }
+    }
+
+    customElements.define('popover-page', PopoverPage);
+
+    async function presentPopover(e) {
+      const popover = Object.assign(document.createElement('ion-popover'), {
+        component: 'popover-page',
+        event: e
+      });
+
+      document.body.appendChild(popover);
+      await popover.present();
+
+      const { role } = await popover.onDidDismiss();
+      output.innerText = `Popover dismissed with role: ${role}`;
+    }
+
+    const button = document.querySelector('ion-button');
+    button.addEventListener('click', presentPopover);
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/controller/index.md b/static/usage/v7/popover/presenting/controller/index.md
new file mode 100644
index 00000000000..65764b052ff
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/index.md
@@ -0,0 +1,38 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_popover from './vue/popover_vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_popover_component_html from './angular/popover_component_html.md';
+import angular_popover_component_ts from './angular/popover_component_ts.md';
+import angular_app_module from './angular/app_module_ts.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/Popover.vue': vue_popover,
+      },
+    },
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/popover.component.html': angular_popover_component_html,
+        'src/app/popover.component.ts': angular_popover_component_ts,
+        'src/app/app.module.ts': angular_app_module,
+      },
+    },
+  }}
+  src="usage/v7/popover/presenting/controller/demo.html"
+/>
diff --git a/static/usage/v7/popover/presenting/controller/javascript.md b/static/usage/v7/popover/presenting/controller/javascript.md
new file mode 100644
index 00000000000..896772b276b
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/javascript.md
@@ -0,0 +1,36 @@
+```html
+<ion-button>Click Me</ion-button>
+<p></p>
+
+<script>
+  const output = document.querySelector('p');
+
+  class PopoverPage extends HTMLElement {
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+      this.innerHTML = `<ion-content class="ion-padding">Hello World!</ion-content>`;
+    }
+  }
+
+  customElements.define('popover-page', PopoverPage);
+
+  async function presentPopover(e) {
+    const popover = Object.assign(document.createElement('ion-popover'), {
+      component: 'popover-page',
+      event: e
+    });
+
+    document.body.appendChild(popover);
+    await popover.present();
+
+    const { role } = await popover.onDidDismiss();
+    output.innerText = `Popover dismissed with role: ${role}`;
+  }
+
+  const button = document.querySelector('ion-button');
+  button.addEventListener('click', presentPopover);
+</script>
+```
diff --git a/static/usage/v7/popover/presenting/controller/react.md b/static/usage/v7/popover/presenting/controller/react.md
new file mode 100644
index 00000000000..8d772ca8ef6
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonContent, useIonPopover } from '@ionic/react';
+
+const Popover = () => <IonContent className="ion-padding">Hello World!</IonContent>;
+
+function Example() {
+  const [present, dismiss] = useIonPopover(Popover, {
+    onDismiss: (data: any, role: string) => dismiss(data, role),
+  });
+  const [roleMsg, setRoleMsg] = useState('');
+
+  return (
+    <>
+      <IonButton
+        onClick={(e: any) =>
+          present({
+            event: e,
+            onDidDismiss: (e: CustomEvent) => setRoleMsg(`Popover dismissed with role: ${e.detail.role}`),
+          })
+        }
+      >
+        Click Me
+      </IonButton>
+      <p>{roleMsg}</p>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/presenting/controller/vue/example_vue.md b/static/usage/v7/popover/presenting/controller/vue/example_vue.md
new file mode 100644
index 00000000000..36e0e51d3d8
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/vue/example_vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <ion-button @click="openPopover">Click Me</ion-button>
+  <p>{{ roleMsg }}</p>
+</template>
+
+<script lang="ts">
+  import { IonButton, popoverController } from '@ionic/vue';
+  import Popover from './Popover.vue';
+
+  export default {
+    components: { IonButton },
+    data() {
+      return {
+        roleMsg: '',
+      };
+    },
+    methods: {
+      async openPopover(ev: Event) {
+        const popover = await popoverController.create({
+          component: Popover,
+          event: ev,
+        });
+        await popover.present();
+
+        const { role } = await popover.onDidDismiss();
+        this.roleMsg = `Popover dismissed with role: ${role}`;
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
new file mode 100644
index 00000000000..1bc5738c6ad
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
@@ -0,0 +1,15 @@
+```html
+<template>
+  <ion-content class="ion-padding">Hello World!</ion-content>
+</template>
+
+<script lang="ts">
+import { IonContent } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'Popover',
+  components: { IonContent }
+});
+</script>
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md
new file mode 100644
index 00000000000..80201dba3d2
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+<ion-button (click)="presentPopover($event)">Click Me</ion-button>
+<ion-popover #popover [isOpen]="isOpen" (didDismiss)="isOpen = false">
+  <ng-template>
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ng-template>
+</ion-popover>
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
new file mode 100644
index 00000000000..ef604e603d9
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild('popover') popover;
+
+  isOpen = false;
+
+  presentPopover(e: Event) {
+    this.popover.event = e;
+    this.isOpen = true;
+  }
+}
+```
diff --git a/static/usage/v7/popover/presenting/inline-isopen/demo.html b/static/usage/v7/popover/presenting/inline-isopen/demo.html
new file mode 100644
index 00000000000..4180760c005
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button>Click Me</ion-button>
+        <ion-popover>
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const button = document.querySelector('ion-button');
+    const popover = document.querySelector('ion-popover');
+
+    button.addEventListener('click', e => {
+      popover.event = e;
+      popover.isOpen = true;
+    });
+
+    popover.addEventListener('didDismiss', () => popover.isOpen = false);
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/inline-isopen/index.md b/static/usage/v7/popover/presenting/inline-isopen/index.md
new file mode 100644
index 00000000000..b03937849fb
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/popover/presenting/inline-isopen/demo.html"
+/>
diff --git a/static/usage/v7/popover/presenting/inline-isopen/javascript.md b/static/usage/v7/popover/presenting/inline-isopen/javascript.md
new file mode 100644
index 00000000000..b780125ba1e
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-button>Click Me</ion-button>
+<ion-popover>
+  <ion-content class="ion-padding">Hello World!</ion-content>
+</ion-popover>
+
+<script>
+  const button = document.querySelector('ion-button');
+  const popover = document.querySelector('ion-popover');
+
+  button.addEventListener('click', e => {
+    popover.event = e;
+    popover.isOpen = true;
+  });
+
+  popover.addEventListener('didDismiss', () => popover.isOpen = false);
+</script>
+```
diff --git a/static/usage/v7/popover/presenting/inline-isopen/react.md b/static/usage/v7/popover/presenting/inline-isopen/react.md
new file mode 100644
index 00000000000..1d0b68fd1f5
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+function Example() {
+  const popover = useRef<HTMLIonPopoverElement>(null);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  const openPopover = (e: any) => {
+    popover.current!.event = e;
+    setPopoverOpen(true);
+  };
+
+  return (
+    <>
+      <IonButton onClick={openPopover}>Click Me</IonButton>
+      <IonPopover ref={popover} isOpen={popoverOpen} onDidDismiss={() => setPopoverOpen(false)}>
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/presenting/inline-isopen/vue.md b/static/usage/v7/popover/presenting/inline-isopen/vue.md
new file mode 100644
index 00000000000..fbbaf065a17
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/vue.md
@@ -0,0 +1,29 @@
+```html
+<template>
+  <ion-button @click="openPopover($event)">Click Me</ion-button>
+  <ion-popover :is-open="popoverOpen" :event="event" @didDismiss="popoverOpen = false">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonPopover } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent, IonPopover },
+    data() {
+      return {
+        popoverOpen: false,
+        event: null,
+      };
+    },
+    methods: {
+      openPopover(e: Event) {
+        this.event = e;
+        this.popoverOpen = true;
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/angular.md b/static/usage/v7/popover/presenting/inline-trigger/angular.md
new file mode 100644
index 00000000000..de7f6d02a6f
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/angular.md
@@ -0,0 +1,22 @@
+```html
+<ion-button id="click-trigger">Left-Click Me</ion-button>
+<ion-popover trigger="click-trigger" triggerAction="click">
+  <ng-template>
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ng-template>
+</ion-popover>
+
+<ion-button id="context-menu-trigger">Right-Click Me</ion-button>
+<ion-popover trigger="context-menu-trigger" triggerAction="context-menu">
+  <ng-template>
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ng-template>
+</ion-popover>
+
+<ion-button id="hover-trigger">Hover Over Me</ion-button>
+<ion-popover trigger="hover-trigger" triggerAction="hover">
+  <ng-template>
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/demo.html b/static/usage/v7/popover/presenting/inline-trigger/demo.html
new file mode 100644
index 00000000000..d1b2020e454
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="click-trigger">Left-Click Me</ion-button>
+        <ion-popover trigger="click-trigger" trigger-action="click">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="context-menu-trigger">Right-Click Me</ion-button>
+        <ion-popover trigger="context-menu-trigger" trigger-action="context-menu">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="hover-trigger">Hover Over Me</ion-button>
+        <ion-popover trigger="hover-trigger" trigger-action="hover">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/inline-trigger/index.md b/static/usage/v7/popover/presenting/inline-trigger/index.md
new file mode 100644
index 00000000000..ac99108a561
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/popover/presenting/inline-trigger/demo.html"
+/>
diff --git a/static/usage/v7/popover/presenting/inline-trigger/javascript.md b/static/usage/v7/popover/presenting/inline-trigger/javascript.md
new file mode 100644
index 00000000000..7f4559391e2
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/javascript.md
@@ -0,0 +1,16 @@
+```html
+<ion-button id="click-trigger">Left-Click Me</ion-button>
+<ion-popover trigger="click-trigger" trigger-action="click">
+  <ion-content class="ion-padding">Hello World!</ion-content>
+</ion-popover>
+
+<ion-button id="context-menu-trigger">Right-Click Me</ion-button>
+<ion-popover trigger="context-menu-trigger" trigger-action="context-menu">
+  <ion-content class="ion-padding">Hello World!</ion-content>
+</ion-popover>
+
+<ion-button id="hover-trigger">Hover Over Me</ion-button>
+<ion-popover trigger="hover-trigger" trigger-action="hover">
+  <ion-content class="ion-padding">Hello World!</ion-content>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/react.md b/static/usage/v7/popover/presenting/inline-trigger/react.md
new file mode 100644
index 00000000000..93ba97cbd7c
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonButton id="click-trigger">Left-Click Me</IonButton>
+      <IonPopover trigger="click-trigger" triggerAction="click">
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+
+      <IonButton id="context-menu-trigger">Right-Click Me</IonButton>
+      <IonPopover trigger="context-menu-trigger" triggerAction="context-menu">
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+
+      <IonButton id="hover-trigger">Hover Over Me</IonButton>
+      <IonPopover trigger="hover-trigger" triggerAction="hover">
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/vue.md b/static/usage/v7/popover/presenting/inline-trigger/vue.md
new file mode 100644
index 00000000000..07f1f68a62f
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-button id="click-trigger">Left-Click Me</ion-button>
+  <ion-popover trigger="click-trigger" trigger-action="click">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+
+  <ion-button id="context-menu-trigger">Right-Click Me</ion-button>
+  <ion-popover trigger="context-menu-trigger" trigger-action="context-menu">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+
+  <ion-button id="hover-trigger">Hover Over Me</ion-button>
+  <ion-popover trigger="hover-trigger" trigger-action="hover">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonPopover } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent, IonPopover },
+  });
+</script>
+```
diff --git a/static/usage/v7/progress-bar/buffer/angular/example_component_html.md b/static/usage/v7/progress-bar/buffer/angular/example_component_html.md
new file mode 100644
index 00000000000..55dfda33a34
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-progress-bar [buffer]="buffer" [value]="progress"></ion-progress-bar>
+```
diff --git a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md
new file mode 100644
index 00000000000..56e3d3a3b09
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css']
+})
+export class ExampleComponent {
+  public buffer = 0.06;
+  public progress = 0;
+
+  constructor() {
+    setInterval(() => {
+      this.buffer += 0.06;
+      this.progress += 0.06;
+
+      // Reset the progress bar when it reaches 100%
+      // to continuously show the demo
+      if (this.progress > 1) {
+        setTimeout(() => {
+          this.buffer = 0.06;
+          this.progress = 0;
+        }, 1000);
+      }
+    }, 1000);
+  }
+}
+```
diff --git a/static/usage/v7/progress-bar/buffer/demo.html b/static/usage/v7/progress-bar/buffer/demo.html
new file mode 100644
index 00000000000..023c907ed39
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/demo.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+<script>
+  let buffer = 0.06;
+  let progress = 0;
+
+  let progressBar = document.querySelector('ion-progress-bar');
+  progressBar.buffer = buffer;
+
+  setInterval(() => {
+    progressBar.buffer = buffer += 0.06;
+    progressBar.value = progress += 0.06;
+
+    // Reset the progress bar when it reaches 100%
+    // to continuously show the demo
+    if (progress > 1) {
+      setTimeout(() => {
+        progressBar.buffer = buffer = 0.06;
+        progressBar.value = progress = 0;
+      }, 1000);
+    }
+  }, 1000);
+</script>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/buffer/index.md b/static/usage/v7/progress-bar/buffer/index.md
new file mode 100644
index 00000000000..2108ac9ed43
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/progress-bar/buffer/demo.html"
+/>
diff --git a/static/usage/v7/progress-bar/buffer/javascript.md b/static/usage/v7/progress-bar/buffer/javascript.md
new file mode 100644
index 00000000000..0938fb5fca1
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/javascript.md
@@ -0,0 +1,25 @@
+```html
+<ion-progress-bar></ion-progress-bar>
+
+<script>
+  let buffer = 0.06;
+  let progress = 0;
+
+  let progressBar = document.querySelector('ion-progress-bar');
+  progressBar.buffer = buffer;
+
+  setInterval(() => {
+    progressBar.buffer = buffer += 0.06;
+    progressBar.value = progress += 0.06;
+
+    // Reset the progress bar when it reaches 100%
+    // to continuously show the demo
+    if (progress > 1) {
+      setTimeout(() => {
+        progressBar.buffer = buffer = 0.06;
+        progressBar.value = progress = 0;
+      }, 1000);
+    }
+  }, 1000);
+</script>
+```
diff --git a/static/usage/v7/progress-bar/buffer/react.md b/static/usage/v7/progress-bar/buffer/react.md
new file mode 100644
index 00000000000..1fa8208ac3a
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+  const [buffer, setBuffer] = useState(0.06);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setBuffer((prevBuffer) => prevBuffer + 0.06);
+      setProgress((prevProgress) => prevProgress + 0.06);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  if (progress > 1) {
+    setTimeout(() => {
+      setBuffer(0.06);
+      setProgress(0);
+    }, 1000);
+  }
+
+  return (
+    <IonProgressBar buffer={buffer} value={progress}></IonProgressBar>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/buffer/vue.md b/static/usage/v7/progress-bar/buffer/vue.md
new file mode 100644
index 00000000000..3edc59bdf6f
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/vue.md
@@ -0,0 +1,38 @@
+```html
+<template>
+  <ion-progress-bar :buffer="buffer" :value="progress"></ion-progress-bar>
+</template>
+
+<script lang="ts">
+  import { IonProgressBar } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonProgressBar },
+    setup() {
+      let buffer = ref(0.06);
+      let progress = ref(0);
+
+      return {
+        buffer,
+        progress
+      };
+    },
+    mounted() {
+      setInterval(() => {
+        this.buffer += 0.06;
+        this.progress += 0.06;
+
+        // Reset the progress bar when it reaches 100%
+        // to continuously show the demo
+        if (this.progress > 1) {
+          setTimeout(() => {
+            this.buffer = 0.06;
+            this.progress = 0;
+          }, 1000);
+        }
+      }, 1000);
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/progress-bar/determinate/angular/example_component_html.md b/static/usage/v7/progress-bar/determinate/angular/example_component_html.md
new file mode 100644
index 00000000000..95969f5d197
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-progress-bar [value]="progress"></ion-progress-bar>
+```
diff --git a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md
new file mode 100644
index 00000000000..d8f8b690fc9
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css']
+})
+export class ExampleComponent {
+  public progress = 0;
+
+  constructor() {
+    setInterval(() => {
+      this.progress += 0.01;
+
+      // Reset the progress bar when it reaches 100%
+      // to continuously show the demo
+      if (this.progress > 1) {
+        setTimeout(() => {
+          this.progress = 0;
+        }, 1000);
+      }
+    }, 50);
+  }
+}
+```
diff --git a/static/usage/v7/progress-bar/determinate/demo.html b/static/usage/v7/progress-bar/determinate/demo.html
new file mode 100644
index 00000000000..2f09a3ad5cd
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/demo.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+<script>
+  let progress = 0;
+  let progressBar = document.querySelector('ion-progress-bar');
+
+  setInterval(() => {
+    progressBar.value = progress += 0.01;
+
+    // Reset the progress bar when it reaches 100%
+    // to continuously show the demo
+    if (progress > 1) {
+      setTimeout(() => {
+        progressBar.value = progress = 0;
+      }, 1000);
+    }
+  }, 50);
+</script>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/determinate/index.md b/static/usage/v7/progress-bar/determinate/index.md
new file mode 100644
index 00000000000..790b44766a8
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/progress-bar/determinate/demo.html"
+/>
diff --git a/static/usage/v7/progress-bar/determinate/javascript.md b/static/usage/v7/progress-bar/determinate/javascript.md
new file mode 100644
index 00000000000..6adb7e43590
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/javascript.md
@@ -0,0 +1,20 @@
+```html
+<ion-progress-bar></ion-progress-bar>
+
+<script>
+  let progress = 0;
+  let progressBar = document.querySelector('ion-progress-bar');
+
+  setInterval(() => {
+    progressBar.value = progress += 0.01;
+
+    // Reset the progress bar when it reaches 100%
+    // to continuously show the demo
+    if (progress > 1) {
+      setTimeout(() => {
+        progressBar.value = progress = 0;
+      }, 1000);
+    }
+  }, 50);
+</script>
+```
diff --git a/static/usage/v7/progress-bar/determinate/react.md b/static/usage/v7/progress-bar/determinate/react.md
new file mode 100644
index 00000000000..9622be87f95
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((prevProgress) => prevProgress + 0.01);
+    }, 50);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  if (progress > 1) {
+    setTimeout(() => {
+      setProgress(0);
+    }, 1000);
+  }
+
+  return (
+    <IonProgressBar value={progress}></IonProgressBar>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/determinate/vue.md b/static/usage/v7/progress-bar/determinate/vue.md
new file mode 100644
index 00000000000..c22b3ead5d3
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/vue.md
@@ -0,0 +1,34 @@
+```html
+<template>
+  <ion-progress-bar :value="progress"></ion-progress-bar>
+</template>
+
+<script lang="ts">
+  import { IonProgressBar } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonProgressBar },
+    setup() {
+      let progress = ref(0);
+
+      return {
+        progress
+      };
+    },
+    mounted() {
+      setInterval(() => {
+        this.progress += 0.01;
+
+        // Reset the progress bar when it reaches 100%
+        // to continuously show the demo
+        if (this.progress > 1) {
+          setTimeout(() => {
+            this.progress = 0;
+          }, 1000);
+        }
+      }, 50);
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/progress-bar/indeterminate/angular.md b/static/usage/v7/progress-bar/indeterminate/angular.md
new file mode 100644
index 00000000000..f83f9173c39
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-progress-bar type="indeterminate"></ion-progress-bar>
+```
diff --git a/static/usage/v7/progress-bar/indeterminate/demo.html b/static/usage/v7/progress-bar/indeterminate/demo.html
new file mode 100644
index 00000000000..46c9cdd7254
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/demo.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar type="indeterminate"></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/indeterminate/index.md b/static/usage/v7/progress-bar/indeterminate/index.md
new file mode 100644
index 00000000000..db428ba5871
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/progress-bar/indeterminate/demo.html"
+/>
diff --git a/static/usage/v7/progress-bar/indeterminate/javascript.md b/static/usage/v7/progress-bar/indeterminate/javascript.md
new file mode 100644
index 00000000000..f83f9173c39
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-progress-bar type="indeterminate"></ion-progress-bar>
+```
diff --git a/static/usage/v7/progress-bar/indeterminate/react.md b/static/usage/v7/progress-bar/indeterminate/react.md
new file mode 100644
index 00000000000..45e74e79ce7
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonProgressBar type="indeterminate"></IonProgressBar>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/indeterminate/vue.md b/static/usage/v7/progress-bar/indeterminate/vue.md
new file mode 100644
index 00000000000..b15c060bdcc
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-progress-bar type="indeterminate"></ion-progress-bar>
+</template>
+
+<script lang="ts">
+  import { IonProgressBar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonProgressBar },
+  });
+</script>
+```
diff --git a/static/usage/v7/progress-bar/theming/colors/angular.md b/static/usage/v7/progress-bar/theming/colors/angular.md
new file mode 100644
index 00000000000..71bc3675422
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-progress-bar type="indeterminate" color="primary"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="secondary"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="tertiary"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="success"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="warning"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="danger"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="light"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="medium"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="dark"></ion-progress-bar>
+```
diff --git a/static/usage/v7/progress-bar/theming/colors/demo.html b/static/usage/v7/progress-bar/theming/colors/demo.html
new file mode 100644
index 00000000000..2ecac2e80fa
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar type="indeterminate" color="primary"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="secondary"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="tertiary"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="success"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="warning"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="danger"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="light"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="medium"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate" color="dark"></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/theming/colors/index.md b/static/usage/v7/progress-bar/theming/colors/index.md
new file mode 100644
index 00000000000..7e6638a7e74
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/index.md
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/progress-bar/theming/colors/demo.html"
+/>
diff --git a/static/usage/v7/progress-bar/theming/colors/javascript.md b/static/usage/v7/progress-bar/theming/colors/javascript.md
new file mode 100644
index 00000000000..71bc3675422
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-progress-bar type="indeterminate" color="primary"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="secondary"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="tertiary"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="success"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="warning"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="danger"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="light"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="medium"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" color="dark"></ion-progress-bar>
+```
diff --git a/static/usage/v7/progress-bar/theming/colors/react.md b/static/usage/v7/progress-bar/theming/colors/react.md
new file mode 100644
index 00000000000..d40b838e65b
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonProgressBar type="indeterminate" color="primary"></IonProgressBar>
+      <IonProgressBar type="indeterminate" color="secondary"></IonProgressBar>
+      <IonProgressBar type="indeterminate" color="tertiary"></IonProgressBar>
+      <IonProgressBar type="indeterminate" color="success"></IonProgressBar>
+      <IonProgressBar type="indeterminate" color="warning"></IonProgressBar>
+      <IonProgressBar type="indeterminate" color="danger"></IonProgressBar>
+      <IonProgressBar type="indeterminate" color="light"></IonProgressBar>
+      <IonProgressBar type="indeterminate" color="medium"></IonProgressBar>
+      <IonProgressBar type="indeterminate" color="dark"></IonProgressBar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/theming/colors/vue.md b/static/usage/v7/progress-bar/theming/colors/vue.md
new file mode 100644
index 00000000000..6f42832e199
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-progress-bar type="indeterminate" color="primary"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate" color="secondary"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate" color="tertiary"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate" color="success"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate" color="warning"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate" color="danger"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate" color="light"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate" color="medium"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate" color="dark"></ion-progress-bar>
+</template>
+
+<script lang="ts">
+  import { IonProgressBar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonProgressBar },
+  });
+</script>
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_css.md b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..7d5576bdeeb
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-progress-bar {
+  --background: #f3e895;
+  --progress-background: #09c567;
+}
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..d2c997037ad
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
+<ion-progress-bar type="indeterminate"></ion-progress-bar>
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/demo.html b/static/usage/v7/progress-bar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..5d60e67fbc5
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/demo.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+
+    ion-progress-bar {
+      --background: #f3e895;
+      --progress-background: #09c567;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate"></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/theming/css-properties/index.md b/static/usage/v7/progress-bar/theming/css-properties/index.md
new file mode 100644
index 00000000000..5d6c694d104
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/progress-bar/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/progress-bar/theming/css-properties/javascript.md b/static/usage/v7/progress-bar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f57e0166013
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/javascript.md
@@ -0,0 +1,11 @@
+```html
+<style>
+  ion-progress-bar {
+    --background: #f3e895;
+    --progress-background: #09c567;
+  }
+</style>
+
+<ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
+<ion-progress-bar type="indeterminate"></ion-progress-bar>
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/react/main_css.md b/static/usage/v7/progress-bar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..7d5576bdeeb
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-progress-bar {
+  --background: #f3e895;
+  --progress-background: #09c567;
+}
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..a4c5e382892
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,17 @@
+
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonProgressBar value={.25} buffer={.5}></IonProgressBar>
+      <IonProgressBar type="indeterminate"></IonProgressBar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/vue.md b/static/usage/v7/progress-bar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..bfff4db7a1b
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-progress-bar :value=".25" :buffer=".5"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate"></ion-progress-bar>
+</template>
+
+<script lang="ts">
+  import { IonProgressBar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonProgressBar }
+  });
+</script>
+
+<style scoped>
+  ion-progress-bar {
+    --background: #f3e895;
+    --progress-background: #09c567;
+  }
+</style>
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..2ccf6f72dd8
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+ion-progress-bar::part(track) {
+  background: #f3e895;
+}
+
+ion-progress-bar::part(progress) {
+  background: #09c567;
+}
+
+ion-progress-bar::part(stream) {
+  background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
+}
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..d2c997037ad
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
+<ion-progress-bar type="indeterminate"></ion-progress-bar>
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html b/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..7ccd266e946
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Progress Bar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+
+    ion-progress-bar::part(track) {
+      background: #f3e895;
+    }
+
+    ion-progress-bar::part(progress) {
+      background: #09c567;
+    }
+
+    ion-progress-bar::part(stream) {
+      background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
+        <ion-progress-bar type="indeterminate"></ion-progress-bar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..e289ac2035c
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/progress-bar/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/javascript.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..52b5be57e5a
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,18 @@
+```html
+<style>
+  ion-progress-bar::part(track) {
+    background: #f3e895;
+  }
+
+  ion-progress-bar::part(progress) {
+    background: #09c567;
+  }
+
+  ion-progress-bar::part(stream) {
+    background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
+  }
+</style>
+
+<ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
+<ion-progress-bar type="indeterminate"></ion-progress-bar>
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..2ccf6f72dd8
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,13 @@
+```css
+ion-progress-bar::part(track) {
+  background: #f3e895;
+}
+
+ion-progress-bar::part(progress) {
+  background: #09c567;
+}
+
+ion-progress-bar::part(stream) {
+  background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
+}
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..a4c5e382892
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,17 @@
+
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonProgressBar value={.25} buffer={.5}></IonProgressBar>
+      <IonProgressBar type="indeterminate"></IonProgressBar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..a9ca62b2c4f
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
@@ -0,0 +1,29 @@
+```html
+<template>
+  <ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate"></ion-progress-bar>
+</template>
+
+<script lang="ts">
+  import { IonProgressBar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonProgressBar }
+  });
+</script>
+
+<style scoped>
+  ion-progress-bar::part(track) {
+    background: #f3e895;
+  }
+
+  ion-progress-bar::part(progress) {
+    background: #09c567;
+  }
+
+  ion-progress-bar::part(stream) {
+    background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
+  }
+</style>
+```
diff --git a/static/usage/v7/radio/basic/angular.md b/static/usage/v7/radio/basic/angular.md
new file mode 100644
index 00000000000..6e14ab487f5
--- /dev/null
+++ b/static/usage/v7/radio/basic/angular.md
@@ -0,0 +1,25 @@
+```html
+<ion-list>
+  <ion-radio-group value="strawberries">
+    <ion-item>
+      <ion-label>Grapes</ion-label>
+      <ion-radio slot="end" value="grapes"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Strawberries</ion-label>
+      <ion-radio slot="end" value="strawberries"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Pineapple</ion-label>
+      <ion-radio slot="end" value="pineapple"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Cherries (Disabled)</ion-label>
+      <ion-radio slot="end" value="cherries" [disabled]="true"></ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```
diff --git a/static/usage/v7/radio/basic/demo.html b/static/usage/v7/radio/basic/demo.html
new file mode 100644
index 00000000000..896041e948e
--- /dev/null
+++ b/static/usage/v7/radio/basic/demo.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Radio</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-radio-group value="strawberries">
+            <ion-item>
+              <ion-label>Grapes</ion-label>
+              <ion-radio slot="end" value="grapes"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Strawberries</ion-label>
+              <ion-radio slot="end" value="strawberries"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Pineapple</ion-label>
+              <ion-radio slot="end" value="pineapple"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Cherries (Disabled)</ion-label>
+              <ion-radio slot="end" value="cherries" disabled="true"></ion-radio>
+            </ion-item>
+          </ion-radio-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/radio/basic/index.md b/static/usage/v7/radio/basic/index.md
new file mode 100644
index 00000000000..51b959cf0d4
--- /dev/null
+++ b/static/usage/v7/radio/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/radio/basic/demo.html" size="250px" />
diff --git a/static/usage/v7/radio/basic/javascript.md b/static/usage/v7/radio/basic/javascript.md
new file mode 100644
index 00000000000..23b545a77ba
--- /dev/null
+++ b/static/usage/v7/radio/basic/javascript.md
@@ -0,0 +1,25 @@
+```html
+<ion-list>
+  <ion-radio-group value="strawberries">
+    <ion-item>
+      <ion-label>Grapes</ion-label>
+      <ion-radio slot="end" value="grapes"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Strawberries</ion-label>
+      <ion-radio slot="end" value="strawberries"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Pineapple</ion-label>
+      <ion-radio slot="end" value="pineapple"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Cherries (Disabled)</ion-label>
+      <ion-radio slot="end" value="cherries" disabled="true"></ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```
diff --git a/static/usage/v7/radio/basic/react.md b/static/usage/v7/radio/basic/react.md
new file mode 100644
index 00000000000..55c404e1d22
--- /dev/null
+++ b/static/usage/v7/radio/basic/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonRadioGroup value="strawberries">
+        <IonItem>
+          <IonLabel>Grapes</IonLabel>
+          <IonRadio slot="end" value="grapes"></IonRadio>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>Strawberries</IonLabel>
+          <IonRadio slot="end" value="strawberries"></IonRadio>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>Pineapple</IonLabel>
+          <IonRadio slot="end" value="pineapple"></IonRadio>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>Cherries (Disabled)</IonLabel>
+          <IonRadio slot="end" value="cherries" disabled={true}></IonRadio>
+        </IonItem>
+      </IonRadioGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/basic/vue.md b/static/usage/v7/radio/basic/vue.md
new file mode 100644
index 00000000000..b0e7187361c
--- /dev/null
+++ b/static/usage/v7/radio/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+<template>
+  <ion-list>
+    <ion-radio-group value="strawberries">
+      <ion-item>
+        <ion-label>Grapes</ion-label>
+        <ion-radio slot="end" value="grapes"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Strawberries</ion-label>
+        <ion-radio slot="end" value="strawberries"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Pineapple</ion-label>
+        <ion-radio slot="end" value="pineapple"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Cherries (Disabled)</ion-label>
+        <ion-radio slot="end" value="cherries" :disabled="true"></ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup },
+  });
+</script>
+```
diff --git a/static/usage/v7/radio/empty-selection/angular.md b/static/usage/v7/radio/empty-selection/angular.md
new file mode 100644
index 00000000000..3709479a101
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/angular.md
@@ -0,0 +1,25 @@
+```html
+<ion-list>
+  <ion-radio-group [allowEmptySelection]="true" value="turtles">
+    <ion-item>
+      <ion-label>Dogs</ion-label>
+      <ion-radio slot="end" value="dogs"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Cats</ion-label>
+      <ion-radio slot="end" value="cats"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Turtles</ion-label>
+      <ion-radio slot="end" value="turtles"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Fish</ion-label>
+      <ion-radio slot="end" value="fish"></ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```
diff --git a/static/usage/v7/radio/empty-selection/demo.html b/static/usage/v7/radio/empty-selection/demo.html
new file mode 100644
index 00000000000..29731178d61
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/demo.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Radio</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-radio-group allow-empty-selection="true" value="turtles">
+            <ion-item>
+              <ion-label>Dogs</ion-label>
+              <ion-radio slot="end" value="dogs"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Cats</ion-label>
+              <ion-radio slot="end" value="cats"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Turtles</ion-label>
+              <ion-radio slot="end" value="turtles"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Fish</ion-label>
+              <ion-radio slot="end" value="fish"></ion-radio>
+            </ion-item>
+          </ion-radio-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/radio/empty-selection/index.md b/static/usage/v7/radio/empty-selection/index.md
new file mode 100644
index 00000000000..af0a093ef34
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/radio/empty-selection/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/radio/empty-selection/javascript.md b/static/usage/v7/radio/empty-selection/javascript.md
new file mode 100644
index 00000000000..85c59f7fa91
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/javascript.md
@@ -0,0 +1,25 @@
+```html
+<ion-list>
+  <ion-radio-group allow-empty-selection="true" value="turtles">
+    <ion-item>
+      <ion-label>Dogs</ion-label>
+      <ion-radio slot="end" value="dogs"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Cats</ion-label>
+      <ion-radio slot="end" value="cats"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Turtles</ion-label>
+      <ion-radio slot="end" value="turtles"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Fish</ion-label>
+      <ion-radio slot="end" value="fish"></ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```
diff --git a/static/usage/v7/radio/empty-selection/react.md b/static/usage/v7/radio/empty-selection/react.md
new file mode 100644
index 00000000000..e9b05a45be1
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonRadioGroup allowEmptySelection={true} value="turtles">
+        <IonItem>
+          <IonLabel>Dogs</IonLabel>
+          <IonRadio slot="end" value="dogs"></IonRadio>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>Cats</IonLabel>
+          <IonRadio slot="end" value="cats"></IonRadio>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>Turtles</IonLabel>
+          <IonRadio slot="end" value="turtles"></IonRadio>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>Fish</IonLabel>
+          <IonRadio slot="end" value="fish"></IonRadio>
+        </IonItem>
+      </IonRadioGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/empty-selection/vue.md b/static/usage/v7/radio/empty-selection/vue.md
new file mode 100644
index 00000000000..7a0bd6e7140
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/vue.md
@@ -0,0 +1,36 @@
+```html
+<template>
+  <ion-list>
+    <ion-radio-group :allow-empty-selection="true" value="turtles">
+      <ion-item>
+        <ion-label>Dogs</ion-label>
+        <ion-radio slot="end" value="dogs"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Cats</ion-label>
+        <ion-radio slot="end" value="cats"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Turtles</ion-label>
+        <ion-radio slot="end" value="turtles"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Fish</ion-label>
+        <ion-radio slot="end" value="fish"></ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup },
+  });
+</script>
+```
diff --git a/static/usage/v7/radio/theming/colors/angular.md b/static/usage/v7/radio/theming/colors/angular.md
new file mode 100644
index 00000000000..ace9bab6018
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/angular.md
@@ -0,0 +1,29 @@
+```html
+<ion-radio-group value="primary">
+  <ion-radio color="primary" value="primary"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="secondary">
+  <ion-radio color="secondary" value="secondary"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="tertiary">
+  <ion-radio color="tertiary" value="tertiary"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="success">
+  <ion-radio color="success" value="success"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="warning">
+  <ion-radio color="warning" value="warning"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="danger">
+  <ion-radio color="danger" value="danger"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="light">
+  <ion-radio color="light" value="light"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="medium">
+  <ion-radio color="medium" value="medium"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="dark">
+  <ion-radio color="dark" value="dark"></ion-radio>
+</ion-radio-group>
+```
diff --git a/static/usage/v7/radio/theming/colors/demo.html b/static/usage/v7/radio/theming/colors/demo.html
new file mode 100644
index 00000000000..aa122b5f0ec
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/demo.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Radio</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-radio-group value="primary">
+          <ion-radio color="primary" value="primary"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="secondary">
+          <ion-radio color="secondary" value="secondary"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="tertiary">
+          <ion-radio color="tertiary" value="tertiary"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="success">
+          <ion-radio color="success" value="success"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="warning">
+          <ion-radio color="warning" value="warning"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="danger">
+          <ion-radio color="danger" value="danger"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="light">
+          <ion-radio color="light" value="light"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="medium">
+          <ion-radio color="medium" value="medium"></ion-radio>
+        </ion-radio-group>
+        <ion-radio-group value="dark">
+          <ion-radio color="dark" value="dark"></ion-radio>
+        </ion-radio-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/radio/theming/colors/index.md b/static/usage/v7/radio/theming/colors/index.md
new file mode 100644
index 00000000000..3cd9a87cdb8
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/radio/theming/colors/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/radio/theming/colors/javascript.md b/static/usage/v7/radio/theming/colors/javascript.md
new file mode 100644
index 00000000000..ace9bab6018
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/javascript.md
@@ -0,0 +1,29 @@
+```html
+<ion-radio-group value="primary">
+  <ion-radio color="primary" value="primary"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="secondary">
+  <ion-radio color="secondary" value="secondary"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="tertiary">
+  <ion-radio color="tertiary" value="tertiary"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="success">
+  <ion-radio color="success" value="success"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="warning">
+  <ion-radio color="warning" value="warning"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="danger">
+  <ion-radio color="danger" value="danger"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="light">
+  <ion-radio color="light" value="light"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="medium">
+  <ion-radio color="medium" value="medium"></ion-radio>
+</ion-radio-group>
+<ion-radio-group value="dark">
+  <ion-radio color="dark" value="dark"></ion-radio>
+</ion-radio-group>
+```
diff --git a/static/usage/v7/radio/theming/colors/react.md b/static/usage/v7/radio/theming/colors/react.md
new file mode 100644
index 00000000000..8a96c775064
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonRadioGroup value="primary">
+        <IonRadio color="primary" value="primary"></IonRadio>
+      </IonRadioGroup>
+      <IonRadioGroup value="secondary">
+        <IonRadio color="secondary" value="secondary"></IonRadio>
+      </IonRadioGroup>
+      <IonRadioGroup value="tertiary">
+        <IonRadio color="tertiary" value="tertiary"></IonRadio>
+      </IonRadioGroup>
+      <IonRadioGroup value="success">
+        <IonRadio color="success" value="success"></IonRadio>
+      </IonRadioGroup>
+      <IonRadioGroup value="warning">
+        <IonRadio color="warning" value="warning"></IonRadio>
+      </IonRadioGroup>
+      <IonRadioGroup value="danger">
+        <IonRadio color="danger" value="danger"></IonRadio>
+      </IonRadioGroup>
+      <IonRadioGroup value="light">
+        <IonRadio color="light" value="light"></IonRadio>
+      </IonRadioGroup>
+      <IonRadioGroup value="medium">
+        <IonRadio color="medium" value="medium"></IonRadio>
+      </IonRadioGroup>
+      <IonRadioGroup value="dark">
+        <IonRadio color="dark" value="dark"></IonRadio>
+      </IonRadioGroup>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/theming/colors/vue.md b/static/usage/v7/radio/theming/colors/vue.md
new file mode 100644
index 00000000000..084d8f27a21
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/vue.md
@@ -0,0 +1,40 @@
+```html
+<template>
+  <ion-radio-group value="primary">
+    <ion-radio color="primary" value="primary"></ion-radio>
+  </ion-radio-group>
+  <ion-radio-group value="secondary">
+    <ion-radio color="secondary" value="secondary"></ion-radio>
+  </ion-radio-group>
+  <ion-radio-group value="tertiary">
+    <ion-radio color="tertiary" value="tertiary"></ion-radio>
+  </ion-radio-group>
+  <ion-radio-group value="success">
+    <ion-radio color="success" value="success"></ion-radio>
+  </ion-radio-group>
+  <ion-radio-group value="warning">
+    <ion-radio color="warning" value="warning"></ion-radio>
+  </ion-radio-group>
+  <ion-radio-group value="danger">
+    <ion-radio color="danger" value="danger"></ion-radio>
+  </ion-radio-group>
+  <ion-radio-group value="light">
+    <ion-radio color="light" value="light"></ion-radio>
+  </ion-radio-group>
+  <ion-radio-group value="medium">
+    <ion-radio color="medium" value="medium"></ion-radio>
+  </ion-radio-group>
+  <ion-radio-group value="dark">
+    <ion-radio color="dark" value="dark"></ion-radio>
+  </ion-radio-group>
+</template>
+
+<script lang="ts">
+  import { IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRadio, IonRadioGroup },
+  });
+</script>
+```
diff --git a/static/usage/v7/radio/theming/css-properties/angular/example_component_css.md b/static/usage/v7/radio/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..9e36e69c77d
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,21 @@
+```css
+ion-radio {
+  --border-radius: 4px;
+  --inner-border-radius: 4px;
+
+  --color: #ddd;
+  --color-checked: #6815ec;
+}
+
+ion-radio.ios {
+  width: 20px;
+  height: 20px;
+
+  border: 2px solid #ddd;
+  border-radius: 4px;
+}
+
+.radio-checked.ios {
+  border-color: #6815ec;
+}
+```
diff --git a/static/usage/v7/radio/theming/css-properties/angular/example_component_html.md b/static/usage/v7/radio/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..3944db27fae
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+<ion-radio-group value="custom-checked">
+  <ion-radio value="custom"></ion-radio>
+  <ion-radio value="custom-checked"></ion-radio>
+</ion-radio-group>
+```
diff --git a/static/usage/v7/radio/theming/css-properties/demo.html b/static/usage/v7/radio/theming/css-properties/demo.html
new file mode 100644
index 00000000000..8d2a07e5df6
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/demo.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Radio</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-radio {
+      --border-radius: 4px;
+      --inner-border-radius: 4px;
+
+      --color: #ddd;
+      --color-checked: #6815ec;
+    }
+
+    ion-radio.ios {
+      width: 20px;
+      height: 20px;
+
+      border: 2px solid #ddd;
+      border-radius: 4px;
+    }
+
+    .radio-checked.ios {
+      border-color: #6815ec;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-radio-group value="custom-checked">
+          <ion-radio value="custom"></ion-radio>
+          <ion-radio value="custom-checked"></ion-radio>
+        </ion-radio-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/radio/theming/css-properties/index.md b/static/usage/v7/radio/theming/css-properties/index.md
new file mode 100644
index 00000000000..032b2ee66c9
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/radio/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/radio/theming/css-properties/javascript.md b/static/usage/v7/radio/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..3900a4a863e
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-radio-group value="custom-checked">
+  <ion-radio value="custom"></ion-radio>
+  <ion-radio value="custom-checked"></ion-radio>
+</ion-radio-group>
+
+<style>
+  ion-radio {
+    --border-radius: 4px;
+    --inner-border-radius: 4px;
+
+    --color: #ddd;
+    --color-checked: #6815ec;
+  }
+
+  ion-radio.ios {
+    width: 20px;
+    height: 20px;
+
+    border: 2px solid #ddd;
+    border-radius: 4px;
+  }
+
+  .radio-checked.ios {
+    border-color: #6815ec;
+  }
+</style>
+```
diff --git a/static/usage/v7/radio/theming/css-properties/react/main_css.md b/static/usage/v7/radio/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..9e36e69c77d
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/react/main_css.md
@@ -0,0 +1,21 @@
+```css
+ion-radio {
+  --border-radius: 4px;
+  --inner-border-radius: 4px;
+
+  --color: #ddd;
+  --color-checked: #6815ec;
+}
+
+ion-radio.ios {
+  width: 20px;
+  height: 20px;
+
+  border: 2px solid #ddd;
+  border-radius: 4px;
+}
+
+.radio-checked.ios {
+  border-color: #6815ec;
+}
+```
diff --git a/static/usage/v7/radio/theming/css-properties/react/main_tsx.md b/static/usage/v7/radio/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..188ac677707
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonRadioGroup value="custom-checked">
+      <IonRadio value="custom"></IonRadio>
+      <IonRadio value="custom-checked"></IonRadio>
+    </IonRadioGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/theming/css-properties/vue.md b/static/usage/v7/radio/theming/css-properties/vue.md
new file mode 100644
index 00000000000..557c0547e49
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/vue.md
@@ -0,0 +1,39 @@
+```html
+<template>
+  <ion-radio-group value="custom-checked">
+    <ion-radio value="custom"></ion-radio>
+    <ion-radio value="custom-checked"></ion-radio>
+  </ion-radio-group>
+</template>
+
+<script lang="ts">
+  import { IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRadio, IonRadioGroup },
+  });
+</script>
+
+<style scoped>
+  ion-radio {
+    --border-radius: 4px;
+    --inner-border-radius: 4px;
+
+    --color: #ddd;
+    --color-checked: #6815ec;
+  }
+
+  ion-radio.ios {
+    width: 20px;
+    height: 20px;
+
+    border: 2px solid #ddd;
+    border-radius: 4px;
+  }
+
+  .radio-checked.ios {
+    border-color: #6815ec;
+  }
+</style>
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..85c8747d6e5
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,34 @@
+```css
+ion-radio {
+  width: 30px;
+  height: 30px;
+}
+
+ion-radio::part(container) {
+  border-radius: 8px;
+  border: 2px solid #ddd;
+}
+
+ion-radio::part(mark) {
+  background: none;
+  transition: none;
+  transform: none;
+  border-radius: 0;
+}
+
+ion-radio.radio-checked::part(container) {
+  background: #6815ec;
+  border-color: transparent;
+}
+
+ion-radio.radio-checked::part(mark) {
+  width: 6px;
+  height: 10px;
+
+  border-width: 0px 2px 2px 0px;
+  border-style: solid;
+  border-color: #fff;
+
+  transform: rotate(45deg);
+}
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..3944db27fae
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+<ion-radio-group value="custom-checked">
+  <ion-radio value="custom"></ion-radio>
+  <ion-radio value="custom-checked"></ion-radio>
+</ion-radio-group>
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/demo.html b/static/usage/v7/radio/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..f2bc280fb83
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/demo.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Radio</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-radio {
+      width: 30px;
+      height: 30px;
+    }
+
+    ion-radio::part(container) {
+      border-radius: 8px;
+      border: 2px solid #ddd;
+    }
+
+    ion-radio::part(mark) {
+      background: none;
+      transition: none;
+      transform: none;
+      border-radius: 0;
+    }
+
+    ion-radio.radio-checked::part(container) {
+      background: #6815ec;
+      border-color: transparent;
+    }
+
+    ion-radio.radio-checked::part(mark) {
+      width: 6px;
+      height: 10px;
+
+      border-width: 0px 2px 2px 0px;
+      border-style: solid;
+      border-color: #fff;
+
+      transform: rotate(45deg);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-radio-group value="custom-checked">
+          <ion-radio value="custom"></ion-radio>
+          <ion-radio value="custom-checked"></ion-radio>
+        </ion-radio-group>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/index.md b/static/usage/v7/radio/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..92071383efc
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/radio/theming/css-shadow-parts/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/javascript.md b/static/usage/v7/radio/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..728d1ad34ea
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,41 @@
+```html
+<ion-radio-group value="custom-checked">
+  <ion-radio value="custom"></ion-radio>
+  <ion-radio value="custom-checked"></ion-radio>
+</ion-radio-group>
+
+<style>
+  ion-radio {
+    width: 30px;
+    height: 30px;
+  }
+
+  ion-radio::part(container) {
+    border-radius: 8px;
+    border: 2px solid #ddd;
+  }
+
+  ion-radio::part(mark) {
+    background: none;
+    transition: none;
+    transform: none;
+    border-radius: 0;
+  }
+
+  ion-radio.radio-checked::part(container) {
+    background: #6815ec;
+    border-color: transparent;
+  }
+
+  ion-radio.radio-checked::part(mark) {
+    width: 6px;
+    height: 10px;
+
+    border-width: 0px 2px 2px 0px;
+    border-style: solid;
+    border-color: #fff;
+
+    transform: rotate(45deg);
+  }
+</style>
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/radio/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..85c8747d6e5
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,34 @@
+```css
+ion-radio {
+  width: 30px;
+  height: 30px;
+}
+
+ion-radio::part(container) {
+  border-radius: 8px;
+  border: 2px solid #ddd;
+}
+
+ion-radio::part(mark) {
+  background: none;
+  transition: none;
+  transform: none;
+  border-radius: 0;
+}
+
+ion-radio.radio-checked::part(container) {
+  background: #6815ec;
+  border-color: transparent;
+}
+
+ion-radio.radio-checked::part(mark) {
+  width: 6px;
+  height: 10px;
+
+  border-width: 0px 2px 2px 0px;
+  border-style: solid;
+  border-color: #fff;
+
+  transform: rotate(45deg);
+}
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/radio/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..188ac677707
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonRadioGroup value="custom-checked">
+      <IonRadio value="custom"></IonRadio>
+      <IonRadio value="custom-checked"></IonRadio>
+    </IonRadioGroup>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/vue.md b/static/usage/v7/radio/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..e8078202f6c
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/vue.md
@@ -0,0 +1,52 @@
+```html
+<template>
+  <ion-radio-group value="custom-checked">
+    <ion-radio value="custom"></ion-radio>
+    <ion-radio value="custom-checked"></ion-radio>
+  </ion-radio-group>
+</template>
+
+<script lang="ts">
+  import { IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRadio, IonRadioGroup },
+  });
+</script>
+
+<style scoped>
+  ion-radio {
+    width: 30px;
+    height: 30px;
+  }
+
+  ion-radio::part(container) {
+    border-radius: 8px;
+    border: 2px solid #ddd;
+  }
+
+  ion-radio::part(mark) {
+    background: none;
+    transition: none;
+    transform: none;
+    border-radius: 0;
+  }
+
+  ion-radio.radio-checked::part(container) {
+    background: #6815ec;
+    border-color: transparent;
+  }
+
+  ion-radio.radio-checked::part(mark) {
+    width: 6px;
+    height: 10px;
+
+    border-width: 0px 2px 2px 0px;
+    border-style: solid;
+    border-color: #fff;
+
+    transform: rotate(45deg);
+  }
+</style>
+```
diff --git a/static/usage/v7/range/basic/angular.md b/static/usage/v7/range/basic/angular.md
new file mode 100644
index 00000000000..207b74f1fc7
--- /dev/null
+++ b/static/usage/v7/range/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-range></ion-range>
+```
diff --git a/static/usage/v7/range/basic/demo.html b/static/usage/v7/range/basic/demo.html
new file mode 100644
index 00000000000..2580a0cda5e
--- /dev/null
+++ b/static/usage/v7/range/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/range/basic/index.md b/static/usage/v7/range/basic/index.md
new file mode 100644
index 00000000000..59922df7eda
--- /dev/null
+++ b/static/usage/v7/range/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/basic/demo.html" />
diff --git a/static/usage/v7/range/basic/javascript.md b/static/usage/v7/range/basic/javascript.md
new file mode 100644
index 00000000000..207b74f1fc7
--- /dev/null
+++ b/static/usage/v7/range/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-range></ion-range>
+```
diff --git a/static/usage/v7/range/basic/react.md b/static/usage/v7/range/basic/react.md
new file mode 100644
index 00000000000..b2f57aed027
--- /dev/null
+++ b/static/usage/v7/range/basic/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+  return <IonRange></IonRange>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/basic/vue.md b/static/usage/v7/range/basic/vue.md
new file mode 100644
index 00000000000..73f55df111e
--- /dev/null
+++ b/static/usage/v7/range/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-range></ion-range>
+</template>
+
+<script lang="ts">
+  import { IonRange } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRange },
+  });
+</script>
+```
diff --git a/static/usage/v7/range/dual-knobs/angular.md b/static/usage/v7/range/dual-knobs/angular.md
new file mode 100644
index 00000000000..b5d6a592a92
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-range [dualKnobs]="true" [value]="{ lower: 20, upper: 80 }"></ion-range>
+```
diff --git a/static/usage/v7/range/dual-knobs/demo.html b/static/usage/v7/range/dual-knobs/demo.html
new file mode 100644
index 00000000000..2c324f0eb57
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range dual-knobs="true"></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const range = document.querySelector('ion-range');
+    range.value = {
+      lower: 20,
+      upper: 80
+    };
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/range/dual-knobs/index.md b/static/usage/v7/range/dual-knobs/index.md
new file mode 100644
index 00000000000..ead42b93ad6
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/dual-knobs/demo.html" />
diff --git a/static/usage/v7/range/dual-knobs/javascript.md b/static/usage/v7/range/dual-knobs/javascript.md
new file mode 100644
index 00000000000..1227b5cc841
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-range dual-knobs="true"></ion-range>
+
+<script>
+  const range = document.querySelector('ion-range');
+  range.value = {
+    lower: 20,
+    upper: 80,
+  };
+</script>
+```
diff --git a/static/usage/v7/range/dual-knobs/react.md b/static/usage/v7/range/dual-knobs/react.md
new file mode 100644
index 00000000000..7f72b8e1dc3
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+  return (
+    <IonRange
+      dualKnobs={true}
+      value={{
+        lower: 20,
+        upper: 80,
+      }}
+    ></IonRange>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/dual-knobs/vue.md b/static/usage/v7/range/dual-knobs/vue.md
new file mode 100644
index 00000000000..afc825a067c
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-range :dual-knobs="true" :value="{ lower: 20, upper: 80 }"></ion-range>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonRange } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonRange },
+  });
+</script>
+```
diff --git a/static/usage/v7/range/ion-change-event/angular/example_component_html.md b/static/usage/v7/range/ion-change-event/angular/example_component_html.md
new file mode 100644
index 00000000000..1c7dedd0408
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-range (ionChange)="onIonChange($event)"></ion-range>
+<ion-label>ionChange emitted value: {{ lastEmittedValue }}</ion-label>
+```
diff --git a/static/usage/v7/range/ion-change-event/angular/example_component_ts.md b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md
new file mode 100644
index 00000000000..b90eff62d29
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component } from '@angular/core';
+
+import { RangeCustomEvent } from '@ionic/angular';
+import { RangeValue } from '@ionic/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  lastEmittedValue: RangeValue;
+
+  onIonChange(ev: Event) {
+    this.lastEmittedValue = (ev as RangeCustomEvent).detail.value;
+  }
+}
+```
diff --git a/static/usage/v7/range/ion-change-event/demo.html b/static/usage/v7/range/ion-change-event/demo.html
new file mode 100644
index 00000000000..93e35b59ba7
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .demo {
+      max-width: 320px;
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="demo">
+          <ion-range></ion-range>
+          <ion-label>ionChange emitted value: <span id="lastValue"></span></ion-label>
+        </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const range = document.querySelector('ion-range');
+    const lastValue = document.querySelector('#lastValue');
+
+    range.addEventListener('ionChange', ({ detail }) => {
+      lastValue.innerHTML = detail.value;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/range/ion-change-event/index.md b/static/usage/v7/range/ion-change-event/index.md
new file mode 100644
index 00000000000..c35324b9448
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/range/ion-change-event/demo.html"
+/>
diff --git a/static/usage/v7/range/ion-change-event/javascript.md b/static/usage/v7/range/ion-change-event/javascript.md
new file mode 100644
index 00000000000..d483a43dd5a
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/javascript.md
@@ -0,0 +1,13 @@
+```html
+<ion-range></ion-range>
+<ion-label>ionChange emitted value: <span id="lastValue"></span></ion-label>
+
+<script>
+  const range = document.querySelector('ion-range');
+  const lastEmittedValue = document.querySelector('#lastValue');
+
+  range.addEventListener('ionChange', ({ detail }) => {
+    lastEmittedValue.innerHTML = detail.value;
+  });
+</script>
+```
diff --git a/static/usage/v7/range/ion-change-event/react.md b/static/usage/v7/range/ion-change-event/react.md
new file mode 100644
index 00000000000..3e1eed172b0
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React, { useState } from 'react';
+import { IonLabel, IonRange } from '@ionic/react';
+import { RangeValue } from '@ionic/core';
+function Example() {
+  const [lastEmittedValue, setLastEmittedValue] = useState<RangeValue>();
+  return (
+    <>
+      <IonRange onIonChange={({ detail }) => setLastEmittedValue(detail.value)}></IonRange>
+      <IonLabel>ionChange emitted value: {lastEmittedValue as number}</IonLabel>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/ion-change-event/vue.md b/static/usage/v7/range/ion-change-event/vue.md
new file mode 100644
index 00000000000..d043c11089d
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-range @ionChange="onIonChange"></ion-range>
+  <ion-label>ionChange emitted value: {{lastEmittedValue}}</ion-label>
+</template>
+
+<script lang="ts">
+  import { IonLabel, IonRange } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonRange },
+    data() {
+      return {
+        lastEmittedValue: '',
+      };
+    },
+    methods: {
+      onIonChange({ detail }) {
+        this.lastEmittedValue = detail.value;
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/range/ion-knob-move-event/angular/example_component_html.md b/static/usage/v7/range/ion-knob-move-event/angular/example_component_html.md
new file mode 100644
index 00000000000..d8b54e782eb
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-range (ionKnobMoveStart)="onIonKnobMoveStart($event)" (ionKnobMoveEnd)="onIonKnobMoveEnd($event)"></ion-range>
+<div>
+  <ion-label>ionKnobMoveStart: {{ moveStart }}</ion-label>
+</div>
+<div>
+  <ion-label>ionKnobMoveEnd: {{ moveEnd }}</ion-label>
+</div>
+```
diff --git a/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md
new file mode 100644
index 00000000000..e4b331a10f2
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { RangeCustomEvent } from '@ionic/angular';
+import { RangeValue } from '@ionic/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  moveStart: RangeValue;
+  moveEnd: RangeValue;
+
+  onIonKnobMoveStart(ev: Event) {
+    this.moveStart = (ev as RangeCustomEvent).detail.value;
+  }
+
+  onIonKnobMoveEnd(ev: Event) {
+    this.moveEnd = (ev as RangeCustomEvent).detail.value;
+  }
+}
+```
diff --git a/static/usage/v7/range/ion-knob-move-event/demo.html b/static/usage/v7/range/ion-knob-move-event/demo.html
new file mode 100644
index 00000000000..0522fd9b1ff
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .demo {
+      max-width: 320px;
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="demo">
+          <ion-range></ion-range>
+          <div>
+            <ion-label>ionKnobMoveStart: <span id="moveStart"></span></ion-label>
+          </div>
+          <div>
+            <ion-label>ionKnobMoveEnd: <span id="moveEnd"></span></ion-label>
+          </div>
+        </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const range = document.querySelector('ion-range');
+    const moveStart = document.querySelector('#moveStart');
+    const moveEnd = document.querySelector('#moveEnd');
+
+    range.addEventListener('ionKnobMoveStart', ({ detail }) => {
+      moveStart.innerHTML = detail.value;
+    });
+
+    range.addEventListener('ionKnobMoveEnd', ({ detail }) => {
+      moveEnd.innerHTML = detail.value;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/range/ion-knob-move-event/index.md b/static/usage/v7/range/ion-knob-move-event/index.md
new file mode 100644
index 00000000000..772cf127ed2
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/range/ion-knob-move-event/demo.html"
+/>
diff --git a/static/usage/v7/range/ion-knob-move-event/javascript.md b/static/usage/v7/range/ion-knob-move-event/javascript.md
new file mode 100644
index 00000000000..70346efa5eb
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/javascript.md
@@ -0,0 +1,23 @@
+```html
+<ion-range></ion-range>
+<div>
+  <ion-label>ionKnobMoveStart: <span id="moveStart"></span></ion-label>
+</div>
+<div>
+  <ion-label>ionKnobMoveEnd: <span id="moveEnd"></span></ion-label>
+</div>
+
+<script>
+  const range = document.querySelector('ion-range');
+  const moveStart = document.querySelector('#moveStart');
+  const moveEnd = document.querySelector('#moveEnd');
+
+  range.addEventListener('ionKnobMoveStart', ({ detail }) => {
+    moveStart.innerHTML = detail.value;
+  });
+
+  range.addEventListener('ionKnobMoveEnd', ({ detail }) => {
+    moveEnd.innerHTML = detail.value;
+  });
+</script>
+```
diff --git a/static/usage/v7/range/ion-knob-move-event/react.md b/static/usage/v7/range/ion-knob-move-event/react.md
new file mode 100644
index 00000000000..25d80caae72
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React, { useState } from 'react';
+import { IonLabel, IonRange } from '@ionic/react';
+import { RangeValue } from '@ionic/core';
+function Example() {
+  const [moveStartValue, setMoveStartValue] = useState<RangeValue>();
+  const [moveEndValue, setMoveEndValue] = useState<RangeValue>();
+  return (
+    <>
+      <IonRange
+        onIonKnobMoveStart={({ detail }) => setMoveStartValue(detail.value)}
+        onIonKnobMoveEnd={({ detail }) => setMoveEndValue(detail.value)}
+      ></IonRange>
+      <div>
+        <IonLabel>ionKnobMoveStart: {moveStartValue as number}</IonLabel>
+      </div>
+      <div>
+        <IonLabel>ionKnobMoveEnd: {moveEndValue as number}</IonLabel>
+      </div>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/ion-knob-move-event/vue.md b/static/usage/v7/range/ion-knob-move-event/vue.md
new file mode 100644
index 00000000000..ffe8e9f5390
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/vue.md
@@ -0,0 +1,34 @@
+```html
+<template>
+  <ion-range @ionKnobMoveStart="onIonKnobMoveStart" @ionKnobMoveEnd="onIonKnobMoveEnd"></ion-range>
+  <div>
+    <ion-label>ionKnobMoveStart: {{moveStart}}</ion-label>
+  </div>
+  <div>
+    <ion-label>onIonKnobMoveEnd: {{moveEnd}}</ion-label>
+  </div>
+</template>
+
+<script lang="ts">
+  import { IonLabel, IonRange } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonRange },
+    data() {
+      return {
+        moveStart: '',
+        moveEnd: '',
+      };
+    },
+    methods: {
+      onIonKnobMoveStart({ detail }) {
+        this.moveStart = detail.value;
+      },
+      onIonKnobMoveEnd({ detail }) {
+        this.moveEnd = detail.value;
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/range/pins/angular/example_component_html.md b/static/usage/v7/range/pins/angular/example_component_html.md
new file mode 100644
index 00000000000..c5f3c823b82
--- /dev/null
+++ b/static/usage/v7/range/pins/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-range [pin]="true" [pinFormatter]="pinFormatter"></ion-range>
+```
diff --git a/static/usage/v7/range/pins/angular/example_component_ts.md b/static/usage/v7/range/pins/angular/example_component_ts.md
new file mode 100644
index 00000000000..8dc875e1bda
--- /dev/null
+++ b/static/usage/v7/range/pins/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  pinFormatter(value: number) {
+    return `${value}%`;
+  }
+}
+```
diff --git a/static/usage/v7/range/pins/demo.html b/static/usage/v7/range/pins/demo.html
new file mode 100644
index 00000000000..032a649d14d
--- /dev/null
+++ b/static/usage/v7/range/pins/demo.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range pin="true"></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const range = document.querySelector('ion-range');
+    range.pinFormatter = (value) => {
+      return `${value}%`;
+    };
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/range/pins/index.md b/static/usage/v7/range/pins/index.md
new file mode 100644
index 00000000000..2daa1c4e98b
--- /dev/null
+++ b/static/usage/v7/range/pins/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/range/pins/demo.html"
+/>
diff --git a/static/usage/v7/range/pins/javascript.md b/static/usage/v7/range/pins/javascript.md
new file mode 100644
index 00000000000..45491f91514
--- /dev/null
+++ b/static/usage/v7/range/pins/javascript.md
@@ -0,0 +1,10 @@
+```html
+<ion-range pin="true"></ion-range>
+
+<script>
+  const range = document.querySelector('ion-range');
+  range.pinFormatter = (value) => {
+    return `${value}%`;
+  };
+</script>
+```
diff --git a/static/usage/v7/range/pins/react.md b/static/usage/v7/range/pins/react.md
new file mode 100644
index 00000000000..9da75eae26a
--- /dev/null
+++ b/static/usage/v7/range/pins/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+  return <IonRange pin={true} pinFormatter={(value: number) => `${value}%`}></IonRange>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/pins/vue.md b/static/usage/v7/range/pins/vue.md
new file mode 100644
index 00000000000..b2d49bc8300
--- /dev/null
+++ b/static/usage/v7/range/pins/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-range :pin="true" :pin-formatter="pinFormatter"></ion-range>
+</template>
+
+<script lang="ts">
+  import { IonRange } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRange },
+    setup() {
+      return {
+        pinFormatter: (value: number) => `${value}%`,
+      };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/range/slots/angular.md b/static/usage/v7/range/slots/angular.md
new file mode 100644
index 00000000000..792f7c9b2ee
--- /dev/null
+++ b/static/usage/v7/range/slots/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-range>
+  <ion-icon slot="start" name="snow-outline"></ion-icon>
+  <ion-icon slot="end" name="sunny-outline"></ion-icon>
+</ion-range>
+```
diff --git a/static/usage/v7/range/slots/demo.html b/static/usage/v7/range/slots/demo.html
new file mode 100644
index 00000000000..a6c24e8da62
--- /dev/null
+++ b/static/usage/v7/range/slots/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range>
+          <ion-icon slot="start" name="snow-outline"></ion-icon>
+          <ion-icon slot="end" name="sunny-outline"></ion-icon>
+        </ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/range/slots/index.md b/static/usage/v7/range/slots/index.md
new file mode 100644
index 00000000000..511261e3678
--- /dev/null
+++ b/static/usage/v7/range/slots/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/slots/demo.html" />
diff --git a/static/usage/v7/range/slots/javascript.md b/static/usage/v7/range/slots/javascript.md
new file mode 100644
index 00000000000..792f7c9b2ee
--- /dev/null
+++ b/static/usage/v7/range/slots/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-range>
+  <ion-icon slot="start" name="snow-outline"></ion-icon>
+  <ion-icon slot="end" name="sunny-outline"></ion-icon>
+</ion-range>
+```
diff --git a/static/usage/v7/range/slots/react.md b/static/usage/v7/range/slots/react.md
new file mode 100644
index 00000000000..c6c77e4ab6f
--- /dev/null
+++ b/static/usage/v7/range/slots/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonRange, IonIcon } from '@ionic/react';
+import { snowOutline, sunnyOutline } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <IonRange>
+      <IonIcon slot="start" icon={snowOutline}></IonIcon>
+      <IonIcon slot="end" icon={sunnyOutline}></IonIcon>
+    </IonRange>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/slots/vue.md b/static/usage/v7/range/slots/vue.md
new file mode 100644
index 00000000000..9b2f3de68e6
--- /dev/null
+++ b/static/usage/v7/range/slots/vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-range>
+    <ion-icon slot="start" :icon="snowOutline"></ion-icon>
+    <ion-icon slot="end" :icon="sunnyOutline"></ion-icon>
+  </ion-range>
+</template>
+
+<script lang="ts">
+  import { IonRange, IonIcon } from '@ionic/vue';
+  import { snowOutline, sunnyOutline } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRange, IonIcon },
+    setup() {
+      return {
+        snowOutline,
+        sunnyOutline,
+      };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/range/snapping-ticks/angular.md b/static/usage/v7/range/snapping-ticks/angular.md
new file mode 100644
index 00000000000..4ec64a7d5c6
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-range [ticks]="true" [snaps]="true" [min]="0" [max]="10"></ion-range>
+```
diff --git a/static/usage/v7/range/snapping-ticks/demo.html b/static/usage/v7/range/snapping-ticks/demo.html
new file mode 100644
index 00000000000..8b0ada20488
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range ticks="true" snaps="true" min="0" max="10"></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/range/snapping-ticks/index.md b/static/usage/v7/range/snapping-ticks/index.md
new file mode 100644
index 00000000000..0fc7d22e2ec
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/snapping-ticks/demo.html" />
diff --git a/static/usage/v7/range/snapping-ticks/javascript.md b/static/usage/v7/range/snapping-ticks/javascript.md
new file mode 100644
index 00000000000..d9ebe86597d
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-range ticks="true" snaps="true" min="0" max="10"></ion-range>
+```
diff --git a/static/usage/v7/range/snapping-ticks/react.md b/static/usage/v7/range/snapping-ticks/react.md
new file mode 100644
index 00000000000..37a0ca15ad4
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+  return <IonRange ticks={true} snaps={true} min={0} max={10}></IonRange>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/snapping-ticks/vue.md b/static/usage/v7/range/snapping-ticks/vue.md
new file mode 100644
index 00000000000..5ea90c66f2c
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-range :ticks="true" :snaps="true" :min="0" :max="10"></ion-range>
+</template>
+
+<script lang="ts">
+  import { IonRange } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRange },
+  });
+</script>
+```
diff --git a/static/usage/v7/range/theming/css-properties/angular/example_component_css.md b/static/usage/v7/range/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..bcc87bbf1b4
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-range {
+  --bar-background: #a2d2ff;
+  --bar-background-active: #bde0fe;
+  --bar-height: 8px;
+  --bar-border-radius: 8px;
+  --knob-background: #ffc8dd;
+  --knob-size: 40px;
+  --pin-background: #ffafcc;
+  --pin-color: #fff;
+}
+```
diff --git a/static/usage/v7/range/theming/css-properties/angular/example_component_html.md b/static/usage/v7/range/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..788c2c288d8
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-range [value]="50" [pin]="true"></ion-range>
+```
diff --git a/static/usage/v7/range/theming/css-properties/demo.html b/static/usage/v7/range/theming/css-properties/demo.html
new file mode 100644
index 00000000000..2bbf61e793b
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      --bar-background: #a2d2ff;
+      --bar-background-active: #bde0fe;
+      --bar-height: 8px;
+      --bar-border-radius: 8px;
+      --knob-background: #ffc8dd;
+      --knob-size: 40px;
+      --pin-background: #ffafcc;
+      --pin-color: #fff;
+
+      max-width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range value="50" pin="true"></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/range/theming/css-properties/index.md b/static/usage/v7/range/theming/css-properties/index.md
new file mode 100644
index 00000000000..380bd5204d7
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/range/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/range/theming/css-properties/javascript.md b/static/usage/v7/range/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..619c3e4f6e8
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+<ion-range value="50" pin="true"></ion-range>
+
+<style>
+  ion-range {
+    --bar-background: #a2d2ff;
+    --bar-background-active: #bde0fe;
+    --bar-height: 8px;
+    --bar-border-radius: 8px;
+    --knob-background: #ffc8dd;
+    --knob-size: 40px;
+    --pin-background: #ffafcc;
+    --pin-color: #fff;
+  }
+</style>
+```
diff --git a/static/usage/v7/range/theming/css-properties/react/main_css.md b/static/usage/v7/range/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..bcc87bbf1b4
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+ion-range {
+  --bar-background: #a2d2ff;
+  --bar-background-active: #bde0fe;
+  --bar-height: 8px;
+  --bar-border-radius: 8px;
+  --knob-background: #ffc8dd;
+  --knob-size: 40px;
+  --pin-background: #ffafcc;
+  --pin-color: #fff;
+}
+```
diff --git a/static/usage/v7/range/theming/css-properties/react/main_tsx.md b/static/usage/v7/range/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..78261555c9b
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return <IonRange value={50} pin={true}></IonRange>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/theming/css-properties/vue.md b/static/usage/v7/range/theming/css-properties/vue.md
new file mode 100644
index 00000000000..6c0aeff6268
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+<style>
+  ion-range {
+    --bar-background: #a2d2ff;
+    --bar-background-active: #bde0fe;
+    --bar-height: 8px;
+    --bar-border-radius: 8px;
+    --knob-background: #ffc8dd;
+    --knob-size: 40px;
+    --pin-background: #ffafcc;
+    --pin-color: #fff;
+  }
+</style>
+
+<template>
+  <ion-range :value="50" :pin="true"></ion-range>
+</template>
+
+<script lang="ts">
+  import { IonRange } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRange },
+  });
+</script>
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..0092daad827
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,43 @@
+```css
+ion-range::part(tick) {
+  background: #a2d2ff;
+}
+
+ion-range::part(tick-active) {
+  background: #bde0fe;
+}
+
+ion-range::part(pin) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  background: #ffafcc;
+  color: #fff;
+
+  border-radius: 50%;
+  transform: scale(1.01);
+
+  top: -20px;
+
+  min-width: 28px;
+  height: 28px;
+  transition: transform 120ms ease, background 120ms ease;
+}
+
+ion-range::part(pin)::before {
+  content: none;
+}
+
+ion-range::part(knob) {
+  background: #ffc8dd;
+}
+
+ion-range::part(bar) {
+  background: #a2d2ff;
+}
+
+ion-range::part(bar-active) {
+  background: #bde0fe;
+}
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..95fbcd6f6ab
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-range [min]="0" [max]="10" [value]="5" [pin]="true" [ticks]="true" [snaps]="true"></ion-range>
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/demo.html b/static/usage/v7/range/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..8469ebda0a8
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/demo.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Range</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-range {
+      max-width: 320px;
+    }
+
+    ion-range::part(tick) {
+      background: #a2d2ff;
+    }
+
+    ion-range::part(tick-active) {
+      background: #bde0fe;
+    }
+
+    ion-range::part(pin) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      background: #ffafcc;
+      color: #fff;
+
+      border-radius: 50%;
+      transform: scale(1.01);
+
+      top: -20px;
+
+      min-width: 28px;
+      height: 28px;
+      transition: transform 120ms ease, background 120ms ease;
+    }
+
+    ion-range::part(pin)::before {
+      content: none;
+    }
+
+    ion-range::part(knob) {
+      background: #ffc8dd;
+    }
+
+    ion-range::part(bar) {
+      background: #a2d2ff;
+    }
+
+    ion-range::part(bar-active) {
+      background: #bde0fe;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-range min="0" max="10" value="5" pin="true" ticks="true" snaps="true"></ion-range>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/range/theming/css-shadow-parts/index.md b/static/usage/v7/range/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..4b384ac3d81
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/range/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/v7/range/theming/css-shadow-parts/javascript.md b/static/usage/v7/range/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..df02ec30fbd
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,47 @@
+```html
+<ion-range min="0" max="10" value="5" pin="true" ticks="true" snaps="true"></ion-range>
+
+<style>
+  ion-range::part(tick) {
+    background: #a2d2ff;
+  }
+
+  ion-range::part(tick-active) {
+    background: #bde0fe;
+  }
+
+  ion-range::part(pin) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    background: #ffafcc;
+    color: #fff;
+
+    border-radius: 50%;
+    transform: scale(1.01);
+
+    top: -20px;
+
+    min-width: 28px;
+    height: 28px;
+    transition: transform 120ms ease, background 120ms ease;
+  }
+
+  ion-range::part(pin)::before {
+    content: none;
+  }
+
+  ion-range::part(knob) {
+    background: #ffc8dd;
+  }
+
+  ion-range::part(bar) {
+    background: #a2d2ff;
+  }
+
+  ion-range::part(bar-active) {
+    background: #bde0fe;
+  }
+</style>
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/range/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..0092daad827
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,43 @@
+```css
+ion-range::part(tick) {
+  background: #a2d2ff;
+}
+
+ion-range::part(tick-active) {
+  background: #bde0fe;
+}
+
+ion-range::part(pin) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  background: #ffafcc;
+  color: #fff;
+
+  border-radius: 50%;
+  transform: scale(1.01);
+
+  top: -20px;
+
+  min-width: 28px;
+  height: 28px;
+  transition: transform 120ms ease, background 120ms ease;
+}
+
+ion-range::part(pin)::before {
+  content: none;
+}
+
+ion-range::part(knob) {
+  background: #ffc8dd;
+}
+
+ion-range::part(bar) {
+  background: #a2d2ff;
+}
+
+ion-range::part(bar-active) {
+  background: #bde0fe;
+}
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/range/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..b22ec8d6fd9
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,12 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return <IonRange min={0} max={10} value={5} pin={true} ticks={true} snaps={true}></IonRange>;
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/vue.md b/static/usage/v7/range/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..c0bccfc8df9
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/vue.md
@@ -0,0 +1,58 @@
+```html
+<style>
+  ion-range::part(tick) {
+    background: #a2d2ff;
+  }
+
+  ion-range::part(tick-active) {
+    background: #bde0fe;
+  }
+
+  ion-range::part(pin) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    background: #ffafcc;
+    color: #fff;
+
+    border-radius: 50%;
+    transform: scale(1.01);
+
+    top: -20px;
+
+    min-width: 28px;
+    height: 28px;
+    transition: transform 120ms ease, background 120ms ease;
+  }
+
+  ion-range::part(pin)::before {
+    content: none;
+  }
+
+  ion-range::part(knob) {
+    background: #ffc8dd;
+  }
+
+  ion-range::part(bar) {
+    background: #a2d2ff;
+  }
+
+  ion-range::part(bar-active) {
+    background: #bde0fe;
+  }
+</style>
+
+<template>
+  <ion-range :min="0" :max="10" :value="5" :pin="true" :ticks="true" :snaps="true"></ion-range>
+</template>
+
+<script lang="ts">
+  import { IonRange } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRange },
+  });
+</script>
+```
diff --git a/static/usage/v7/refresher/advanced/angular/example_component_css.md b/static/usage/v7/refresher/advanced/angular/example_component_css.md
new file mode 100644
index 00000000000..102c69d71f9
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item {
+  --padding-start: 8px;
+}
+
+ion-icon {
+  font-size: 12px;
+  align-self: start;
+  margin: 15px 8px;
+}
+```
diff --git a/static/usage/v7/refresher/advanced/angular/example_component_html.md b/static/usage/v7/refresher/advanced/angular/example_component_html.md
new file mode 100644
index 00000000000..e724a1da71e
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Pull to Refresh</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+  <ion-list>
+    <ion-item [button]="true" *ngFor="let item of items">
+      <ion-icon slot="start" color="primary" [name]="item.unread ? 'ellipse' : ''"></ion-icon>
+      <ion-label>
+        <h2>{{ item.name }}</h2>
+        <p>New message from {{ item.name }}</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>
+```
diff --git a/static/usage/v7/refresher/advanced/angular/example_component_ts.md b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
new file mode 100644
index 00000000000..035069fc2a9
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
@@ -0,0 +1,37 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+  public names = ['Burt Bear', 'Charlie Cheetah', 'Donald Duck', 'Eva Eagle', 'Ellie Elephant', 'Gino Giraffe', 'Isabella Iguana', 'Karl Kitten', 'Lionel Lion', 'Molly Mouse', 'Paul Puppy', 'Rachel Rabbit', 'Ted Turtle'];
+  public items = [];
+
+  ngOnInit() {
+    this.addItems(5);
+  }
+
+  chooseRandomName() {
+    return this.names[Math.floor(Math.random() * this.names.length)];
+  }
+
+  addItems(count, unread = false) {
+    for (let i = 0; i < count; i++) {
+      this.items.unshift({
+        name: this.chooseRandomName(),
+        unread: unread
+      });
+    }
+  }
+
+  handleRefresh(event) {
+    setTimeout(() => {
+      this.addItems(3, true);
+      event.target.complete();
+    }, 2000);
+  };
+}
+```
diff --git a/static/usage/v7/refresher/advanced/demo.html b/static/usage/v7/refresher/advanced/demo.html
new file mode 100644
index 00000000000..8f0b2fbbe52
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/demo.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Refresher</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-item {
+      --padding-start: 8px;
+    }
+
+    ion-icon {
+      font-size: 12px;
+      align-self: start;
+      margin: 15px 8px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Pull to Refresh</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-refresher id="refresher" slot="fixed">
+        <ion-refresher-content></ion-refresher-content>
+      </ion-refresher>
+
+      <ion-list id="list"></ion-list>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const refresher = document.getElementById('refresher');
+    const names = [
+      'Burt Bear',
+      'Charlie Cheetah',
+      'Donald Duck',
+      'Eva Eagle',
+      'Ellie Elephant',
+      'Gino Giraffe',
+      'Isabella Iguana',
+      'Karl Kitten',
+      'Lionel Lion',
+      'Molly Mouse',
+      'Paul Puppy',
+      'Rachel Rabbit',
+      'Ted Turtle',
+    ];
+
+    refresher.addEventListener('ionRefresh', () => {
+      setTimeout(() => {
+        addItems(3, true);
+        refresher.complete();
+      }, 2000);
+    });
+
+    const list = document.querySelector('ion-list');
+    addItems(5, false);
+
+    function chooseRandomName() {
+      return names[Math.floor(Math.random() * names.length)];
+    }
+
+    function addItems(count, unread) {
+      for (let i = 0; i < count; i++) {
+        list.insertBefore(createItems(unread), list.firstChild);
+      }
+    }
+
+    function createItems(unread = false) {
+      const name = chooseRandomName();
+      let item = document.createElement('ion-item');
+      item.button = true;
+
+      item.innerHTML += `
+        <ion-icon color="primary" name="${unread ? 'ellipse' : ''}" slot="start"></ion-icon>
+        <ion-label>
+          <h2>${name}</h2>
+          <p>New message from ${name}</p>
+        </ion-label>
+      `;
+
+      return item;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/refresher/advanced/index.md b/static/usage/v7/refresher/advanced/index.md
new file mode 100644
index 00000000000..cfc19169444
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/index.md
@@ -0,0 +1,36 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/refresher/advanced/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/refresher/advanced/javascript.md b/static/usage/v7/refresher/advanced/javascript.md
new file mode 100644
index 00000000000..d05bed7cacf
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/javascript.md
@@ -0,0 +1,68 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Pull to Refresh</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-refresher id="refresher" slot="fixed">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+  <ion-list id="list"></ion-list>
+</ion-content>
+
+<script>
+  const refresher = document.getElementById('refresher');
+  const names = ['Burt Bear', 'Charlie Cheetah', 'Donald Duck', 'Eva Eagle', 'Ellie Elephant', 'Gino Giraffe', 'Isabella Iguana', 'Karl Kitten', 'Lionel Lion', 'Molly Mouse', 'Paul Puppy', 'Rachel Rabbit', 'Ted Turtle'];
+
+  refresher.addEventListener('ionRefresh', () => {
+    setTimeout(() => {
+      addItems(3, true);
+      refresher.complete();
+    }, 2000);
+  });
+
+  const list = document.querySelector('ion-list');
+  addItems(5, false);
+
+  function chooseRandomName() {
+    return names[Math.floor(Math.random() * names.length)];
+  }
+
+  function addItems(count, unread) {
+    for (let i = 0; i < count; i++) {
+      list.insertBefore(createItem(unread), list.firstChild);
+    }
+  }
+
+  function createItem(unread = false) {
+    const name = chooseRandomName();
+    let item = document.createElement('ion-item');
+    item.button = true;
+
+    item.innerHTML += `
+      <ion-icon color="primary" name="${unread ? 'ellipse' : ''}" slot="start"></ion-icon>
+      <ion-label>
+        <h2>${name}</h2>
+        <p>New message from ${name}</p>
+      </ion-label>
+    `;
+
+    return item;
+  }
+</script>
+
+<style>
+  ion-item {
+    --padding-start: 8px;
+  }
+
+  ion-icon {
+    font-size: 12px;
+    align-self: start;
+    margin: 15px 8px;
+  }
+</style>
+```
diff --git a/static/usage/v7/refresher/advanced/react/main_css.md b/static/usage/v7/refresher/advanced/react/main_css.md
new file mode 100644
index 00000000000..102c69d71f9
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item {
+  --padding-start: 8px;
+}
+
+ion-icon {
+  font-size: 12px;
+  align-self: start;
+  margin: 15px 8px;
+}
+```
diff --git a/static/usage/v7/refresher/advanced/react/main_tsx.md b/static/usage/v7/refresher/advanced/react/main_tsx.md
new file mode 100644
index 00000000000..ab9596a2675
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/react/main_tsx.md
@@ -0,0 +1,67 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import { IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+import { ellipse } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+  const names = ['Burt Bear', 'Charlie Cheetah', 'Donald Duck', 'Eva Eagle', 'Ellie Elephant', 'Gino Giraffe', 'Isabella Iguana', 'Karl Kitten', 'Lionel Lion', 'Molly Mouse', 'Paul Puppy', 'Rachel Rabbit', 'Ted Turtle'];
+  const [items, setItems] = useState<{name: string, unread: boolean}[]>([]);
+
+  let didInit = false;
+
+  useEffect(() => {
+    if (!didInit) {
+      didInit = true;
+      addItems(5);
+    }
+  }, []);
+
+  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+    setTimeout(() => {
+      addItems(3, true);
+      event.detail.complete();
+    }, 2000);
+  }
+
+  function chooseRandomName() {
+    return names[Math.floor(Math.random() * names.length)];
+  }
+
+  function addItems(count: number, unread = false) {
+    for (let i = 0; i < count; i++) {
+      setItems((current) => [{ name: chooseRandomName(), unread }, ...current]);
+    }
+  }
+
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Pull to Refresh</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent>
+        <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
+          <IonRefresherContent></IonRefresherContent>
+        </IonRefresher>
+
+        <IonList>
+          { items.map((item) => (
+            <IonItem button={true}>
+              <IonIcon slot="start" color="primary" icon={ item.unread ? ellipse : '' }></IonIcon>
+              <IonLabel>
+                <h2>{ item.name }</h2>
+                <p>New message from { item.name }</p>
+              </IonLabel>
+            </IonItem>
+          ))}
+        </IonList>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/refresher/advanced/vue.md b/static/usage/v7/refresher/advanced/vue.md
new file mode 100644
index 00000000000..328bfcf00f1
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/vue.md
@@ -0,0 +1,72 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Pull to Refresh</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-refresher slot="fixed" @ionRefresh="handleRefresh($event)">
+      <ion-refresher-content></ion-refresher-content>
+    </ion-refresher>
+
+    <ion-list>
+      <ion-item :button="true" v-for="item in items">
+        <ion-icon slot="start" color="primary" :icon="item.unread ? ellipse : ''"></ion-icon>
+        <ion-label>
+          <h2>{{ item.name }}</h2>
+          <p>New message from {{ item.name }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+  import { ellipse } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
+    setup() {
+      const names = ['Burt Bear', 'Charlie Cheetah', 'Donald Duck', 'Eva Eagle', 'Ellie Elephant', 'Gino Giraffe', 'Isabella Iguana', 'Karl Kitten', 'Lionel Lion', 'Molly Mouse', 'Paul Puppy', 'Rachel Rabbit', 'Ted Turtle'];
+      let items = ref([]);
+
+      const chooseRandomName = () => {
+        return names[Math.floor(Math.random() * names.length)];
+      };
+
+      const addItems = (count, unread = false) => {
+        for (let i = 0; i < count; i++) {
+          items.value.unshift({name: chooseRandomName(), unread});
+        }
+      };
+
+      addItems(5);
+
+      const handleRefresh = (event: CustomEvent) => {
+        setTimeout(() => {
+          addItems(3, true);
+          event.target.complete();
+        }, 2000);
+      };
+
+      return { ellipse, handleRefresh, items, names };
+    },
+  });
+</script>
+
+<style scoped>
+  ion-item {
+    --padding-start: 8px;
+  }
+
+  ion-icon {
+    font-size: 12px;
+    align-self: start;
+    margin: 15px 8px;
+  }
+</style>
+```
diff --git a/static/usage/v7/refresher/basic/angular/example_component_html.md b/static/usage/v7/refresher/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f665c1c51a1
--- /dev/null
+++ b/static/usage/v7/refresher/basic/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Pull to Refresh</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+  <p>Pull this content down to trigger the refresh.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/refresher/basic/angular/example_component_ts.md b/static/usage/v7/refresher/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/v7/refresher/basic/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  handleRefresh(event) {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.target.complete();
+    }, 2000);
+  };
+}
+```
diff --git a/static/usage/v7/refresher/basic/demo.html b/static/usage/v7/refresher/basic/demo.html
new file mode 100644
index 00000000000..9c378cad03e
--- /dev/null
+++ b/static/usage/v7/refresher/basic/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Refresher</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Pull to Refresh</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <ion-refresher id="refresher" slot="fixed">
+        <ion-refresher-content></ion-refresher-content>
+      </ion-refresher>
+
+      <p>Pull this content down to trigger the refresh.</p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const refresher = document.getElementById('refresher');
+
+    refresher.addEventListener('ionRefresh', () => {
+      setTimeout(() => {
+        // Any calls to load data go here
+        refresher.complete();
+      }, 2000);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/refresher/basic/index.md b/static/usage/v7/refresher/basic/index.md
new file mode 100644
index 00000000000..72a38f16267
--- /dev/null
+++ b/static/usage/v7/refresher/basic/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/refresher/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/refresher/basic/javascript.md b/static/usage/v7/refresher/basic/javascript.md
new file mode 100644
index 00000000000..565e1247624
--- /dev/null
+++ b/static/usage/v7/refresher/basic/javascript.md
@@ -0,0 +1,26 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Pull to Refresh</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-refresher id="refresher" slot="fixed">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+  <p>Pull this content down to trigger the refresh.</p>
+</ion-content>
+
+<script>
+  const refresher = document.getElementById('refresher');
+
+  refresher.addEventListener('ionRefresh', () => {
+    setTimeout(() => {
+      // Any calls to load data go here
+      refresher.complete();
+    }, 2000);
+  });
+</script>
+```
diff --git a/static/usage/v7/refresher/basic/react.md b/static/usage/v7/refresher/basic/react.md
new file mode 100644
index 00000000000..8c828b090c7
--- /dev/null
+++ b/static/usage/v7/refresher/basic/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+
+function Example() {
+
+  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.detail.complete();
+    }, 2000);
+  }
+
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Pull to Refresh</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent className="ion-padding">
+        <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
+          <IonRefresherContent></IonRefresherContent>
+        </IonRefresher>
+
+        <p>Pull this content down to trigger the refresh.</p>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/refresher/basic/vue.md b/static/usage/v7/refresher/basic/vue.md
new file mode 100644
index 00000000000..870081dcfbf
--- /dev/null
+++ b/static/usage/v7/refresher/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Pull to Refresh</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content class="ion-padding">
+    <ion-refresher slot="fixed" @ionRefresh="handleRefresh($event)">
+      <ion-refresher-content></ion-refresher-content>
+    </ion-refresher>
+
+    <p>Pull this content down to trigger the refresh.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
+    setup() {
+      const handleRefresh = (event: CustomEvent) => {
+        setTimeout(() => {
+          // Any calls to load data go here
+          event.target.complete();
+        }, 2000);
+      };
+
+      return { handleRefresh };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/refresher/custom-content/angular/example_component_html.md b/static/usage/v7/refresher/custom-content/angular/example_component_html.md
new file mode 100644
index 00000000000..bca91e0a0d8
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/angular/example_component_html.md
@@ -0,0 +1,20 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Pull to Refresh</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
+    <ion-refresher-content
+      pullingIcon="chevron-down-circle-outline"
+      pullingText="Pull to refresh"
+      refreshingSpinner="circles"
+      refreshingText="Refreshing...">
+    </ion-refresher-content>
+  </ion-refresher>
+
+  <p>Pull this content down to trigger the refresh.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  handleRefresh(event) {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.target.complete();
+    }, 2000);
+  };
+}
+```
diff --git a/static/usage/v7/refresher/custom-content/demo.html b/static/usage/v7/refresher/custom-content/demo.html
new file mode 100644
index 00000000000..084ad40e10d
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/demo.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Refresher</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Pull to Refresh</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <ion-refresher id="refresher" slot="fixed">
+        <ion-refresher-content pulling-icon="chevron-down-circle-outline" pulling-text="Pull to refresh"
+          refreshing-spinner="circles" refreshing-text="Refreshing...">
+        </ion-refresher-content>
+      </ion-refresher>
+
+      <p>Pull this content down to trigger the refresh.</p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const refresher = document.getElementById('refresher');
+
+    refresher.addEventListener('ionRefresh', () => {
+      setTimeout(() => {
+        // Any calls to load data go here
+        refresher.complete();
+      }, 2000);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/refresher/custom-content/index.md b/static/usage/v7/refresher/custom-content/index.md
new file mode 100644
index 00000000000..cd1bdf7e6bd
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/refresher/custom-content/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/refresher/custom-content/javascript.md b/static/usage/v7/refresher/custom-content/javascript.md
new file mode 100644
index 00000000000..779bd97ed80
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/javascript.md
@@ -0,0 +1,31 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Pull to Refresh</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-refresher id="refresher" slot="fixed">
+    <ion-refresher-content
+      pulling-icon="chevron-down-circle-outline"
+      pulling-text="Pull to refresh"
+      refreshing-spinner="circles"
+      refreshing-text="Refreshing...">
+    </ion-refresher-content>
+  </ion-refresher>
+
+  <p>Pull this content down to trigger the refresh.</p>
+</ion-content>
+
+<script>
+  const refresher = document.getElementById('refresher');
+
+  refresher.addEventListener('ionRefresh', () => {
+    setTimeout(() => {
+      // Any calls to load data go here
+      refresher.complete();
+    }, 2000);
+  });
+</script>
+```
diff --git a/static/usage/v7/refresher/custom-content/react.md b/static/usage/v7/refresher/custom-content/react.md
new file mode 100644
index 00000000000..627f4981f56
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+import { chevronDownCircleOutline } from 'ionicons/icons';
+
+function Example() {
+
+  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.detail.complete();
+    }, 2000);
+  }
+
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Pull to Refresh</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent className="ion-padding">
+        <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
+          <IonRefresherContent
+            pullingIcon={chevronDownCircleOutline}
+            pullingText="Pull to refresh"
+            refreshingSpinner="circles"
+            refreshingText="Refreshing...">
+          </IonRefresherContent>
+        </IonRefresher>
+
+        <p>Pull this content down to trigger the refresh.</p>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/refresher/custom-content/vue.md b/static/usage/v7/refresher/custom-content/vue.md
new file mode 100644
index 00000000000..a5bb444fd91
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/vue.md
@@ -0,0 +1,42 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Pull to Refresh</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content class="ion-padding">
+    <ion-refresher slot="fixed" @ionRefresh="handleRefresh($event)">
+      <ion-refresher-content
+        :pulling-icon="chevronDownCircleOutline"
+        pulling-text="Pull to refresh"
+        refreshing-spinner="circles"
+        refreshing-text="Refreshing...">
+      </ion-refresher-content>
+    </ion-refresher>
+
+    <p>Pull this content down to trigger the refresh.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { chevronDownCircleOutline } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
+    setup() {
+      const handleRefresh = (event: CustomEvent) => {
+        setTimeout(() => {
+          // Any calls to load data go here
+          event.target.complete();
+        }, 2000);
+      };
+
+      return { chevronDownCircleOutline, handleRefresh };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..4c0e2cddc16
--- /dev/null
+++ b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Pull to Refresh</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [scrollY]="false">
+  <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+  <div class="ion-content-scroll-host ion-padding">
+    <p>Pull this content down to trigger the refresh.</p>
+  </div>
+</ion-content>
+```
diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 00000000000..8d604ad85ee
--- /dev/null
+++ b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md
@@ -0,0 +1,17 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {
+  handleRefresh(event) {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.target.complete();
+    }, 2000);
+  };
+}
+```
diff --git a/static/usage/v7/refresher/custom-scroll-target/demo.html b/static/usage/v7/refresher/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..0adad651d65
--- /dev/null
+++ b/static/usage/v7/refresher/custom-scroll-target/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Refresher</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .ion-content-scroll-host {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Pull to Refresh</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content scroll-y="false">
+      <ion-refresher id="refresher" slot="fixed">
+        <ion-refresher-content></ion-refresher-content>
+      </ion-refresher>
+
+      <div class="ion-content-scroll-host ion-padding">
+        <p>Pull this content down to trigger the refresh.</p>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const refresher = document.getElementById('refresher');
+
+    refresher.addEventListener('ionRefresh', () => {
+      setTimeout(() => {
+        // Any calls to load data go here
+        refresher.complete();
+      }, 2000);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/refresher/custom-scroll-target/index.md b/static/usage/v7/refresher/custom-scroll-target/index.md
new file mode 100644
index 00000000000..df1b9641c8a
--- /dev/null
+++ b/static/usage/v7/refresher/custom-scroll-target/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/refresher/custom-scroll-target/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/refresher/custom-scroll-target/javascript.md b/static/usage/v7/refresher/custom-scroll-target/javascript.md
new file mode 100644
index 00000000000..dde203612e4
--- /dev/null
+++ b/static/usage/v7/refresher/custom-scroll-target/javascript.md
@@ -0,0 +1,39 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Pull to Refresh</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content scroll-y="false">
+  <ion-refresher id="refresher" slot="fixed">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+  <div class="ion-content-scroll-host ion-padding">
+    <p>Pull this content down to trigger the refresh.</p>
+  </div>
+</ion-content>
+
+<script>
+  const refresher = document.getElementById('refresher');
+
+  refresher.addEventListener('ionRefresh', () => {
+    setTimeout(() => {
+      // Any calls to load data go here
+      refresher.complete();
+    }, 2000);
+  });
+</script>
+
+<style>
+  .ion-content-scroll-host {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+</style>
+```
diff --git a/static/usage/v7/refresher/custom-scroll-target/react/main_css.md b/static/usage/v7/refresher/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v7/refresher/custom-scroll-target/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/refresher/custom-scroll-target/react/main_tsx.md b/static/usage/v7/refresher/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..fd701a7c531
--- /dev/null
+++ b/static/usage/v7/refresher/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+
+  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.detail.complete();
+    }, 2000);
+  }
+
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Pull to Refresh</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent scrollY={false}>
+        <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
+          <IonRefresherContent></IonRefresherContent>
+        </IonRefresher>
+
+        <div className="ion-content-scroll-host ion-padding">
+          <p>Pull this content down to trigger the refresh.</p>
+        </div>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/refresher/custom-scroll-target/vue.md b/static/usage/v7/refresher/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..b63d979c827
--- /dev/null
+++ b/static/usage/v7/refresher/custom-scroll-target/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Pull to Refresh</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content :scroll-y="false">
+    <ion-refresher slot="fixed" @ionRefresh="handleRefresh($event)">
+      <ion-refresher-content></ion-refresher-content>
+    </ion-refresher>
+
+    <div class="ion-content-scroll-host ion-padding">
+      <p>Pull this content down to trigger the refresh.</p>
+    </div>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
+    setup() {
+      const handleRefresh = (event: CustomEvent) => {
+        setTimeout(() => {
+          // Any calls to load data go here
+          event.target.complete();
+        }, 2000);
+      };
+
+      return { handleRefresh };
+    },
+  });
+</script>
+
+<style scoped>
+  .ion-content-scroll-host {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+</style>
+```
diff --git a/static/usage/v7/refresher/pull-properties/angular/example_component_html.md b/static/usage/v7/refresher/pull-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..1e5948063b8
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Pull to Refresh</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-refresher slot="fixed" [pullFactor]="0.5" [pullMin]="100" [pullMax]="200" (ionRefresh)="handleRefresh($event)">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+  <p>Pull this content down to trigger the refresh.</p>
+</ion-content>
+```
diff --git a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  handleRefresh(event) {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.target.complete();
+    }, 2000);
+  };
+}
+```
diff --git a/static/usage/v7/refresher/pull-properties/demo.html b/static/usage/v7/refresher/pull-properties/demo.html
new file mode 100644
index 00000000000..3d8e940a636
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Refresher</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Pull to Refresh</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <ion-refresher id="refresher" slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
+        <ion-refresher-content></ion-refresher-content>
+      </ion-refresher>
+
+      <p>Pull this content down to trigger the refresh.</p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const refresher = document.getElementById('refresher');
+
+    refresher.addEventListener('ionRefresh', () => {
+      setTimeout(() => {
+        // Any calls to load data go here
+        refresher.complete();
+      }, 2000);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/refresher/pull-properties/index.md b/static/usage/v7/refresher/pull-properties/index.md
new file mode 100644
index 00000000000..f4db4363d91
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/refresher/pull-properties/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/refresher/pull-properties/javascript.md b/static/usage/v7/refresher/pull-properties/javascript.md
new file mode 100644
index 00000000000..8bc8b286566
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/javascript.md
@@ -0,0 +1,26 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Pull to Refresh</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-refresher id="refresher" slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+  <p>Pull this content down to trigger the refresh.</p>
+</ion-content>
+
+<script>
+  const refresher = document.getElementById('refresher');
+
+  refresher.addEventListener('ionRefresh', () => {
+    setTimeout(() => {
+      // Any calls to load data go here
+      refresher.complete();
+    }, 2000);
+  });
+</script>
+```
diff --git a/static/usage/v7/refresher/pull-properties/react.md b/static/usage/v7/refresher/pull-properties/react.md
new file mode 100644
index 00000000000..73f5a65b07a
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+
+function Example() {
+
+  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.detail.complete();
+    }, 2000);
+  }
+
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Pull to Refresh</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent className="ion-padding">
+        <IonRefresher slot="fixed" pullFactor={0.5} pullMin={100} pullMax={200} onIonRefresh={handleRefresh}>
+          <IonRefresherContent></IonRefresherContent>
+        </IonRefresher>
+
+        <p>Pull this content down to trigger the refresh.</p>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/refresher/pull-properties/vue.md b/static/usage/v7/refresher/pull-properties/vue.md
new file mode 100644
index 00000000000..0d3e1b45e9f
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/vue.md
@@ -0,0 +1,36 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Pull to Refresh</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content class="ion-padding">
+    <ion-refresher slot="fixed" :pull-factor="0.5" :pull-min="100" :pull-max="200" @ionRefresh="handleRefresh($event)">
+      <ion-refresher-content></ion-refresher-content>
+    </ion-refresher>
+
+    <p>Pull this content down to trigger the refresh.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
+    setup() {
+      const handleRefresh = (event: CustomEvent) => {
+        setTimeout(() => {
+          // Any calls to load data go here
+          event.target.complete();
+        }, 2000);
+      };
+
+      return { handleRefresh };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/reorder/basic/angular/example_component_html.md b/static/usage/v7/reorder/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..0a02fe2563d
--- /dev/null
+++ b/static/usage/v7/reorder/basic/angular/example_component_html.md
@@ -0,0 +1,42 @@
+```html
+<ion-list>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+  <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
+    <ion-item>
+      <ion-label>
+        Item 1
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 2
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 3
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 4
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 5
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+  </ion-reorder-group>
+</ion-list>
+```
diff --git a/static/usage/v7/reorder/basic/angular/example_component_ts.md b/static/usage/v7/reorder/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/v7/reorder/basic/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    ev.detail.complete();
+  }
+}
+```
diff --git a/static/usage/v7/reorder/basic/demo.html b/static/usage/v7/reorder/basic/demo.html
new file mode 100644
index 00000000000..7d721cc2790
--- /dev/null
+++ b/static/usage/v7/reorder/basic/demo.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+          <ion-reorder-group disabled="false">
+            <ion-item>
+              <ion-label>
+                Item 1
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 2
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 3
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 4
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 5
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+          </ion-reorder-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // The `from` and `to` properties contain the index of the item
+      // when the drag started and ended, respectively
+      console.log('Dragged from index', detail.from, 'to', detail.to);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      detail.complete();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/reorder/basic/index.md b/static/usage/v7/reorder/basic/index.md
new file mode 100644
index 00000000000..c0d1f352954
--- /dev/null
+++ b/static/usage/v7/reorder/basic/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/reorder/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/reorder/basic/javascript.md b/static/usage/v7/reorder/basic/javascript.md
new file mode 100644
index 00000000000..0d7a09f9818
--- /dev/null
+++ b/static/usage/v7/reorder/basic/javascript.md
@@ -0,0 +1,56 @@
+```html
+<ion-list>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-reorder-group disabled="false">
+    <ion-item>
+      <ion-label>
+        Item 1
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 2
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 3
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 4
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 5
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+  </ion-reorder-group>
+</ion-list>
+
+<script>
+  const reorderGroup = document.querySelector('ion-reorder-group');
+
+  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', detail.from, 'to', detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    detail.complete();
+  });
+</script>
+```
diff --git a/static/usage/v7/reorder/basic/react.md b/static/usage/v7/reorder/basic/react.md
new file mode 100644
index 00000000000..179ee82a782
--- /dev/null
+++ b/static/usage/v7/reorder/basic/react.md
@@ -0,0 +1,60 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    event.detail.complete();
+  }
+
+  return (
+    <IonList>
+      {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+        <IonItem>
+          <IonLabel>
+            Item 1
+          </IonLabel>
+          <IonReorder slot="end"></IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 2
+          </IonLabel>
+          <IonReorder slot="end"></IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 3
+          </IonLabel>
+          <IonReorder slot="end"></IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 4
+          </IonLabel>
+          <IonReorder slot="end"></IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 5
+          </IonLabel>
+          <IonReorder slot="end"></IonReorder>
+        </IonItem>
+      </IonReorderGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/basic/vue.md b/static/usage/v7/reorder/basic/vue.md
new file mode 100644
index 00000000000..5a861e1dc26
--- /dev/null
+++ b/static/usage/v7/reorder/basic/vue.md
@@ -0,0 +1,66 @@
+```html
+<template>
+  <ion-list>
+    <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+    <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
+      <ion-item>
+        <ion-label>
+          Item 1
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 2
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 3
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 4
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 5
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+    </ion-reorder-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
+    setup() {
+      const handleReorder = (event: CustomEvent) => {
+        // The `from` and `to` properties contain the index of the item
+        // when the drag started and ended, respectively
+        console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+        // Finish the reorder and position the item in the DOM based on
+        // where the gesture ended. This method can also be called directly
+        // by the reorder group
+        event.detail.complete();
+      }
+
+      return { handleReorder }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/reorder/custom-icon/angular/example_component_html.md b/static/usage/v7/reorder/custom-icon/angular/example_component_html.md
new file mode 100644
index 00000000000..12473b3a04a
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/angular/example_component_html.md
@@ -0,0 +1,52 @@
+```html
+<ion-list>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+  <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
+    <ion-item>
+      <ion-label>
+        Item 1
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 2
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 3
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 4
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 5
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+  </ion-reorder-group>
+</ion-list>
+```
diff --git a/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    ev.detail.complete();
+  }
+}
+```
diff --git a/static/usage/v7/reorder/custom-icon/demo.html b/static/usage/v7/reorder/custom-icon/demo.html
new file mode 100644
index 00000000000..1d9ad3dd39e
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/demo.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+          <ion-reorder-group disabled="false">
+            <ion-item>
+              <ion-label>
+                Item 1
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 2
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 3
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 4
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 5
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+          </ion-reorder-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // The `from` and `to` properties contain the index of the item
+      // when the drag started and ended, respectively
+      console.log('Dragged from index', detail.from, 'to', detail.to);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      detail.complete();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/reorder/custom-icon/index.md b/static/usage/v7/reorder/custom-icon/index.md
new file mode 100644
index 00000000000..bd827c68936
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/reorder/custom-icon/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/reorder/custom-icon/javascript.md b/static/usage/v7/reorder/custom-icon/javascript.md
new file mode 100644
index 00000000000..6e75b74343f
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/javascript.md
@@ -0,0 +1,66 @@
+```html
+<ion-list>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-reorder-group disabled="false">
+    <ion-item>
+      <ion-label>
+        Item 1
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 2
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 3
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 4
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 5
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+  </ion-reorder-group>
+</ion-list>
+
+<script>
+  const reorderGroup = document.querySelector('ion-reorder-group');
+
+  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', detail.from, 'to', detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    detail.complete();
+  });
+</script>
+```
diff --git a/static/usage/v7/reorder/custom-icon/react.md b/static/usage/v7/reorder/custom-icon/react.md
new file mode 100644
index 00000000000..845a3a6decc
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/react.md
@@ -0,0 +1,71 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import { pizza } from 'ionicons/icons';
+
+function Example() {
+  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    event.detail.complete();
+  }
+
+  return (
+    <IonList>
+      {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+        <IonItem>
+          <IonLabel>
+            Item 1
+          </IonLabel>
+          <IonReorder slot="end">
+            <IonIcon icon={pizza}></IonIcon>
+          </IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 2
+          </IonLabel>
+          <IonReorder slot="end">
+            <IonIcon icon={pizza}></IonIcon>
+          </IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 3
+          </IonLabel>
+          <IonReorder slot="end">
+            <IonIcon icon={pizza}></IonIcon>
+          </IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 4
+          </IonLabel>
+          <IonReorder slot="end">
+            <IonIcon icon={pizza}></IonIcon>
+          </IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 5
+          </IonLabel>
+          <IonReorder slot="end">
+            <IonIcon icon={pizza}></IonIcon>
+          </IonReorder>
+        </IonItem>
+      </IonReorderGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/custom-icon/vue.md b/static/usage/v7/reorder/custom-icon/vue.md
new file mode 100644
index 00000000000..17416c67e85
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/vue.md
@@ -0,0 +1,76 @@
+```html
+<template>
+  <ion-list>
+    <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+    <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
+      <ion-item>
+        <ion-label>
+          Item 1
+        </ion-label>
+        <ion-reorder slot="end">
+          <ion-icon :icon="pizza"></ion-icon>
+        </ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 2
+        </ion-label>
+        <ion-reorder slot="end">
+          <ion-icon :icon="pizza"></ion-icon>
+        </ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 3
+        </ion-label>
+        <ion-reorder slot="end">
+          <ion-icon :icon="pizza"></ion-icon>
+        </ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 4
+        </ion-label>
+        <ion-reorder slot="end">
+          <ion-icon :icon="pizza"></ion-icon>
+        </ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 5
+        </ion-label>
+        <ion-reorder slot="end">
+          <ion-icon :icon="pizza"></ion-icon>
+        </ion-reorder>
+      </ion-item>
+    </ion-reorder-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { pizza } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
+    setup() {
+      const handleReorder = (event: CustomEvent) => {
+        // The `from` and `to` properties contain the index of the item
+        // when the drag started and ended, respectively
+        console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+        // Finish the reorder and position the item in the DOM based on
+        // where the gesture ended. This method can also be called directly
+        // by the reorder group
+        event.detail.complete();
+      }
+      return { handleReorder, pizza }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_css.md b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..bd08063770b
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,46 @@
+```html
+<ion-content [scrollY]="false">
+  <div class="ion-content-scroll-host">
+    <ion-list>
+      <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+      <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+      <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
+        <ion-item>
+          <ion-label>
+            Item 1
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 2
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 3
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 4
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 5
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+      </ion-reorder-group>
+    </ion-list>
+  </div>
+</ion-content>
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 00000000000..2cd3dd66740
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    ev.detail.complete();
+  }
+}
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/demo.html b/static/usage/v7/reorder/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..8a94ae5d8e6
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/demo.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+
+    .ion-content-scroll-host {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content scroll-y="false">
+      <div class="container">
+        <div class="ion-content-scroll-host">
+          <ion-list>
+            <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+            <ion-reorder-group disabled="false">
+              <ion-item>
+                <ion-label>
+                  Item 1
+                </ion-label>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>
+                  Item 2
+                </ion-label>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>
+                  Item 3
+                </ion-label>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>
+                  Item 4
+                </ion-label>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>
+                  Item 5
+                </ion-label>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+            </ion-reorder-group>
+          </ion-list>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // The `from` and `to` properties contain the index of the item
+      // when the drag started and ended, respectively
+      console.log('Dragged from index', detail.from, 'to', detail.to);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      detail.complete();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/reorder/custom-scroll-target/index.md b/static/usage/v7/reorder/custom-scroll-target/index.md
new file mode 100644
index 00000000000..804561c4220
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/index.md
@@ -0,0 +1,36 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/reorder/custom-scroll-target/demo.html"
+  size="300px"
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/reorder/custom-scroll-target/javascript.md b/static/usage/v7/reorder/custom-scroll-target/javascript.md
new file mode 100644
index 00000000000..ec5f61d6476
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/javascript.md
@@ -0,0 +1,72 @@
+```html
+<ion-content scroll-y="false">
+  <div class="ion-content-scroll-host">
+    <ion-list>
+      <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+      <ion-reorder-group disabled="false">
+        <ion-item>
+          <ion-label>
+            Item 1
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 2
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 3
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 4
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 5
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+      </ion-reorder-group>
+    </ion-list>
+  </div>
+</ion-content>
+
+<script>
+  const reorderGroup = document.querySelector('ion-reorder-group');
+
+  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', detail.from, 'to', detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    detail.complete();
+  });
+</script>
+
+<style>
+  .ion-content-scroll-host {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+</style>
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/react/main_css.md b/static/usage/v7/reorder/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/v7/reorder/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..cd7fd8f84b0
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,66 @@
+```tsx
+import React from 'react';
+import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    event.detail.complete();
+  }
+
+  return (
+    <IonContent scrollY={false}>
+      <div className="ion-content-scroll-host">
+        <IonList>
+          {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+          <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+            <IonItem>
+              <IonLabel>
+                Item 1
+              </IonLabel>
+              <IonReorder slot="end"></IonReorder>
+            </IonItem>
+
+            <IonItem>
+              <IonLabel>
+                Item 2
+              </IonLabel>
+              <IonReorder slot="end"></IonReorder>
+            </IonItem>
+
+            <IonItem>
+              <IonLabel>
+                Item 3
+              </IonLabel>
+              <IonReorder slot="end"></IonReorder>
+            </IonItem>
+
+            <IonItem>
+              <IonLabel>
+                Item 4
+              </IonLabel>
+              <IonReorder slot="end"></IonReorder>
+            </IonItem>
+
+            <IonItem>
+              <IonLabel>
+                Item 5
+              </IonLabel>
+              <IonReorder slot="end"></IonReorder>
+            </IonItem>
+          </IonReorderGroup>
+        </IonList>
+      </div>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/vue.md b/static/usage/v7/reorder/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..808ed347020
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/vue.md
@@ -0,0 +1,82 @@
+```html
+<template>
+  <ion-content :scroll-y="false">
+    <div class="ion-content-scroll-host">
+      <ion-list>
+        <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+        <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
+          <ion-item>
+            <ion-label>
+              Item 1
+            </ion-label>
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>
+              Item 2
+            </ion-label>
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>
+              Item 3
+            </ion-label>
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>
+              Item 4
+            </ion-label>
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>
+              Item 5
+            </ion-label>
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>
+        </ion-reorder-group>
+      </ion-list>
+      </div>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
+    setup() {
+      const handleReorder = (event: CustomEvent) => {
+        // The `from` and `to` properties contain the index of the item
+        // when the drag started and ended, respectively
+        console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+        // Finish the reorder and position the item in the DOM based on
+        // where the gesture ended. This method can also be called directly
+        // by the reorder group
+        event.detail.complete();
+      }
+
+      return { handleReorder }
+    }
+  });
+</script>
+
+<style scoped>
+  .ion-content-scroll-host {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+</style>
+```
diff --git a/static/usage/v7/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v7/reorder/toggling-disabled/angular/example_component_html.md
new file mode 100644
index 00000000000..76af0bff12e
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/angular/example_component_html.md
@@ -0,0 +1,46 @@
+```html
+<ion-list>
+  <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+  <ion-reorder-group [disabled]="isDisabled" (ionItemReorder)="handleReorder($any($event))">
+    <ion-item>
+      <ion-label>
+        Item 1
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 2
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 3
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 4
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 5
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+  </ion-reorder-group>
+</ion-list>
+
+<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+<ion-button (click)="toggleReorder()">
+  Toggle Reorder
+</ion-button>
+```
diff --git a/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
new file mode 100644
index 00000000000..ded54467eba
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+  public isDisabled = true;
+
+  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    ev.detail.complete();
+  }
+
+  toggleReorder() {
+    this.isDisabled = !this.isDisabled;
+  }
+}
+```
diff --git a/static/usage/v7/reorder/toggling-disabled/demo.html b/static/usage/v7/reorder/toggling-disabled/demo.html
new file mode 100644
index 00000000000..1eb8cba120b
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/demo.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+      justify-content: space-evenly;
+    }
+
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-reorder-group>
+            <ion-item>
+              <ion-label>
+                Item 1
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 2
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 3
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 4
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 5
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+          </ion-reorder-group>
+        </ion-list>
+
+        <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+        <ion-button onClick="toggleReorder()">
+          Toggle Reorder
+        </ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // The `from` and `to` properties contain the index of the item
+      // when the drag started and ended, respectively
+      console.log('Dragged from index', detail.from, 'to', detail.to);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      detail.complete();
+    });
+
+    function toggleReorder() {
+      reorderGroup.disabled = !reorderGroup.disabled;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/reorder/toggling-disabled/index.md b/static/usage/v7/reorder/toggling-disabled/index.md
new file mode 100644
index 00000000000..a14528c98e8
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/reorder/toggling-disabled/demo.html"
+  size="350px"
+/>
diff --git a/static/usage/v7/reorder/toggling-disabled/javascript.md b/static/usage/v7/reorder/toggling-disabled/javascript.md
new file mode 100644
index 00000000000..68319ec0221
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/javascript.md
@@ -0,0 +1,64 @@
+```html
+<ion-list>
+  <ion-reorder-group>
+    <ion-item>
+      <ion-label>
+        Item 1
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 2
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 3
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 4
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 5
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+  </ion-reorder-group>
+</ion-list>
+
+<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+<ion-button onClick="toggleReorder()">
+  Toggle Reorder
+</ion-button>
+
+<script>
+  const reorderGroup = document.querySelector('ion-reorder-group');
+
+  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', detail.from, 'to', detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    detail.complete();
+  });
+
+  function toggleReorder() {
+    reorderGroup.disabled = !reorderGroup.disabled;
+  }
+</script>
+```
diff --git a/static/usage/v7/reorder/toggling-disabled/react.md b/static/usage/v7/reorder/toggling-disabled/react.md
new file mode 100644
index 00000000000..e86e1e7516f
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/react.md
@@ -0,0 +1,72 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+  const [isDisabled, setIsDisabled] = useState(true);
+
+  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    event.detail.complete();
+  }
+
+  function toggleReorder() {
+    setIsDisabled(current => !current);
+  }
+
+  return (
+    <>
+      <IonList>
+        <IonReorderGroup disabled={isDisabled} onIonItemReorder={handleReorder}>
+          <IonItem>
+            <IonLabel>
+              Item 1
+            </IonLabel>
+            <IonReorder slot="end"></IonReorder>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel>
+              Item 2
+            </IonLabel>
+            <IonReorder slot="end"></IonReorder>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel>
+              Item 3
+            </IonLabel>
+            <IonReorder slot="end"></IonReorder>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel>
+              Item 4
+            </IonLabel>
+            <IonReorder slot="end"></IonReorder>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel>
+              Item 5
+            </IonLabel>
+            <IonReorder slot="end"></IonReorder>
+          </IonItem>
+        </IonReorderGroup>
+      </IonList>
+
+      {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+      <IonButton onClick={toggleReorder}>
+        Toggle Reorder
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/toggling-disabled/vue.md b/static/usage/v7/reorder/toggling-disabled/vue.md
new file mode 100644
index 00000000000..4711f6dc74b
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/vue.md
@@ -0,0 +1,76 @@
+```html
+<template>
+  <ion-list>
+    <ion-reorder-group :disabled="isDisabled" @ionItemReorder="handleReorder($event)">
+      <ion-item>
+        <ion-label>
+          Item 1
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 2
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 3
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 4
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 5
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+    </ion-reorder-group>
+  </ion-list>
+
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-button @click="toggleReorder()">
+    Toggle Reorder
+  </ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
+    setup() {
+      let isDisabled = ref(true);
+
+      const handleReorder = (event: CustomEvent) => {
+        // The `from` and `to` properties contain the index of the item
+        // when the drag started and ended, respectively
+        console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+        // Finish the reorder and position the item in the DOM based on
+        // where the gesture ended. This method can also be called directly
+        // by the reorder group
+        event.detail.complete();
+      }
+
+      const toggleReorder = () => {
+        isDisabled.value = !isDisabled.value;
+      }
+
+      return { isDisabled, handleReorder, toggleReorder }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_html.md b/static/usage/v7/reorder/updating-data/angular/example_component_html.md
new file mode 100644
index 00000000000..4339191e634
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+<ion-list>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+  <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
+    <ion-item *ngFor="let item of items">
+      <ion-label>
+        Item {{ item }}
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+  </ion-reorder-group>
+</ion-list>
+```
diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1132926bb4
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+  items = [1, 2, 3, 4, 5];
+
+  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+    // Before complete is called with the items they will remain in the
+    // order before the drag
+    console.log('Before complete', this.items);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. Update the items variable to the
+    // new order of items
+    this.items = ev.detail.complete(this.items);
+
+    // After complete is called the items will be in the new order
+    console.log('After complete', this.items);
+  }
+}
+```
diff --git a/static/usage/v7/reorder/updating-data/demo.html b/static/usage/v7/reorder/updating-data/demo.html
new file mode 100644
index 00000000000..bf7d175f937
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/demo.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+          <ion-reorder-group disabled="false"></ion-reorder-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    let items = [1, 2, 3, 4, 5];
+    reorderItems(items);
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // Before complete is called with the items they will remain in the
+      // order before the drag
+      console.log('Before complete', items);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. Update the items variable to the
+      // new order of items
+      items = detail.complete(items);
+
+      // Reorder the items in the DOM
+      reorderItems(items);
+
+      // After complete is called the items will be in the new order
+      console.log('After complete', items);
+    });
+
+    function reorderItems(items) {
+      reorderGroup.replaceChildren();
+
+      let reordered = '';
+
+      for (let i = 0; i < items.length; i++) {
+        reordered += `
+          <ion-item>
+            <ion-label>
+              Item ${items[i]}
+            </ion-label>
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>
+        `;
+      }
+
+      reorderGroup.innerHTML = reordered;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/reorder/updating-data/index.md b/static/usage/v7/reorder/updating-data/index.md
new file mode 100644
index 00000000000..ba50342db20
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/reorder/updating-data/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/reorder/updating-data/javascript.md b/static/usage/v7/reorder/updating-data/javascript.md
new file mode 100644
index 00000000000..603f9802241
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/javascript.md
@@ -0,0 +1,49 @@
+```html
+<ion-list>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-reorder-group disabled="false"></ion-reorder-group>
+</ion-list>
+
+<script>
+  const reorderGroup = document.querySelector('ion-reorder-group');
+
+  let items = [1, 2, 3, 4, 5];
+  reorderItems(items);
+
+  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+    // Before complete is called with the items they will remain in the
+    // order before the drag
+    console.log('Before complete', items);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. Update the items variable to the
+    // new order of items
+    items = detail.complete(items);
+
+    // Reorder the items in the DOM
+    reorderItems(items);
+
+    // After complete is called the items will be in the new order
+    console.log('After complete', items);
+  });
+
+  function reorderItems(items) {
+    reorderGroup.replaceChildren();
+
+    let reordered = '';
+
+    for (let i = 0; i < items.length; i++) {
+      reordered += `
+        <ion-item>
+          <ion-label>
+            Item ${items[i]}
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+      `;
+    }
+
+    reorderGroup.innerHTML = reordered;
+  }
+</script>
+```
diff --git a/static/usage/v7/reorder/updating-data/react.md b/static/usage/v7/reorder/updating-data/react.md
new file mode 100644
index 00000000000..25e58caaf0f
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+  const [items, setItems] = useState([1, 2, 3, 4, 5]);
+
+  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+    // Before complete is called with the items they will remain in the
+    // order before the drag
+    console.log('Before complete', items);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. Update the items variable to the
+    // new order of items
+    setItems(event.detail.complete(items));
+
+    // After complete is called the items will be in the new order
+    console.log('After complete', items);
+  }
+
+  return (
+    <IonList>
+      {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+        {items.map(item =>
+          <IonItem>
+            <IonLabel>
+              Item { item }
+            </IonLabel>
+            <IonReorder slot="end"></IonReorder>
+          </IonItem>
+        )}
+      </IonReorderGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/updating-data/vue.md b/static/usage/v7/reorder/updating-data/vue.md
new file mode 100644
index 00000000000..024fa130469
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/vue.md
@@ -0,0 +1,42 @@
+```html
+<template>
+  <ion-list>
+    <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+    <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
+      <ion-item v-for="item in items">
+        <ion-label>
+          Item {{ item }}
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+    </ion-reorder-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
+    setup() {
+      const items = ref([1, 2, 3, 4, 5]);
+
+      const handleReorder = (event: CustomEvent) => {
+        // Before complete is called with the items they will remain in the
+        // order before the drag
+        console.log('Before complete', items.value);
+
+        // Finish the reorder and position the item in the DOM based on
+        // where the gesture ended. Update the items variable to the
+        // new order of items
+        items.value = event.detail.complete(items.value);
+
+        // After complete is called the items will be in the new order
+        console.log('After complete', items.value);
+      }
+      return { handleReorder, items }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/reorder/wrapper/angular/example_component_html.md b/static/usage/v7/reorder/wrapper/angular/example_component_html.md
new file mode 100644
index 00000000000..acc62e86b49
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/angular/example_component_html.md
@@ -0,0 +1,47 @@
+```html
+<ion-list>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+  <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 1
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 2
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 3
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 4
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 5
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+  </ion-reorder-group>
+</ion-list>
+```
diff --git a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    ev.detail.complete();
+  }
+}
+```
diff --git a/static/usage/v7/reorder/wrapper/demo.html b/static/usage/v7/reorder/wrapper/demo.html
new file mode 100644
index 00000000000..6bf8b66760b
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/demo.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reorder</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+          <ion-reorder-group disabled="false">
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 1
+                </ion-label>
+              </ion-item>
+            </ion-reorder>
+
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 2
+                </ion-label>
+              </ion-item>
+            </ion-reorder>
+
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 3
+                </ion-label>
+              </ion-item>
+            </ion-reorder>
+
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 4
+                </ion-label>
+              </ion-item>
+            </ion-reorder>
+
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 5
+                </ion-label>
+              </ion-item>
+            </ion-reorder>
+          </ion-reorder-group>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const reorderGroup = document.querySelector('ion-reorder-group');
+
+    reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      // The `from` and `to` properties contain the index of the item
+      // when the drag started and ended, respectively
+      console.log('Dragged from index', detail.from, 'to', detail.to);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      detail.complete();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/reorder/wrapper/index.md b/static/usage/v7/reorder/wrapper/index.md
new file mode 100644
index 00000000000..4e680cfdf61
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/reorder/wrapper/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/reorder/wrapper/javascript.md b/static/usage/v7/reorder/wrapper/javascript.md
new file mode 100644
index 00000000000..38d112c30fb
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/javascript.md
@@ -0,0 +1,61 @@
+```html
+<ion-list>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-reorder-group disabled="false">
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 1
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 2
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 3
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 4
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 5
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+  </ion-reorder-group>
+</ion-list>
+
+<script>
+  const reorderGroup = document.querySelector('ion-reorder-group');
+
+  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', detail.from, 'to', detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    detail.complete();
+  });
+</script>
+```
diff --git a/static/usage/v7/reorder/wrapper/react.md b/static/usage/v7/reorder/wrapper/react.md
new file mode 100644
index 00000000000..8abaf724dfa
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/react.md
@@ -0,0 +1,65 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    event.detail.complete();
+  }
+
+  return (
+    <IonList>
+      {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+        <IonReorder>
+          <IonItem>
+            <IonLabel>
+              Item 1
+            </IonLabel>
+          </IonItem>
+        </IonReorder>
+
+        <IonReorder>
+          <IonItem>
+            <IonLabel>
+              Item 2
+            </IonLabel>
+          </IonItem>
+        </IonReorder>
+
+        <IonReorder>
+          <IonItem>
+            <IonLabel>
+              Item 3
+            </IonLabel>
+          </IonItem>
+        </IonReorder>
+
+        <IonReorder>
+          <IonItem>
+            <IonLabel>
+              Item 4
+            </IonLabel>
+          </IonItem>
+        </IonReorder>
+
+        <IonReorder>
+          <IonItem>
+            <IonLabel>
+              Item 5
+            </IonLabel>
+          </IonItem>
+        </IonReorder>
+      </IonReorderGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/wrapper/vue.md b/static/usage/v7/reorder/wrapper/vue.md
new file mode 100644
index 00000000000..d0c732c7d39
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/vue.md
@@ -0,0 +1,71 @@
+```html
+<template>
+  <ion-list>
+    <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+    <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
+      <ion-reorder>
+        <ion-item>
+          <ion-label>
+            Item 1
+          </ion-label>
+        </ion-item>
+      </ion-reorder>
+
+      <ion-reorder>
+        <ion-item>
+          <ion-label>
+            Item 2
+          </ion-label>
+        </ion-item>
+      </ion-reorder>
+
+      <ion-reorder>
+        <ion-item>
+          <ion-label>
+            Item 3
+          </ion-label>
+        </ion-item>
+      </ion-reorder>
+
+      <ion-reorder>
+        <ion-item>
+          <ion-label>
+            Item 4
+          </ion-label>
+        </ion-item>
+      </ion-reorder>
+
+      <ion-reorder>
+        <ion-item>
+          <ion-label>
+            Item 5
+          </ion-label>
+        </ion-item>
+      </ion-reorder>
+    </ion-reorder-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
+    setup() {
+      const handleReorder = (event: CustomEvent) => {
+        // The `from` and `to` properties contain the index of the item
+        // when the drag started and ended, respectively
+        console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+        // Finish the reorder and position the item in the DOM based on
+        // where the gesture ended. This method can also be called directly
+        // by the reorder group
+        event.detail.complete();
+      }
+
+      return { handleReorder }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/ripple-effect/basic/angular/example_component_css.md b/static/usage/v7/ripple-effect/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..792bc105ff8
--- /dev/null
+++ b/static/usage/v7/ripple-effect/basic/angular/example_component_css.md
@@ -0,0 +1,43 @@
+```css
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+
+  height: 300px;
+  width: 300px;
+
+  margin: 0 auto;
+}
+
+b {
+  width: 100%;
+}
+
+.ripple-parent {
+  position: relative;
+  overflow: hidden;
+
+  border: 1px solid #ddd;
+}
+
+.rectangle {
+  width: 300px;
+  height: 150px;
+}
+
+.rounded-rectangle {
+  width: 185px;
+  height: 65px;
+  border-radius: 8px;
+}
+
+.circle {
+  width: 90px;
+  height: 90px;
+  border-radius: 50%;
+}
+```
diff --git a/static/usage/v7/ripple-effect/basic/angular/example_component_html.md b/static/usage/v7/ripple-effect/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f46a434abac
--- /dev/null
+++ b/static/usage/v7/ripple-effect/basic/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<div class="wrapper">
+  <b>Click on a shape to see the ripple</b>
+
+  <div class="ion-activatable ripple-parent rectangle">
+    <ion-ripple-effect></ion-ripple-effect>
+  </div>
+
+  <div class="ion-activatable ripple-parent rounded-rectangle">
+    <ion-ripple-effect></ion-ripple-effect>
+  </div>
+
+  <div class="ion-activatable ripple-parent circle">
+    <ion-ripple-effect></ion-ripple-effect>
+  </div>
+</div>
+```
diff --git a/static/usage/v7/ripple-effect/basic/demo.html b/static/usage/v7/ripple-effect/basic/demo.html
new file mode 100644
index 00000000000..fd593291421
--- /dev/null
+++ b/static/usage/v7/ripple-effect/basic/demo.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ripple Effect</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .wrapper {
+      display: flex;
+      flex-wrap: wrap;
+
+      align-items: center;
+      justify-content: space-between;
+      text-align: center;
+
+      height: 300px;
+      width: 300px;
+
+      margin: 0 auto;
+    }
+
+    b {
+      width: 100%;
+    }
+
+    .ripple-parent {
+      position: relative;
+      overflow: hidden;
+
+      border: 1px solid #ddd;
+    }
+
+    .rectangle {
+      width: 300px;
+      height: 150px;
+    }
+
+    .rounded-rectangle {
+      width: 185px;
+      height: 65px;
+      border-radius: 8px;
+    }
+
+    .circle {
+      width: 90px;
+      height: 90px;
+      border-radius: 50%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="wrapper">
+          <b>Click on a shape to see the ripple</b>
+
+          <div class="ion-activatable ripple-parent rectangle">
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <div class="ion-activatable ripple-parent rounded-rectangle">
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <div class="ion-activatable ripple-parent circle">
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/ripple-effect/basic/index.md b/static/usage/v7/ripple-effect/basic/index.md
new file mode 100644
index 00000000000..56050b2e4d0
--- /dev/null
+++ b/static/usage/v7/ripple-effect/basic/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/ripple-effect/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/ripple-effect/basic/javascript.md b/static/usage/v7/ripple-effect/basic/javascript.md
new file mode 100644
index 00000000000..14b645af763
--- /dev/null
+++ b/static/usage/v7/ripple-effect/basic/javascript.md
@@ -0,0 +1,61 @@
+```html
+<div class="wrapper">
+  <b>Click on a shape to see the ripple</b>
+
+  <div class="ion-activatable ripple-parent rectangle">
+    <ion-ripple-effect></ion-ripple-effect>
+  </div>
+
+  <div class="ion-activatable ripple-parent rounded-rectangle">
+    <ion-ripple-effect></ion-ripple-effect>
+  </div>
+
+  <div class="ion-activatable ripple-parent circle">
+    <ion-ripple-effect></ion-ripple-effect>
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    display: flex;
+    flex-wrap: wrap;
+
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+
+    height: 300px;
+    width: 300px;
+
+    margin: 0 auto;
+  }
+
+  b {
+    width: 100%;
+  }
+
+  .ripple-parent {
+    position: relative;
+    overflow: hidden;
+
+    border: 1px solid #ddd;
+  }
+
+  .rectangle {
+    width: 300px;
+    height: 150px;
+  }
+
+  .rounded-rectangle {
+    width: 185px;
+    height: 65px;
+    border-radius: 8px;
+  }
+
+  .circle {
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+  }
+</style>
+```
diff --git a/static/usage/v7/ripple-effect/basic/react/main_css.md b/static/usage/v7/ripple-effect/basic/react/main_css.md
new file mode 100644
index 00000000000..792bc105ff8
--- /dev/null
+++ b/static/usage/v7/ripple-effect/basic/react/main_css.md
@@ -0,0 +1,43 @@
+```css
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+
+  height: 300px;
+  width: 300px;
+
+  margin: 0 auto;
+}
+
+b {
+  width: 100%;
+}
+
+.ripple-parent {
+  position: relative;
+  overflow: hidden;
+
+  border: 1px solid #ddd;
+}
+
+.rectangle {
+  width: 300px;
+  height: 150px;
+}
+
+.rounded-rectangle {
+  width: 185px;
+  height: 65px;
+  border-radius: 8px;
+}
+
+.circle {
+  width: 90px;
+  height: 90px;
+  border-radius: 50%;
+}
+```
diff --git a/static/usage/v7/ripple-effect/basic/react/main_tsx.md b/static/usage/v7/ripple-effect/basic/react/main_tsx.md
new file mode 100644
index 00000000000..18bfb66c6d8
--- /dev/null
+++ b/static/usage/v7/ripple-effect/basic/react/main_tsx.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonRippleEffect } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <div className="wrapper">
+      <b>Click on a shape to see the ripple</b>
+
+      <div className="ion-activatable ripple-parent rectangle">
+        <IonRippleEffect></IonRippleEffect>
+      </div>
+
+      <div className="ion-activatable ripple-parent rounded-rectangle">
+        <IonRippleEffect></IonRippleEffect>
+      </div>
+
+      <div className="ion-activatable ripple-parent circle">
+        <IonRippleEffect></IonRippleEffect>
+      </div>
+    </div>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/ripple-effect/basic/vue.md b/static/usage/v7/ripple-effect/basic/vue.md
new file mode 100644
index 00000000000..e5270056c0c
--- /dev/null
+++ b/static/usage/v7/ripple-effect/basic/vue.md
@@ -0,0 +1,72 @@
+```html
+<template>
+  <div class="wrapper">
+    <b>Click on a shape to see the ripple</b>
+
+    <div class="ion-activatable ripple-parent rectangle">
+      <ion-ripple-effect></ion-ripple-effect>
+    </div>
+
+    <div class="ion-activatable ripple-parent rounded-rectangle">
+      <ion-ripple-effect></ion-ripple-effect>
+    </div>
+
+    <div class="ion-activatable ripple-parent circle">
+      <ion-ripple-effect></ion-ripple-effect>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { IonRippleEffect } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRippleEffect },
+  });
+</script>
+
+<style scoped>
+  .wrapper {
+    display: flex;
+    flex-wrap: wrap;
+
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+
+    height: 300px;
+    width: 300px;
+
+    margin: 0 auto;
+  }
+
+  b {
+    width: 100%;
+  }
+
+  .ripple-parent {
+    position: relative;
+    overflow: hidden;
+
+    border: 1px solid #ddd;
+  }
+
+  .rectangle {
+    width: 300px;
+    height: 150px;
+  }
+
+  .rounded-rectangle {
+    width: 185px;
+    height: 65px;
+    border-radius: 8px;
+  }
+
+  .circle {
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+  }
+</style>
+```
diff --git a/static/usage/v7/ripple-effect/customizing/angular/example_component_css.md b/static/usage/v7/ripple-effect/customizing/angular/example_component_css.md
new file mode 100644
index 00000000000..521a109d099
--- /dev/null
+++ b/static/usage/v7/ripple-effect/customizing/angular/example_component_css.md
@@ -0,0 +1,44 @@
+```css
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+
+  height: 170px;
+  width: 400px;
+
+  margin: 0 auto;
+}
+
+b {
+  width: 100%;
+}
+
+.ripple-parent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: relative;
+  overflow: hidden;
+
+  border: 1px solid #ddd;
+
+  user-select: none;
+
+  width: 100%;
+  height: 50px;
+  border-radius: 8px;
+}
+
+.custom-parent {
+  color: #de1e7e;
+}
+
+.custom-ripple {
+  color: #501ace;
+}
+```
diff --git a/static/usage/v7/ripple-effect/customizing/angular/example_component_html.md b/static/usage/v7/ripple-effect/customizing/angular/example_component_html.md
new file mode 100644
index 00000000000..0fa38298eb5
--- /dev/null
+++ b/static/usage/v7/ripple-effect/customizing/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<div class="wrapper">
+  <b>Click on a shape to see the ripple</b>
+
+  <div class="ion-activatable ripple-parent custom-parent">
+    Custom Parent Color
+    <ion-ripple-effect></ion-ripple-effect>
+  </div>
+
+  <div class="ion-activatable ripple-parent">
+    Custom Ripple Color
+    <ion-ripple-effect class="custom-ripple"></ion-ripple-effect>
+  </div>
+</div>
+```
diff --git a/static/usage/v7/ripple-effect/customizing/demo.html b/static/usage/v7/ripple-effect/customizing/demo.html
new file mode 100644
index 00000000000..6ce7f376ed1
--- /dev/null
+++ b/static/usage/v7/ripple-effect/customizing/demo.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ripple Effect</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .wrapper {
+      display: flex;
+      flex-wrap: wrap;
+
+      align-items: center;
+      justify-content: space-between;
+      text-align: center;
+
+      height: 170px;
+      width: 400px;
+
+      margin: 0 auto;
+    }
+
+    b {
+      width: 100%;
+    }
+
+    .ripple-parent {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      position: relative;
+      overflow: hidden;
+
+      border: 1px solid #ddd;
+
+      user-select: none;
+
+      width: 100%;
+      height: 50px;
+      border-radius: 8px;
+    }
+
+    .custom-parent {
+      color: #de1e7e;
+    }
+
+    .custom-ripple {
+      color: #501ace;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="wrapper">
+          <b>Click on a shape to see the ripple</b>
+
+          <div class="ion-activatable ripple-parent custom-parent">
+            Custom Parent Color
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <div class="ion-activatable ripple-parent">
+            Custom Ripple Color
+            <ion-ripple-effect class="custom-ripple"></ion-ripple-effect>
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/ripple-effect/customizing/index.md b/static/usage/v7/ripple-effect/customizing/index.md
new file mode 100644
index 00000000000..3f77c9fb519
--- /dev/null
+++ b/static/usage/v7/ripple-effect/customizing/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/ripple-effect/customizing/demo.html"
+  size="175px"
+/>
diff --git a/static/usage/v7/ripple-effect/customizing/javascript.md b/static/usage/v7/ripple-effect/customizing/javascript.md
new file mode 100644
index 00000000000..89f56b0d968
--- /dev/null
+++ b/static/usage/v7/ripple-effect/customizing/javascript.md
@@ -0,0 +1,60 @@
+```html
+<div class="wrapper">
+  <b>Click on a shape to see the ripple</b>
+
+  <div class="ion-activatable ripple-parent custom-parent">
+    Custom Parent Color
+    <ion-ripple-effect></ion-ripple-effect>
+  </div>
+
+  <div class="ion-activatable ripple-parent">
+    Custom Ripple Color
+    <ion-ripple-effect class="custom-ripple"></ion-ripple-effect>
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    display: flex;
+    flex-wrap: wrap;
+
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+
+    height: 170px;
+    width: 400px;
+
+    margin: 0 auto;
+  }
+
+  b {
+    width: 100%;
+  }
+
+  .ripple-parent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
+    overflow: hidden;
+
+    border: 1px solid #ddd;
+
+    user-select: none;
+
+    width: 100%;
+    height: 50px;
+    border-radius: 8px;
+  }
+
+  .custom-parent {
+    color: #de1e7e;
+  }
+
+  .custom-ripple {
+    color: #501ace;
+  }
+</style>
+```
diff --git a/static/usage/v7/ripple-effect/customizing/react/main_css.md b/static/usage/v7/ripple-effect/customizing/react/main_css.md
new file mode 100644
index 00000000000..521a109d099
--- /dev/null
+++ b/static/usage/v7/ripple-effect/customizing/react/main_css.md
@@ -0,0 +1,44 @@
+```css
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+
+  height: 170px;
+  width: 400px;
+
+  margin: 0 auto;
+}
+
+b {
+  width: 100%;
+}
+
+.ripple-parent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: relative;
+  overflow: hidden;
+
+  border: 1px solid #ddd;
+
+  user-select: none;
+
+  width: 100%;
+  height: 50px;
+  border-radius: 8px;
+}
+
+.custom-parent {
+  color: #de1e7e;
+}
+
+.custom-ripple {
+  color: #501ace;
+}
+```
diff --git a/static/usage/v7/ripple-effect/customizing/react/main_tsx.md b/static/usage/v7/ripple-effect/customizing/react/main_tsx.md
new file mode 100644
index 00000000000..76f36a67843
--- /dev/null
+++ b/static/usage/v7/ripple-effect/customizing/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonRippleEffect } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <div className="wrapper">
+      <b>Click on a shape to see the ripple</b>
+
+      <div className="ion-activatable ripple-parent custom-parent">
+        Custom Parent Color
+        <IonRippleEffect></IonRippleEffect>
+      </div>
+
+      <div className="ion-activatable ripple-parent">
+        Custom Ripple Color
+        <IonRippleEffect className="custom-ripple"></IonRippleEffect>
+      </div>
+    </div>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/ripple-effect/customizing/vue.md b/static/usage/v7/ripple-effect/customizing/vue.md
new file mode 100644
index 00000000000..d3ea639b68a
--- /dev/null
+++ b/static/usage/v7/ripple-effect/customizing/vue.md
@@ -0,0 +1,71 @@
+```html
+<template>
+  <div class="wrapper">
+    <b>Click on a shape to see the ripple</b>
+
+    <div class="ion-activatable ripple-parent custom-parent">
+      Custom Parent Color
+      <ion-ripple-effect></ion-ripple-effect>
+    </div>
+
+    <div class="ion-activatable ripple-parent">
+      Custom Ripple Color
+      <ion-ripple-effect class="custom-ripple"></ion-ripple-effect>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { IonRippleEffect } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRippleEffect },
+  });
+</script>
+
+<style scoped>
+  .wrapper {
+    display: flex;
+    flex-wrap: wrap;
+
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+
+    height: 170px;
+    width: 400px;
+
+    margin: 0 auto;
+  }
+
+  b {
+    width: 100%;
+  }
+
+  .ripple-parent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
+    overflow: hidden;
+
+    border: 1px solid #ddd;
+
+    user-select: none;
+
+    width: 100%;
+    height: 50px;
+    border-radius: 8px;
+  }
+
+  .custom-parent {
+    color: #de1e7e;
+  }
+
+  .custom-ripple {
+    color: #501ace;
+  }
+</style>
+```
diff --git a/static/usage/v7/ripple-effect/type/angular/example_component_css.md b/static/usage/v7/ripple-effect/type/angular/example_component_css.md
new file mode 100644
index 00000000000..e76413cf0ff
--- /dev/null
+++ b/static/usage/v7/ripple-effect/type/angular/example_component_css.md
@@ -0,0 +1,44 @@
+```css
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+
+  height: 170px;
+  width: 400px;
+
+  margin: 0 auto;
+}
+
+b {
+  width: 100%;
+}
+
+.ripple-parent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: relative;
+  overflow: hidden;
+
+  border: 1px solid #ddd;
+
+  user-select: none;
+}
+
+.rounded-rectangle {
+  width: 250px;
+  height: 75px;
+  border-radius: 8px;
+}
+
+.circle {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+}
+```
diff --git a/static/usage/v7/ripple-effect/type/angular/example_component_html.md b/static/usage/v7/ripple-effect/type/angular/example_component_html.md
new file mode 100644
index 00000000000..0e764c2e79a
--- /dev/null
+++ b/static/usage/v7/ripple-effect/type/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<div class="wrapper">
+  <b>Click on a shape to see the ripple</b>
+
+  <div class="ion-activatable ripple-parent rounded-rectangle">
+    Bounded
+    <ion-ripple-effect></ion-ripple-effect>
+  </div>
+
+  <div class="ion-activatable ripple-parent circle">
+    Unbounded
+    <ion-ripple-effect type="unbounded"></ion-ripple-effect>
+  </div>
+</div>
+```
diff --git a/static/usage/v7/ripple-effect/type/demo.html b/static/usage/v7/ripple-effect/type/demo.html
new file mode 100644
index 00000000000..cfaa115fac9
--- /dev/null
+++ b/static/usage/v7/ripple-effect/type/demo.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ripple Effect</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .wrapper {
+      display: flex;
+      flex-wrap: wrap;
+
+      align-items: center;
+      justify-content: space-between;
+      text-align: center;
+
+      height: 170px;
+      width: 400px;
+
+      margin: 0 auto;
+    }
+
+    b {
+      width: 100%;
+    }
+
+    .ripple-parent {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      position: relative;
+      overflow: hidden;
+
+      border: 1px solid #ddd;
+
+      user-select: none;
+    }
+
+    .rounded-rectangle {
+      width: 250px;
+      height: 75px;
+      border-radius: 8px;
+    }
+
+    .circle {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="wrapper">
+          <b>Click on a shape to see the ripple</b>
+
+          <div class="ion-activatable ripple-parent rounded-rectangle">
+            Bounded
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <div class="ion-activatable ripple-parent circle">
+            Unbounded
+            <ion-ripple-effect type="unbounded"></ion-ripple-effect>
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/ripple-effect/type/index.md b/static/usage/v7/ripple-effect/type/index.md
new file mode 100644
index 00000000000..db81e917556
--- /dev/null
+++ b/static/usage/v7/ripple-effect/type/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/ripple-effect/type/demo.html"
+  size="175px"
+/>
diff --git a/static/usage/v7/ripple-effect/type/javascript.md b/static/usage/v7/ripple-effect/type/javascript.md
new file mode 100644
index 00000000000..331612579e2
--- /dev/null
+++ b/static/usage/v7/ripple-effect/type/javascript.md
@@ -0,0 +1,60 @@
+```html
+<div class="wrapper">
+  <b>Click on a shape to see the ripple</b>
+
+  <div class="ion-activatable ripple-parent rounded-rectangle">
+    Bounded
+    <ion-ripple-effect></ion-ripple-effect>
+  </div>
+
+  <div class="ion-activatable ripple-parent circle">
+    Unbounded
+    <ion-ripple-effect type="unbounded"></ion-ripple-effect>
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    display: flex;
+    flex-wrap: wrap;
+
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+
+    height: 170px;
+    width: 400px;
+
+    margin: 0 auto;
+  }
+
+  b {
+    width: 100%;
+  }
+
+  .ripple-parent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
+    overflow: hidden;
+
+    border: 1px solid #ddd;
+
+    user-select: none;
+  }
+
+  .rounded-rectangle {
+    width: 250px;
+    height: 75px;
+    border-radius: 8px;
+  }
+
+  .circle {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+  }
+</style>
+```
diff --git a/static/usage/v7/ripple-effect/type/react/main_css.md b/static/usage/v7/ripple-effect/type/react/main_css.md
new file mode 100644
index 00000000000..e76413cf0ff
--- /dev/null
+++ b/static/usage/v7/ripple-effect/type/react/main_css.md
@@ -0,0 +1,44 @@
+```css
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+
+  height: 170px;
+  width: 400px;
+
+  margin: 0 auto;
+}
+
+b {
+  width: 100%;
+}
+
+.ripple-parent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: relative;
+  overflow: hidden;
+
+  border: 1px solid #ddd;
+
+  user-select: none;
+}
+
+.rounded-rectangle {
+  width: 250px;
+  height: 75px;
+  border-radius: 8px;
+}
+
+.circle {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+}
+```
diff --git a/static/usage/v7/ripple-effect/type/react/main_tsx.md b/static/usage/v7/ripple-effect/type/react/main_tsx.md
new file mode 100644
index 00000000000..ce7a1c6364c
--- /dev/null
+++ b/static/usage/v7/ripple-effect/type/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonRippleEffect } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <div className="wrapper">
+      <b>Click on a shape to see the ripple</b>
+
+      <div className="ion-activatable ripple-parent rounded-rectangle">
+        Bounded
+        <IonRippleEffect></IonRippleEffect>
+      </div>
+
+      <div className="ion-activatable ripple-parent circle">
+        Unbounded
+        <IonRippleEffect type="unbounded"></IonRippleEffect>
+      </div>
+    </div>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/ripple-effect/type/vue.md b/static/usage/v7/ripple-effect/type/vue.md
new file mode 100644
index 00000000000..e233fe60d9e
--- /dev/null
+++ b/static/usage/v7/ripple-effect/type/vue.md
@@ -0,0 +1,71 @@
+```html
+<template>
+  <div class="wrapper">
+    <b>Click on a shape to see the ripple</b>
+
+    <div class="ion-activatable ripple-parent rounded-rectangle">
+      Bounded
+      <ion-ripple-effect></ion-ripple-effect>
+    </div>
+
+    <div class="ion-activatable ripple-parent circle">
+      Unbounded
+      <ion-ripple-effect type="unbounded"></ion-ripple-effect>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { IonRippleEffect } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRippleEffect },
+  });
+</script>
+
+<style scoped>
+  .wrapper {
+    display: flex;
+    flex-wrap: wrap;
+
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+
+    height: 170px;
+    width: 400px;
+
+    margin: 0 auto;
+  }
+
+  b {
+    width: 100%;
+  }
+
+  .ripple-parent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
+    overflow: hidden;
+
+    border: 1px solid #ddd;
+
+    user-select: none;
+  }
+
+  .rounded-rectangle {
+    width: 250px;
+    height: 75px;
+    border-radius: 8px;
+  }
+
+  .circle {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+  }
+</style>
+```
diff --git a/static/usage/v7/searchbar/basic/angular.md b/static/usage/v7/searchbar/basic/angular.md
new file mode 100644
index 00000000000..610e6556428
--- /dev/null
+++ b/static/usage/v7/searchbar/basic/angular.md
@@ -0,0 +1,7 @@
+```html
+<ion-searchbar></ion-searchbar>
+<ion-searchbar placeholder="Custom Placeholder"></ion-searchbar>
+<ion-searchbar disabled="true" placeholder="Disabled"></ion-searchbar>
+<ion-searchbar value="Value"></ion-searchbar>
+<ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
+```
diff --git a/static/usage/v7/searchbar/basic/demo.html b/static/usage/v7/searchbar/basic/demo.html
new file mode 100644
index 00000000000..e4d6f94b532
--- /dev/null
+++ b/static/usage/v7/searchbar/basic/demo.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar></ion-searchbar>
+        <ion-searchbar placeholder="Custom Placeholder"></ion-searchbar>
+        <ion-searchbar disabled="true" placeholder="Disabled"></ion-searchbar>
+        <ion-searchbar value="Value"></ion-searchbar>
+        <ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/basic/index.md b/static/usage/v7/searchbar/basic/index.md
new file mode 100644
index 00000000000..163e4ff689a
--- /dev/null
+++ b/static/usage/v7/searchbar/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/searchbar/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/searchbar/basic/javascript.md b/static/usage/v7/searchbar/basic/javascript.md
new file mode 100644
index 00000000000..610e6556428
--- /dev/null
+++ b/static/usage/v7/searchbar/basic/javascript.md
@@ -0,0 +1,7 @@
+```html
+<ion-searchbar></ion-searchbar>
+<ion-searchbar placeholder="Custom Placeholder"></ion-searchbar>
+<ion-searchbar disabled="true" placeholder="Disabled"></ion-searchbar>
+<ion-searchbar value="Value"></ion-searchbar>
+<ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
+```
diff --git a/static/usage/v7/searchbar/basic/react.md b/static/usage/v7/searchbar/basic/react.md
new file mode 100644
index 00000000000..b0a3d625855
--- /dev/null
+++ b/static/usage/v7/searchbar/basic/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonSearchbar></IonSearchbar>
+      <IonSearchbar placeholder="Custom Placeholder"></IonSearchbar>
+      <IonSearchbar disabled={true} placeholder="Disabled"></IonSearchbar>
+      <IonSearchbar value="Value"></IonSearchbar>
+      <IonSearchbar animated={true} placeholder="Animated"></IonSearchbar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/basic/vue.md b/static/usage/v7/searchbar/basic/vue.md
new file mode 100644
index 00000000000..f50a9cb5a5f
--- /dev/null
+++ b/static/usage/v7/searchbar/basic/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-searchbar></ion-searchbar>
+  <ion-searchbar placeholder="Custom Placeholder"></ion-searchbar>
+  <ion-searchbar disabled="true" placeholder="Disabled"></ion-searchbar>
+  <ion-searchbar value="Value"></ion-searchbar>
+  <ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
+</template>
+
+<script lang="ts">
+  import { IonSearchbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonSearchbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/searchbar/cancel-button/angular.md b/static/usage/v7/searchbar/cancel-button/angular.md
new file mode 100644
index 00000000000..094e4d63193
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-searchbar show-cancel-button="focus" placeholder="Show on Focus"></ion-searchbar>
+<ion-searchbar show-cancel-button="always" placeholder="Always Show"></ion-searchbar>
+<ion-searchbar show-cancel-button="never" placeholder="Never Show"></ion-searchbar>
+<ion-searchbar show-cancel-button="always" cancel-button-text="Custom Cancel" cancel-button-icon="trash" placeholder="Custom Cancel Button"></ion-searchbar>
+```
diff --git a/static/usage/v7/searchbar/cancel-button/demo.html b/static/usage/v7/searchbar/cancel-button/demo.html
new file mode 100644
index 00000000000..ebfef12609b
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/demo.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar show-cancel-button="focus" placeholder="Show on Focus"></ion-searchbar>
+        <ion-searchbar show-cancel-button="always" placeholder="Always Show"></ion-searchbar>
+        <ion-searchbar show-cancel-button="never" placeholder="Never Show"></ion-searchbar>
+        <ion-searchbar show-cancel-button="always" cancel-button-text="Custom Cancel" cancel-button-icon="trash"
+          placeholder="Custom Cancel Button"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/cancel-button/index.md b/static/usage/v7/searchbar/cancel-button/index.md
new file mode 100644
index 00000000000..c1f4e1977cc
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/searchbar/cancel-button/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/searchbar/cancel-button/javascript.md b/static/usage/v7/searchbar/cancel-button/javascript.md
new file mode 100644
index 00000000000..094e4d63193
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-searchbar show-cancel-button="focus" placeholder="Show on Focus"></ion-searchbar>
+<ion-searchbar show-cancel-button="always" placeholder="Always Show"></ion-searchbar>
+<ion-searchbar show-cancel-button="never" placeholder="Never Show"></ion-searchbar>
+<ion-searchbar show-cancel-button="always" cancel-button-text="Custom Cancel" cancel-button-icon="trash" placeholder="Custom Cancel Button"></ion-searchbar>
+```
diff --git a/static/usage/v7/searchbar/cancel-button/react.md b/static/usage/v7/searchbar/cancel-button/react.md
new file mode 100644
index 00000000000..5f312e34aa0
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+import { trash } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonSearchbar showCancelButton="focus" placeholder="Show on Focus"></IonSearchbar>
+      <IonSearchbar showCancelButton="always" placeholder="Always Show"></IonSearchbar>
+      <IonSearchbar showCancelButton="never" placeholder="Never Show"></IonSearchbar>
+      <IonSearchbar showCancelButton="always" cancelButtonText="Custom Cancel" cancelButtonIcon={trash} placeholder="Custom Cancel Button"></IonSearchbar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/cancel-button/vue.md b/static/usage/v7/searchbar/cancel-button/vue.md
new file mode 100644
index 00000000000..a56a1451692
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-searchbar show-cancel-button="focus" placeholder="Show on Focus"></ion-searchbar>
+  <ion-searchbar show-cancel-button="always" placeholder="Always Show"></ion-searchbar>
+  <ion-searchbar show-cancel-button="never" placeholder="Never Show"></ion-searchbar>
+  <ion-searchbar show-cancel-button="always" cancel-button-text="Custom Cancel" :cancel-button-icon="trash" placeholder="Custom Cancel Button"></ion-searchbar>
+</template>
+
+<script lang="ts">
+  import { IonSearchbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { trash } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: { IonSearchbar },
+    setup() {
+      return { trash };
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/searchbar/clear-button/angular.md b/static/usage/v7/searchbar/clear-button/angular.md
new file mode 100644
index 00000000000..fa10e4b90d9
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-searchbar show-clear-button="focus" value="Show on Focus"></ion-searchbar>
+<ion-searchbar show-clear-button="always" value="Always Show"></ion-searchbar>
+<ion-searchbar show-clear-button="never" value="Never Show"></ion-searchbar>
+<ion-searchbar show-clear-button="always" clear-icon="trash-bin" value="Custom Clear Icon"></ion-searchbar>
+```
diff --git a/static/usage/v7/searchbar/clear-button/demo.html b/static/usage/v7/searchbar/clear-button/demo.html
new file mode 100644
index 00000000000..e85b497b349
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar show-clear-button="focus" value="Show on Focus"></ion-searchbar>
+        <ion-searchbar show-clear-button="always" value="Always Show"></ion-searchbar>
+        <ion-searchbar show-clear-button="never" value="Never Show"></ion-searchbar>
+        <ion-searchbar show-clear-button="always" clear-icon="trash-bin" value="Custom Clear Icon"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/clear-button/index.md b/static/usage/v7/searchbar/clear-button/index.md
new file mode 100644
index 00000000000..1d5212a124c
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/searchbar/clear-button/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/searchbar/clear-button/javascript.md b/static/usage/v7/searchbar/clear-button/javascript.md
new file mode 100644
index 00000000000..fa10e4b90d9
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-searchbar show-clear-button="focus" value="Show on Focus"></ion-searchbar>
+<ion-searchbar show-clear-button="always" value="Always Show"></ion-searchbar>
+<ion-searchbar show-clear-button="never" value="Never Show"></ion-searchbar>
+<ion-searchbar show-clear-button="always" clear-icon="trash-bin" value="Custom Clear Icon"></ion-searchbar>
+```
diff --git a/static/usage/v7/searchbar/clear-button/react.md b/static/usage/v7/searchbar/clear-button/react.md
new file mode 100644
index 00000000000..9f21f1a1d84
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+import { trashBin } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonSearchbar showClearButton="focus" value="Show on Focus"></IonSearchbar>
+      <IonSearchbar showClearButton="always" value="Always Show"></IonSearchbar>
+      <IonSearchbar showClearButton="never" value="Never Show"></IonSearchbar>
+      <IonSearchbar showClearButton="always" clearIcon={trashBin} value="Custom Clear Icon"></IonSearchbar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/clear-button/vue.md b/static/usage/v7/searchbar/clear-button/vue.md
new file mode 100644
index 00000000000..b778093f372
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-searchbar show-clear-button="focus" value="Show on Focus"></ion-searchbar>
+  <ion-searchbar show-clear-button="always" value="Always Show"></ion-searchbar>
+  <ion-searchbar show-clear-button="never" value="Never Show"></ion-searchbar>
+  <ion-searchbar show-clear-button="always" :clear-icon="trashBin" value="Custom Clear Icon"></ion-searchbar>
+</template>
+
+<script lang="ts">
+  import { IonSearchbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { trashBin } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: { IonSearchbar },
+    setup() {
+      return { trashBin };
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_html.md b/static/usage/v7/searchbar/debounce/angular/example_component_html.md
new file mode 100644
index 00000000000..5a554a24551
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-searchbar [debounce]="1000" (ionChange)="handleChange($event)"></ion-searchbar>
+
+<ion-list>
+  <ion-item *ngFor="let result of results">
+    <ion-label>{{ result }}</ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
new file mode 100644
index 00000000000..1d8215ef1a5
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
@@ -0,0 +1,17 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  public data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+  public results = [...this.data];
+
+  handleChange(event) {
+    const query = event.target.value.toLowerCase();
+    this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
+  }
+}
+```
diff --git a/static/usage/v7/searchbar/debounce/demo.html b/static/usage/v7/searchbar/debounce/demo.html
new file mode 100644
index 00000000000..ac43a663b20
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/demo.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar debounce="1000"></ion-searchbar>
+        <ion-list></ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+<script>
+  const searchbar = document.querySelector('ion-searchbar');
+  const list = document.querySelector('ion-list');
+
+  const data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+  let results = [...data];
+  filterItems(results);
+
+  searchbar.addEventListener('ionChange', handleChange);
+
+  function handleChange(event) {
+    const query = event.target.value.toLowerCase();
+    results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
+    filterItems(results);
+  }
+
+  function filterItems(results) {
+    list.replaceChildren();
+
+    let items = '';
+
+    for (let i = 0; i < results.length; i++) {
+      items += `
+        <ion-item>
+          <ion-label>${results[i]}</ion-label>
+        </ion-item>
+      `;
+    }
+
+    list.innerHTML = items;
+  }
+</script>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/debounce/index.md b/static/usage/v7/searchbar/debounce/index.md
new file mode 100644
index 00000000000..505f89c9234
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/searchbar/debounce/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v7/searchbar/debounce/javascript.md b/static/usage/v7/searchbar/debounce/javascript.md
new file mode 100644
index 00000000000..6a74446f699
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/javascript.md
@@ -0,0 +1,37 @@
+```html
+<ion-searchbar debounce="1000"></ion-searchbar>
+<ion-list></ion-list>
+
+<script>
+  const searchbar = document.querySelector('ion-searchbar');
+  const list = document.querySelector('ion-list');
+
+  const data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+  let results = [...data];
+  filterItems(results);
+
+  searchbar.addEventListener('ionChange', handleChange);
+
+  function handleChange(event) {
+    const query = event.target.value.toLowerCase();
+    results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
+    filterItems(results);
+  }
+
+  function filterItems(results) {
+    list.replaceChildren();
+
+    let items = '';
+
+    for (let i = 0; i < results.length; i++) {
+      items += `
+        <ion-item>
+          <ion-label>${results[i]}</ion-label>
+        </ion-item>
+      `;
+    }
+
+    list.innerHTML = items;
+  }
+</script>
+```
diff --git a/static/usage/v7/searchbar/debounce/react.md b/static/usage/v7/searchbar/debounce/react.md
new file mode 100644
index 00000000000..f46ce1a6da5
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonList, IonSearchbar } from '@ionic/react';
+
+function Example() {
+  const data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+  let [results, setResults] = useState([...data]);
+
+  const handleChange = (ev: Event) => {
+    let query = "";
+    const target = ev.target as HTMLIonSearchbarElement;
+    if (target) query = target.value!.toLowerCase();
+
+    setResults(data.filter(d => d.toLowerCase().indexOf(query) > -1));
+  }
+
+  return (
+    <>
+      <IonSearchbar debounce={1000} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
+
+      <IonList>
+        { results.map(result => (
+          <IonItem>{ result }</IonItem>
+        ))}
+      </IonList>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/debounce/vue.md b/static/usage/v7/searchbar/debounce/vue.md
new file mode 100644
index 00000000000..2d85d6ed2d2
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <ion-searchbar :debounce="1000" @ionChange="handleChange($event)"></ion-searchbar>
+
+  <ion-list>
+    <ion-item v-for="result in results">
+      <ion-label>{{ result }}</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonList, IonSearchbar } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonSearchbar },
+    setup() {
+      const data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+      const results = ref(data);
+
+      return { data, results };
+    },
+    methods: {
+      handleChange(event) {
+        const query = event.target.value.toLowerCase();
+        this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/searchbar/search-icon/angular.md b/static/usage/v7/searchbar/search-icon/angular.md
new file mode 100644
index 00000000000..2a66008d0cc
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/angular.md
@@ -0,0 +1,4 @@
+```html
+<ion-searchbar></ion-searchbar>
+<ion-searchbar search-icon="search-circle" placeholder="Custom Search Icon"></ion-searchbar>
+```
diff --git a/static/usage/v7/searchbar/search-icon/demo.html b/static/usage/v7/searchbar/search-icon/demo.html
new file mode 100644
index 00000000000..33e2793d25d
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar></ion-searchbar>
+        <ion-searchbar search-icon="search-circle" placeholder="Custom Search Icon"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/search-icon/index.md b/static/usage/v7/searchbar/search-icon/index.md
new file mode 100644
index 00000000000..951485a0809
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/searchbar/search-icon/demo.html" />
diff --git a/static/usage/v7/searchbar/search-icon/javascript.md b/static/usage/v7/searchbar/search-icon/javascript.md
new file mode 100644
index 00000000000..2a66008d0cc
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/javascript.md
@@ -0,0 +1,4 @@
+```html
+<ion-searchbar></ion-searchbar>
+<ion-searchbar search-icon="search-circle" placeholder="Custom Search Icon"></ion-searchbar>
+```
diff --git a/static/usage/v7/searchbar/search-icon/react.md b/static/usage/v7/searchbar/search-icon/react.md
new file mode 100644
index 00000000000..4bb596d1e00
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+import { searchCircle } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonSearchbar></IonSearchbar>
+      <IonSearchbar searchIcon={searchCircle} placeholder="Custom Search Icon"></IonSearchbar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/search-icon/vue.md b/static/usage/v7/searchbar/search-icon/vue.md
new file mode 100644
index 00000000000..6414acf7b2e
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-searchbar></ion-searchbar>
+  <ion-searchbar :search-icon="searchCircle" placeholder="Custom Search Icon"></ion-searchbar>
+</template>
+
+<script lang="ts">
+  import { IonSearchbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { searchCircle } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: { IonSearchbar },
+    setup() {
+      return { searchCircle };
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/searchbar/theming/colors/angular.md b/static/usage/v7/searchbar/theming/colors/angular.md
new file mode 100644
index 00000000000..b0f0f2e533f
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-searchbar placeholder="Default"></ion-searchbar>
+<ion-searchbar color="primary" placeholder="Primary"></ion-searchbar>
+<ion-searchbar color="secondary" placeholder="Secondary"></ion-searchbar>
+<ion-searchbar color="tertiary" placeholder="Tertiary"></ion-searchbar>
+<ion-searchbar color="success" placeholder="Success"></ion-searchbar>
+<ion-searchbar color="warning" placeholder="Warning"></ion-searchbar>
+<ion-searchbar color="danger" placeholder="Danger"></ion-searchbar>
+<ion-searchbar color="light" placeholder="Light"></ion-searchbar>
+<ion-searchbar color="medium" placeholder="Medium"></ion-searchbar>
+<ion-searchbar color="dark" placeholder="Dark"></ion-searchbar>
+```
diff --git a/static/usage/v7/searchbar/theming/colors/demo.html b/static/usage/v7/searchbar/theming/colors/demo.html
new file mode 100644
index 00000000000..5701010c08b
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar placeholder="Default"></ion-searchbar>
+        <ion-searchbar color="primary" placeholder="Primary"></ion-searchbar>
+        <ion-searchbar color="secondary" placeholder="Secondary"></ion-searchbar>
+        <ion-searchbar color="tertiary" placeholder="Tertiary"></ion-searchbar>
+        <ion-searchbar color="success" placeholder="Success"></ion-searchbar>
+        <ion-searchbar color="warning" placeholder="Warning"></ion-searchbar>
+        <ion-searchbar color="danger" placeholder="Danger"></ion-searchbar>
+        <ion-searchbar color="light" placeholder="Light"></ion-searchbar>
+        <ion-searchbar color="medium" placeholder="Medium"></ion-searchbar>
+        <ion-searchbar color="dark" placeholder="Dark"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/theming/colors/index.md b/static/usage/v7/searchbar/theming/colors/index.md
new file mode 100644
index 00000000000..670a3db2034
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/searchbar/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v7/searchbar/theming/colors/javascript.md b/static/usage/v7/searchbar/theming/colors/javascript.md
new file mode 100644
index 00000000000..b0f0f2e533f
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-searchbar placeholder="Default"></ion-searchbar>
+<ion-searchbar color="primary" placeholder="Primary"></ion-searchbar>
+<ion-searchbar color="secondary" placeholder="Secondary"></ion-searchbar>
+<ion-searchbar color="tertiary" placeholder="Tertiary"></ion-searchbar>
+<ion-searchbar color="success" placeholder="Success"></ion-searchbar>
+<ion-searchbar color="warning" placeholder="Warning"></ion-searchbar>
+<ion-searchbar color="danger" placeholder="Danger"></ion-searchbar>
+<ion-searchbar color="light" placeholder="Light"></ion-searchbar>
+<ion-searchbar color="medium" placeholder="Medium"></ion-searchbar>
+<ion-searchbar color="dark" placeholder="Dark"></ion-searchbar>
+```
diff --git a/static/usage/v7/searchbar/theming/colors/react.md b/static/usage/v7/searchbar/theming/colors/react.md
new file mode 100644
index 00000000000..d1c29b9cd28
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonSearchbar placeholder="Default"></IonSearchbar>
+      <IonSearchbar color="primary" placeholder="Primary"></IonSearchbar>
+      <IonSearchbar color="secondary" placeholder="Secondary"></IonSearchbar>
+      <IonSearchbar color="tertiary" placeholder="Tertiary"></IonSearchbar>
+      <IonSearchbar color="success" placeholder="Success"></IonSearchbar>
+      <IonSearchbar color="warning" placeholder="Warning"></IonSearchbar>
+      <IonSearchbar color="danger" placeholder="Danger"></IonSearchbar>
+      <IonSearchbar color="light" placeholder="Light"></IonSearchbar>
+      <IonSearchbar color="medium" placeholder="Medium"></IonSearchbar>
+      <IonSearchbar color="dark" placeholder="Dark"></IonSearchbar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/theming/colors/vue.md b/static/usage/v7/searchbar/theming/colors/vue.md
new file mode 100644
index 00000000000..ef95e690107
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-searchbar placeholder="Default"></ion-searchbar>
+  <ion-searchbar color="primary" placeholder="Primary"></ion-searchbar>
+  <ion-searchbar color="secondary" placeholder="Secondary"></ion-searchbar>
+  <ion-searchbar color="tertiary" placeholder="Tertiary"></ion-searchbar>
+  <ion-searchbar color="success" placeholder="Success"></ion-searchbar>
+  <ion-searchbar color="warning" placeholder="Warning"></ion-searchbar>
+  <ion-searchbar color="danger" placeholder="Danger"></ion-searchbar>
+  <ion-searchbar color="light" placeholder="Light"></ion-searchbar>
+  <ion-searchbar color="medium" placeholder="Medium"></ion-searchbar>
+  <ion-searchbar color="dark" placeholder="Dark"></ion-searchbar>
+</template>
+
+<script lang="ts">
+  import { IonSearchbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonSearchbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/angular/example_component_css.md b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..22aa0428b89
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,20 @@
+```css
+/* Scoped components require higher specificity to customize */
+ion-searchbar.custom {
+  --background: #19422d;
+  --color: #fff;
+  --placeholder-color: #fff;
+  --icon-color: #fff;
+  --clear-button-color: #fff;
+
+  --border-radius: 4px;
+}
+
+ion-searchbar.ios.custom {
+  --cancel-button-color: #19422d;
+}
+
+ion-searchbar.md.custom {
+  --cancel-button-color: #fff;
+}
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/angular/example_component_html.md b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..080217dcc41
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-searchbar showCancelButton="focus" class="custom"></ion-searchbar>
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/demo.html b/static/usage/v7/searchbar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..bd168970198
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Searchbar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+    }
+
+    ion-searchbar.custom {
+      --background: #19422d;
+      --color: #fff;
+      --placeholder-color: #fff;
+      --icon-color: #fff;
+      --clear-button-color: #fff;
+
+      --border-radius: 4px;
+    }
+
+    ion-searchbar.ios.custom {
+      --cancel-button-color: #19422d;
+    }
+
+    ion-searchbar.md.custom {
+      --cancel-button-color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-searchbar show-cancel-button="focus" class="custom"></ion-searchbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/theming/css-properties/index.md b/static/usage/v7/searchbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..65e3fca5306
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/searchbar/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/searchbar/theming/css-properties/javascript.md b/static/usage/v7/searchbar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..dca643d2a52
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/javascript.md
@@ -0,0 +1,24 @@
+```html
+<ion-searchbar show-cancel-button="focus" class="custom"></ion-searchbar>
+
+<style>
+/* Scoped components require higher specificity to customize */
+ion-searchbar.custom {
+  --background: #19422d;
+  --color: #fff;
+  --placeholder-color: #fff;
+  --icon-color: #fff;
+  --clear-button-color: #fff;
+
+  --border-radius: 4px;
+}
+
+ion-searchbar.ios.custom {
+  --cancel-button-color: #19422d;
+}
+
+ion-searchbar.md.custom {
+  --cancel-button-color: #fff;
+}
+</style>
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/react/main_css.md b/static/usage/v7/searchbar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..22aa0428b89
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/react/main_css.md
@@ -0,0 +1,20 @@
+```css
+/* Scoped components require higher specificity to customize */
+ion-searchbar.custom {
+  --background: #19422d;
+  --color: #fff;
+  --placeholder-color: #fff;
+  --icon-color: #fff;
+  --clear-button-color: #fff;
+
+  --border-radius: 4px;
+}
+
+ion-searchbar.ios.custom {
+  --cancel-button-color: #19422d;
+}
+
+ion-searchbar.md.custom {
+  --cancel-button-color: #fff;
+}
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/react/main_tsx.md b/static/usage/v7/searchbar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..4b1b527952e
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonSearchbar showCancelButton="focus" class="custom"></IonSearchbar>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/vue.md b/static/usage/v7/searchbar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..6e45e744231
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/vue.md
@@ -0,0 +1,35 @@
+```html
+<template>
+  <ion-searchbar showCancelButton="focus" class="custom"></ion-searchbar>
+</template>
+
+<script lang="ts">
+  import { IonSearchbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonSearchbar },
+  });
+</script>
+
+<style scoped>
+  /* Scoped components require higher specificity to customize */
+  ion-searchbar.custom {
+    --background: #19422d;
+    --color: #fff;
+    --placeholder-color: #fff;
+    --icon-color: #fff;
+    --clear-button-color: #fff;
+
+    --border-radius: 4px;
+  }
+
+  ion-searchbar.ios.custom {
+    --cancel-button-color: #19422d;
+  }
+
+  ion-searchbar.md.custom {
+    --cancel-button-color: #fff;
+  }
+</style>
+```
diff --git a/static/usage/v7/segment-button/basic/angular.md b/static/usage/v7/segment-button/basic/angular.md
new file mode 100644
index 00000000000..6f3fc0bb9ab
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/angular.md
@@ -0,0 +1,25 @@
+```html
+<ion-segment value="buttons">
+  <ion-segment-button value="default">
+    <ion-label>Default</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="buttons">
+    <ion-label>Button</ion-label>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment value="buttons">
+  <ion-segment-button value="disabled" [disabled]="true">
+    <ion-label>Disabled</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="buttons">
+    <ion-label>Button</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment-button/basic/demo.html b/static/usage/v7/segment-button/basic/demo.html
new file mode 100644
index 00000000000..280022dbc91
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/demo.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+
+      max-width: 400px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="buttons">
+          <ion-segment-button value="default">
+            <ion-label>Default</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="buttons">
+            <ion-label>Button</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="buttons">
+          <ion-segment-button value="disabled" disabled="true">
+            <ion-label>Disabled</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="buttons">
+            <ion-label>Button</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/segment-button/basic/index.md b/static/usage/v7/segment-button/basic/index.md
new file mode 100644
index 00000000000..ec9dd3aaaee
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/segment-button/basic/demo.html" />
diff --git a/static/usage/v7/segment-button/basic/javascript.md b/static/usage/v7/segment-button/basic/javascript.md
new file mode 100644
index 00000000000..d001e59d7fc
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/javascript.md
@@ -0,0 +1,25 @@
+```html
+<ion-segment value="buttons">
+  <ion-segment-button value="default">
+    <ion-label>Default</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="buttons">
+    <ion-label>Button</ion-label>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment value="buttons">
+  <ion-segment-button value="disabled" disabled="true">
+    <ion-label>Disabled</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="buttons">
+    <ion-label>Button</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment-button/basic/react.md b/static/usage/v7/segment-button/basic/react.md
new file mode 100644
index 00000000000..241242412bf
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonSegment value="buttons">
+        <IonSegmentButton value="default">
+          <IonLabel>Default</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="buttons">
+          <IonLabel>Button</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+
+      <IonSegment value="buttons">
+        <IonSegmentButton value="disabled" disabled={true}>
+          <IonLabel>Disabled</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="buttons">
+          <IonLabel>Button</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment-button/basic/vue.md b/static/usage/v7/segment-button/basic/vue.md
new file mode 100644
index 00000000000..79fd032d7ca
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+<template>
+  <ion-segment value="buttons">
+    <ion-segment-button value="default">
+      <ion-label>Default</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="buttons">
+      <ion-label>Button</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <ion-segment value="buttons">
+    <ion-segment-button value="disabled" :disabled="true">
+      <ion-label>Disabled</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="buttons">
+      <ion-label>Button</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonSegment, IonSegmentButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/segment-button/layout/angular.md b/static/usage/v7/segment-button/layout/angular.md
new file mode 100644
index 00000000000..3f634915d9b
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/angular.md
@@ -0,0 +1,73 @@
+```html
+<ion-segment value="heart">
+  <ion-segment-button value="call">
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart">
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin">
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment value="heart">
+  <ion-segment-button value="call">
+    <ion-label>Call</ion-label>
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart">
+    <ion-label>Heart</ion-label>
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin">
+    <ion-label>Pin</ion-label>
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment value="heart">
+  <ion-segment-button value="call" layout="icon-bottom">
+    <ion-label>Call</ion-label>
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart" layout="icon-bottom">
+    <ion-label>Heart</ion-label>
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin" layout="icon-bottom">
+    <ion-label>Pin</ion-label>
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment value="heart">
+  <ion-segment-button value="call" layout="icon-start">
+    <ion-label>Call</ion-label>
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart" layout="icon-start">
+    <ion-label>Heart</ion-label>
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin" layout="icon-start">
+    <ion-label>Pin</ion-label>
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment value="heart">
+  <ion-segment-button value="call" layout="icon-end">
+    <ion-label>Call</ion-label>
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart" layout="icon-end">
+    <ion-label>Heart</ion-label>
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin" layout="icon-end">
+    <ion-label>Pin</ion-label>
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment-button/layout/demo.html b/static/usage/v7/segment-button/layout/demo.html
new file mode 100644
index 00000000000..83bd89fd250
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/demo.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <Viewport="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+
+      max-width: 400px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="heart">
+          <ion-segment-button value="call">
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart">
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin">
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="heart">
+          <ion-segment-button value="call">
+            <ion-label>Call</ion-label>
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart">
+            <ion-label>Heart</ion-label>
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin">
+            <ion-label>Pin</ion-label>
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="heart">
+          <ion-segment-button value="call" layout="icon-bottom">
+            <ion-label>Call</ion-label>
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart" layout="icon-bottom">
+            <ion-label>Heart</ion-label>
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin" layout="icon-bottom">
+            <ion-label>Pin</ion-label>
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="heart">
+          <ion-segment-button value="call" layout="icon-start">
+            <ion-label>Call</ion-label>
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart" layout="icon-start">
+            <ion-label>Heart</ion-label>
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin" layout="icon-start">
+            <ion-label>Pin</ion-label>
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="heart">
+          <ion-segment-button value="call" layout="icon-end">
+            <ion-label>Call</ion-label>
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart" layout="icon-end">
+            <ion-label>Heart</ion-label>
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin" layout="icon-end">
+            <ion-label>Pin</ion-label>
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/segment-button/layout/index.md b/static/usage/v7/segment-button/layout/index.md
new file mode 100644
index 00000000000..942a15797b6
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/segment-button/layout/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/segment-button/layout/javascript.md b/static/usage/v7/segment-button/layout/javascript.md
new file mode 100644
index 00000000000..3f634915d9b
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/javascript.md
@@ -0,0 +1,73 @@
+```html
+<ion-segment value="heart">
+  <ion-segment-button value="call">
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart">
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin">
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment value="heart">
+  <ion-segment-button value="call">
+    <ion-label>Call</ion-label>
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart">
+    <ion-label>Heart</ion-label>
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin">
+    <ion-label>Pin</ion-label>
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment value="heart">
+  <ion-segment-button value="call" layout="icon-bottom">
+    <ion-label>Call</ion-label>
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart" layout="icon-bottom">
+    <ion-label>Heart</ion-label>
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin" layout="icon-bottom">
+    <ion-label>Pin</ion-label>
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment value="heart">
+  <ion-segment-button value="call" layout="icon-start">
+    <ion-label>Call</ion-label>
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart" layout="icon-start">
+    <ion-label>Heart</ion-label>
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin" layout="icon-start">
+    <ion-label>Pin</ion-label>
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment value="heart">
+  <ion-segment-button value="call" layout="icon-end">
+    <ion-label>Call</ion-label>
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart" layout="icon-end">
+    <ion-label>Heart</ion-label>
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin" layout="icon-end">
+    <ion-label>Pin</ion-label>
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment-button/layout/react.md b/static/usage/v7/segment-button/layout/react.md
new file mode 100644
index 00000000000..9b6c44ac073
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/react.md
@@ -0,0 +1,84 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+import { call, heart, pin } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonSegment value="heart">
+        <IonSegmentButton value="call">
+          <IonIcon icon={call}></IonIcon>
+        </IonSegmentButton>
+        <IonSegmentButton value="heart">
+          <IonIcon icon={heart}></IonIcon>
+        </IonSegmentButton>
+        <IonSegmentButton value="pin">
+          <IonIcon icon={pin}></IonIcon>
+        </IonSegmentButton>
+      </IonSegment>
+
+      <IonSegment value="heart">
+        <IonSegmentButton value="call">
+          <IonLabel>Call</IonLabel>
+          <IonIcon icon={call}></IonIcon>
+        </IonSegmentButton>
+        <IonSegmentButton value="heart">
+          <IonLabel>Heart</IonLabel>
+          <IonIcon icon={heart}></IonIcon>
+        </IonSegmentButton>
+        <IonSegmentButton value="pin">
+          <IonLabel>Pin</IonLabel>
+          <IonIcon icon={pin}></IonIcon>
+        </IonSegmentButton>
+      </IonSegment>
+
+      <IonSegment value="heart">
+        <IonSegmentButton value="call" layout="icon-bottom">
+          <IonLabel>Call</IonLabel>
+          <IonIcon icon={call}></IonIcon>
+        </IonSegmentButton>
+        <IonSegmentButton value="heart" layout="icon-bottom">
+          <IonLabel>Heart</IonLabel>
+          <IonIcon icon={heart}></IonIcon>
+        </IonSegmentButton>
+        <IonSegmentButton value="pin" layout="icon-bottom">
+          <IonLabel>Pin</IonLabel>
+          <IonIcon icon={pin}></IonIcon>
+        </IonSegmentButton>
+      </IonSegment>
+
+      <IonSegment value="heart">
+        <IonSegmentButton value="call" layout="icon-start">
+          <IonLabel>Call</IonLabel>
+          <IonIcon icon={call}></IonIcon>
+        </IonSegmentButton>
+        <IonSegmentButton value="heart" layout="icon-start">
+          <IonLabel>Heart</IonLabel>
+          <IonIcon icon={heart}></IonIcon>
+        </IonSegmentButton>
+        <IonSegmentButton value="pin" layout="icon-start">
+          <IonLabel>Pin</IonLabel>
+          <IonIcon icon={pin}></IonIcon>
+        </IonSegmentButton>
+      </IonSegment>
+
+      <IonSegment value="heart">
+        <IonSegmentButton value="call" layout="icon-end">
+          <IonLabel>Call</IonLabel>
+          <IonIcon icon={call}></IonIcon>
+        </IonSegmentButton>
+        <IonSegmentButton value="heart" layout="icon-end">
+          <IonLabel>Heart</IonLabel>
+          <IonIcon icon={heart}></IonIcon>
+        </IonSegmentButton>
+        <IonSegmentButton value="pin" layout="icon-end">
+          <IonLabel>Pin</IonLabel>
+          <IonIcon icon={pin}></IonIcon>
+        </IonSegmentButton>
+      </IonSegment>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment-button/layout/vue.md b/static/usage/v7/segment-button/layout/vue.md
new file mode 100644
index 00000000000..d3c60a4004d
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/vue.md
@@ -0,0 +1,88 @@
+```html
+<template>
+  <ion-segment value="heart">
+    <ion-segment-button value="call">
+      <ion-icon :icon="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="heart">
+      <ion-icon :icon="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="pin">
+      <ion-icon :icon="pin"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <ion-segment value="heart">
+    <ion-segment-button value="call">
+      <ion-label>Call</ion-label>
+      <ion-icon :icon="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="heart">
+      <ion-label>Heart</ion-label>
+      <ion-icon :icon="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="pin">
+      <ion-label>Pin</ion-label>
+      <ion-icon :icon="pin"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <ion-segment value="heart">
+    <ion-segment-button value="call" layout="icon-bottom">
+      <ion-label>Call</ion-label>
+      <ion-icon :icon="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="heart" layout="icon-bottom">
+      <ion-label>Heart</ion-label>
+      <ion-icon :icon="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="pin" layout="icon-bottom">
+      <ion-label>Pin</ion-label>
+      <ion-icon :icon="pin"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <ion-segment value="heart">
+    <ion-segment-button value="call" layout="icon-start">
+      <ion-label>Call</ion-label>
+      <ion-icon :icon="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="heart" layout="icon-start">
+      <ion-label>Heart</ion-label>
+      <ion-icon :icon="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="pin" layout="icon-start">
+      <ion-label>Pin</ion-label>
+      <ion-icon :icon="pin"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <ion-segment value="heart">
+    <ion-segment-button value="call" layout="icon-end">
+      <ion-label>Call</ion-label>
+      <ion-icon :icon="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="heart" layout="icon-end">
+      <ion-label>Heart</ion-label>
+      <ion-icon :icon="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="pin" layout="icon-end">
+      <ion-label>Pin</ion-label>
+      <ion-icon :icon="pin"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
+  import { call, heart, pin } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonIcon, IonLabel, IonSegment, IonSegmentButton },
+    setup() {
+      return { call, heart, pin };
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/angular/example_component_css.md b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..a4e8f04f2b0
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,19 @@
+```css
+ion-segment-button {
+  --indicator-color: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md {
+  --color: #000;
+  --color-checked: #08a391;
+  --indicator-height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios {
+  --color: #08a391;
+  --color-checked: #fff;
+  --border-radius: 20px;
+}
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/angular/example_component_html.md b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4ab86c2cdda
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-segment value="custom">
+  <ion-segment-button value="custom">
+    <ion-label>Custom</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="buttons">
+    <ion-label>Buttons</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/demo.html b/static/usage/v7/segment-button/theming/css-properties/demo.html
new file mode 100644
index 00000000000..144ecaa5639
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    ion-segment-button {
+      --indicator-color: #08a391;
+    }
+
+    /* Material Design styles */
+    ion-segment-button.md {
+      --color: #000;
+      --color-checked: #08a391;
+      --indicator-height: 4px;
+    }
+
+    /* iOS styles */
+    ion-segment-button.ios {
+      --color: #08a391;
+      --color-checked: #fff;
+      --border-radius: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="custom">
+          <ion-segment-button value="custom">
+            <ion-label>Custom</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="buttons">
+            <ion-label>Buttons</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/segment-button/theming/css-properties/index.md b/static/usage/v7/segment-button/theming/css-properties/index.md
new file mode 100644
index 00000000000..66e2e50f583
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/segment-button/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/segment-button/theming/css-properties/javascript.md b/static/usage/v7/segment-button/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f8ebaae2f19
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/javascript.md
@@ -0,0 +1,33 @@
+```html
+<style>
+  ion-segment-button {
+    --indicator-color: #08a391;
+  }
+
+  /* Material Design styles */
+  ion-segment-button.md {
+    --color: #000;
+    --color-checked: #08a391;
+    --indicator-height: 4px;
+  }
+
+  /* iOS styles */
+  ion-segment-button.ios {
+    --color: #08a391;
+    --color-checked: #fff;
+    --border-radius: 20px;
+  }
+</style>
+
+<ion-segment value="custom">
+  <ion-segment-button value="custom">
+    <ion-label>Custom</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="buttons">
+    <ion-label>Buttons</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/react/main_css.md b/static/usage/v7/segment-button/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..a4e8f04f2b0
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/react/main_css.md
@@ -0,0 +1,19 @@
+```css
+ion-segment-button {
+  --indicator-color: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md {
+  --color: #000;
+  --color-checked: #08a391;
+  --indicator-height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios {
+  --color: #08a391;
+  --color-checked: #fff;
+  --border-radius: 20px;
+}
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/react/main_tsx.md b/static/usage/v7/segment-button/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..2459d01206b
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonSegment value="custom">
+      <IonSegmentButton value="custom">
+        <IonLabel>Custom</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="segment">
+        <IonLabel>Segment</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="buttons">
+        <IonLabel>Buttons</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/vue.md b/static/usage/v7/segment-button/theming/css-properties/vue.md
new file mode 100644
index 00000000000..50c99688335
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/vue.md
@@ -0,0 +1,44 @@
+```html
+<template>
+  <ion-segment value="custom">
+    <ion-segment-button value="custom">
+      <ion-label>Custom</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="buttons">
+      <ion-label>Buttons</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonSegment, IonSegmentButton },
+  });
+</script>
+
+<style>
+  ion-segment-button {
+    --indicator-color: #08a391;
+  }
+
+  /* Material Design styles */
+  ion-segment-button.md {
+    --color: #000;
+    --color-checked: #08a391;
+    --indicator-height: 4px;
+  }
+
+  /* iOS styles */
+  ion-segment-button.ios {
+    --color: #08a391;
+    --color-checked: #fff;
+    --border-radius: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..fde253b69f9
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,31 @@
+```css
+ion-segment-button::part(indicator-background) {
+  background: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md::part(native) {
+  color: #000;
+}
+
+.segment-button-checked.md::part(native) {
+  color: #08a391;
+}
+
+ion-segment-button.md::part(indicator-background) {
+  height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios::part(native) {
+  color: #08a391;
+}
+
+.segment-button-checked.ios::part(native) {
+  color: #fff;
+}
+
+ion-segment-button.ios::part(indicator-background) {
+  border-radius: 20px;
+}
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4ab86c2cdda
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-segment value="custom">
+  <ion-segment-button value="custom">
+    <ion-label>Custom</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="buttons">
+    <ion-label>Buttons</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html b/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..c81886b5b20
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment Button</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    ion-segment-button::part(indicator-background) {
+      background: #08a391;
+    }
+
+    /* Material Design styles */
+    ion-segment-button.md::part(native) {
+      color: #000;
+    }
+
+    .segment-button-checked.md::part(native) {
+      color: #08a391;
+    }
+
+    ion-segment-button.md::part(indicator-background) {
+      height: 4px;
+    }
+
+    /* iOS styles */
+    ion-segment-button.ios::part(native) {
+      color: #08a391;
+    }
+
+    .segment-button-checked.ios::part(native) {
+      color: #fff;
+    }
+
+    ion-segment-button.ios::part(indicator-background) {
+      border-radius: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="custom">
+          <ion-segment-button value="custom">
+            <ion-label>Custom</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="buttons">
+            <ion-label>Buttons</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/index.md b/static/usage/v7/segment-button/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..9fe4b9f5e01
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/segment-button/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/javascript.md b/static/usage/v7/segment-button/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..102ba6ccd19
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,45 @@
+```html
+<style>
+  ion-segment-button::part(indicator-background) {
+    background: #08a391;
+  }
+
+  /* Material Design styles */
+  ion-segment-button.md::part(native) {
+    color: #000;
+  }
+
+  .segment-button-checked.md::part(native) {
+    color: #08a391;
+  }
+
+  ion-segment-button.md::part(indicator-background) {
+    height: 4px;
+  }
+
+  /* iOS styles */
+  ion-segment-button.ios::part(native) {
+    color: #08a391;
+  }
+
+  .segment-button-checked.ios::part(native) {
+    color: #fff;
+  }
+
+  ion-segment-button.ios::part(indicator-background) {
+    border-radius: 20px;
+  }
+</style>
+
+<ion-segment value="custom">
+  <ion-segment-button value="custom">
+    <ion-label>Custom</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="buttons">
+    <ion-label>Buttons</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..fde253b69f9
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,31 @@
+```css
+ion-segment-button::part(indicator-background) {
+  background: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md::part(native) {
+  color: #000;
+}
+
+.segment-button-checked.md::part(native) {
+  color: #08a391;
+}
+
+ion-segment-button.md::part(indicator-background) {
+  height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios::part(native) {
+  color: #08a391;
+}
+
+.segment-button-checked.ios::part(native) {
+  color: #fff;
+}
+
+ion-segment-button.ios::part(indicator-background) {
+  border-radius: 20px;
+}
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..2459d01206b
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonSegment value="custom">
+      <IonSegmentButton value="custom">
+        <IonLabel>Custom</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="segment">
+        <IonLabel>Segment</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="buttons">
+        <IonLabel>Buttons</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md b/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..911d8b7854e
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md
@@ -0,0 +1,56 @@
+```html
+<template>
+  <ion-segment value="custom">
+    <ion-segment-button value="custom">
+      <ion-label>Custom</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="buttons">
+      <ion-label>Buttons</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonSegment, IonSegmentButton },
+  });
+</script>
+
+<style>
+  ion-segment-button::part(indicator-background) {
+    background: #08a391;
+  }
+
+  /* Material Design styles */
+  ion-segment-button.md::part(native) {
+    color: #000;
+  }
+
+  .segment-button-checked.md::part(native) {
+    color: #08a391;
+  }
+
+  ion-segment-button.md::part(indicator-background) {
+    height: 4px;
+  }
+
+  /* iOS styles */
+  ion-segment-button.ios::part(native) {
+    color: #08a391;
+  }
+
+  .segment-button-checked.ios::part(native) {
+    color: #fff;
+  }
+
+  ion-segment-button.ios::part(indicator-background) {
+    border-radius: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/segment/basic/angular.md b/static/usage/v7/segment/basic/angular.md
new file mode 100644
index 00000000000..c497151f125
--- /dev/null
+++ b/static/usage/v7/segment/basic/angular.md
@@ -0,0 +1,19 @@
+```html
+<ion-segment value="default">
+  <ion-segment-button value="default">
+    <ion-label>Default</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment [disabled]="true" value="disabled">
+  <ion-segment-button value="disabled">
+    <ion-label>Disabled</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment/basic/demo.html b/static/usage/v7/segment/basic/demo.html
new file mode 100644
index 00000000000..886c2aafef7
--- /dev/null
+++ b/static/usage/v7/segment/basic/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+
+      max-width: 400px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="default">
+          <ion-segment-button value="default">
+            <ion-label>Default</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment disabled value="disabled">
+          <ion-segment-button value="disabled">
+            <ion-label>Disabled</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/segment/basic/index.md b/static/usage/v7/segment/basic/index.md
new file mode 100644
index 00000000000..3b98e622e39
--- /dev/null
+++ b/static/usage/v7/segment/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/segment/basic/demo.html" />
diff --git a/static/usage/v7/segment/basic/javascript.md b/static/usage/v7/segment/basic/javascript.md
new file mode 100644
index 00000000000..91d67d8dca7
--- /dev/null
+++ b/static/usage/v7/segment/basic/javascript.md
@@ -0,0 +1,19 @@
+```html
+<ion-segment value="default">
+  <ion-segment-button value="default">
+    <ion-label>Default</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+
+<ion-segment disabled="true" value="disabled">
+  <ion-segment-button value="disabled">
+    <ion-label>Disabled</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment/basic/react.md b/static/usage/v7/segment/basic/react.md
new file mode 100644
index 00000000000..bb5c402112f
--- /dev/null
+++ b/static/usage/v7/segment/basic/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonSegment value="default">
+        <IonSegmentButton value="default">
+          <IonLabel>Default</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+
+      <IonSegment disabled={true} value="disabled">
+        <IonSegmentButton value="disabled">
+          <IonLabel>Disabled</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment/basic/vue.md b/static/usage/v7/segment/basic/vue.md
new file mode 100644
index 00000000000..7252ce56f2f
--- /dev/null
+++ b/static/usage/v7/segment/basic/vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-segment value="default">
+    <ion-segment-button value="default">
+      <ion-label>Default</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <ion-segment :disabled="true" value="disabled">
+    <ion-segment-button value="disabled">
+      <ion-label>Disabled</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonSegment, IonSegmentButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/segment/scrollable/angular.md b/static/usage/v7/segment/scrollable/angular.md
new file mode 100644
index 00000000000..bbcc03848ec
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/angular.md
@@ -0,0 +1,34 @@
+```html
+<ion-segment [scrollable]="true" value="heart">
+  <ion-segment-button value="home">
+    <ion-icon name="home"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart">
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin">
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="star">
+    <ion-icon name="star"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="call">
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="globe">
+    <ion-icon name="globe"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="basket">
+    <ion-icon name="basket"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="barbell">
+    <ion-icon name="barbell"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="trash">
+    <ion-icon name="trash"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="person">
+    <ion-icon name="person"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment/scrollable/demo.html b/static/usage/v7/segment/scrollable/demo.html
new file mode 100644
index 00000000000..b8f90118667
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/demo.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: grid;
+    }
+
+    ion-segment {
+      width: 400px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment scrollable value="heart">
+          <ion-segment-button value="home">
+            <ion-icon name="home"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="heart">
+            <ion-icon name="heart"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="pin">
+            <ion-icon name="pin"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="star">
+            <ion-icon name="star"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="call">
+            <ion-icon name="call"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="globe">
+            <ion-icon name="globe"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="basket">
+            <ion-icon name="basket"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="barbell">
+            <ion-icon name="barbell"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="trash">
+            <ion-icon name="trash"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="person">
+            <ion-icon name="person"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/segment/scrollable/index.md b/static/usage/v7/segment/scrollable/index.md
new file mode 100644
index 00000000000..ca5ac7450cc
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/segment/scrollable/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/segment/scrollable/javascript.md b/static/usage/v7/segment/scrollable/javascript.md
new file mode 100644
index 00000000000..dfc630d1d46
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/javascript.md
@@ -0,0 +1,34 @@
+```html
+<ion-segment scrollable="true" value="heart">
+  <ion-segment-button value="home">
+    <ion-icon name="home"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="heart">
+    <ion-icon name="heart"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="pin">
+    <ion-icon name="pin"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="star">
+    <ion-icon name="star"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="call">
+    <ion-icon name="call"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="globe">
+    <ion-icon name="globe"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="basket">
+    <ion-icon name="basket"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="barbell">
+    <ion-icon name="barbell"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="trash">
+    <ion-icon name="trash"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="person">
+    <ion-icon name="person"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment/scrollable/react.md b/static/usage/v7/segment/scrollable/react.md
new file mode 100644
index 00000000000..61d304989bb
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/react';
+import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <IonSegment scrollable={true} value="heart">
+      <IonSegmentButton value="home">
+        <IonIcon icon={home}></IonIcon>
+      </IonSegmentButton>
+      <IonSegmentButton value="heart">
+        <IonIcon icon={heart}></IonIcon>
+      </IonSegmentButton>
+      <IonSegmentButton value="pin">
+        <IonIcon icon={pin}></IonIcon>
+      </IonSegmentButton>
+      <IonSegmentButton value="star">
+        <IonIcon icon={star}></IonIcon>
+      </IonSegmentButton>
+      <IonSegmentButton value="call">
+        <IonIcon icon={call}></IonIcon>
+      </IonSegmentButton>
+      <IonSegmentButton value="globe">
+        <IonIcon icon={globe}></IonIcon>
+      </IonSegmentButton>
+      <IonSegmentButton value="basket">
+        <IonIcon icon={basket}></IonIcon>
+      </IonSegmentButton>
+      <IonSegmentButton value="barbell">
+        <IonIcon icon={barbell}></IonIcon>
+      </IonSegmentButton>
+      <IonSegmentButton value="trash">
+        <IonIcon icon={trash}></IonIcon>
+      </IonSegmentButton>
+      <IonSegmentButton value="person">
+        <IonIcon icon={person}></IonIcon>
+      </IonSegmentButton>
+    </IonSegment>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment/scrollable/vue.md b/static/usage/v7/segment/scrollable/vue.md
new file mode 100644
index 00000000000..c3afaf67ba2
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/vue.md
@@ -0,0 +1,51 @@
+```html
+<template>
+  <ion-segment :scrollable="true" value="heart">
+    <ion-segment-button value="home">
+      <ion-icon :icon="home"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="heart">
+      <ion-icon :icon="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="pin">
+      <ion-icon :icon="pin"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="star">
+      <ion-icon :icon="star"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="call">
+      <ion-icon :icon="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="globe">
+      <ion-icon :icon="globe"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="basket">
+      <ion-icon :icon="basket"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="barbell">
+      <ion-icon :icon="barbell"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="trash">
+      <ion-icon :icon="trash"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="person">
+      <ion-icon :icon="person"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/vue';
+  import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonIcon, IonSegment, IonSegmentButton },
+    setup() {
+      return {
+        home, heart, pin, star, call, globe, basket, barbell, trash, person
+      }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/segment/theming/colors/angular.md b/static/usage/v7/segment/theming/colors/angular.md
new file mode 100644
index 00000000000..4787acc7ba3
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/angular.md
@@ -0,0 +1,82 @@
+```html
+<ion-segment value="default">
+  <ion-segment-button value="default">
+    <ion-label>Default</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="primary" value="primary">
+  <ion-segment-button value="primary">
+    <ion-label>Primary</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="secondary" value="secondary">
+  <ion-segment-button value="secondary">
+    <ion-label>Secondary</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="tertiary" value="tertiary">
+  <ion-segment-button value="tertiary">
+    <ion-label>Tertiary</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="success" value="success">
+  <ion-segment-button value="success">
+    <ion-label>Success</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="warning" value="warning">
+  <ion-segment-button value="warning">
+    <ion-label>Warning</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="danger" value="danger">
+  <ion-segment-button value="danger">
+    <ion-label>Danger</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="light" value="light">
+  <ion-segment-button value="light">
+    <ion-label>Light</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="medium" value="medium">
+  <ion-segment-button value="medium">
+    <ion-label>Medium</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="dark" value="dark">
+  <ion-segment-button value="dark">
+    <ion-label>Dark</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment/theming/colors/demo.html b/static/usage/v7/segment/theming/colors/demo.html
new file mode 100644
index 00000000000..0f7579af2cd
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/demo.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Segment</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+
+      max-width: 400px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="default">
+          <ion-segment-button value="default">
+            <ion-label>Default</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="primary" value="primary">
+          <ion-segment-button value="primary">
+            <ion-label>Primary</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="secondary" value="secondary">
+          <ion-segment-button value="secondary">
+            <ion-label>Secondary</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="tertiary" value="tertiary">
+          <ion-segment-button value="tertiary">
+            <ion-label>Tertiary</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="success" value="success">
+          <ion-segment-button value="success">
+            <ion-label>Success</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="warning" value="warning">
+          <ion-segment-button value="warning">
+            <ion-label>Warning</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="danger" value="danger">
+          <ion-segment-button value="danger">
+            <ion-label>Danger</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="light" value="light">
+          <ion-segment-button value="light">
+            <ion-label>Light</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="medium" value="medium">
+          <ion-segment-button value="medium">
+            <ion-label>Medium</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment color="dark" value="dark">
+          <ion-segment-button value="dark">
+            <ion-label>Dark</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/segment/theming/colors/index.md b/static/usage/v7/segment/theming/colors/index.md
new file mode 100644
index 00000000000..bdcf06a9deb
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/segment/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v7/segment/theming/colors/javascript.md b/static/usage/v7/segment/theming/colors/javascript.md
new file mode 100644
index 00000000000..4787acc7ba3
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/javascript.md
@@ -0,0 +1,82 @@
+```html
+<ion-segment value="default">
+  <ion-segment-button value="default">
+    <ion-label>Default</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="primary" value="primary">
+  <ion-segment-button value="primary">
+    <ion-label>Primary</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="secondary" value="secondary">
+  <ion-segment-button value="secondary">
+    <ion-label>Secondary</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="tertiary" value="tertiary">
+  <ion-segment-button value="tertiary">
+    <ion-label>Tertiary</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="success" value="success">
+  <ion-segment-button value="success">
+    <ion-label>Success</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="warning" value="warning">
+  <ion-segment-button value="warning">
+    <ion-label>Warning</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="danger" value="danger">
+  <ion-segment-button value="danger">
+    <ion-label>Danger</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="light" value="light">
+  <ion-segment-button value="light">
+    <ion-label>Light</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="medium" value="medium">
+  <ion-segment-button value="medium">
+    <ion-label>Medium</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+<ion-segment color="dark" value="dark">
+  <ion-segment-button value="dark">
+    <ion-label>Dark</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment/theming/colors/react.md b/static/usage/v7/segment/theming/colors/react.md
new file mode 100644
index 00000000000..81c799bbbec
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/react.md
@@ -0,0 +1,92 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonSegment value="default">
+        <IonSegmentButton value="default">
+          <IonLabel>Default</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+      <IonSegment color="primary" value="primary">
+        <IonSegmentButton value="primary">
+          <IonLabel>Primary</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+      <IonSegment color="secondary" value="secondary">
+        <IonSegmentButton value="secondary">
+          <IonLabel>Secondary</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+      <IonSegment color="tertiary" value="tertiary">
+        <IonSegmentButton value="tertiary">
+          <IonLabel>Tertiary</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+      <IonSegment color="success" value="success">
+        <IonSegmentButton value="success">
+          <IonLabel>Success</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+      <IonSegment color="warning" value="warning">
+        <IonSegmentButton value="warning">
+          <IonLabel>Warning</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+      <IonSegment color="danger" value="danger">
+        <IonSegmentButton value="danger">
+          <IonLabel>Danger</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+      <IonSegment color="light" value="light">
+        <IonSegmentButton value="light">
+          <IonLabel>Light</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+      <IonSegment color="medium" value="medium">
+        <IonSegmentButton value="medium">
+          <IonLabel>Medium</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+      <IonSegment color="dark" value="dark">
+        <IonSegmentButton value="dark">
+          <IonLabel>Dark</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment/theming/colors/vue.md b/static/usage/v7/segment/theming/colors/vue.md
new file mode 100644
index 00000000000..fcce8cce913
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/vue.md
@@ -0,0 +1,93 @@
+```html
+<template>
+  <ion-segment value="default">
+    <ion-segment-button value="default">
+      <ion-label>Default</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+  <ion-segment color="primary" value="primary">
+    <ion-segment-button value="primary">
+      <ion-label>Primary</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+  <ion-segment color="secondary" value="secondary">
+    <ion-segment-button value="secondary">
+      <ion-label>Secondary</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+  <ion-segment color="tertiary" value="tertiary">
+    <ion-segment-button value="tertiary">
+      <ion-label>Tertiary</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+  <ion-segment color="success" value="success">
+    <ion-segment-button value="success">
+      <ion-label>Success</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+  <ion-segment color="warning" value="warning">
+    <ion-segment-button value="warning">
+      <ion-label>Warning</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+  <ion-segment color="danger" value="danger">
+    <ion-segment-button value="danger">
+      <ion-label>Danger</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+  <ion-segment color="light" value="light">
+    <ion-segment-button value="light">
+      <ion-label>Light</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+  <ion-segment color="medium" value="medium">
+    <ion-segment-button value="medium">
+      <ion-label>Medium</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+  <ion-segment color="dark" value="dark">
+    <ion-segment-button value="dark">
+      <ion-label>Dark</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonSegment, IonSegmentButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/segment/theming/css-properties/angular/example_component_css.md b/static/usage/v7/segment/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..8ecca25270d
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-segment {
+  --background: #54dc98;
+}
+```
diff --git a/static/usage/v7/segment/theming/css-properties/angular/example_component_html.md b/static/usage/v7/segment/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..01aac10305d
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-segment value="custom">
+  <ion-segment-button value="custom">
+    <ion-label>Custom</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment/theming/css-properties/demo.html b/static/usage/v7/segment/theming/css-properties/demo.html
new file mode 100644
index 00000000000..d6d92fbd835
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/demo.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Note</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    ion-segment {
+      --background: #54dc98;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-segment value="custom">
+          <ion-segment-button value="custom">
+            <ion-label>Custom</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/segment/theming/css-properties/index.md b/static/usage/v7/segment/theming/css-properties/index.md
new file mode 100644
index 00000000000..da21c55735d
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/segment/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/segment/theming/css-properties/javascript.md b/static/usage/v7/segment/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..b5ae092adeb
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+<style>
+  ion-segment {
+    --background: #54dc98;
+  }
+</style>
+
+<ion-segment value="custom">
+  <ion-segment-button value="custom">
+    <ion-label>Custom</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="segment">
+    <ion-label>Segment</ion-label>
+  </ion-segment-button>
+</ion-segment>
+```
diff --git a/static/usage/v7/segment/theming/css-properties/react/main_css.md b/static/usage/v7/segment/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..8ecca25270d
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-segment {
+  --background: #54dc98;
+}
+```
diff --git a/static/usage/v7/segment/theming/css-properties/react/main_tsx.md b/static/usage/v7/segment/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..a7e9dc7e0f5
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonSegment value="custom">
+        <IonSegmentButton value="custom">
+          <IonLabel>Custom</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="segment">
+          <IonLabel>Segment</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment/theming/css-properties/vue.md b/static/usage/v7/segment/theming/css-properties/vue.md
new file mode 100644
index 00000000000..00bf2e42c8f
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-segment value="custom">
+    <ion-segment-button value="custom">
+      <ion-label>Custom</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="segment">
+      <ion-label>Segment</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonSegment, IonSegmentButton },
+  });
+</script>
+
+<style>
+  ion-segment {
+    --background: #54dc98;
+  }
+</style>
+```
diff --git a/static/usage/v7/select/basic/multiple-selection/angular.md b/static/usage/v7/select/basic/multiple-selection/angular.md
new file mode 100644
index 00000000000..d4d85ec8dc1
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select placeholder="Select all fruits that apply" [multiple]="true">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/basic/multiple-selection/demo.html b/static/usage/v7/select/basic/multiple-selection/demo.html
new file mode 100644
index 00000000000..9847cfa382b
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Multiple Selection</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select placeholder="Select all fruits that apply" multiple="true">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/select/basic/multiple-selection/index.md b/static/usage/v7/select/basic/multiple-selection/index.md
new file mode 100644
index 00000000000..2523a47bcc6
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/select/basic/multiple-selection/demo.html"
+/>
diff --git a/static/usage/v7/select/basic/multiple-selection/javascript.md b/static/usage/v7/select/basic/multiple-selection/javascript.md
new file mode 100644
index 00000000000..bf9e764aa36
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select placeholder="Select all fruits that apply" multiple="true">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/basic/multiple-selection/react.md b/static/usage/v7/select/basic/multiple-selection/react.md
new file mode 100644
index 00000000000..2e1ae8df319
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect placeholder="Select all fruits that apply" multiple={true}>
+          <IonSelectOption value="apples">Apples</IonSelectOption>
+          <IonSelectOption value="oranges">Oranges</IonSelectOption>
+          <IonSelectOption value="bananas">Bananas</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/basic/multiple-selection/vue.md b/static/usage/v7/select/basic/multiple-selection/vue.md
new file mode 100644
index 00000000000..cfe163a5384
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select placeholder="Select all fruits that apply" :multiple="true">
+        <ion-select-option value="apples">Apples</ion-select-option>
+        <ion-select-option value="oranges">Oranges</ion-select-option>
+        <ion-select-option value="bananas">Bananas</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonSelect, IonSelectOption },
+  });
+</script>
+```
diff --git a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_html.md b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_html.md
new file mode 100644
index 00000000000..de30bdc02d0
--- /dev/null
+++ b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select
+      placeholder="Select fruit"
+      (ionChange)="handleChange($event)"
+      (ionCancel)="pushLog('ionCancel fired')"
+      (ionDismiss)="pushLog('ionDismiss fired')"
+    >
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+<div class="ion-padding">
+  <p *ngFor="let log of logs">{{ log }}</p>
+</div>
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
new file mode 100644
index 00000000000..18c0b1eaa1b
--- /dev/null
+++ b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  logs: string[] = [];
+
+  pushLog(msg) {
+    this.logs.unshift(msg);
+  }
+
+  handleChange(e) {
+    this.pushLog('ionChange fired with value: ' + e.detail.value);
+  }
+}
+```
diff --git a/static/usage/v7/select/basic/responding-to-interaction/demo.html b/static/usage/v7/select/basic/responding-to-interaction/demo.html
new file mode 100644
index 00000000000..dbea5d3b8df
--- /dev/null
+++ b/static/usage/v7/select/basic/responding-to-interaction/demo.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Responding to Interaction</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    #log {
+      height: 250px;
+      width: 300px;
+
+      overflow: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div>
+          <ion-list>
+            <ion-item>
+              <ion-select placeholder="Select fruit">
+                <ion-select-option value="apples">Apples</ion-select-option>
+                <ion-select-option value="oranges">Oranges</ion-select-option>
+                <ion-select-option value="bananas">Bananas</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+
+          <div id="log" class="ion-padding"></div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const select = document.querySelector('ion-select');
+    const log = document.querySelector('#log');
+
+    select.addEventListener('ionChange', e => {
+      log.insertAdjacentHTML('afterbegin', `<p>ionChange fired with value: ${e.detail.value}</p>`);
+    });
+
+    select.addEventListener('ionCancel', () => {
+      log.insertAdjacentHTML('afterbegin', '<p>ionCancel fired</p>');
+    });
+
+    select.addEventListener('ionDismiss', () => {
+      log.insertAdjacentHTML('afterbegin', '<p>ionDismiss fired</p>');
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/select/basic/responding-to-interaction/index.md b/static/usage/v7/select/basic/responding-to-interaction/index.md
new file mode 100644
index 00000000000..583ffe168f6
--- /dev/null
+++ b/static/usage/v7/select/basic/responding-to-interaction/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/select/basic/responding-to-interaction/demo.html"
+/>
diff --git a/static/usage/v7/select/basic/responding-to-interaction/javascript.md b/static/usage/v7/select/basic/responding-to-interaction/javascript.md
new file mode 100644
index 00000000000..78ba1244101
--- /dev/null
+++ b/static/usage/v7/select/basic/responding-to-interaction/javascript.md
@@ -0,0 +1,29 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+<div id="log" class="ion-padding"></div>
+
+<script>
+  const select = document.querySelector('ion-select');
+  const log = document.querySelector('#log');
+
+  select.addEventListener('ionChange', e => {
+    log.insertAdjacentHTML('afterbegin', `<p>ionChange fired with value: ${e.detail.value}</p>`);
+  });
+
+  select.addEventListener('ionCancel', () => {
+    log.insertAdjacentHTML('afterbegin', '<p>ionCancel fired</p>');
+  });
+
+  select.addEventListener('ionDismiss', () => {
+    log.insertAdjacentHTML('afterbegin', '<p>ionDismiss fired</p>');
+  });
+</script>
+```
diff --git a/static/usage/v7/select/basic/responding-to-interaction/react.md b/static/usage/v7/select/basic/responding-to-interaction/react.md
new file mode 100644
index 00000000000..e6a85e2eef6
--- /dev/null
+++ b/static/usage/v7/select/basic/responding-to-interaction/react.md
@@ -0,0 +1,38 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+
+function Example() {
+  const [logs, setLogs] = useState<string[]>([]);
+
+  const pushLog = (msg: string) => {
+    setLogs([msg, ...logs]);
+  };
+
+  return (
+    <>
+      <IonList>
+        <IonItem>
+          <IonSelect
+            placeholder="Select fruit"
+            onIonChange={(e) => pushLog(`ionChange fired with value: ${e.detail.value}`)}
+            onIonCancel={() => pushLog('ionCancel fired')}
+            onIonDismiss={() => pushLog('ionDismiss fired')}
+          >
+            <IonSelectOption value="apples">Apples</IonSelectOption>
+            <IonSelectOption value="oranges">Oranges</IonSelectOption>
+            <IonSelectOption value="bananas">Bananas</IonSelectOption>
+          </IonSelect>
+        </IonItem>
+      </IonList>
+      <div className="ion-padding">
+        {logs.map((log) => (
+          <p>{log}</p>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/select/basic/responding-to-interaction/vue.md b/static/usage/v7/select/basic/responding-to-interaction/vue.md
new file mode 100644
index 00000000000..e8d2880e45e
--- /dev/null
+++ b/static/usage/v7/select/basic/responding-to-interaction/vue.md
@@ -0,0 +1,40 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select
+        placeholder="Select fruit"
+        @ionChange="pushLog('ionChange fired with value: ' + $event.detail.value)"
+        @ionCancel="pushLog('ionCancel fired')"
+        @ionDismiss="pushLog('ionDismiss fired')"
+      >
+        <ion-select-option value="apples">Apples</ion-select-option>
+        <ion-select-option value="oranges">Oranges</ion-select-option>
+        <ion-select-option value="bananas">Bananas</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+  <div class="ion-padding">
+    <p v-for="log in logs">{{ log }}</p>
+  </div>
+</template>
+
+<script>
+  import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonSelect, IonSelectOption },
+    data() {
+      return {
+        logs: []
+      }
+    },
+    methods: {
+      pushLog(msg) {
+        this.logs.unshift(msg);
+      }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/select/basic/single-selection/angular.md b/static/usage/v7/select/basic/single-selection/angular.md
new file mode 100644
index 00000000000..463e001577c
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/basic/single-selection/demo.html b/static/usage/v7/select/basic/single-selection/demo.html
new file mode 100644
index 00000000000..a8fb4f13e0a
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Single Selection</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select placeholder="Select fruit">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/select/basic/single-selection/index.md b/static/usage/v7/select/basic/single-selection/index.md
new file mode 100644
index 00000000000..1fc60d79fe6
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/select/basic/single-selection/demo.html"
+/>
diff --git a/static/usage/v7/select/basic/single-selection/javascript.md b/static/usage/v7/select/basic/single-selection/javascript.md
new file mode 100644
index 00000000000..463e001577c
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/basic/single-selection/react.md b/static/usage/v7/select/basic/single-selection/react.md
new file mode 100644
index 00000000000..767a1b59a62
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect placeholder="Select fruit">
+          <IonSelectOption value="apples">Apples</IonSelectOption>
+          <IonSelectOption value="oranges">Oranges</IonSelectOption>
+          <IonSelectOption value="bananas">Bananas</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/basic/single-selection/vue.md b/static/usage/v7/select/basic/single-selection/vue.md
new file mode 100644
index 00000000000..e0a081117ba
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select placeholder="Select fruit">
+        <ion-select-option value="apples">Apples</ion-select-option>
+        <ion-select-option value="oranges">Oranges</ion-select-option>
+        <ion-select-option value="bananas">Bananas</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonSelect, IonSelectOption },
+  });
+</script>
+```
diff --git a/static/usage/v7/select/customization/button-text/angular.md b/static/usage/v7/select/customization/button-text/angular.md
new file mode 100644
index 00000000000..bb133af75c4
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/angular.md
@@ -0,0 +1,20 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Alert Interface</ion-label>
+    <ion-select placeholder="Select fruit" okText="Choose Fruit" cancelText="Cancel Choice">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-item>
+    <ion-label>Action Sheet Interface</ion-label>
+    <ion-select interface="action-sheet" placeholder="Select fruit" cancelText="Cancel Choice">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/customization/button-text/demo.html b/static/usage/v7/select/customization/button-text/demo.html
new file mode 100644
index 00000000000..1eb72b8dda5
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Button Text</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Alert Interface</ion-label>
+            <ion-select placeholder="Select fruit" ok-text="Choose Fruit" cancel-text="Cancel Choice">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-label>Action Sheet Interface</ion-label>
+            <ion-select interface="action-sheet" placeholder="Select fruit" cancel-text="Cancel Choice">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/select/customization/button-text/index.md b/static/usage/v7/select/customization/button-text/index.md
new file mode 100644
index 00000000000..9e1a07063f8
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="350px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/select/customization/button-text/demo.html"
+/>
diff --git a/static/usage/v7/select/customization/button-text/javascript.md b/static/usage/v7/select/customization/button-text/javascript.md
new file mode 100644
index 00000000000..23c6f0a87ae
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/javascript.md
@@ -0,0 +1,20 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Alert Interface</ion-label>
+    <ion-select placeholder="Select fruit" ok-text="Choose Fruit" cancel-text="Cancel Choice">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-item>
+    <ion-label>Action Sheet Interface</ion-label>
+    <ion-select interface="action-sheet" placeholder="Select fruit" cancel-text="Cancel Choice">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/customization/button-text/react.md b/static/usage/v7/select/customization/button-text/react.md
new file mode 100644
index 00000000000..79e4c94c0da
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonLabel>Alert Interface</IonLabel>
+        <IonSelect placeholder="Select fruit" okText="Choose Fruit" cancelText="Cancel Choice">
+          <IonSelectOption value="apples">Apples</IonSelectOption>
+          <IonSelectOption value="oranges">Oranges</IonSelectOption>
+          <IonSelectOption value="bananas">Bananas</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Action Sheet Interface</IonLabel>
+        <IonSelect interface="action-sheet" placeholder="Select fruit" cancelText="Cancel Choice">
+          <IonSelectOption value="apples">Apples</IonSelectOption>
+          <IonSelectOption value="oranges">Oranges</IonSelectOption>
+          <IonSelectOption value="bananas">Bananas</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/customization/button-text/vue.md b/static/usage/v7/select/customization/button-text/vue.md
new file mode 100644
index 00000000000..9e6c1d1b47c
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>Alert Interface</ion-label>
+      <ion-select placeholder="Select fruit" ok-text="Choose Fruit" cancel-text="Cancel Choice">
+        <ion-select-option value="apples">Apples</ion-select-option>
+        <ion-select-option value="oranges">Oranges</ion-select-option>
+        <ion-select-option value="bananas">Bananas</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item>
+      <ion-label>Action Sheet Interface</ion-label>
+      <ion-select interface="action-sheet" placeholder="Select fruit" cancel-text="Cancel Choice">
+        <ion-select-option value="apples">Apples</ion-select-option>
+        <ion-select-option value="oranges">Oranges</ion-select-option>
+        <ion-select-option value="bananas">Bananas</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonSelect, IonSelectOption },
+  });
+</script>
+```
diff --git a/static/usage/v7/select/customization/interface-options/angular/example_component_html.md b/static/usage/v7/select/customization/interface-options/angular/example_component_html.md
new file mode 100644
index 00000000000..e1093bdf292
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+<ion-list>        
+  <ion-item>
+    <ion-label>Alert</ion-label>
+    <ion-select [interfaceOptions]="customAlertOptions" interface="alert" placeholder="Select One">
+      <ion-select-option value="bacon">Bacon</ion-select-option>
+      <ion-select-option value="onions">Onions</ion-select-option>
+      <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+    </ion-select>
+  </ion-item>
+        
+  <ion-item>
+    <ion-label>Popover</ion-label>
+    <ion-select [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One">
+      <ion-select-option value="brown">Brown</ion-select-option>
+      <ion-select-option value="blonde">Blonde</ion-select-option>
+      <ion-select-option value="red">Red</ion-select-option>
+    </ion-select>
+  </ion-item>
+        
+  <ion-item>
+    <ion-label>Action Sheet</ion-label>
+    <ion-select [interfaceOptions]="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
+      <ion-select-option value="red">Red</ion-select-option>
+      <ion-select-option value="green">Green</ion-select-option>
+      <ion-select-option value="blue">Blue</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
new file mode 100644
index 00000000000..c3f34d0adaf
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  customAlertOptions = {
+    header: 'Pizza Toppings',
+    subHeader: 'Select your favorite topping',
+    message: 'Choose only one',
+    translucent: true,
+  };
+
+  customPopoverOptions = {
+    header: 'Hair Color',
+    subHeader: 'Select your hair color',
+    message: 'Only select your dominant hair color',
+  };
+
+  customActionSheetOptions = {
+    header: 'Colors',
+    subHeader: 'Select your favorite color',
+  };
+}
+```
diff --git a/static/usage/v7/select/customization/interface-options/demo.html b/static/usage/v7/select/customization/interface-options/demo.html
new file mode 100644
index 00000000000..8cff7c7bbf0
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/demo.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Interface Options</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container>ion-list {
+      min-width: 400px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Alert</ion-label>
+            <ion-select id="customAlertSelect" interface="alert" placeholder="Select One">
+              <ion-select-option value="bacon">Bacon</ion-select-option>
+              <ion-select-option value="onions">Onions</ion-select-option>
+              <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Popover</ion-label>
+            <ion-select id="customPopoverSelect" interface="popover" placeholder="Select One">
+              <ion-select-option value="brown">Brown</ion-select-option>
+              <ion-select-option value="blonde">Blonde</ion-select-option>
+              <ion-select-option value="red">Red</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Action Sheet</ion-label>
+            <ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
+              <ion-select-option value="red">Red</ion-select-option>
+              <ion-select-option value="green">Green</ion-select-option>
+              <ion-select-option value="blue">Blue</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const customAlertSelect = document.getElementById('customAlertSelect');
+    const customAlertOptions = {
+      header: 'Pizza Toppings',
+      subHeader: 'Select your favorite topping',
+      message: 'Choose only one',
+      translucent: true
+    };
+    customAlertSelect.interfaceOptions = customAlertOptions;
+
+    const customPopoverSelect = document.getElementById('customPopoverSelect');
+    const customPopoverOptions = {
+      header: 'Hair Color',
+      subHeader: 'Select your hair color',
+      message: 'Only select your dominant hair color'
+    };
+    customPopoverSelect.interfaceOptions = customPopoverOptions;
+
+    const customActionSheetSelect = document.getElementById('customActionSheetSelect');
+    const customActionSheetOptions = {
+      header: 'Colors',
+      subHeader: 'Select your favorite color'
+    };
+    customActionSheetSelect.interfaceOptions = customActionSheetOptions;
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/select/customization/interface-options/index.md b/static/usage/v7/select/customization/interface-options/index.md
new file mode 100644
index 00000000000..de1da61b1ed
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="large"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/select/customization/interface-options/demo.html"
+/>
diff --git a/static/usage/v7/select/customization/interface-options/javascript.md b/static/usage/v7/select/customization/interface-options/javascript.md
new file mode 100644
index 00000000000..9f48ee33cf9
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/javascript.md
@@ -0,0 +1,56 @@
+```html
+<ion-list>        
+  <ion-item>
+    <ion-label>Alert</ion-label>
+    <ion-select id="customAlertSelect" interface="alert" placeholder="Select One">
+      <ion-select-option value="bacon">Bacon</ion-select-option>
+      <ion-select-option value="onions">Onions</ion-select-option>
+      <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+    </ion-select>
+  </ion-item>
+        
+  <ion-item>
+    <ion-label>Popover</ion-label>
+    <ion-select id="customPopoverSelect" interface="popover" placeholder="Select One">
+      <ion-select-option value="brown">Brown</ion-select-option>
+      <ion-select-option value="blonde">Blonde</ion-select-option>
+      <ion-select-option value="red">Red</ion-select-option>
+    </ion-select>
+  </ion-item>
+        
+  <ion-item>
+    <ion-label>Action Sheet</ion-label>
+    <ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
+      <ion-select-option value="red">Red</ion-select-option>
+      <ion-select-option value="green">Green</ion-select-option>
+      <ion-select-option value="blue">Blue</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+
+<script>
+  const customAlertSelect = document.getElementById('customAlertSelect');
+  const customAlertOptions = {
+    header: 'Pizza Toppings',
+    subHeader: 'Select your favorite topping',
+    message: 'Choose only one',
+    translucent: true
+  };
+  customAlertSelect.interfaceOptions = customAlertOptions;
+
+  const customPopoverSelect = document.getElementById('customPopoverSelect');
+  const customPopoverOptions = {
+    header: 'Hair Color',
+    subHeader: 'Select your hair color',
+    message: 'Only select your dominant hair color'
+  };
+  customPopoverSelect.interfaceOptions = customPopoverOptions;
+
+  const customActionSheetSelect = document.getElementById('customActionSheetSelect');
+  const customActionSheetOptions = {
+    header: 'Colors',
+    subHeader: 'Select your favorite color'
+  };
+  customActionSheetSelect.interfaceOptions = customActionSheetOptions;
+</script>
+```
diff --git a/static/usage/v7/select/customization/interface-options/react.md b/static/usage/v7/select/customization/interface-options/react.md
new file mode 100644
index 00000000000..57cdc7a9c9a
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/react.md
@@ -0,0 +1,55 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+  const customAlertOptions = {
+    header: 'Pizza Toppings',
+    subHeader: 'Select your favorite topping',
+    message: 'Choose only one',
+    translucent: true
+  };
+
+  const customPopoverOptions = {
+    header: 'Hair Color',
+    subHeader: 'Select your hair color',
+    message: 'Only select your dominant hair color'
+  };
+
+  const customActionSheetOptions = {
+    header: 'Colors',
+    subHeader: 'Select your favorite color'
+  };
+
+  return (
+    <IonList>        
+      <IonItem>
+        <IonLabel>Alert</IonLabel>
+        <IonSelect interfaceOptions={customAlertOptions} interface="alert" placeholder="Select One">
+          <IonSelectOption value="bacon">Bacon</IonSelectOption>
+          <IonSelectOption value="onions">Onions</IonSelectOption>
+          <IonSelectOption value="pepperoni">Pepperoni</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+          
+      <IonItem>
+        <IonLabel>Popover</IonLabel>
+        <IonSelect interfaceOptions={customPopoverOptions} interface="popover" placeholder="Select One">
+          <IonSelectOption value="brown">Brown</IonSelectOption>
+          <IonSelectOption value="blonde">Blonde</IonSelectOption>
+          <IonSelectOption value="red">Red</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+          
+      <IonItem>
+        <IonLabel>Action Sheet</IonLabel>
+        <IonSelect interfaceOptions={customActionSheetOptions} interface="action-sheet" placeholder="Select One">
+          <IonSelectOption value="red">Red</IonSelectOption>
+          <IonSelectOption value="green">Green</IonSelectOption>
+          <IonSelectOption value="blue">Blue</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/customization/interface-options/vue.md b/static/usage/v7/select/customization/interface-options/vue.md
new file mode 100644
index 00000000000..7488095006d
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/vue.md
@@ -0,0 +1,66 @@
+```html
+<template>
+  <ion-list>        
+    <ion-item>
+      <ion-label>Alert</ion-label>
+      <ion-select :interface-options="customAlertOptions" interface="alert" placeholder="Select One">
+        <ion-select-option value="bacon">Bacon</ion-select-option>
+        <ion-select-option value="onions">Onions</ion-select-option>
+        <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+      </ion-select>
+    </ion-item>
+        
+    <ion-item>
+      <ion-label>Popover</ion-label>
+      <ion-select :interface-options="customPopoverOptions" interface="popover" placeholder="Select One">
+        <ion-select-option value="brown">Brown</ion-select-option>
+        <ion-select-option value="blonde">Blonde</ion-select-option>
+        <ion-select-option value="red">Red</ion-select-option>
+      </ion-select>
+    </ion-item>
+        
+    <ion-item>
+      <ion-label>Action Sheet</ion-label>
+      <ion-select :interface-options="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
+        <ion-select-option value="red">Red</ion-select-option>
+        <ion-select-option value="green">Green</ion-select-option>
+        <ion-select-option value="blue">Blue</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonSelect, IonSelectOption },
+    setup() {
+      const customAlertOptions = {
+        header: 'Pizza Toppings',
+        subHeader: 'Select your favorite topping',
+        message: 'Choose only one',
+        translucent: true
+      };
+
+      const customPopoverOptions = {
+        header: 'Hair Color',
+        subHeader: 'Select your hair color',
+        message: 'Only select your dominant hair color'
+      };
+
+      const customActionSheetOptions = {
+        header: 'Colors',
+        subHeader: 'Select your favorite color'
+      };
+
+      return {
+        customAlertOptions,
+        customPopoverOptions,
+        customActionSheetOptions
+      }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/select/customization/styling-select/angular/example_component_css.md b/static/usage/v7/select/customization/styling-select/angular/example_component_css.md
new file mode 100644
index 00000000000..27fc8e85e4b
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/angular/example_component_css.md
@@ -0,0 +1,27 @@
+```css
+ion-select {
+  --placeholder-color: #971e49;
+  --placeholder-opacity: 1;
+  width: 100%;
+  justify-content: center;
+}
+
+ion-select::part(placeholder),
+ion-select::part(text) {
+  flex: 0 0 auto;
+}
+
+ion-select::part(placeholder)::first-letter {
+  font-size: 24px;
+  font-weight: 500;
+}
+
+ion-select::part(text) {
+  color: #545ca7;
+}
+
+ion-select::part(icon) {
+  color: #971e49;
+  opacity: 1;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/customization/styling-select/angular/example_component_html.md b/static/usage/v7/select/customization/styling-select/angular/example_component_html.md
new file mode 100644
index 00000000000..99738781773
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+<ion-select placeholder="Select fruit">
+  <ion-select-option value="apples">Apples</ion-select-option>
+  <ion-select-option value="oranges">Oranges</ion-select-option>
+  <ion-select-option value="bananas">Bananas</ion-select-option>
+</ion-select>
+```
diff --git a/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md
new file mode 100644
index 00000000000..4db53a836a9
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/customization/styling-select/demo.html b/static/usage/v7/select/customization/styling-select/demo.html
new file mode 100644
index 00000000000..429beab68c4
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/demo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Styling the Select</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-select {
+      --placeholder-color: #971e49;
+      --placeholder-opacity: 1;
+      width: 100%;
+      justify-content: center;
+    }
+
+    ion-select::part(placeholder),
+    ion-select::part(text) {
+      flex: 0 0 auto;
+    }
+
+    ion-select::part(placeholder)::first-letter {
+      font-size: 24px;
+      font-weight: 500;
+    }
+
+    ion-select::part(text) {
+      color: #545ca7;
+    }
+
+    ion-select::part(icon) {
+      color: #971e49;
+      opacity: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select placeholder="Select fruit">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/select/customization/styling-select/index.md b/static/usage/v7/select/customization/styling-select/index.md
new file mode 100644
index 00000000000..dbfe2ba527c
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/select/customization/styling-select/demo.html"
+/>
diff --git a/static/usage/v7/select/customization/styling-select/javascript.md b/static/usage/v7/select/customization/styling-select/javascript.md
new file mode 100644
index 00000000000..9b35411552b
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/javascript.md
@@ -0,0 +1,35 @@
+```html
+<ion-select placeholder="Select fruit">
+  <ion-select-option value="apples">Apples</ion-select-option>
+  <ion-select-option value="oranges">Oranges</ion-select-option>
+  <ion-select-option value="bananas">Bananas</ion-select-option>
+</ion-select>
+
+<style>
+ion-select {
+  --placeholder-color: #971e49;
+  --placeholder-opacity: 1;
+  width: 100%;
+  justify-content: center;
+}
+
+ion-select::part(placeholder),
+ion-select::part(text) {
+  flex: 0 0 auto;
+}
+
+ion-select::part(placeholder)::first-letter {
+  font-size: 24px;
+  font-weight: 500;
+}
+
+ion-select::part(text) {
+  color: #545ca7;
+}
+
+ion-select::part(icon) {
+  color: #971e49;
+  opacity: 1;
+}
+</style>
+```
diff --git a/static/usage/v7/select/customization/styling-select/react/main_css.md b/static/usage/v7/select/customization/styling-select/react/main_css.md
new file mode 100644
index 00000000000..27fc8e85e4b
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/react/main_css.md
@@ -0,0 +1,27 @@
+```css
+ion-select {
+  --placeholder-color: #971e49;
+  --placeholder-opacity: 1;
+  width: 100%;
+  justify-content: center;
+}
+
+ion-select::part(placeholder),
+ion-select::part(text) {
+  flex: 0 0 auto;
+}
+
+ion-select::part(placeholder)::first-letter {
+  font-size: 24px;
+  font-weight: 500;
+}
+
+ion-select::part(text) {
+  color: #545ca7;
+}
+
+ion-select::part(icon) {
+  color: #971e49;
+  opacity: 1;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/customization/styling-select/react/main_tsx.md b/static/usage/v7/select/customization/styling-select/react/main_tsx.md
new file mode 100644
index 00000000000..77b63bd6925
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/react/main_tsx.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSelect, IonSelectOption } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonSelect placeholder="Select fruit">
+      <IonSelectOption value="apples">Apples</IonSelectOption>
+      <IonSelectOption value="oranges">Oranges</IonSelectOption>
+      <IonSelectOption value="bananas">Bananas</IonSelectOption>
+    </IonSelect>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/customization/styling-select/vue.md b/static/usage/v7/select/customization/styling-select/vue.md
new file mode 100644
index 00000000000..37eebb3164c
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <ion-select placeholder="Select fruit">
+    <ion-select-option value="apples">Apples</ion-select-option>
+    <ion-select-option value="oranges">Oranges</ion-select-option>
+    <ion-select-option value="bananas">Bananas</ion-select-option>
+  </ion-select>
+</template>
+
+<script>
+  import { IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonSelect, IonSelectOption },
+  });
+</script>
+
+<style>
+  ion-select {
+    --placeholder-color: #971e49;
+    --placeholder-opacity: 1;
+    width: 100%;
+    justify-content: center;
+  }
+
+  ion-select::part(placeholder),
+  ion-select::part(text) {
+    flex: 0 0 auto;
+  }
+
+  ion-select::part(placeholder)::first-letter {
+    font-size: 24px;
+    font-weight: 500;
+  }
+
+  ion-select::part(text) {
+    color: #545ca7;
+  }
+
+  ion-select::part(icon) {
+    color: #971e49;
+    opacity: 1;
+  }
+</style>
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/angular.md b/static/usage/v7/select/interfaces/action-sheet/angular.md
new file mode 100644
index 00000000000..ceb18754196
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select interface="action-sheet" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/demo.html b/static/usage/v7/select/interfaces/action-sheet/demo.html
new file mode 100644
index 00000000000..bd1dd427e85
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Action Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select interface="action-sheet" placeholder="Select fruit">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/select/interfaces/action-sheet/index.md b/static/usage/v7/select/interfaces/action-sheet/index.md
new file mode 100644
index 00000000000..1dc5472394e
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/select/interfaces/action-sheet/demo.html"
+/>
diff --git a/static/usage/v7/select/interfaces/action-sheet/javascript.md b/static/usage/v7/select/interfaces/action-sheet/javascript.md
new file mode 100644
index 00000000000..ceb18754196
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select interface="action-sheet" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/react.md b/static/usage/v7/select/interfaces/action-sheet/react.md
new file mode 100644
index 00000000000..279c16dedcd
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect interface="action-sheet" placeholder="Select fruit">
+          <IonSelectOption value="apples">Apples</IonSelectOption>
+          <IonSelectOption value="oranges">Oranges</IonSelectOption>
+          <IonSelectOption value="bananas">Bananas</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/vue.md b/static/usage/v7/select/interfaces/action-sheet/vue.md
new file mode 100644
index 00000000000..c99423cb0b8
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select interface="action-sheet" placeholder="Select fruit">
+        <ion-select-option value="apples">Apples</ion-select-option>
+        <ion-select-option value="oranges">Oranges</ion-select-option>
+        <ion-select-option value="bananas">Bananas</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonList, IonItem, IonSelect, IonSelectOption },
+  });
+</script>
+```
diff --git a/static/usage/v7/select/interfaces/popover/angular.md b/static/usage/v7/select/interfaces/popover/angular.md
new file mode 100644
index 00000000000..17c212363c5
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select interface="popover" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/interfaces/popover/demo.html b/static/usage/v7/select/interfaces/popover/demo.html
new file mode 100644
index 00000000000..9656b8e303d
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Popover</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select interface="popover" placeholder="Select fruit">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="bananas">Bananas</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/select/interfaces/popover/index.md b/static/usage/v7/select/interfaces/popover/index.md
new file mode 100644
index 00000000000..ae4fa7b7521
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="400px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/select/interfaces/popover/demo.html"
+/>
diff --git a/static/usage/v7/select/interfaces/popover/javascript.md b/static/usage/v7/select/interfaces/popover/javascript.md
new file mode 100644
index 00000000000..17c212363c5
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select interface="popover" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/interfaces/popover/react.md b/static/usage/v7/select/interfaces/popover/react.md
new file mode 100644
index 00000000000..8e2ee4451a5
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect interface="popover" placeholder="Select fruit">
+          <IonSelectOption value="apples">Apples</IonSelectOption>
+          <IonSelectOption value="oranges">Oranges</IonSelectOption>
+          <IonSelectOption value="bananas">Bananas</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/interfaces/popover/vue.md b/static/usage/v7/select/interfaces/popover/vue.md
new file mode 100644
index 00000000000..8caea7f13d3
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select interface="popover" placeholder="Select fruit">
+        <IonSelectOption value="apples">Apples</IonSelectOption>
+        <IonSelectOption value="oranges">Oranges</IonSelectOption>
+        <IonSelectOption value="bananas">Bananas</IonSelectOption>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonList, IonItem, IonSelect, IonSelectOption },
+  });
+</script>
+```
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md
new file mode 100644
index 00000000000..4fcf064bcc4
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select
+      [compareWith]="compareWith"
+      placeholder="Select food"
+      (ionChange)="handleChange($event)"
+      [multiple]="true"
+    >
+      <ion-select-option *ngFor="let food of foods" [value]="food">{{ food.name }}</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-item lines="none">
+    <ion-label>Current value: {{ currentFood | json }}</ion-label>
+  </ion-item>
+</ion-list>
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
new file mode 100644
index 00000000000..76fa7e51e49
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -0,0 +1,45 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  currentFood = undefined;
+
+  foods = [
+    {
+      id: 1,
+      name: 'Apples',
+      type: 'fruit',
+    },
+    {
+      id: 2,
+      name: 'Carrots',
+      type: 'vegetable',
+    },
+    {
+      id: 3,
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
+  ];
+
+  compareWith(o1, o2) {
+    if (!o1 || !o2) {
+      return o1 === o2;
+    }
+
+    if (Array.isArray(o2)) {
+      return o2.some((o) => o.id === o1.id);
+    }
+
+    return o1.id === o2.id;
+  }
+
+  handleChange(ev) {
+    this.currentFood = ev.target.value;
+  }
+}
+```
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/demo.html b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
new file mode 100644
index 00000000000..2c3dc70038b
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Object Values and Multiple Selection</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container>ion-list {
+      width: 70%;
+    }
+
+    ion-text {
+      white-space: normal;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select placeholder="Select food" multiple="true"></ion-select>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label>
+              Current value:
+              <ion-text></ion-text>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const foods = [
+      {
+        id: 1,
+        name: "Apples",
+        type: "fruit"
+      },
+      {
+        id: 2,
+        name: "Carrots",
+        type: "vegetable"
+      },
+      {
+        id: 3,
+        name: "Cupcakes",
+        type: "dessert"
+      }
+    ];
+
+    const compareWithFn = (o1, o2) => {
+      if (!o1 || !o2) {
+        return o1 === o2;
+      }
+
+      if (Array.isArray(o2)) {
+        return o2.some((o) => o.id === o1.id);
+      }
+
+      return o1.id === o2.id;
+    };
+
+    const selectEl = document.querySelector('ion-select');
+    selectEl.compareWith = compareWithFn;
+
+    foods.forEach((option, i) => {
+      const selectOption = document.createElement('ion-select-option');
+      selectOption.value = option;
+      selectOption.textContent = option.name;
+      selectEl.appendChild(selectOption);
+    });
+
+    const valueLabel = document.querySelector('ion-text');
+    selectEl.addEventListener('ionChange', () => {
+      valueLabel.innerHTML = JSON.stringify(selectEl.value);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/index.md b/static/usage/v7/select/objects-as-values/multiple-selection/index.md
new file mode 100644
index 00000000000..c81c011718e
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/select/objects-as-values/multiple-selection/demo.html"
+/>
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md b/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md
new file mode 100644
index 00000000000..28209ccc6b3
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md
@@ -0,0 +1,60 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select placeholder="Select food" multiple="true"></ion-select>
+  </ion-item>
+  <ion-item lines="none">
+    <ion-label>
+      Current value:
+      <ion-text></ion-text>
+    </ion-label>
+  </ion-item>
+</ion-list>
+
+<script>
+  const foods = [
+    {
+      id: 1,
+      name: "Apples",
+      type: "fruit"
+    },
+    {
+      id: 2,
+      name: "Carrots",
+      type: "vegetable"
+    },
+    {
+      id: 3,
+      name: "Cupcakes",
+      type: "dessert"
+    }
+  ];
+
+  const compareWithFn = (o1, o2) => {
+    if(!o1 || !o2) {
+      return o1 === o2;
+    }
+
+    if(Array.isArray(o2)) {
+      return o2.some((o) => o.id === o1.id);
+    }
+
+    return o1.id === o2.id;
+  };
+
+  const selectEl = document.querySelector('ion-select');
+  selectEl.compareWith = compareWithFn;
+
+  foods.forEach((option, i) => {
+    const selectOption = document.createElement('ion-select-option');
+    selectOption.value = option;
+    selectOption.textContent = option.name;
+    selectEl.appendChild(selectOption);
+  });
+
+  const valueLabel = document.querySelector('ion-text');
+  selectEl.addEventListener('ionChange', () => {
+    valueLabel.innerHTML = JSON.stringify(selectEl.value);
+  });
+</script>
+```
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/react.md b/static/usage/v7/select/objects-as-values/multiple-selection/react.md
new file mode 100644
index 00000000000..e6485198a86
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/react.md
@@ -0,0 +1,67 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonList, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
+
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
+
+const foods: Food[] = [
+  {
+    id: 1,
+    name: 'Apples',
+    type: 'fruit',
+  },
+  {
+    id: 2,
+    name: 'Carrots',
+    type: 'vegetable',
+  },
+  {
+    id: 3,
+    name: 'Cupcakes',
+    type: 'dessert',
+  },
+];
+
+const compareWith = (o1: Food, o2: Food) => {
+  if (!o1 || !o2) {
+    return o1 === o2;
+  }
+
+  if (Array.isArray(o2)) {
+    return o2.some((o) => o.id === o1.id);
+  }
+
+  return o1.id === o2.id;
+};
+
+function Example() {
+  const [currentFood, setCurrentFood] = useState('');
+
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect
+          placeholder="Select food"
+          compareWith={compareWith}
+          onIonChange={(ev) => setCurrentFood(JSON.stringify(ev.detail.value))}
+          multiple={true}
+        >
+          {foods.map((food) => (
+            <IonSelectOption key={food.id} value={food}>
+              {food.name}
+            </IonSelectOption>
+          ))}
+        </IonSelect>
+      </IonItem>
+      <IonItem lines="none">
+        <IonLabel>Current food: {currentFood}</IonLabel>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
new file mode 100644
index 00000000000..176adfe8eae
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
@@ -0,0 +1,63 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select
+        placeholder="Select food"
+        :compareWith="compareWith"
+        @ionChange="currentFood = JSON.stringify($event.detail.value)"
+        :multiple="true"
+      >
+        <ion-select-option v-for="food in foods" :value="food">{{ food.name }}</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-label>Current value: {{ currentFood }}</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonItem, IonList, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonLabel, IonSelect, IonSelectOption },
+    data() {
+      return {
+        currentFood: "",
+        foods: [
+          {
+            id: 1,
+            name: "Apples",
+            type: "fruit"
+          },
+          {
+            id: 2,
+            name: "Carrots",
+            type: "vegetable"
+          },
+          {
+            id: 3,
+            name: "Cupcakes",
+            type: "dessert"
+          }
+        ]
+      }
+    },
+    methods: {
+      compareWith(o1, o2) {
+        if(!o1 || !o2) {
+          return o1 === o2;
+        }
+
+        if(Array.isArray(o2)) {
+          return o2.some((o) => o.id === o1.id);
+        }
+
+        return o1.id === o2.id;
+      }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md
new file mode 100644
index 00000000000..340b7456d55
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select
+      [compareWith]="compareWith"
+      placeholder="Select food"
+      (ionChange)="handleChange($event)"
+    >
+      <ion-select-option *ngFor="let food of foods" [value]="food">{{ food.name }}</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-item lines="none">
+    <ion-label>Current value: {{ currentFood | json }}</ion-label>
+  </ion-item>
+</ion-list>
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
new file mode 100644
index 00000000000..afbd5f454cd
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -0,0 +1,37 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  currentFood = undefined;
+
+  foods = [
+    {
+      id: 1,
+      name: 'Apples',
+      type: 'fruit',
+    },
+    {
+      id: 2,
+      name: 'Carrots',
+      type: 'vegetable',
+    },
+    {
+      id: 3,
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
+  ];
+
+  compareWith(o1, o2) {
+    return o1 && o2 ? o1.id === o2.id : o1 === o2;
+  }
+
+  handleChange(ev) {
+    this.currentFood = ev.target.value;
+  }
+}
+```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/demo.html b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
new file mode 100644
index 00000000000..ca59d32afb2
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select - Using compareWith</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container>ion-list {
+      width: 70%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select placeholder="Select food"></ion-select>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label>
+              Current value:
+              <ion-text></ion-text>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const foods = [
+      {
+        id: 1,
+        name: "Apples",
+        type: "fruit"
+      },
+      {
+        id: 2,
+        name: "Carrots",
+        type: "vegetable"
+      },
+      {
+        id: 3,
+        name: "Cupcakes",
+        type: "dessert"
+      }
+    ];
+
+    const compareWithFn = (o1, o2) => {
+      return o1 && o2 ? o1.id === o2.id : o1 === o2;
+    };
+
+    const selectEl = document.querySelector('ion-select');
+    selectEl.compareWith = compareWithFn;
+
+    foods.forEach((option, i) => {
+      const selectOption = document.createElement('ion-select-option');
+      selectOption.value = option;
+      selectOption.textContent = option.name;
+      selectEl.appendChild(selectOption);
+    });
+
+    const valueLabel = document.querySelector('ion-text');
+    selectEl.addEventListener('ionChange', () => {
+      valueLabel.innerHTML = JSON.stringify(selectEl.value);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/index.md b/static/usage/v7/select/objects-as-values/using-comparewith/index.md
new file mode 100644
index 00000000000..f6e530c8ba2
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/select/objects-as-values/using-comparewith/demo.html"
+/>
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md b/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md
new file mode 100644
index 00000000000..3f98524f6f2
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md
@@ -0,0 +1,52 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select placeholder="Select food"></ion-select>
+  </ion-item>
+  <ion-item lines="none">
+    <ion-label>
+      Current value:
+      <ion-text></ion-text>
+    </ion-label>
+  </ion-item>
+</ion-list>
+
+<script>
+  const foods = [
+    {
+      id: 1,
+      name: "Apples",
+      type: "fruit"
+    },
+    {
+      id: 2,
+      name: "Carrots",
+      type: "vegetable"
+    },
+    {
+      id: 3,
+      name: "Cupcakes",
+      type: "dessert"
+    }
+  ];
+
+  const compareWithFn = (o1, o2) => {
+    return o1 && o2 ? o1.id === o2.id : o1 === o2;
+  };
+
+  const selectEl = document.querySelector('ion-select');
+  selectEl.compareWith = compareWithFn;
+
+  foods.forEach((option, i) => {
+    const selectOption = document.createElement('ion-select-option');
+    selectOption.value = option;
+    selectOption.textContent = option.name;
+    selectEl.appendChild(selectOption);
+  });
+
+  const valueLabel = document.querySelector('ion-text');
+  selectEl.addEventListener('ionChange', () => {
+    valueLabel.innerHTML = JSON.stringify(selectEl.value);
+  });
+</script>
+```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/react.md b/static/usage/v7/select/objects-as-values/using-comparewith/react.md
new file mode 100644
index 00000000000..7cd468d5b0e
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/react.md
@@ -0,0 +1,58 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonList, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
+
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
+
+const foods: Food[] = [
+  {
+    id: 1,
+    name: 'Apples',
+    type: 'fruit',
+  },
+  {
+    id: 2,
+    name: 'Carrots',
+    type: 'vegetable',
+  },
+  {
+    id: 3,
+    name: 'Cupcakes',
+    type: 'dessert',
+  },
+];
+
+const compareWith = (o1: Food, o2: Food) => {
+  return o1 && o2 ? o1.id === o2.id : o1 === o2;
+};
+
+function Example() {
+  const [currentFood, setCurrentFood] = useState('');
+
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect
+          placeholder="Select food"
+          compareWith={compareWith}
+          onIonChange={(ev) => setCurrentFood(JSON.stringify(ev.detail.value))}
+        >
+          {foods.map((food) => (
+            <IonSelectOption key={food.id} value={food}>
+              {food.name}
+            </IonSelectOption>
+          ))}
+        </IonSelect>
+      </IonItem>
+      <IonItem lines="none">
+        <IonLabel>Current food: {currentFood}</IonLabel>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
new file mode 100644
index 00000000000..d54f39474b5
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
@@ -0,0 +1,54 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select
+        placeholder="Select fruit"
+        :compareWith="compareWith"
+        @ionChange="currentFood = JSON.stringify($event.detail.value)"
+      >
+        <ion-select-option v-for="food in foods" :value="food">{{ food.name }}</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-label>Current value: {{ currentFood }}</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonSelect, IonSelectOption },
+    data() {
+      return {
+        currentFood: "",
+        foods: [
+          {
+            id: 1,
+            name: "Apples",
+            type: "fruit"
+          },
+          {
+            id: 2,
+            name: "Carrots",
+            type: "vegetable"
+          },
+          {
+            id: 3,
+            name: "Cupcakes",
+            type: "dessert"
+          }
+        ]
+      }
+    },
+    methods: {
+      compareWith(o1, o2) {
+        return o1 && o2 ? o1.id === o2.id : o1 === o2;
+      }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/skeleton-text/basic/angular/example_component_html.md b/static/usage/v7/skeleton-text/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..bea0ee90431
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/angular/example_component_html.md
@@ -0,0 +1,39 @@
+```html
+<ion-list *ngIf="loaded">
+  <ion-list-header>Albums</ion-list-header>
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <ion-icon style="width: 100%; height: 100%" name="musical-notes"></ion-icon>
+    </ion-thumbnail>
+    <ion-label>
+      <h3>Abbey Road</h3>
+      <p>The Beatles</p>
+      <p>1969</p>
+    </ion-label>
+  </ion-item>
+</ion-list>
+
+<ion-list *ngIf="!loaded">
+  <ion-list-header>
+    <ion-skeleton-text [animated]="true" style="width: 80px"></ion-skeleton-text>
+  </ion-list-header>
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <ion-skeleton-text [animated]="true"></ion-skeleton-text>
+    </ion-thumbnail>
+    <ion-label>
+      <h3>
+        <ion-skeleton-text [animated]="true" style="width: 80%;"></ion-skeleton-text>
+      </h3>
+      <p>
+        <ion-skeleton-text [animated]="true" style="width: 60%;"></ion-skeleton-text>
+      </p>
+      <p>
+        <ion-skeleton-text [animated]="true" style="width: 30%;"></ion-skeleton-text>
+      </p>
+    </ion-label>
+  </ion-item>
+</ion-list>
+
+<ion-button (click)="loaded = !loaded">Toggle</ion-button>
+```
diff --git a/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..8b30337848c
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css']
+})
+export class ExampleComponent {
+  public loaded = false;
+}
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/basic/demo.html b/static/usage/v7/skeleton-text/basic/demo.html
new file mode 100644
index 00000000000..a1cbc3f4f12
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/demo.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 300px;
+    }
+
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list></ion-list><br />
+        <ion-button onclick="toggle()">Toggle</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const list = document.querySelector('ion-list');
+    let loaded = false;
+    const toggle = () => {
+      if (loaded) {
+        setSkeletonText();
+      } else {
+        setContent();
+      }
+
+      loaded = !loaded;
+    }
+
+    const setSkeletonText = () => {
+      list.innerHTML = `
+          <ion-list-header>
+            <ion-skeleton-text animated="true" style="width: 80px"></ion-skeleton-text>
+          </ion-list-header>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <ion-skeleton-text animated="true"></ion-skeleton-text>
+            </ion-thumbnail>
+            <ion-label>
+              <h3>
+                <ion-skeleton-text animated="true" style="width: 80%;"></ion-skeleton-text>
+              </h3>
+              <p>
+                <ion-skeleton-text animated="true" style="width: 60%;"></ion-skeleton-text>
+              </p>
+              <p>
+                <ion-skeleton-text animated="true" style="width: 30%;"></ion-skeleton-text>
+              </p>
+            </ion-label>
+          </ion-item>
+        `;
+    }
+
+    const setContent = () => {
+      list.innerHTML = `
+          <ion-list-header>Albums</ion-list-header>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <ion-icon style="width: 100%; height: 100%" name="musical-notes"></ion-icon>
+            </ion-thumbnail>
+            <ion-label>
+              <h3>Abbey Road</h3>
+              <p>The Beatles</p>
+              <p>1969</p>
+            </ion-label>
+          </ion-item>
+        `;
+    }
+
+    setSkeletonText();
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/basic/index.md b/static/usage/v7/skeleton-text/basic/index.md
new file mode 100644
index 00000000000..2aacfe8b931
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/skeleton-text/basic/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/skeleton-text/basic/javascript.md b/static/usage/v7/skeleton-text/basic/javascript.md
new file mode 100644
index 00000000000..5eefa7c1149
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/javascript.md
@@ -0,0 +1,61 @@
+```html
+<ion-list></ion-list><br />
+<ion-button onclick="toggle()">Toggle</ion-button>
+
+<script>
+  const list = document.querySelector('ion-list');
+  let loaded = false;
+  function toggle() {
+    if (loaded) {
+      setSkeletonText();
+    } else {
+      setContent();
+    }
+
+    loaded = !loaded;
+  }
+
+  function setSkeletonText() {
+    list.innerHTML = `
+      <ion-list-header>
+        <ion-skeleton-text animated="true" style="width: 80px"></ion-skeleton-text>
+      </ion-list-header>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ion-skeleton-text animated="true"></ion-skeleton-text>
+        </ion-thumbnail>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated="true" style="width: 80%;"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated="true" style="width: 60%;"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated="true" style="width: 30%;"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+    `;
+  }
+
+  function setContent() {
+    list.innerHTML = `
+      <ion-list-header>Albums</ion-list-header>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ion-icon style="width: 100%; height: 100%" name="musical-notes"></ion-icon>
+        </ion-thumbnail>
+        <ion-label>
+          <h3>Abbey Road</h3>
+          <p>The Beatles</p>
+          <p>1969</p>
+        </ion-label>
+      </ion-item>
+    `;
+  }
+
+  setSkeletonText();
+
+</script>
+```
diff --git a/static/usage/v7/skeleton-text/basic/react.md b/static/usage/v7/skeleton-text/basic/react.md
new file mode 100644
index 00000000000..2ea377034c9
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React, { useState } from 'react';
+import { 
+  IonButton,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonSkeletonText,
+  IonThumbnail,
+} from '@ionic/react';
+import { musicalNotes } from 'ionicons/icons';
+function Example() {
+  const [loaded, setLoaded] = useState(false);
+  return (
+    <>
+      {loaded && 
+        <IonList>
+          <IonListHeader>Albums</IonListHeader>
+          <IonItem>
+            <IonThumbnail slot="start">
+              <IonIcon style={{ 'width': '100%', 'height': '100%' }} icon={musicalNotes}></IonIcon>
+            </IonThumbnail>
+            <IonLabel>
+              <h3>Abbey Road</h3>
+              <p>The Beatles</p>
+              <p>1969</p>
+            </IonLabel>
+          </IonItem>
+        </IonList>
+      }
+      {!loaded &&
+        <IonList>
+          <IonListHeader>
+            <IonSkeletonText animated={true} style={{ 'width': '80px' }}></IonSkeletonText>
+          </IonListHeader>
+          <IonItem>
+            <IonThumbnail slot="start">
+              <IonSkeletonText animated={true}></IonSkeletonText>
+            </IonThumbnail>
+            <IonLabel>
+              <h3>
+                <IonSkeletonText animated={true} style={{ 'width': '80%' }}></IonSkeletonText>
+              </h3>
+              <p>
+                <IonSkeletonText animated={true} style={{ 'width': '60%' }}></IonSkeletonText>
+              </p>
+              <p>
+                <IonSkeletonText animated={true} style={{ 'width': '30%' }}></IonSkeletonText>
+              </p>
+            </IonLabel>
+          </IonItem>
+        </IonList>
+      }
+      <IonButton onClick={() => setLoaded(!loaded)}>Toggle</IonButton>
+    </>
+  );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/basic/vue.md b/static/usage/v7/skeleton-text/basic/vue.md
new file mode 100644
index 00000000000..c03a518af19
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/vue.md
@@ -0,0 +1,78 @@
+```html
+<template>
+  <ion-list v-if="loaded">
+    <ion-list-header>Albums</ion-list-header>
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <ion-icon style="width: 100%; height: 100%" :icon="musicalNotes"></ion-icon>
+      </ion-thumbnail>
+      <ion-label>
+        <h3>Abbey Road</h3>
+        <p>The Beatles</p>
+        <p>1969</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+  
+  <ion-list v-if="!loaded">
+    <ion-list-header>
+      <ion-skeleton-text :animated="true" style="width: 80px"></ion-skeleton-text>
+    </ion-list-header>
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <ion-skeleton-text :animated="true"></ion-skeleton-text>
+      </ion-thumbnail>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text :animated="true" style="width: 80%;"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text :animated="true" style="width: 60%;"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text :animated="true" style="width: 30%;"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+  
+  <ion-button @click="setLoaded(!loaded)">Toggle</ion-button>
+</template>
+
+<script lang="ts">
+  import {
+    IonButton,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonSkeletonText,
+    IonThumbnail,
+  } from '@ionic/vue';
+  import { musicalNotes } from 'ionicons/icons'
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonIcon,
+      IonItem,
+      IonLabel,
+      IonList,
+      IonListHeader,
+      IonSkeletonText,
+      IonThumbnail,
+    },
+    setup() {
+      const loaded = ref(false);
+      const setLoaded = (state: boolean) => loaded.value = state;
+      return {
+        loaded,
+        musicalNotes,
+        setLoaded
+      }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..67761872c60
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+ion-skeleton-text {
+  --border-radius: 9999px;
+  --background: rgba(188, 0, 255, 0.065);
+  --background-rgb: 188, 0, 255;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_html.md b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4044c112b0c
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-list>
+  <ion-list-header>
+    <ion-skeleton-text [animated]="true" style="width: 80px"></ion-skeleton-text>
+  </ion-list-header>
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <ion-skeleton-text [animated]="true"></ion-skeleton-text>
+    </ion-thumbnail>
+    <ion-label>
+      <h3>
+        <ion-skeleton-text [animated]="true" style="width: 80%;"></ion-skeleton-text>
+      </h3>
+      <p>
+        <ion-skeleton-text [animated]="true" style="width: 60%;"></ion-skeleton-text>
+      </p>
+      <p>
+        <ion-skeleton-text [animated]="true" style="width: 30%;"></ion-skeleton-text>
+      </p>
+    </ion-label>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/demo.html b/static/usage/v7/skeleton-text/theming/css-properties/demo.html
new file mode 100644
index 00000000000..6a84c2b7943
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/demo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Accordion</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 300px;
+    }
+
+    .container {
+      flex-direction: column;
+    }
+
+    ion-skeleton-text {
+      --border-radius: 9999px;
+      --background: rgba(188, 0, 255, 0.065);
+      --background-rgb: 188, 0, 255;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-list-header>
+            <ion-skeleton-text animated="true" style="width: 80px"></ion-skeleton-text>
+          </ion-list-header>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <ion-skeleton-text animated="true"></ion-skeleton-text>
+            </ion-thumbnail>
+            <ion-label>
+              <h3>
+                <ion-skeleton-text animated="true" style="width: 80%;"></ion-skeleton-text>
+              </h3>
+              <p>
+                <ion-skeleton-text animated="true" style="width: 60%;"></ion-skeleton-text>
+              </p>
+              <p>
+                <ion-skeleton-text animated="true" style="width: 30%;"></ion-skeleton-text>
+              </p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/index.md b/static/usage/v7/skeleton-text/theming/css-properties/index.md
new file mode 100644
index 00000000000..c131f6dbe19
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/skeleton-text/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/javascript.md b/static/usage/v7/skeleton-text/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..20463c6aba6
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/javascript.md
@@ -0,0 +1,31 @@
+```html
+<style>
+  ion-skeleton-text {
+    --border-radius: 9999px;
+    --background: rgba(188, 0, 255, 0.065);
+    --background-rgb: 188, 0, 255;
+  }
+</style>
+
+<ion-list>
+  <ion-list-header>
+    <ion-skeleton-text animated="true" style="width: 80px"></ion-skeleton-text>
+  </ion-list-header>
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <ion-skeleton-text animated="true"></ion-skeleton-text>
+    </ion-thumbnail>
+    <ion-label>
+      <h3>
+        <ion-skeleton-text animated="true" style="width: 80%;"></ion-skeleton-text>
+      </h3>
+      <p>
+        <ion-skeleton-text animated="true" style="width: 60%;"></ion-skeleton-text>
+      </p>
+      <p>
+        <ion-skeleton-text animated="true" style="width: 30%;"></ion-skeleton-text>
+      </p>
+    </ion-label>
+    </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..67761872c60
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md
@@ -0,0 +1,7 @@
+```css
+ion-skeleton-text {
+  --border-radius: 9999px;
+  --background: rgba(188, 0, 255, 0.065);
+  --background-rgb: 188, 0, 255;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..29e6e159f68
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { 
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonSkeletonText,
+  IonThumbnail,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonList>
+      <IonListHeader>
+        <IonSkeletonText animated={true} style={{ 'width': '80px' }}></IonSkeletonText>
+      </IonListHeader>
+      <IonItem>
+        <IonThumbnail slot="start">
+          <IonSkeletonText animated={true}></IonSkeletonText>
+        </IonThumbnail>
+        <IonLabel>
+          <h3>
+            <IonSkeletonText animated={true} style={{ 'width': '80%' }}></IonSkeletonText>
+          </h3>
+          <p>
+            <IonSkeletonText animated={true} style={{ 'width': '60%' }}></IonSkeletonText>
+          </p>
+          <p>
+            <IonSkeletonText animated={true} style={{ 'width': '30%' }}></IonSkeletonText>
+          </p>
+        </IonLabel>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/vue.md b/static/usage/v7/skeleton-text/theming/css-properties/vue.md
new file mode 100644
index 00000000000..418a7ca610f
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/vue.md
@@ -0,0 +1,56 @@
+```html
+<template>  
+  <ion-list>
+    <ion-list-header>
+      <ion-skeleton-text :animated="true" style="width: 80px"></ion-skeleton-text>
+    </ion-list-header>
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <ion-skeleton-text :animated="true"></ion-skeleton-text>
+      </ion-thumbnail>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text :animated="true" style="width: 80%;"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text :animated="true" style="width: 60%;"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text :animated="true" style="width: 30%;"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import {
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonSkeletonText,
+    IonThumbnail,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonItem,
+      IonLabel,
+      IonList,
+      IonListHeader,
+      IonSkeletonText,
+      IonThumbnail,
+    }
+  });
+</script>
+
+<style scoped>
+  ion-skeleton-text {
+    --border-radius: 9999px;
+    --background: rgba(188, 0, 255, 0.065);
+    --background-rgb: 188, 0, 255;
+  }
+</style>
+```
diff --git a/static/usage/v7/spinner/basic/angular.md b/static/usage/v7/spinner/basic/angular.md
new file mode 100644
index 00000000000..72997980940
--- /dev/null
+++ b/static/usage/v7/spinner/basic/angular.md
@@ -0,0 +1,51 @@
+```html
+<ion-item>
+  <ion-label>Default</ion-label>
+  <ion-spinner></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Dots</ion-label>
+  <ion-spinner name="dots"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Lines</ion-label>
+  <ion-spinner name="lines"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Lines Small</ion-label>
+  <ion-spinner name="lines-small"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Lines Sharp</ion-label>
+  <ion-spinner name="lines-sharp"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Lines Sharp Small</ion-label>
+  <ion-spinner name="lines-sharp-small"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Bubbles</ion-label>
+  <ion-spinner name="bubbles"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Circles</ion-label>
+  <ion-spinner name="circles"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Circular</ion-label>
+  <ion-spinner name="circular"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Crescent</ion-label>
+  <ion-spinner name="crescent"></ion-spinner>
+</ion-item>
+```
diff --git a/static/usage/v7/spinner/basic/demo.html b/static/usage/v7/spinner/basic/demo.html
new file mode 100644
index 00000000000..cf495c8bd07
--- /dev/null
+++ b/static/usage/v7/spinner/basic/demo.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spinner</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      display: block;
+      flex-flow: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-label>Default</ion-label>
+          <ion-spinner></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Dots</ion-label>
+          <ion-spinner name="dots"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Lines</ion-label>
+          <ion-spinner name="lines"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Lines Small</ion-label>
+          <ion-spinner name="lines-small"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Lines Sharp</ion-label>
+          <ion-spinner name="lines-sharp"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Lines Sharp Small</ion-label>
+          <ion-spinner name="lines-sharp-small"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Bubbles</ion-label>
+          <ion-spinner name="bubbles"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Circles</ion-label>
+          <ion-spinner name="circles"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Circular</ion-label>
+          <ion-spinner name="circular"></ion-spinner>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Crescent</ion-label>
+          <ion-spinner name="crescent"></ion-spinner>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/spinner/basic/index.md b/static/usage/v7/spinner/basic/index.md
new file mode 100644
index 00000000000..dd6417ff23c
--- /dev/null
+++ b/static/usage/v7/spinner/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/spinner/basic/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v7/spinner/basic/javascript.md b/static/usage/v7/spinner/basic/javascript.md
new file mode 100644
index 00000000000..72997980940
--- /dev/null
+++ b/static/usage/v7/spinner/basic/javascript.md
@@ -0,0 +1,51 @@
+```html
+<ion-item>
+  <ion-label>Default</ion-label>
+  <ion-spinner></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Dots</ion-label>
+  <ion-spinner name="dots"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Lines</ion-label>
+  <ion-spinner name="lines"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Lines Small</ion-label>
+  <ion-spinner name="lines-small"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Lines Sharp</ion-label>
+  <ion-spinner name="lines-sharp"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Lines Sharp Small</ion-label>
+  <ion-spinner name="lines-sharp-small"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Bubbles</ion-label>
+  <ion-spinner name="bubbles"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Circles</ion-label>
+  <ion-spinner name="circles"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Circular</ion-label>
+  <ion-spinner name="circular"></ion-spinner>
+</ion-item>
+
+<ion-item>
+  <ion-label>Crescent</ion-label>
+  <ion-spinner name="crescent"></ion-spinner>
+</ion-item>
+```
diff --git a/static/usage/v7/spinner/basic/react.md b/static/usage/v7/spinner/basic/react.md
new file mode 100644
index 00000000000..c6219c28b42
--- /dev/null
+++ b/static/usage/v7/spinner/basic/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonSpinner } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonLabel>Default</IonLabel>
+        <IonSpinner></IonSpinner>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Dots</IonLabel>
+        <IonSpinner name="dots"></IonSpinner>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Lines</IonLabel>
+        <IonSpinner name="lines"></IonSpinner>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Lines Small</IonLabel>
+        <IonSpinner name="lines-small"></IonSpinner>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Lines Sharp</IonLabel>
+        <IonSpinner name="lines-sharp"></IonSpinner>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Lines Sharp Small</IonLabel>
+        <IonSpinner name="lines-sharp-small"></IonSpinner>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Bubbles</IonLabel>
+        <IonSpinner name="bubbles"></IonSpinner>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Circles</IonLabel>
+        <IonSpinner name="circles"></IonSpinner>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Circular</IonLabel>
+        <IonSpinner name="circular"></IonSpinner>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Crescent</IonLabel>
+        <IonSpinner name="crescent"></IonSpinner>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/spinner/basic/vue.md b/static/usage/v7/spinner/basic/vue.md
new file mode 100644
index 00000000000..089b9fb6da8
--- /dev/null
+++ b/static/usage/v7/spinner/basic/vue.md
@@ -0,0 +1,62 @@
+```html
+<template>
+  <ion-item>
+    <ion-label>Default</ion-label>
+    <ion-spinner></ion-spinner>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Dots</ion-label>
+    <ion-spinner name="dots"></ion-spinner>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Lines</ion-label>
+    <ion-spinner name="lines"></ion-spinner>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Lines Small</ion-label>
+    <ion-spinner name="lines-small"></ion-spinner>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Lines Sharp</ion-label>
+    <ion-spinner name="lines-sharp"></ion-spinner>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Lines Sharp Small</ion-label>
+    <ion-spinner name="lines-sharp-small"></ion-spinner>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Bubbles</ion-label>
+    <ion-spinner name="bubbles"></ion-spinner>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Circles</ion-label>
+    <ion-spinner name="circles"></ion-spinner>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Circular</ion-label>
+    <ion-spinner name="circular"></ion-spinner>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Crescent</ion-label>
+    <ion-spinner name="crescent"></ion-spinner>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonSpinner } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonSpinner },
+  });
+</script>
+```
diff --git a/static/usage/v7/spinner/theming/colors/angular.md b/static/usage/v7/spinner/theming/colors/angular.md
new file mode 100644
index 00000000000..089ea023e92
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-spinner></ion-spinner>
+<ion-spinner color="primary"></ion-spinner>
+<ion-spinner color="secondary"></ion-spinner>
+<ion-spinner color="tertiary"></ion-spinner>
+<ion-spinner color="success"></ion-spinner>
+<ion-spinner color="warning"></ion-spinner>
+<ion-spinner color="danger"></ion-spinner>
+<ion-spinner color="light"></ion-spinner>
+<ion-spinner color="medium"></ion-spinner>
+<ion-spinner color="dark"></ion-spinner>
+```
diff --git a/static/usage/v7/spinner/theming/colors/demo.html b/static/usage/v7/spinner/theming/colors/demo.html
new file mode 100644
index 00000000000..387a56e38d4
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spinner</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-spinner></ion-spinner>
+        <ion-spinner color="primary"></ion-spinner>
+        <ion-spinner color="secondary"></ion-spinner>
+        <ion-spinner color="tertiary"></ion-spinner>
+        <ion-spinner color="success"></ion-spinner>
+        <ion-spinner color="warning"></ion-spinner>
+        <ion-spinner color="danger"></ion-spinner>
+        <ion-spinner color="light"></ion-spinner>
+        <ion-spinner color="medium"></ion-spinner>
+        <ion-spinner color="dark"></ion-spinner>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/spinner/theming/colors/index.md b/static/usage/v7/spinner/theming/colors/index.md
new file mode 100644
index 00000000000..ee82596cc0f
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/spinner/theming/colors/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v7/spinner/theming/colors/javascript.md b/static/usage/v7/spinner/theming/colors/javascript.md
new file mode 100644
index 00000000000..089ea023e92
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-spinner></ion-spinner>
+<ion-spinner color="primary"></ion-spinner>
+<ion-spinner color="secondary"></ion-spinner>
+<ion-spinner color="tertiary"></ion-spinner>
+<ion-spinner color="success"></ion-spinner>
+<ion-spinner color="warning"></ion-spinner>
+<ion-spinner color="danger"></ion-spinner>
+<ion-spinner color="light"></ion-spinner>
+<ion-spinner color="medium"></ion-spinner>
+<ion-spinner color="dark"></ion-spinner>
+```
diff --git a/static/usage/v7/spinner/theming/colors/react.md b/static/usage/v7/spinner/theming/colors/react.md
new file mode 100644
index 00000000000..aca320e2720
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonSpinner } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonSpinner></IonSpinner>
+      <IonSpinner color="primary"></IonSpinner>
+      <IonSpinner color="secondary"></IonSpinner>
+      <IonSpinner color="tertiary"></IonSpinner>
+      <IonSpinner color="success"></IonSpinner>
+      <IonSpinner color="warning"></IonSpinner>
+      <IonSpinner color="danger"></IonSpinner>
+      <IonSpinner color="light"></IonSpinner>
+      <IonSpinner color="medium"></IonSpinner>
+      <IonSpinner color="dark"></IonSpinner>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/spinner/theming/colors/vue.md b/static/usage/v7/spinner/theming/colors/vue.md
new file mode 100644
index 00000000000..c45f320c7ed
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-spinner></ion-spinner>
+  <ion-spinner color="primary"></ion-spinner>
+  <ion-spinner color="secondary"></ion-spinner>
+  <ion-spinner color="tertiary"></ion-spinner>
+  <ion-spinner color="success"></ion-spinner>
+  <ion-spinner color="warning"></ion-spinner>
+  <ion-spinner color="danger"></ion-spinner>
+  <ion-spinner color="light"></ion-spinner>
+  <ion-spinner color="medium"></ion-spinner>
+  <ion-spinner color="dark"></ion-spinner>
+</template>
+
+<script lang="ts">
+  import { IonSpinner } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonSpinner },
+  });
+</script>
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/angular/example_component_css.md b/static/usage/v7/spinner/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..e77a7d79e6a
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-spinner {
+  --color: #54dc98;
+}
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/angular/example_component_html.md b/static/usage/v7/spinner/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4b3b8d665b4
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-spinner></ion-spinner>
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/demo.html b/static/usage/v7/spinner/theming/css-properties/demo.html
new file mode 100644
index 00000000000..6c369bd71fd
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spinner</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-spinner {
+      --color: #54dc98;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-spinner></ion-spinner>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/spinner/theming/css-properties/index.md b/static/usage/v7/spinner/theming/css-properties/index.md
new file mode 100644
index 00000000000..22b93f802b0
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/spinner/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/spinner/theming/css-properties/javascript.md b/static/usage/v7/spinner/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..e2077bc508e
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/javascript.md
@@ -0,0 +1,9 @@
+```html
+<ion-spinner></ion-spinner>
+
+<style>
+  ion-spinner {
+    --color: #54dc98;
+  }
+</style>
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/react.md b/static/usage/v7/spinner/theming/css-properties/react.md
new file mode 100644
index 00000000000..e5cd98ffb60
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonSpinner } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonSpinner></IonSpinner>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/react/main_css.md b/static/usage/v7/spinner/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..e77a7d79e6a
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-spinner {
+  --color: #54dc98;
+}
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/react/main_tsx.md b/static/usage/v7/spinner/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..f990cb1e738
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonSpinner } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonSpinner></IonSpinner>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/vue.md b/static/usage/v7/spinner/theming/css-properties/vue.md
new file mode 100644
index 00000000000..c818d2c7488
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/vue.md
@@ -0,0 +1,20 @@
+```html
+<template>
+  <ion-spinner></ion-spinner>
+</template>
+
+<script lang="ts">
+  import { IonSpinner } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonSpinner },
+  });
+</script>
+
+<style scoped>
+  ion-spinner {
+    --color: #54dc98;
+  }
+</style>
+```
diff --git a/static/usage/v7/split-pane/basic/angular.md b/static/usage/v7/split-pane/basic/angular.md
new file mode 100644
index 00000000000..0183d57a9fa
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/angular.md
@@ -0,0 +1,25 @@
+```html
+<ion-split-pane when="xs" contentId="main">
+  <ion-menu contentId="main">
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Menu Content
+    </ion-content>
+  </ion-menu>
+
+  <div class="ion-page" id="main">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Main View</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Main View Content
+    </ion-content>
+  </div>
+</ion-split-pane>
+```
diff --git a/static/usage/v7/split-pane/basic/demo.html b/static/usage/v7/split-pane/basic/demo.html
new file mode 100644
index 00000000000..c514ebd1dbc
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/demo.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spinner</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-split-pane when="xs" content-id="main">
+      <ion-menu content-id="main">
+        <ion-header>
+          <ion-toolbar color="tertiary">
+            <ion-title>Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          Menu Content
+        </ion-content>
+      </ion-menu>
+
+      <div class="ion-page" id="main">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Main View</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          Main View Content
+        </ion-content>
+      </div>
+    </ion-split-pane>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/split-pane/basic/index.md b/static/usage/v7/split-pane/basic/index.md
new file mode 100644
index 00000000000..40ec0cfe8a1
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/split-pane/basic/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v7/split-pane/basic/javascript.md b/static/usage/v7/split-pane/basic/javascript.md
new file mode 100644
index 00000000000..626cc1ee03f
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/javascript.md
@@ -0,0 +1,25 @@
+```html
+<ion-split-pane when="xs" content-id="main">
+  <ion-menu content-id="main">
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Menu Content
+    </ion-content>
+  </ion-menu>
+
+  <div class="ion-page" id="main">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Main View</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Main View Content
+    </ion-content>
+  </div>
+</ion-split-pane>
+```
diff --git a/static/usage/v7/split-pane/basic/react.md b/static/usage/v7/split-pane/basic/react.md
new file mode 100644
index 00000000000..4088c068f1d
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonSplitPane when="xs" contentId="main">
+      <IonMenu contentId="main">
+        <IonHeader>
+          <IonToolbar color="tertiary">
+            <IonTitle>Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          Menu Content
+        </IonContent>
+      </IonMenu>
+    
+      <div className="ion-page" id="main">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Main View</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          Main View Content
+        </IonContent>
+      </div>
+    </IonSplitPane>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/split-pane/basic/vue.md b/static/usage/v7/split-pane/basic/vue.md
new file mode 100644
index 00000000000..b514acbcf6e
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+<template>
+  <ion-split-pane when="xs" content-id="main">
+    <ion-menu content-id="main">
+      <ion-header>
+        <ion-toolbar color="tertiary">
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        Menu Content
+      </ion-content>
+    </ion-menu>
+  
+    <div class="ion-page" id="main">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Main View</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        Main View Content
+      </ion-content>
+    </div>
+  </ion-split-pane>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar  },
+  });
+</script>
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_css.md b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..701bc942f7b
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-split-pane {
+  --side-width: 350px;
+  --side-max-width: 350px;
+
+  --border: 1px dashed #b3baff;
+}
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4772826c933
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+<ion-split-pane when="xs" contentId="main">
+  <ion-menu contentId="main">
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Menu Content is 350px wide and has a blue dashed border
+    </ion-content>
+  </ion-menu>
+
+  <div class="ion-page" id="main">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Main View</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Main View Content
+    </ion-content>
+  </div>
+</ion-split-pane>
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/demo.html b/static/usage/v7/split-pane/theming/css-properties/demo.html
new file mode 100644
index 00000000000..83353796a32
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spinner</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    ion-split-pane {
+      --side-width: 350px;
+      --side-max-width: 350px;
+
+      --border: 1px dashed #b3baff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-split-pane when="xs" content-id="main">
+      <ion-menu content-id="main">
+        <ion-header>
+          <ion-toolbar color="tertiary">
+            <ion-title>Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          Menu Content is 350px wide and has a blue dashed border
+        </ion-content>
+      </ion-menu>
+
+      <div class="ion-page" id="main">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Main View</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          Main View Content
+        </ion-content>
+      </div>
+    </ion-split-pane>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/split-pane/theming/css-properties/index.md b/static/usage/v7/split-pane/theming/css-properties/index.md
new file mode 100644
index 00000000000..336074baaaf
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/split-pane/theming/css-properties/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v7/split-pane/theming/css-properties/javascript.md b/static/usage/v7/split-pane/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..943993aa380
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/javascript.md
@@ -0,0 +1,34 @@
+```html
+<ion-split-pane when="xs" content-id="main">
+  <ion-menu content-id="main">
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Menu Content is 350px wide and has a blue dashed border
+    </ion-content>
+  </ion-menu>
+
+  <div class="ion-page" id="main">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Main View</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Main View Content
+    </ion-content>
+  </div>
+</ion-split-pane>
+
+<style>
+  ion-split-pane {
+    --side-width: 350px;
+    --side-max-width: 350px;
+  
+    --border: 1px dashed #b3baff;
+  }
+</style>
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/react/main_css.md b/static/usage/v7/split-pane/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..701bc942f7b
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-split-pane {
+  --side-width: 350px;
+  --side-max-width: 350px;
+
+  --border: 1px dashed #b3baff;
+}
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..7456a34359d
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonSplitPane when="xs" contentId="main">
+      <IonMenu contentId="main">
+        <IonHeader>
+          <IonToolbar color="tertiary">
+            <IonTitle>Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          Menu Content is 350px wide and has a blue dashed border
+        </IonContent>
+      </IonMenu>
+    
+      <div className="ion-page" id="main">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Main View</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          Main View Content
+        </IonContent>
+      </div>
+    </IonSplitPane>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/vue.md b/static/usage/v7/split-pane/theming/css-properties/vue.md
new file mode 100644
index 00000000000..cc891eaeda1
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/vue.md
@@ -0,0 +1,45 @@
+```html
+<template>
+  <ion-split-pane when="xs" content-id="main">
+    <ion-menu content-id="main">
+      <ion-header>
+        <ion-toolbar color="tertiary">
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        Menu Content is 350px wide and has a blue dashed border
+      </ion-content>
+    </ion-menu>
+  
+    <div class="ion-page" id="main">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Main View</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        Main View Content
+      </ion-content>
+    </div>
+  </ion-split-pane>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar  },
+  });
+</script>
+
+<style scoped>
+  ion-split-pane {
+    --side-width: 350px;
+    --side-max-width: 350px;
+  
+    --border: 1px dashed #b3baff;
+  }
+</style>
+```
diff --git a/static/usage/v7/text/basic/angular.md b/static/usage/v7/text/basic/angular.md
new file mode 100644
index 00000000000..fb2f6064fba
--- /dev/null
+++ b/static/usage/v7/text/basic/angular.md
@@ -0,0 +1,21 @@
+```html
+<ion-text color="primary">
+  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+</ion-text>
+
+<ion-text color="secondary">
+  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+</ion-text>
+
+<ion-text color="tertiary">
+  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+</ion-text>
+
+<p>
+  <ion-text color="warning"><ion-icon name="warning"></ion-icon></ion-text>
+  I saw a werewolf with a Chinese menu in his hand.
+  Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
+  He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+  Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
+</p>
+```
diff --git a/static/usage/v7/text/basic/demo.html b/static/usage/v7/text/basic/demo.html
new file mode 100644
index 00000000000..7dda6c901cb
--- /dev/null
+++ b/static/usage/v7/text/basic/demo.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Text</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-wrap: wrap;
+    }
+
+    h1,
+    h2,
+    h3 {
+      margin: 0;
+    }
+
+    p {
+      width: 80%;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-text color="primary">
+          <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+        </ion-text>
+
+        <ion-text color="secondary">
+          <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+        </ion-text>
+
+        <ion-text color="tertiary">
+          <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+        </ion-text>
+
+        <p>
+          <ion-text color="warning">
+            <ion-icon name="warning"></ion-icon>
+          </ion-text>
+          I saw a werewolf with a Chinese menu in his hand.
+          Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
+          He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+          Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
+        </p>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/text/basic/index.md b/static/usage/v7/text/basic/index.md
new file mode 100644
index 00000000000..3fe68c18bfa
--- /dev/null
+++ b/static/usage/v7/text/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/text/basic/demo.html" />
diff --git a/static/usage/v7/text/basic/javascript.md b/static/usage/v7/text/basic/javascript.md
new file mode 100644
index 00000000000..fb2f6064fba
--- /dev/null
+++ b/static/usage/v7/text/basic/javascript.md
@@ -0,0 +1,21 @@
+```html
+<ion-text color="primary">
+  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+</ion-text>
+
+<ion-text color="secondary">
+  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+</ion-text>
+
+<ion-text color="tertiary">
+  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+</ion-text>
+
+<p>
+  <ion-text color="warning"><ion-icon name="warning"></ion-icon></ion-text>
+  I saw a werewolf with a Chinese menu in his hand.
+  Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
+  He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+  Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
+</p>
+```
diff --git a/static/usage/v7/text/basic/react.md b/static/usage/v7/text/basic/react.md
new file mode 100644
index 00000000000..dac54e84471
--- /dev/null
+++ b/static/usage/v7/text/basic/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonText, IonIcon } from '@ionic/react';
+import { warning } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonText color="primary">
+        <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+      </IonText>
+
+      <IonText color="secondary">
+        <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+      </IonText>
+
+      <IonText color="tertiary">
+        <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+      </IonText>
+
+      <p>
+        <IonText color="warning"><IonIcon icon={warning}></IonIcon></IonText>
+        I saw a werewolf with a Chinese menu in his hand.
+        Walking through the <IonText color="success"><sub>streets</sub></IonText> of Soho in the rain.
+        He <IonText color="medium"><i>was</i></IonText> looking for a place called Lee Ho Fook's.
+        Gonna get a <IonText color="danger">big dish of beef chow mein.</IonText>
+      </p>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/text/basic/vue.md b/static/usage/v7/text/basic/vue.md
new file mode 100644
index 00000000000..742167bf9f1
--- /dev/null
+++ b/static/usage/v7/text/basic/vue.md
@@ -0,0 +1,38 @@
+```html
+<template>
+  <ion-text color="primary">
+    <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+  </ion-text>
+
+  <ion-text color="secondary">
+    <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+  </ion-text>
+
+  <ion-text color="tertiary">
+    <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+  </ion-text>
+
+  <p>
+    <ion-text color="warning"><ion-icon :icon="warning"></ion-icon></ion-text>
+    I saw a werewolf with a Chinese menu in his hand.
+    Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
+    He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+    Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
+  </p>
+</template>
+
+<script lang="ts">
+  import { IonIcon, IonText } from '@ionic/vue';
+  import { warning } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonIcon, IonText },
+    setup() {
+      return {
+        warning,
+      };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/textarea/autogrow/angular.md b/static/usage/v7/textarea/autogrow/angular.md
new file mode 100644
index 00000000000..5ff7394eec0
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/angular.md
@@ -0,0 +1,7 @@
+```html
+<ion-item>
+  <ion-textarea placeholder="Type something here" [autoGrow]="true"
+    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus sem, auctor accumsan egestas sed, venenatis at ex. Nam consequat ex odio, suscipit rhoncus orci dictum eget. Aenean sit amet ligula varius felis facilisis lacinia nec volutpat nulla. Duis ullamcorper sit amet turpis sed blandit. Integer pretium massa eu faucibus interdum.">
+  </ion-textarea>
+</ion-item>
+```
diff --git a/static/usage/v7/textarea/autogrow/demo.html b/static/usage/v7/textarea/autogrow/demo.html
new file mode 100644
index 00000000000..07434619b22
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Textarea - Autogrow</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      padding: 0 40px;
+    }
+
+    ion-item {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-textarea placeholder="Type something here" auto-grow="true"
+            value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus sem, auctor accumsan egestas sed, venenatis at ex. Nam consequat ex odio, suscipit rhoncus orci dictum eget. Aenean sit amet ligula varius felis facilisis lacinia nec volutpat nulla. Duis ullamcorper sit amet turpis sed blandit. Integer pretium massa eu faucibus interdum.">
+          </ion-textarea>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/textarea/autogrow/index.md b/static/usage/v7/textarea/autogrow/index.md
new file mode 100644
index 00000000000..9dd79cbd7cd
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="small"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/textarea/autogrow/demo.html"
+/>
diff --git a/static/usage/v7/textarea/autogrow/javascript.md b/static/usage/v7/textarea/autogrow/javascript.md
new file mode 100644
index 00000000000..bea62987f5e
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/javascript.md
@@ -0,0 +1,7 @@
+```html
+<ion-item>
+  <ion-textarea placeholder="Type something here" auto-grow="true"
+    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus sem, auctor accumsan egestas sed, venenatis at ex. Nam consequat ex odio, suscipit rhoncus orci dictum eget. Aenean sit amet ligula varius felis facilisis lacinia nec volutpat nulla. Duis ullamcorper sit amet turpis sed blandit. Integer pretium massa eu faucibus interdum.">
+  </ion-textarea>
+</ion-item>
+```
diff --git a/static/usage/v7/textarea/autogrow/react.md b/static/usage/v7/textarea/autogrow/react.md
new file mode 100644
index 00000000000..28d11b28efc
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonItem, IonTextarea } from '@ionic/react';
+function Example() {
+  return (
+    <IonItem>
+      <IonTextarea
+        placeholder="Type something here"
+        autoGrow={true}
+        value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus sem, auctor accumsan egestas sed, venenatis at ex. Nam consequat ex odio, suscipit rhoncus orci dictum eget. Aenean sit amet ligula varius felis facilisis lacinia nec volutpat nulla. Duis ullamcorper sit amet turpis sed blandit. Integer pretium massa eu faucibus interdum."
+      ></IonTextarea>
+    </IonItem>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/autogrow/vue.md b/static/usage/v7/textarea/autogrow/vue.md
new file mode 100644
index 00000000000..824ada24909
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-item>
+    <ion-textarea placeholder="Type something here" :auto-grow="true"
+      value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus sem, auctor accumsan egestas sed, venenatis at ex. Nam consequat ex odio, suscipit rhoncus orci dictum eget. Aenean sit amet ligula varius felis facilisis lacinia nec volutpat nulla. Duis ullamcorper sit amet turpis sed blandit. Integer pretium massa eu faucibus interdum.">
+    </ion-textarea>
+  </ion-item>
+</template>
+
+<script>
+  import { IonItem, IonTextarea } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonTextarea },
+  });
+</script>
+```
diff --git a/static/usage/v7/textarea/basic/angular.md b/static/usage/v7/textarea/basic/angular.md
new file mode 100644
index 00000000000..82392c0f2bc
--- /dev/null
+++ b/static/usage/v7/textarea/basic/angular.md
@@ -0,0 +1,16 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Regular textarea</ion-label>
+    <ion-textarea placeholder="Type something here"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-label>Readonly textarea</ion-label>
+    <ion-textarea [readonly]="true" placeholder="Can't edit this"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-label>Disabled textarea</ion-label>
+    <ion-textarea [disabled]="true" placeholder="Can't type here"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/basic/demo.html b/static/usage/v7/textarea/basic/demo.html
new file mode 100644
index 00000000000..54d2bee2efb
--- /dev/null
+++ b/static/usage/v7/textarea/basic/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Textarea - Basic Usage</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: calc(100% - 20px);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Regular textarea</ion-label>
+            <ion-textarea placeholder="Type something here"></ion-textarea>
+          </ion-item>
+          <ion-item>
+            <ion-label>Readonly textarea</ion-label>
+            <ion-textarea readonly="true" placeholder="Can't edit this"></ion-textarea>
+          </ion-item>
+          <ion-item>
+            <ion-label>Disabled textarea</ion-label>
+            <ion-textarea disabled="true" placeholder="Can't type here"></ion-textarea>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/textarea/basic/index.md b/static/usage/v7/textarea/basic/index.md
new file mode 100644
index 00000000000..3070fbea859
--- /dev/null
+++ b/static/usage/v7/textarea/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="250px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/textarea/basic/demo.html"
+/>
diff --git a/static/usage/v7/textarea/basic/javascript.md b/static/usage/v7/textarea/basic/javascript.md
new file mode 100644
index 00000000000..fc1bdf3b50f
--- /dev/null
+++ b/static/usage/v7/textarea/basic/javascript.md
@@ -0,0 +1,16 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Regular textarea</ion-label>
+    <ion-textarea placeholder="Type something here"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-label>Readonly textarea</ion-label>
+    <ion-textarea readonly="true" placeholder="Can't edit this"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-label>Disabled textarea</ion-label>
+    <ion-textarea disabled="true" placeholder="Can't type here"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/basic/react.md b/static/usage/v7/textarea/basic/react.md
new file mode 100644
index 00000000000..37c11aa5137
--- /dev/null
+++ b/static/usage/v7/textarea/basic/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonTextarea } from '@ionic/react';
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonLabel>Regular textarea</IonLabel>
+        <IonTextarea placeholder="Type something here"></IonTextarea>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Readonly textarea</IonLabel>
+        <IonTextarea readonly={true} placeholder="Can't edit this"></IonTextarea>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Disabled textarea</IonLabel>
+        <IonTextarea disabled={true} placeholder="Can't type here"></IonTextarea>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/basic/vue.md b/static/usage/v7/textarea/basic/vue.md
new file mode 100644
index 00000000000..df9f8873ade
--- /dev/null
+++ b/static/usage/v7/textarea/basic/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>Regular textarea</ion-label>
+      <ion-textarea placeholder="Type something here"></ion-textarea>
+    </ion-item>
+    <ion-item>
+      <ion-label>Readonly textarea</ion-label>
+      <ion-textarea :readonly="true" placeholder="Can't edit this"></ion-textarea>
+    </ion-item>
+    <ion-item>
+      <ion-label>Disabled textarea</ion-label>
+      <ion-textarea :disabled="true" placeholder="Can't type here"></ion-textarea>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonItem, IonLabel, IonList, IonTextarea } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonTextarea },
+  });
+</script>
+```
diff --git a/static/usage/v7/textarea/clear-on-edit/angular.md b/static/usage/v7/textarea/clear-on-edit/angular.md
new file mode 100644
index 00000000000..409362189a3
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-textarea
+  placeholder="Enter text, leave the textarea, come back, and type to clear"
+  [clearOnEdit]="true"
+></ion-textarea>
+```
diff --git a/static/usage/v7/textarea/clear-on-edit/demo.html b/static/usage/v7/textarea/clear-on-edit/demo.html
new file mode 100644
index 00000000000..253bc7a2bc9
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Textarea - Clear on Edit</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      padding: 0 40px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-textarea placeholder="Enter text, leave the textarea, come back, and type to clear" clear-on-edit="true">
+        </ion-textarea>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/textarea/clear-on-edit/index.md b/static/usage/v7/textarea/clear-on-edit/index.md
new file mode 100644
index 00000000000..cc1e09366e2
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  size="xsmall"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/textarea/clear-on-edit/demo.html"
+/>
diff --git a/static/usage/v7/textarea/clear-on-edit/javascript.md b/static/usage/v7/textarea/clear-on-edit/javascript.md
new file mode 100644
index 00000000000..1982d982013
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-textarea
+  placeholder="Enter text, leave the textarea, come back, and type to clear"
+  clear-on-edit="true"
+></ion-textarea>
+```
diff --git a/static/usage/v7/textarea/clear-on-edit/react.md b/static/usage/v7/textarea/clear-on-edit/react.md
new file mode 100644
index 00000000000..62b8b7dcf7b
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonTextarea } from '@ionic/react';
+function Example() {
+  return (
+    <IonTextarea
+      placeholder="Enter text, leave the textarea, come back, and type to clear"
+      clearOnEdit={true}
+    ></IonTextarea>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/clear-on-edit/vue.md b/static/usage/v7/textarea/clear-on-edit/vue.md
new file mode 100644
index 00000000000..04deb37bf1e
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/vue.md
@@ -0,0 +1,17 @@
+```html
+<template>
+  <ion-textarea
+    placeholder="Enter text, leave the textarea, come back, and type to clear"
+    :clear-on-edit="true"
+  ></ion-textarea>
+</template>
+
+<script>
+  import { IonTextarea } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonTextarea },
+  });
+</script>
+```
diff --git a/static/usage/v7/textarea/theming/angular/example_component_css.md b/static/usage/v7/textarea/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..f36f2d0f144
--- /dev/null
+++ b/static/usage/v7/textarea/theming/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+ion-textarea.custom-textarea {
+  --background: #373737;
+  --color: #fff;
+  --padding-end: 10px;
+  --padding-start: 10px;
+  --placeholder-color: #ddd;
+  --placeholder-opacity: 0.8;
+}
+```
diff --git a/static/usage/v7/textarea/theming/angular/example_component_html.md b/static/usage/v7/textarea/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..639c4e22a1f
--- /dev/null
+++ b/static/usage/v7/textarea/theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-textarea class="custom-textarea" placeholder="Type something here"></ion-textarea>
+```
diff --git a/static/usage/v7/textarea/theming/demo.html b/static/usage/v7/textarea/theming/demo.html
new file mode 100644
index 00000000000..556000b9591
--- /dev/null
+++ b/static/usage/v7/textarea/theming/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Textarea - Theming</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .container {
+      padding: 0 40px;
+    }
+
+    ion-textarea.custom-textarea {
+      --background: #373737;
+      --color: #fff;
+      --padding-end: 10px;
+      --padding-start: 10px;
+      --placeholder-color: #ddd;
+      --placeholder-opacity: 0.8;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-textarea class="custom-textarea" placeholder="Type something here"></ion-textarea>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/textarea/theming/index.md b/static/usage/v7/textarea/theming/index.md
new file mode 100644
index 00000000000..9042fb29fa4
--- /dev/null
+++ b/static/usage/v7/textarea/theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  size="xsmall"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/textarea/theming/demo.html"
+/>
diff --git a/static/usage/v7/textarea/theming/javascript.md b/static/usage/v7/textarea/theming/javascript.md
new file mode 100644
index 00000000000..be7bfef12a7
--- /dev/null
+++ b/static/usage/v7/textarea/theming/javascript.md
@@ -0,0 +1,14 @@
+```html
+<ion-textarea class="custom-textarea" placeholder="Type something here"></ion-textarea>
+
+<style>
+  ion-textarea.custom-textarea {
+    --background: #373737;
+    --color: #fff;
+    --padding-end: 10px;
+    --padding-start: 10px;
+    --placeholder-color: #ddd;
+    --placeholder-opacity: 0.8;
+  }
+</style>
+```
diff --git a/static/usage/v7/textarea/theming/react/main_css.md b/static/usage/v7/textarea/theming/react/main_css.md
new file mode 100644
index 00000000000..f36f2d0f144
--- /dev/null
+++ b/static/usage/v7/textarea/theming/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+ion-textarea.custom-textarea {
+  --background: #373737;
+  --color: #fff;
+  --padding-end: 10px;
+  --padding-start: 10px;
+  --placeholder-color: #ddd;
+  --placeholder-opacity: 0.8;
+}
+```
diff --git a/static/usage/v7/textarea/theming/react/main_tsx.md b/static/usage/v7/textarea/theming/react/main_tsx.md
new file mode 100644
index 00000000000..2f5acbf2fdc
--- /dev/null
+++ b/static/usage/v7/textarea/theming/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonTextarea } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return <IonTextarea className="custom-textarea" placeholder="Type something here"></IonTextarea>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md
new file mode 100644
index 00000000000..b8f6639d8e8
--- /dev/null
+++ b/static/usage/v7/textarea/theming/vue.md
@@ -0,0 +1,25 @@
+```html
+<style>
+  ion-textarea.custom-textarea {
+    --background: #373737;
+    --color: #fff;
+    --padding-end: 10px;
+    --padding-start: 10px;
+    --placeholder-color: #ddd;
+    --placeholder-opacity: 0.8;
+  }
+</style>
+
+<template>
+  <ion-textarea class="custom-textarea" placeholder="Type something here"></ion-textarea>
+</template>
+
+<script lang="ts">
+  import { IonTextarea } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonTextarea },
+  });
+</script>
+```
diff --git a/static/usage/v7/thumbnail/basic/angular.md b/static/usage/v7/thumbnail/basic/angular.md
new file mode 100644
index 00000000000..119cfb8ee9c
--- /dev/null
+++ b/static/usage/v7/thumbnail/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-thumbnail>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+</ion-thumbnail>
+```
diff --git a/static/usage/v7/thumbnail/basic/demo.html b/static/usage/v7/thumbnail/basic/demo.html
new file mode 100644
index 00000000000..e3aabdff4c2
--- /dev/null
+++ b/static/usage/v7/thumbnail/basic/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Thumbnail</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-thumbnail>
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/thumbnail/basic/index.md b/static/usage/v7/thumbnail/basic/index.md
new file mode 100644
index 00000000000..60e254955c8
--- /dev/null
+++ b/static/usage/v7/thumbnail/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/thumbnail/basic/demo.html" />
diff --git a/static/usage/v7/thumbnail/basic/javascript.md b/static/usage/v7/thumbnail/basic/javascript.md
new file mode 100644
index 00000000000..119cfb8ee9c
--- /dev/null
+++ b/static/usage/v7/thumbnail/basic/javascript.md
@@ -0,0 +1,5 @@
+```html
+<ion-thumbnail>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+</ion-thumbnail>
+```
diff --git a/static/usage/v7/thumbnail/basic/react.md b/static/usage/v7/thumbnail/basic/react.md
new file mode 100644
index 00000000000..3813690a7a4
--- /dev/null
+++ b/static/usage/v7/thumbnail/basic/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonThumbnail } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonThumbnail>
+        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+      </IonThumbnail>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/thumbnail/basic/vue.md b/static/usage/v7/thumbnail/basic/vue.md
new file mode 100644
index 00000000000..74afde558d4
--- /dev/null
+++ b/static/usage/v7/thumbnail/basic/vue.md
@@ -0,0 +1,16 @@
+```html
+<template>
+  <ion-thumbnail>
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+  </ion-thumbnail>
+</template>
+
+<script lang="ts">
+  import { IonThumbnail } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonThumbnail },
+  });
+</script>
+```
diff --git a/static/usage/v7/thumbnail/item/angular.md b/static/usage/v7/thumbnail/item/angular.md
new file mode 100644
index 00000000000..a83cb82e78c
--- /dev/null
+++ b/static/usage/v7/thumbnail/item/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-item>
+  <ion-thumbnail slot="start">
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+  </ion-thumbnail>
+  <ion-label>Item Thumbnail</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/thumbnail/item/demo.html b/static/usage/v7/thumbnail/item/demo.html
new file mode 100644
index 00000000000..3e8c739fd73
--- /dev/null
+++ b/static/usage/v7/thumbnail/item/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Thumbnail</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+          </ion-thumbnail>
+          <ion-label>Item Thumbnail</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/thumbnail/item/index.md b/static/usage/v7/thumbnail/item/index.md
new file mode 100644
index 00000000000..89a2a19fb8c
--- /dev/null
+++ b/static/usage/v7/thumbnail/item/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/thumbnail/item/demo.html" />
diff --git a/static/usage/v7/thumbnail/item/javascript.md b/static/usage/v7/thumbnail/item/javascript.md
new file mode 100644
index 00000000000..a83cb82e78c
--- /dev/null
+++ b/static/usage/v7/thumbnail/item/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-item>
+  <ion-thumbnail slot="start">
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+  </ion-thumbnail>
+  <ion-label>Item Thumbnail</ion-label>
+</ion-item>
+```
diff --git a/static/usage/v7/thumbnail/item/react.md b/static/usage/v7/thumbnail/item/react.md
new file mode 100644
index 00000000000..29630ebf819
--- /dev/null
+++ b/static/usage/v7/thumbnail/item/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonThumbnail } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonThumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </IonThumbnail>
+        <IonLabel>Item Thumbnail</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/thumbnail/item/vue.md b/static/usage/v7/thumbnail/item/vue.md
new file mode 100644
index 00000000000..4e688f05030
--- /dev/null
+++ b/static/usage/v7/thumbnail/item/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+    </ion-thumbnail>
+    <ion-label>Item Thumbnail</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonThumbnail },
+  });
+</script>
+```
diff --git a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..605855deb77
--- /dev/null
+++ b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,7 @@
+
+```css
+ion-thumbnail {
+  --size: 140px;
+  --border-radius: 14px;
+}
+```
diff --git a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..8ef97cae761
--- /dev/null
+++ b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,6 @@
+
+```html
+<ion-thumbnail>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+</ion-thumbnail>
+```
diff --git a/static/usage/v7/thumbnail/theming/css-properties/demo.html b/static/usage/v7/thumbnail/theming/css-properties/demo.html
new file mode 100644
index 00000000000..1abdceda339
--- /dev/null
+++ b/static/usage/v7/thumbnail/theming/css-properties/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Thumbnail</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-thumbnail {
+      --size: 140px;
+      --border-radius: 14px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-thumbnail>
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+        </ion-thumbnail>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/thumbnail/theming/css-properties/index.md b/static/usage/v7/thumbnail/theming/css-properties/index.md
new file mode 100644
index 00000000000..36674cc72c0
--- /dev/null
+++ b/static/usage/v7/thumbnail/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/thumbnail/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/thumbnail/theming/css-properties/javascript.md b/static/usage/v7/thumbnail/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..6586de083c5
--- /dev/null
+++ b/static/usage/v7/thumbnail/theming/css-properties/javascript.md
@@ -0,0 +1,12 @@
+```html
+<style>
+  ion-thumbnail {
+    --size: 140px;
+    --border-radius: 14px;
+  }
+</style>
+
+<ion-thumbnail>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+</ion-thumbnail>
+```
diff --git a/static/usage/v7/thumbnail/theming/css-properties/react/main_css.md b/static/usage/v7/thumbnail/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..74742dfe9f0
--- /dev/null
+++ b/static/usage/v7/thumbnail/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-thumbnail {
+  --size: 140px;
+  --border-radius: 14px;
+}
+```
diff --git a/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..37f4796d763
--- /dev/null
+++ b/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,18 @@
+
+```tsx
+import React from 'react';
+import { IonThumbnail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonThumbnail>
+        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+      </IonThumbnail>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/thumbnail/theming/css-properties/vue.md b/static/usage/v7/thumbnail/theming/css-properties/vue.md
new file mode 100644
index 00000000000..bd772024b00
--- /dev/null
+++ b/static/usage/v7/thumbnail/theming/css-properties/vue.md
@@ -0,0 +1,23 @@
+```html
+<style>
+  ion-thumbnail {
+    --size: 140px;
+    --border-radius: 14px;
+  }
+</style>
+
+<template>
+  <ion-thumbnail>
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+  </ion-thumbnail>
+</template>
+
+<script lang="ts">
+  import { IonThumbnail } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonThumbnail },
+  });
+</script>
+```
diff --git a/static/usage/v7/title/basic/angular.md b/static/usage/v7/title/basic/angular.md
new file mode 100644
index 00000000000..59a304dbeec
--- /dev/null
+++ b/static/usage/v7/title/basic/angular.md
@@ -0,0 +1,7 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Title</ion-title>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v7/title/basic/demo.html b/static/usage/v7/title/basic/demo.html
new file mode 100644
index 00000000000..13b1b317ce0
--- /dev/null
+++ b/static/usage/v7/title/basic/demo.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Title</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Title</ion-title>
+      </ion-toolbar>
+    </ion-header>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/title/basic/index.md b/static/usage/v7/title/basic/index.md
new file mode 100644
index 00000000000..2ff7e96f44a
--- /dev/null
+++ b/static/usage/v7/title/basic/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/title/basic/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/title/basic/javascript.md b/static/usage/v7/title/basic/javascript.md
new file mode 100644
index 00000000000..59a304dbeec
--- /dev/null
+++ b/static/usage/v7/title/basic/javascript.md
@@ -0,0 +1,7 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Title</ion-title>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v7/title/basic/react.md b/static/usage/v7/title/basic/react.md
new file mode 100644
index 00000000000..efef42efdcc
--- /dev/null
+++ b/static/usage/v7/title/basic/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonToolbar, IonTitle } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Title</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/title/basic/vue.md b/static/usage/v7/title/basic/vue.md
new file mode 100644
index 00000000000..99a7ee20224
--- /dev/null
+++ b/static/usage/v7/title/basic/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Title</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonToolbar, IonTitle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonHeader, IonToolbar, IonTitle },
+  });
+</script>
+```
diff --git a/static/usage/v7/title/collapsible-large-title/basic/angular.md b/static/usage/v7/title/collapsible-large-title/basic/angular.md
new file mode 100644
index 00000000000..727d9ba1e3a
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/angular.md
@@ -0,0 +1,39 @@
+```html
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Title</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Title</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <div class="ion-padding">Scroll the list to see the title collapse.</div>
+
+  <ion-list>
+    <ion-item>Item 1</ion-item>
+    <ion-item>Item 2</ion-item>
+    <ion-item>Item 3</ion-item>
+    <ion-item>Item 4</ion-item>
+    <ion-item>Item 5</ion-item>
+    <ion-item>Item 6</ion-item>
+    <ion-item>Item 7</ion-item>
+    <ion-item>Item 8</ion-item>
+    <ion-item>Item 9</ion-item>
+    <ion-item>Item 10</ion-item>
+    <ion-item>Item 11</ion-item>
+    <ion-item>Item 12</ion-item>
+    <ion-item>Item 13</ion-item>
+    <ion-item>Item 14</ion-item>
+    <ion-item>Item 15</ion-item>
+    <ion-item>Item 16</ion-item>
+    <ion-item>Item 17</ion-item>
+    <ion-item>Item 18</ion-item>
+    <ion-item>Item 19</ion-item>
+    <ion-item>Item 20</ion-item>
+  </ion-list>
+</ion-content>
+```
diff --git a/static/usage/v7/title/collapsible-large-title/basic/demo.html b/static/usage/v7/title/collapsible-large-title/basic/demo.html
new file mode 100644
index 00000000000..e67c7bd3a33
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Title</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-title>Title</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Title</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <div class="ion-padding">
+        Scroll the list to see the title collapse.
+      </div>
+
+      <ion-list>
+        <ion-item>Item 1</ion-item>
+        <ion-item>Item 2</ion-item>
+        <ion-item>Item 3</ion-item>
+        <ion-item>Item 4</ion-item>
+        <ion-item>Item 5</ion-item>
+        <ion-item>Item 6</ion-item>
+        <ion-item>Item 7</ion-item>
+        <ion-item>Item 8</ion-item>
+        <ion-item>Item 9</ion-item>
+        <ion-item>Item 10</ion-item>
+        <ion-item>Item 11</ion-item>
+        <ion-item>Item 12</ion-item>
+        <ion-item>Item 13</ion-item>
+        <ion-item>Item 14</ion-item>
+        <ion-item>Item 15</ion-item>
+        <ion-item>Item 16</ion-item>
+        <ion-item>Item 17</ion-item>
+        <ion-item>Item 18</ion-item>
+        <ion-item>Item 19</ion-item>
+        <ion-item>Item 20</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/title/collapsible-large-title/basic/index.md b/static/usage/v7/title/collapsible-large-title/basic/index.md
new file mode 100644
index 00000000000..b4cb25ad642
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/index.md
@@ -0,0 +1,15 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  mode="ios"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/title/collapsible-large-title/basic/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/title/collapsible-large-title/basic/javascript.md b/static/usage/v7/title/collapsible-large-title/basic/javascript.md
new file mode 100644
index 00000000000..77e7de55212
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/javascript.md
@@ -0,0 +1,39 @@
+```html
+<ion-header translucent="true">
+  <ion-toolbar>
+    <ion-title>Title</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content fullscreen="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Title</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <div class="ion-padding">Scroll the list to see the title collapse.</div>
+
+  <ion-list>
+    <ion-item>Item 1</ion-item>
+    <ion-item>Item 2</ion-item>
+    <ion-item>Item 3</ion-item>
+    <ion-item>Item 4</ion-item>
+    <ion-item>Item 5</ion-item>
+    <ion-item>Item 6</ion-item>
+    <ion-item>Item 7</ion-item>
+    <ion-item>Item 8</ion-item>
+    <ion-item>Item 9</ion-item>
+    <ion-item>Item 10</ion-item>
+    <ion-item>Item 11</ion-item>
+    <ion-item>Item 12</ion-item>
+    <ion-item>Item 13</ion-item>
+    <ion-item>Item 14</ion-item>
+    <ion-item>Item 15</ion-item>
+    <ion-item>Item 16</ion-item>
+    <ion-item>Item 17</ion-item>
+    <ion-item>Item 18</ion-item>
+    <ion-item>Item 19</ion-item>
+    <ion-item>Item 20</ion-item>
+  </ion-list>
+</ion-content>
+```
diff --git a/static/usage/v7/title/collapsible-large-title/basic/react.md b/static/usage/v7/title/collapsible-large-title/basic/react.md
new file mode 100644
index 00000000000..cdcbdc557b6
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/react.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonHeader translucent={true}>
+        <IonToolbar>
+          <IonTitle>Title</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen={true}>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Title</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <div className="ion-padding">Scroll the list to see the title collapse.</div>
+
+        <IonList>
+          <IonItem>Item 1</IonItem>
+          <IonItem>Item 2</IonItem>
+          <IonItem>Item 3</IonItem>
+          <IonItem>Item 4</IonItem>
+          <IonItem>Item 5</IonItem>
+          <IonItem>Item 6</IonItem>
+          <IonItem>Item 7</IonItem>
+          <IonItem>Item 8</IonItem>
+          <IonItem>Item 9</IonItem>
+          <IonItem>Item 10</IonItem>
+          <IonItem>Item 11</IonItem>
+          <IonItem>Item 12</IonItem>
+          <IonItem>Item 13</IonItem>
+          <IonItem>Item 14</IonItem>
+          <IonItem>Item 15</IonItem>
+          <IonItem>Item 16</IonItem>
+          <IonItem>Item 17</IonItem>
+          <IonItem>Item 18</IonItem>
+          <IonItem>Item 19</IonItem>
+          <IonItem>Item 20</IonItem>
+        </IonList>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/title/collapsible-large-title/basic/vue.md b/static/usage/v7/title/collapsible-large-title/basic/vue.md
new file mode 100644
index 00000000000..de922b98bca
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/vue.md
@@ -0,0 +1,50 @@
+```html
+<template>
+  <ion-header :translucent="true">
+    <ion-toolbar>
+      <ion-title>Title</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content :fullscreen="true">
+    <ion-header collapse="condense">
+      <ion-toolbar>
+        <ion-title size="large">Title</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <div class="ion-padding">Scroll the list to see the title collapse.</div>
+
+    <ion-list>
+      <ion-item>Item 1</ion-item>
+      <ion-item>Item 2</ion-item>
+      <ion-item>Item 3</ion-item>
+      <ion-item>Item 4</ion-item>
+      <ion-item>Item 5</ion-item>
+      <ion-item>Item 6</ion-item>
+      <ion-item>Item 7</ion-item>
+      <ion-item>Item 8</ion-item>
+      <ion-item>Item 9</ion-item>
+      <ion-item>Item 10</ion-item>
+      <ion-item>Item 11</ion-item>
+      <ion-item>Item 12</ion-item>
+      <ion-item>Item 13</ion-item>
+      <ion-item>Item 14</ion-item>
+      <ion-item>Item 15</ion-item>
+      <ion-item>Item 16</ion-item>
+      <ion-item>Item 17</ion-item>
+      <ion-item>Item 18</ion-item>
+      <ion-item>Item 19</ion-item>
+      <ion-item>Item 20</ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem },
+  });
+</script>
+```
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/angular.md b/static/usage/v7/title/collapsible-large-title/buttons/angular.md
new file mode 100644
index 00000000000..6f253b16cd4
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/angular.md
@@ -0,0 +1,45 @@
+```html
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Title</ion-title>
+    <ion-buttons [collapse]="true" slot="end">
+      <ion-button>Button</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Title</ion-title>
+      <ion-buttons [collapse]="true" slot="end">
+        <ion-button>Button</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <div class="ion-padding">Scroll the list to see the title & buttons collapse.</div>
+
+  <ion-list>
+    <ion-item>Item 1</ion-item>
+    <ion-item>Item 2</ion-item>
+    <ion-item>Item 3</ion-item>
+    <ion-item>Item 4</ion-item>
+    <ion-item>Item 5</ion-item>
+    <ion-item>Item 6</ion-item>
+    <ion-item>Item 7</ion-item>
+    <ion-item>Item 8</ion-item>
+    <ion-item>Item 9</ion-item>
+    <ion-item>Item 10</ion-item>
+    <ion-item>Item 11</ion-item>
+    <ion-item>Item 12</ion-item>
+    <ion-item>Item 13</ion-item>
+    <ion-item>Item 14</ion-item>
+    <ion-item>Item 15</ion-item>
+    <ion-item>Item 16</ion-item>
+    <ion-item>Item 17</ion-item>
+    <ion-item>Item 18</ion-item>
+    <ion-item>Item 19</ion-item>
+    <ion-item>Item 20</ion-item>
+  </ion-list>
+</ion-content>
+```
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/demo.html b/static/usage/v7/title/collapsible-large-title/buttons/demo.html
new file mode 100644
index 00000000000..ecf88cf5305
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Title</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-title>Title</ion-title>
+        <ion-buttons collapse="true" slot="end">
+          <ion-button>Button</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Title</ion-title>
+          <ion-buttons collapse="true" slot="end">
+            <ion-button>Button</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <div class="ion-padding">
+        Scroll the list to see the title & buttons collapse.
+      </div>
+
+      <ion-list>
+        <ion-item>Item 1</ion-item>
+        <ion-item>Item 2</ion-item>
+        <ion-item>Item 3</ion-item>
+        <ion-item>Item 4</ion-item>
+        <ion-item>Item 5</ion-item>
+        <ion-item>Item 6</ion-item>
+        <ion-item>Item 7</ion-item>
+        <ion-item>Item 8</ion-item>
+        <ion-item>Item 9</ion-item>
+        <ion-item>Item 10</ion-item>
+        <ion-item>Item 11</ion-item>
+        <ion-item>Item 12</ion-item>
+        <ion-item>Item 13</ion-item>
+        <ion-item>Item 14</ion-item>
+        <ion-item>Item 15</ion-item>
+        <ion-item>Item 16</ion-item>
+        <ion-item>Item 17</ion-item>
+        <ion-item>Item 18</ion-item>
+        <ion-item>Item 19</ion-item>
+        <ion-item>Item 20</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/index.md b/static/usage/v7/title/collapsible-large-title/buttons/index.md
new file mode 100644
index 00000000000..b11f1bbe655
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/index.md
@@ -0,0 +1,15 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  mode="ios"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/title/collapsible-large-title/buttons/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/javascript.md b/static/usage/v7/title/collapsible-large-title/buttons/javascript.md
new file mode 100644
index 00000000000..feb1583e3b6
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/javascript.md
@@ -0,0 +1,45 @@
+```html
+<ion-header translucent="true">
+  <ion-toolbar>
+    <ion-title>Title</ion-title>
+    <ion-buttons collapse="true" slot="end">
+      <ion-button>Button</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content fullscreen="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Title</ion-title>
+      <ion-buttons collapse="true" slot="end">
+        <ion-button>Button</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <div class="ion-padding">Scroll the list to see the title & buttons collapse.</div>
+
+  <ion-list>
+    <ion-item>Item 1</ion-item>
+    <ion-item>Item 2</ion-item>
+    <ion-item>Item 3</ion-item>
+    <ion-item>Item 4</ion-item>
+    <ion-item>Item 5</ion-item>
+    <ion-item>Item 6</ion-item>
+    <ion-item>Item 7</ion-item>
+    <ion-item>Item 8</ion-item>
+    <ion-item>Item 9</ion-item>
+    <ion-item>Item 10</ion-item>
+    <ion-item>Item 11</ion-item>
+    <ion-item>Item 12</ion-item>
+    <ion-item>Item 13</ion-item>
+    <ion-item>Item 14</ion-item>
+    <ion-item>Item 15</ion-item>
+    <ion-item>Item 16</ion-item>
+    <ion-item>Item 17</ion-item>
+    <ion-item>Item 18</ion-item>
+    <ion-item>Item 19</ion-item>
+    <ion-item>Item 20</ion-item>
+  </ion-list>
+</ion-content>
+```
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/react.md b/static/usage/v7/title/collapsible-large-title/buttons/react.md
new file mode 100644
index 00000000000..deca52428ce
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/react.md
@@ -0,0 +1,55 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonHeader translucent={true}>
+        <IonToolbar>
+          <IonTitle>Title</IonTitle>
+          <IonButtons collapse={true} slot="end">
+            <IonButton>Button</IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen={true}>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Title</IonTitle>
+            <IonButtons collapse={true} slot="end">
+              <IonButton>Button</IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+
+        <div className="ion-padding">Scroll the list to see the title & buttons collapse.</div>
+
+        <IonList>
+          <IonItem>Item 1</IonItem>
+          <IonItem>Item 2</IonItem>
+          <IonItem>Item 3</IonItem>
+          <IonItem>Item 4</IonItem>
+          <IonItem>Item 5</IonItem>
+          <IonItem>Item 6</IonItem>
+          <IonItem>Item 7</IonItem>
+          <IonItem>Item 8</IonItem>
+          <IonItem>Item 9</IonItem>
+          <IonItem>Item 10</IonItem>
+          <IonItem>Item 11</IonItem>
+          <IonItem>Item 12</IonItem>
+          <IonItem>Item 13</IonItem>
+          <IonItem>Item 14</IonItem>
+          <IonItem>Item 15</IonItem>
+          <IonItem>Item 16</IonItem>
+          <IonItem>Item 17</IonItem>
+          <IonItem>Item 18</IonItem>
+          <IonItem>Item 19</IonItem>
+          <IonItem>Item 20</IonItem>
+        </IonList>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/vue.md b/static/usage/v7/title/collapsible-large-title/buttons/vue.md
new file mode 100644
index 00000000000..2c23d8982ad
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/vue.md
@@ -0,0 +1,56 @@
+```html
+<template>
+  <ion-header :translucent="true">
+    <ion-toolbar>
+      <ion-title>Title</ion-title>
+      <ion-buttons :collapse="true" slot="end">
+        <ion-button>Button</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content :fullscreen="true">
+    <ion-header collapse="condense">
+      <ion-toolbar>
+        <ion-title size="large">Title</ion-title>
+        <ion-buttons :collapse="true" slot="end">
+          <ion-button>Button</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <div class="ion-padding">Scroll the list to see the title & buttons collapse.</div>
+
+    <ion-list>
+      <ion-item>Item 1</ion-item>
+      <ion-item>Item 2</ion-item>
+      <ion-item>Item 3</ion-item>
+      <ion-item>Item 4</ion-item>
+      <ion-item>Item 5</ion-item>
+      <ion-item>Item 6</ion-item>
+      <ion-item>Item 7</ion-item>
+      <ion-item>Item 8</ion-item>
+      <ion-item>Item 9</ion-item>
+      <ion-item>Item 10</ion-item>
+      <ion-item>Item 11</ion-item>
+      <ion-item>Item 12</ion-item>
+      <ion-item>Item 13</ion-item>
+      <ion-item>Item 14</ion-item>
+      <ion-item>Item 15</ion-item>
+      <ion-item>Item 16</ion-item>
+      <ion-item>Item 17</ion-item>
+      <ion-item>Item 18</ion-item>
+      <ion-item>Item 19</ion-item>
+      <ion-item>Item 20</ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton },
+  });
+</script>
+```
diff --git a/static/usage/v7/title/theming/css-properties/angular/example_component_html.md b/static/usage/v7/title/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31c40bb2ef7
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Title</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Title</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-list>
+    <ion-item>Item 1</ion-item>
+    <ion-item>Item 2</ion-item>
+    <ion-item>Item 3</ion-item>
+    <ion-item>Item 4</ion-item>
+    <ion-item>Item 5</ion-item>
+    <ion-item>Item 6</ion-item>
+    <ion-item>Item 7</ion-item>
+    <ion-item>Item 8</ion-item>
+    <ion-item>Item 9</ion-item>
+    <ion-item>Item 10</ion-item>
+    <ion-item>Item 11</ion-item>
+    <ion-item>Item 12</ion-item>
+    <ion-item>Item 13</ion-item>
+    <ion-item>Item 14</ion-item>
+    <ion-item>Item 15</ion-item>
+    <ion-item>Item 16</ion-item>
+    <ion-item>Item 17</ion-item>
+    <ion-item>Item 18</ion-item>
+    <ion-item>Item 19</ion-item>
+    <ion-item>Item 20</ion-item>
+  </ion-list>
+</ion-content>
+```
diff --git a/static/usage/v7/title/theming/css-properties/angular/global_css.md b/static/usage/v7/title/theming/css-properties/angular/global_css.md
new file mode 100644
index 00000000000..0da76c33423
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/angular/global_css.md
@@ -0,0 +1,14 @@
+```css
+ion-title.title-large {
+  color: #c897d8;
+  font-size: 30px;
+}
+
+ion-title {
+  --color: #000;
+}
+
+ion-toolbar {
+  --background: #c897d8;
+}
+```
diff --git a/static/usage/v7/title/theming/css-properties/demo.html b/static/usage/v7/title/theming/css-properties/demo.html
new file mode 100644
index 00000000000..202131c46ac
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Title</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-title.title-large {
+      color: #C897D8;
+      font-size: 30px;
+    }
+
+    ion-title {
+      --color: #000;
+    }
+
+    ion-toolbar {
+      --background: #C897D8;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-title>Title</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Title</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-list>
+        <ion-item>Item 1</ion-item>
+        <ion-item>Item 2</ion-item>
+        <ion-item>Item 3</ion-item>
+        <ion-item>Item 4</ion-item>
+        <ion-item>Item 5</ion-item>
+        <ion-item>Item 6</ion-item>
+        <ion-item>Item 7</ion-item>
+        <ion-item>Item 8</ion-item>
+        <ion-item>Item 9</ion-item>
+        <ion-item>Item 10</ion-item>
+        <ion-item>Item 11</ion-item>
+        <ion-item>Item 12</ion-item>
+        <ion-item>Item 13</ion-item>
+        <ion-item>Item 14</ion-item>
+        <ion-item>Item 15</ion-item>
+        <ion-item>Item 16</ion-item>
+        <ion-item>Item 17</ion-item>
+        <ion-item>Item 18</ion-item>
+        <ion-item>Item 19</ion-item>
+        <ion-item>Item 20</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/title/theming/css-properties/index.md b/static/usage/v7/title/theming/css-properties/index.md
new file mode 100644
index 00000000000..aed27e79157
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/global.css': angular_global_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/title/theming/css-properties/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/title/theming/css-properties/javascript.md b/static/usage/v7/title/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..443ca1bf39d
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/javascript.md
@@ -0,0 +1,52 @@
+```html
+<style>
+  ion-title.title-large {
+    color: #c897d8;
+    font-size: 30px;
+  }
+
+  ion-title {
+    --color: #000;
+  }
+
+  ion-toolbar {
+    --background: #c897d8;
+  }
+</style>
+
+<ion-header translucent="true">
+  <ion-toolbar>
+    <ion-title>Title</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content fullscreen="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Title</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-list>
+    <ion-item>Item 1</ion-item>
+    <ion-item>Item 2</ion-item>
+    <ion-item>Item 3</ion-item>
+    <ion-item>Item 4</ion-item>
+    <ion-item>Item 5</ion-item>
+    <ion-item>Item 6</ion-item>
+    <ion-item>Item 7</ion-item>
+    <ion-item>Item 8</ion-item>
+    <ion-item>Item 9</ion-item>
+    <ion-item>Item 10</ion-item>
+    <ion-item>Item 11</ion-item>
+    <ion-item>Item 12</ion-item>
+    <ion-item>Item 13</ion-item>
+    <ion-item>Item 14</ion-item>
+    <ion-item>Item 15</ion-item>
+    <ion-item>Item 16</ion-item>
+    <ion-item>Item 17</ion-item>
+    <ion-item>Item 18</ion-item>
+    <ion-item>Item 19</ion-item>
+    <ion-item>Item 20</ion-item>
+  </ion-list>
+</ion-content>
+```
diff --git a/static/usage/v7/title/theming/css-properties/react/main_css.md b/static/usage/v7/title/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..0da76c33423
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-title.title-large {
+  color: #c897d8;
+  font-size: 30px;
+}
+
+ion-title {
+  --color: #000;
+}
+
+ion-toolbar {
+  --background: #c897d8;
+}
+```
diff --git a/static/usage/v7/title/theming/css-properties/react/main_tsx.md b/static/usage/v7/title/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..5dc5b9d993b
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonHeader translucent={true}>
+        <IonToolbar>
+          <IonTitle>Title</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen={true}>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Title</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonList>
+          <IonItem>Item 1</IonItem>
+          <IonItem>Item 2</IonItem>
+          <IonItem>Item 3</IonItem>
+          <IonItem>Item 4</IonItem>
+          <IonItem>Item 5</IonItem>
+          <IonItem>Item 6</IonItem>
+          <IonItem>Item 7</IonItem>
+          <IonItem>Item 8</IonItem>
+          <IonItem>Item 9</IonItem>
+          <IonItem>Item 10</IonItem>
+          <IonItem>Item 11</IonItem>
+          <IonItem>Item 12</IonItem>
+          <IonItem>Item 13</IonItem>
+          <IonItem>Item 14</IonItem>
+          <IonItem>Item 15</IonItem>
+          <IonItem>Item 16</IonItem>
+          <IonItem>Item 17</IonItem>
+          <IonItem>Item 18</IonItem>
+          <IonItem>Item 19</IonItem>
+          <IonItem>Item 20</IonItem>
+        </IonList>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/title/theming/css-properties/vue.md b/static/usage/v7/title/theming/css-properties/vue.md
new file mode 100644
index 00000000000..dc85c93d3ab
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/vue.md
@@ -0,0 +1,62 @@
+```html
+<style>
+  ion-title.title-large {
+    color: #c897d8;
+    font-size: 30px;
+  }
+
+  ion-title {
+    --color: #000;
+  }
+
+  ion-toolbar {
+    --background: #c897d8;
+  }
+</style>
+<template>
+  <ion-header :translucent="true">
+    <ion-toolbar>
+      <ion-title>Title</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content :fullscreen="true">
+    <ion-header collapse="condense">
+      <ion-toolbar>
+        <ion-title size="large">Title</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-list>
+      <ion-item>Item 1</ion-item>
+      <ion-item>Item 2</ion-item>
+      <ion-item>Item 3</ion-item>
+      <ion-item>Item 4</ion-item>
+      <ion-item>Item 5</ion-item>
+      <ion-item>Item 6</ion-item>
+      <ion-item>Item 7</ion-item>
+      <ion-item>Item 8</ion-item>
+      <ion-item>Item 9</ion-item>
+      <ion-item>Item 10</ion-item>
+      <ion-item>Item 11</ion-item>
+      <ion-item>Item 12</ion-item>
+      <ion-item>Item 13</ion-item>
+      <ion-item>Item 14</ion-item>
+      <ion-item>Item 15</ion-item>
+      <ion-item>Item 16</ion-item>
+      <ion-item>Item 17</ion-item>
+      <ion-item>Item 18</ion-item>
+      <ion-item>Item 19</ion-item>
+      <ion-item>Item 20</ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem },
+  });
+</script>
+```
diff --git a/static/usage/v7/toast/buttons/angular/example_component_html.md b/static/usage/v7/toast/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..5d457cdbf2f
--- /dev/null
+++ b/static/usage/v7/toast/buttons/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-button (click)="presentToast()">Click Me</ion-button>
+<p>{{ handlerMessage }}</p>
+<p>{{ roleMessage }}</p>
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/buttons/angular/example_component_ts.md b/static/usage/v7/toast/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..54dc88ac35c
--- /dev/null
+++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  handlerMessage = '';
+  roleMessage = '';
+
+  constructor(private toastController: ToastController) {}
+
+  async presentToast() {
+    const toast = await this.toastController.create({
+      message: 'Hello World!',
+      duration: 3000,
+      buttons: [
+        {
+          text: 'More Info',
+          role: 'info',
+          handler: () => { this.handlerMessage = 'More Info clicked'; }
+        },
+        {
+          text: 'Dismiss',
+          role: 'cancel',
+          handler: () => { this.handlerMessage = 'Dismiss clicked'; }
+        }
+      ]
+    });
+
+    await toast.present();
+
+    const { role } = await toast.onDidDismiss();
+    this.roleMessage = `Dismissed with role: ${role}`;
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/buttons/demo.html b/static/usage/v7/toast/buttons/demo.html
new file mode 100644
index 00000000000..261a6e53cc7
--- /dev/null
+++ b/static/usage/v7/toast/buttons/demo.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    .container p {
+      margin-bottom: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentToast()">Click Me</ion-button>
+        <p id="handlerResult"></p>
+        <p id="roleResult"></p>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
+  <script>
+    const handlerOutput = document.querySelector('#handlerResult');
+    const roleOutput = document.querySelector('#roleResult');
+
+    async function presentToast() {
+      const toast = await toastController.create({
+        message: 'Hello World!',
+        duration: 3000,
+        buttons: [
+          {
+            text: 'More Info',
+            role: 'info',
+            handler: () => { handlerOutput.innerText = 'More Info clicked'; }
+          },
+          {
+            text: 'Dismiss',
+            role: 'cancel',
+            handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
+          }
+        ]
+      });
+
+      await toast.present();
+
+      const { role } = await toast.onDidDismiss();
+      roleOutput.innerText = `Dismissed with role: ${role}`;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toast/buttons/index.md b/static/usage/v7/toast/buttons/index.md
new file mode 100644
index 00000000000..75d2d2c2a2e
--- /dev/null
+++ b/static/usage/v7/toast/buttons/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toast/buttons/demo.html"
+/>
diff --git a/static/usage/v7/toast/buttons/javascript.md b/static/usage/v7/toast/buttons/javascript.md
new file mode 100644
index 00000000000..c5cea896bb3
--- /dev/null
+++ b/static/usage/v7/toast/buttons/javascript.md
@@ -0,0 +1,34 @@
+```html
+<ion-button onclick="presentToast()">Click Me</ion-button>
+<p id="handlerResult"></p>
+<p id="roleResult"></p>
+
+<script>
+  const handlerOutput = document.querySelector('#handlerResult');
+  const roleOutput = document.querySelector('#roleResult');
+
+  async function presentToast() {
+    const toast = await toastController.create({
+      message: 'Hello World!',
+      duration: 3000,
+      buttons: [
+        {
+          text: 'More Info',
+          role: 'info',
+          handler: () => { handlerOutput.innerText = 'More Info clicked'; }
+        },
+        {
+          text: 'Dismiss',
+          role: 'cancel',
+          handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
+        }
+      ]
+    });
+
+    await toast.present();
+
+    const { role } = await toast.onDidDismiss();
+    roleOutput.innerText = `Dismissed with role: ${role}`;
+  }
+</script>
+```
diff --git a/static/usage/v7/toast/buttons/react.md b/static/usage/v7/toast/buttons/react.md
new file mode 100644
index 00000000000..ac08a9b543b
--- /dev/null
+++ b/static/usage/v7/toast/buttons/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+  const [presentToast] = useIonToast();
+  const [handlerMessage, setHandlerMessage] = useState('');
+  const [roleMessage, setRoleMessage] = useState('');
+
+  return (
+    <>
+      <IonButton
+        onClick={() => {
+          presentToast({
+            message: 'Hello World!',
+            duration: 3000,
+            onDidDismiss: (e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`),
+            buttons: [
+              {
+                text: 'More Info',
+                role: 'info',
+                handler: () => { setHandlerMessage('More Info clicked'); }
+              },
+              {
+                text: 'Dismiss',
+                role: 'cancel',
+                handler: () => { setHandlerMessage('Dismiss clicked'); }
+              }
+            ]
+          })
+        }}
+      >
+        Click Me
+      </IonButton>
+      <p>{handlerMessage}</p>
+      <p>{roleMessage}</p>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md
new file mode 100644
index 00000000000..ec7da81c54c
--- /dev/null
+++ b/static/usage/v7/toast/buttons/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <ion-button @click="presentToast">Click Me</ion-button>
+  <p>{{ handlerMessage }}</p>
+  <p>{{ roleMessage }}</p>
+</template>
+
+<script lang="ts">
+  import { IonButton, toastController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    data() {
+      return {
+        handlerMessage: '',
+        roleMessage: '',
+      };
+    },
+    methods: {
+      async presentToast() {
+        const toast = await toastController.create({
+          message: 'Hello World!',
+          duration: 3000,
+          buttons: [
+            {
+              text: 'More Info',
+              role: 'info',
+              handler: () => { this.handlerMessage = 'More Info clicked'; }
+            },
+            {
+              text: 'Dismiss',
+              role: 'cancel',
+              handler: () => { this.handlerMessage = 'Dismiss clicked'; }
+            }
+          ]
+        });
+
+        await toast.present();
+
+        const { role } = await toast.onDidDismiss();
+        this.roleMessage = `Dismissed with role: ${role}`;
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/toast/icon/angular/example_component_html.md b/static/usage/v7/toast/icon/angular/example_component_html.md
new file mode 100644
index 00000000000..976194efc1e
--- /dev/null
+++ b/static/usage/v7/toast/icon/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentToast()">Click Me</ion-button>
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/icon/angular/example_component_ts.md b/static/usage/v7/toast/icon/angular/example_component_ts.md
new file mode 100644
index 00000000000..addffa2daf9
--- /dev/null
+++ b/static/usage/v7/toast/icon/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private toastController: ToastController) {}
+
+  async presentToast() {
+    const toast = await this.toastController.create({
+      message: 'Hello World!',
+      duration: 1500,
+      icon: 'globe'
+    });
+
+    await toast.present();
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/icon/demo.html b/static/usage/v7/toast/icon/demo.html
new file mode 100644
index 00000000000..efecadbf937
--- /dev/null
+++ b/static/usage/v7/toast/icon/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentToast()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
+  <script>
+    async function presentToast() {
+      const toast = await this.toastController.create({
+        message: 'Hello World!',
+        duration: 1500,
+        icon: 'globe'
+      });
+
+      await toast.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toast/icon/index.md b/static/usage/v7/toast/icon/index.md
new file mode 100644
index 00000000000..bdc7b842c3f
--- /dev/null
+++ b/static/usage/v7/toast/icon/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toast/icon/demo.html"
+/>
diff --git a/static/usage/v7/toast/icon/javascript.md b/static/usage/v7/toast/icon/javascript.md
new file mode 100644
index 00000000000..b63e8550ab3
--- /dev/null
+++ b/static/usage/v7/toast/icon/javascript.md
@@ -0,0 +1,15 @@
+```html
+<ion-button onclick="presentToast()">Click Me</ion-button>
+
+<script>
+  async function presentToast() {
+    const toast = await this.toastController.create({
+      message: 'Hello World!',
+      duration: 1500,
+      icon: 'globe'
+    });
+      
+    await toast.present();
+  }
+</script>
+```
diff --git a/static/usage/v7/toast/icon/react.md b/static/usage/v7/toast/icon/react.md
new file mode 100644
index 00000000000..25d758c16b6
--- /dev/null
+++ b/static/usage/v7/toast/icon/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+import { globe } from 'ionicons/icons';
+
+function Example() {
+  const [presentToast] = useIonToast();
+
+  return (
+    <IonButton
+      onClick={() => {
+        presentToast({
+          message: 'Hello World!',
+          duration: 1500,
+          icon: globe
+        })
+      }}
+    >
+      Click Me
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/icon/vue.md b/static/usage/v7/toast/icon/vue.md
new file mode 100644
index 00000000000..d3a123f598b
--- /dev/null
+++ b/static/usage/v7/toast/icon/vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-button @click="presentToast">Click Me</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, toastController } from '@ionic/vue';
+  import { globe } from 'ionicons/icons';
+
+  export default {
+    components: { IonButton },
+    methods: {
+      async presentToast() {
+        const toast = await toastController.create({
+          message: 'Hello World!',
+          duration: 1500,
+          icon: globe
+        });
+
+        await toast.present();
+
+        const { role } = await toast.onDidDismiss();
+        this.roleMessage = `Dismissed with role: ${role}`;
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/toast/presenting/controller/angular/example_component_html.md b/static/usage/v7/toast/presenting/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..962fcd0e355
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-button expand="block" (click)="presentToast('top')">Present Toast At the Top</ion-button>
+<ion-button expand="block" (click)="presentToast('middle')">Present Toast At the Middle</ion-button>
+<ion-button expand="block" (click)="presentToast('bottom')">Present Toast At the Bottom</ion-button>
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..c772728c3c1
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private toastController: ToastController) {}
+
+  async presentToast(position: 'top' | 'middle' | 'bottom') {
+    const toast = await this.toastController.create({
+      message: 'Hello World!',
+      duration: 1500,
+      position: position
+    });
+
+    await toast.present();
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/presenting/controller/demo.html b/static/usage/v7/toast/presenting/controller/demo.html
new file mode 100644
index 00000000000..24cc1fcb8d0
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/demo.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="container">
+        <ion-button expand="block" onclick="presentToast('top')">Present Toast At the Top</ion-button>
+        <ion-button expand="block" onclick="presentToast('middle')">Present Toast At the Middle</ion-button>
+        <ion-button expand="block" onclick="presentToast('bottom')">Present Toast At the Bottom</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
+  <script>
+    async function presentToast(position) {
+      const toast = await this.toastController.create({
+        message: 'Hello World!',
+        duration: 1500,
+        position: position
+      });
+
+      await toast.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toast/presenting/controller/index.md b/static/usage/v7/toast/presenting/controller/index.md
new file mode 100644
index 00000000000..13a34cdac6d
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toast/presenting/controller/demo.html"
+/>
diff --git a/static/usage/v7/toast/presenting/controller/javascript.md b/static/usage/v7/toast/presenting/controller/javascript.md
new file mode 100644
index 00000000000..5260ba8d1a1
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-button expand="block" onclick="presentToast('top')">Present Toast At the Top</ion-button>
+<ion-button expand="block" onclick="presentToast('middle')">Present Toast At the Middle</ion-button>
+<ion-button expand="block" onclick="presentToast('bottom')">Present Toast At the Bottom</ion-button>
+
+<script>
+  async function presentToast(position) {
+    const toast = await this.toastController.create({
+      message: 'Hello World!',
+      duration: 1500,
+      position: position
+    });
+
+    await toast.present();
+  }
+</script>
+```
diff --git a/static/usage/v7/toast/presenting/controller/react.md b/static/usage/v7/toast/presenting/controller/react.md
new file mode 100644
index 00000000000..1dd38b3cd48
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+  const [present] = useIonToast();
+
+  const presentToast = (position: 'top' | 'middle' | 'bottom') => {
+    present({
+      message: 'Hello World!',
+      duration: 1500,
+      position: position
+    });
+  };
+
+  return (
+    <>
+      <IonButton expand="block" onClick={() => presentToast('top')}>Present Toast At the Top</IonButton>
+      <IonButton expand="block" onClick={() => presentToast('middle')}>Present Toast At the Middle</IonButton>
+      <IonButton expand="block" onClick={() => presentToast('bottom')}>Present Toast At the Bottom</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/presenting/controller/vue.md b/static/usage/v7/toast/presenting/controller/vue.md
new file mode 100644
index 00000000000..ac520d0e7b9
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/vue.md
@@ -0,0 +1,26 @@
+```html
+<template>
+  <ion-button expand="block" @click="presentToast('top')">Present Toast At the Top</ion-button>
+  <ion-button expand="block" @click="presentToast('middle')">Present Toast At the Middle</ion-button>
+  <ion-button expand="block" @click="presentToast('bottom')">Present Toast At the Bottom</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, toastController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    methods: {
+      async presentToast(position: 'top' | 'middle' | 'bottom') {
+        const toast = await toastController.create({
+          message: 'Hello World!',
+          duration: 1500,
+          position: position
+        });
+
+        await toast.present();
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/toast/theming/angular/example_component_html.md b/static/usage/v7/toast/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..91e6579dfa8
--- /dev/null
+++ b/static/usage/v7/toast/theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentToast()">Click Me</ion-button>
+```
diff --git a/static/usage/v7/toast/theming/angular/example_component_ts.md b/static/usage/v7/toast/theming/angular/example_component_ts.md
new file mode 100644
index 00000000000..62c8151b0f4
--- /dev/null
+++ b/static/usage/v7/toast/theming/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private toastController: ToastController) {}
+
+  async presentToast() {
+    const toast = await this.toastController.create({
+      message: 'Hello Styled World!',
+      duration: 3000,
+      cssClass: 'custom-toast',
+      buttons: [
+        {
+          text: 'Dismiss',
+          role: 'cancel'
+        }
+      ],
+    });
+
+    await toast.present();
+  }
+}
+```
diff --git a/static/usage/v7/toast/theming/angular/global_css.md b/static/usage/v7/toast/theming/angular/global_css.md
new file mode 100644
index 00000000000..4d261622074
--- /dev/null
+++ b/static/usage/v7/toast/theming/angular/global_css.md
@@ -0,0 +1,17 @@
+```css
+ion-toast.custom-toast {
+  --background: #F4F4FA;
+  --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+  --color: #4b4a50;
+}
+    
+ion-toast.custom-toast::part(message) {
+  font-style: italic;
+}
+
+ion-toast.custom-toast::part(button) {
+  border-left: 1px solid #d2d2d2;
+  color: #030207;
+  font-size: 15px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/theming/demo.html b/static/usage/v7/toast/theming/demo.html
new file mode 100644
index 00000000000..cdbffb5541c
--- /dev/null
+++ b/static/usage/v7/toast/theming/demo.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-toast.custom-toast {
+      --background: #F4F4FA;
+      --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+      --color: #4b4a50;
+    }
+
+    ion-toast.custom-toast::part(message) {
+      font-style: italic;
+    }
+
+    ion-toast.custom-toast::part(button) {
+      border-left: 1px solid #d2d2d2;
+      color: #030207;
+      font-size: 15px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentToast()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
+  <script>
+    async function presentToast() {
+      const toast = await this.toastController.create({
+        message: 'Hello Styled World!',
+        duration: 3000,
+        cssClass: 'custom-toast',
+        buttons: [
+          {
+            text: 'Dismiss',
+            role: 'cancel'
+          }
+        ],
+      });
+
+      await toast.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toast/theming/index.md b/static/usage/v7/toast/theming/index.md
new file mode 100644
index 00000000000..e4d6cb14b8e
--- /dev/null
+++ b/static/usage/v7/toast/theming/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  version="7"
+  devicePreview
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v7/toast/theming/demo.html"
+/>
diff --git a/static/usage/v7/toast/theming/javascript.md b/static/usage/v7/toast/theming/javascript.md
new file mode 100644
index 00000000000..b540eccaaf7
--- /dev/null
+++ b/static/usage/v7/toast/theming/javascript.md
@@ -0,0 +1,39 @@
+```html
+<ion-button onclick="presentToast()">Click Me</ion-button>
+
+<script>
+  async function presentToast() {
+    const toast = await this.toastController.create({
+      message: 'Hello Styled World!',
+      duration: 3000,
+      cssClass: 'custom-toast',
+      buttons: [
+        {
+          text: 'Dismiss',
+          role: 'cancel'
+        }
+      ],
+    });
+
+    await toast.present();
+  }
+</script>
+
+<style>
+  ion-toast.custom-toast {
+    --background: #F4F4FA;
+    --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+    --color: #4b4a50;
+  }
+    
+  ion-toast.custom-toast::part(message) {
+    font-style: italic;
+  }
+
+  ion-toast.custom-toast::part(button) {
+    border-left: 1px solid #d2d2d2;
+    color: #030207;
+    font-size: 15px;
+  }
+</style>
+```
diff --git a/static/usage/v7/toast/theming/react/main_css.md b/static/usage/v7/toast/theming/react/main_css.md
new file mode 100644
index 00000000000..4d261622074
--- /dev/null
+++ b/static/usage/v7/toast/theming/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+ion-toast.custom-toast {
+  --background: #F4F4FA;
+  --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+  --color: #4b4a50;
+}
+    
+ion-toast.custom-toast::part(message) {
+  font-style: italic;
+}
+
+ion-toast.custom-toast::part(button) {
+  border-left: 1px solid #d2d2d2;
+  color: #030207;
+  font-size: 15px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/theming/react/main_tsx.md b/static/usage/v7/toast/theming/react/main_tsx.md
new file mode 100644
index 00000000000..fe88e64e8c7
--- /dev/null
+++ b/static/usage/v7/toast/theming/react/main_tsx.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const [presentToast] = useIonToast();
+
+  return (
+    <IonButton
+      onClick={() =>
+        presentToast({
+          message: 'Hello Styled World!',
+          duration: 3000,
+          cssClass: 'custom-toast',
+          buttons: [
+            {
+              text: 'Dismiss',
+              role: 'cancel'
+            }
+          ],
+        })
+      }
+    >
+      Click Me
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/theming/vue.md b/static/usage/v7/toast/theming/vue.md
new file mode 100644
index 00000000000..99bcbb7cf18
--- /dev/null
+++ b/static/usage/v7/toast/theming/vue.md
@@ -0,0 +1,48 @@
+```html
+<template>
+  <ion-button @click="presentToast">Click Me</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, toastController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    methods: {
+      async presentToast() {
+        const toast = await toastController.create({
+          message: 'Hello Styled World!',
+          duration: 3000,
+          cssClass: 'custom-toast',
+          buttons: [
+            {
+              text: 'Dismiss',
+              role: 'cancel'
+            }
+          ],
+        });
+
+        await toast.present();
+      },
+    },
+  };
+</script>
+
+<style>
+  ion-toast.custom-toast {
+    --background: #F4F4FA;
+    --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+    --color: #4b4a50;
+  }
+    
+  ion-toast.custom-toast::part(message) {
+    font-style: italic;
+  }
+
+  ion-toast.custom-toast::part(button) {
+    border-left: 1px solid #d2d2d2;
+    color: #030207;
+    font-size: 15px;
+  }
+</style>
+```
diff --git a/static/usage/v7/toggle/basic/angular.md b/static/usage/v7/toggle/basic/angular.md
new file mode 100644
index 00000000000..696e4e2ca61
--- /dev/null
+++ b/static/usage/v7/toggle/basic/angular.md
@@ -0,0 +1,20 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Default Toggle</ion-label>
+    <ion-toggle slot="end"></ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-label>Checked Toggle</ion-label>
+    <ion-toggle slot="end" [checked]="true"></ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-label>Disabled Toggle</ion-label>
+    <ion-toggle slot="end" [disabled]="true"></ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-label>Disabled Checked Toggle</ion-label>
+    <ion-toggle slot="end" [checked]="true" [disabled]="true"></ion-toggle>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/toggle/basic/demo.html b/static/usage/v7/toggle/basic/demo.html
new file mode 100644
index 00000000000..5e45931c3b4
--- /dev/null
+++ b/static/usage/v7/toggle/basic/demo.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toggle</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Default Toggle</ion-label>
+            <ion-toggle slot="end"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Checked Toggle</ion-label>
+            <ion-toggle slot="end" checked="true"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Disabled Toggle</ion-label>
+            <ion-toggle slot="end" disabled="true"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Disabled Checked Toggle</ion-label>
+            <ion-toggle slot="end" checked="true" disabled="true"></ion-toggle>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toggle/basic/index.md b/static/usage/v7/toggle/basic/index.md
new file mode 100644
index 00000000000..10f5ccf1379
--- /dev/null
+++ b/static/usage/v7/toggle/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/basic/demo.html" size="250px" />
diff --git a/static/usage/v7/toggle/basic/javascript.md b/static/usage/v7/toggle/basic/javascript.md
new file mode 100644
index 00000000000..043c09333f0
--- /dev/null
+++ b/static/usage/v7/toggle/basic/javascript.md
@@ -0,0 +1,20 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Default Toggle</ion-label>
+    <ion-toggle slot="end"></ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-label>Checked Toggle</ion-label>
+    <ion-toggle slot="end" checked="true"></ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-label>Disabled Toggle</ion-label>
+    <ion-toggle slot="end" disabled="true"></ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-label>Disabled Checked Toggle</ion-label>
+    <ion-toggle slot="end" checked="true" disabled="true"></ion-toggle>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/toggle/basic/react.md b/static/usage/v7/toggle/basic/react.md
new file mode 100644
index 00000000000..21721d14467
--- /dev/null
+++ b/static/usage/v7/toggle/basic/react.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonToggle } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonLabel>Default Toggle</IonLabel>
+        <IonToggle slot="end"></IonToggle>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Checked Toggle</IonLabel>
+        <IonToggle slot="end" checked={true}></IonToggle>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Disabled Toggle</IonLabel>
+        <IonToggle slot="end" disabled={true}></IonToggle>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Disabled Checked Toggle</IonLabel>
+        <IonToggle slot="end" checked={true} disabled={true}></IonToggle>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/basic/vue.md b/static/usage/v7/toggle/basic/vue.md
new file mode 100644
index 00000000000..938dee314ed
--- /dev/null
+++ b/static/usage/v7/toggle/basic/vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>Default Toggle</ion-label>
+      <ion-toggle slot="end"></ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-label>Checked Toggle</ion-label>
+      <ion-toggle slot="end" :checked="true"></ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-label>Disabled Toggle</ion-label>
+      <ion-toggle slot="end" :disabled="true"></ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-label>Disabled Checked Toggle</ion-label>
+      <ion-toggle slot="end" :checked="true" :disabled="true"></ion-toggle>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonList, IonToggle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonList, IonToggle },
+  });
+</script>
+```
diff --git a/static/usage/v7/toggle/on-off/angular.md b/static/usage/v7/toggle/on-off/angular.md
new file mode 100644
index 00000000000..d32c09c626f
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-toggle [enableOnOffLabels]="true"></ion-toggle>
+```
diff --git a/static/usage/v7/toggle/on-off/demo.html b/static/usage/v7/toggle/on-off/demo.html
new file mode 100644
index 00000000000..7622a018101
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/demo.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toggle</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toggle enable-on-off-labels="true"></ion-toggle>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toggle/on-off/index.md b/static/usage/v7/toggle/on-off/index.md
new file mode 100644
index 00000000000..00a4e4800ad
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/on-off/demo.html" />
diff --git a/static/usage/v7/toggle/on-off/javascript.md b/static/usage/v7/toggle/on-off/javascript.md
new file mode 100644
index 00000000000..5ae617f6e4a
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-toggle enable-on-off-labels="true"></ion-toggle>
+```
diff --git a/static/usage/v7/toggle/on-off/react.md b/static/usage/v7/toggle/on-off/react.md
new file mode 100644
index 00000000000..6d24a2c2704
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonToggle enableOnOffLabels={true}></IonToggle>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/on-off/vue.md b/static/usage/v7/toggle/on-off/vue.md
new file mode 100644
index 00000000000..a6958f0e1a5
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-toggle :enable-on-off-labels="true"></ion-toggle>
+</template>
+
+<script lang="ts">
+  import { IonToggle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonToggle },
+  });
+</script>
+```
diff --git a/static/usage/v7/toggle/theming/colors/angular.md b/static/usage/v7/toggle/theming/colors/angular.md
new file mode 100644
index 00000000000..b8cb7076de3
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-toggle color="primary" [checked]="true"></ion-toggle>
+<ion-toggle color="secondary" [checked]="true"></ion-toggle>
+<ion-toggle color="tertiary" [checked]="true"></ion-toggle>
+<ion-toggle color="success" [checked]="true"></ion-toggle>
+<ion-toggle color="warning" [checked]="true"></ion-toggle>
+<ion-toggle color="danger" [checked]="true"></ion-toggle>
+<ion-toggle color="light" [checked]="true"></ion-toggle>
+<ion-toggle color="medium" [checked]="true"></ion-toggle>
+<ion-toggle color="dark" [checked]="true"></ion-toggle>
+```
diff --git a/static/usage/v7/toggle/theming/colors/demo.html b/static/usage/v7/toggle/theming/colors/demo.html
new file mode 100644
index 00000000000..e2e115e84bf
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toggle</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toggle color="primary" checked="true"></ion-toggle>
+        <ion-toggle color="secondary" checked="true"></ion-toggle>
+        <ion-toggle color="tertiary" checked="true"></ion-toggle>
+        <ion-toggle color="success" checked="true"></ion-toggle>
+        <ion-toggle color="warning" checked="true"></ion-toggle>
+        <ion-toggle color="danger" checked="true"></ion-toggle>
+        <ion-toggle color="light" checked="true"></ion-toggle>
+        <ion-toggle color="medium" checked="true"></ion-toggle>
+        <ion-toggle color="dark" checked="true"></ion-toggle>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toggle/theming/colors/index.md b/static/usage/v7/toggle/theming/colors/index.md
new file mode 100644
index 00000000000..e67d2cf0693
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/theming/colors/demo.html" />
diff --git a/static/usage/v7/toggle/theming/colors/javascript.md b/static/usage/v7/toggle/theming/colors/javascript.md
new file mode 100644
index 00000000000..26990bd1a4f
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-toggle color="primary" checked="true"></ion-toggle>
+<ion-toggle color="secondary" checked="true"></ion-toggle>
+<ion-toggle color="tertiary" checked="true"></ion-toggle>
+<ion-toggle color="success" checked="true"></ion-toggle>
+<ion-toggle color="warning" checked="true"></ion-toggle>
+<ion-toggle color="danger" checked="true"></ion-toggle>
+<ion-toggle color="light" checked="true"></ion-toggle>
+<ion-toggle color="medium" checked="true"></ion-toggle>
+<ion-toggle color="dark" checked="true"></ion-toggle>
+```
diff --git a/static/usage/v7/toggle/theming/colors/react.md b/static/usage/v7/toggle/theming/colors/react.md
new file mode 100644
index 00000000000..6ba932092c4
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonToggle color="primary" checked={true}></IonToggle>
+      <IonToggle color="secondary" checked={true}></IonToggle>
+      <IonToggle color="tertiary" checked={true}></IonToggle>
+      <IonToggle color="success" checked={true}></IonToggle>
+      <IonToggle color="warning" checked={true}></IonToggle>
+      <IonToggle color="danger" checked={true}></IonToggle>
+      <IonToggle color="light" checked={true}></IonToggle>
+      <IonToggle color="medium" checked={true}></IonToggle>
+      <IonToggle color="dark" checked={true}></IonToggle>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/theming/colors/vue.md b/static/usage/v7/toggle/theming/colors/vue.md
new file mode 100644
index 00000000000..4b906d9da5d
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-toggle color="primary" :checked="true"></ion-toggle>
+  <ion-toggle color="secondary" :checked="true"></ion-toggle>
+  <ion-toggle color="tertiary" :checked="true"></ion-toggle>
+  <ion-toggle color="success" :checked="true"></ion-toggle>
+  <ion-toggle color="warning" :checked="true"></ion-toggle>
+  <ion-toggle color="danger" :checked="true"></ion-toggle>
+  <ion-toggle color="light" :checked="true"></ion-toggle>
+  <ion-toggle color="medium" :checked="true"></ion-toggle>
+  <ion-toggle color="dark" :checked="true"></ion-toggle>
+</template>
+
+<script lang="ts">
+  import { IonToggle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonToggle },
+  });
+</script>
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/angular/example_component_css.md b/static/usage/v7/toggle/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..a5ac3b87533
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,26 @@
+```css
+ion-toggle {
+  height: 10px;
+  width: 65px;
+
+  padding: 12px;
+
+  --background: #ddd;
+  --background-checked: #ddd;
+
+  --handle-background: #eb7769;
+  --handle-background-checked: #95c34e;
+
+  --handle-width: 25px;
+  --handle-height: 27px;
+  --handle-max-height: auto;
+  --handle-spacing: 6px;
+
+  --handle-border-radius: 4px;
+  --handle-box-shadow: none;
+
+  /* Required for iOS handle to overflow the height of the track */
+  overflow: visible;
+  contain: none;
+}
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/angular/example_component_html.md b/static/usage/v7/toggle/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..b66cfc51480
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-toggle></ion-toggle>
+<ion-toggle [checked]="true"></ion-toggle>
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/demo.html b/static/usage/v7/toggle/theming/css-properties/demo.html
new file mode 100644
index 00000000000..b357ff59b4a
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/demo.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-toggle {
+      height: 10px;
+      width: 65px;
+
+      padding: 12px;
+
+      --background: #ddd;
+      --background-checked: #ddd;
+
+      --handle-background: #eb7769;
+      --handle-background-checked: #95c34e;
+
+      --handle-width: 25px;
+      --handle-height: 27px;
+      --handle-max-height: auto;
+      --handle-spacing: 6px;
+
+      --handle-border-radius: 4px;
+      --handle-box-shadow: none;
+
+      /* Required for iOS handle to overflow the height of the track */
+      overflow: visible;
+      contain: none;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toggle></ion-toggle>
+        <ion-toggle checked="true"></ion-toggle>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toggle/theming/css-properties/index.md b/static/usage/v7/toggle/theming/css-properties/index.md
new file mode 100644
index 00000000000..b7f767691f7
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/toggle/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/v7/toggle/theming/css-properties/javascript.md b/static/usage/v7/toggle/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..ed02575807b
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/javascript.md
@@ -0,0 +1,31 @@
+```html
+<ion-toggle></ion-toggle>
+<ion-toggle checked="true"></ion-toggle>
+
+<style>
+  ion-toggle {
+    height: 10px;
+    width: 65px;
+
+    padding: 12px;
+
+    --background: #ddd;
+    --background-checked: #ddd;
+
+    --handle-background: #eb7769;
+    --handle-background-checked: #95c34e;
+
+    --handle-width: 25px;
+    --handle-height: 27px;
+    --handle-max-height: auto;
+    --handle-spacing: 6px;
+
+    --handle-border-radius: 4px;
+    --handle-box-shadow: none;
+
+    /* Required for iOS handle to overflow the height of the track */
+    overflow: visible;
+    contain: none;
+  }
+</style>
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/react/main_css.md b/static/usage/v7/toggle/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..a5ac3b87533
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/react/main_css.md
@@ -0,0 +1,26 @@
+```css
+ion-toggle {
+  height: 10px;
+  width: 65px;
+
+  padding: 12px;
+
+  --background: #ddd;
+  --background-checked: #ddd;
+
+  --handle-background: #eb7769;
+  --handle-background-checked: #95c34e;
+
+  --handle-width: 25px;
+  --handle-height: 27px;
+  --handle-max-height: auto;
+  --handle-spacing: 6px;
+
+  --handle-border-radius: 4px;
+  --handle-box-shadow: none;
+
+  /* Required for iOS handle to overflow the height of the track */
+  overflow: visible;
+  contain: none;
+}
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/react/main_tsx.md b/static/usage/v7/toggle/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..6548f53b021
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonToggle></IonToggle>
+      <IonToggle checked={true}></IonToggle>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/vue.md b/static/usage/v7/toggle/theming/css-properties/vue.md
new file mode 100644
index 00000000000..f66c8236836
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/vue.md
@@ -0,0 +1,42 @@
+```html
+<template>
+  <ion-toggle></ion-toggle>
+  <ion-toggle :checked="true"></ion-toggle>
+</template>
+
+<script lang="ts">
+  import { IonToggle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonToggle },
+  });
+</script>
+
+<style scoped>
+  ion-toggle {
+    height: 10px;
+    width: 65px;
+
+    padding: 12px;
+
+    --background: #ddd;
+    --background-checked: #ddd;
+
+    --handle-background: #eb7769;
+    --handle-background-checked: #95c34e;
+
+    --handle-width: 25px;
+    --handle-height: 27px;
+    --handle-max-height: auto;
+    --handle-spacing: 6px;
+
+    --handle-border-radius: 4px;
+    --handle-box-shadow: none;
+
+    /* Required for iOS handle to overflow the height of the track */
+    overflow: visible;
+    contain: none;
+  }
+</style>
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..e34322115b6
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,33 @@
+```css
+ion-toggle {
+  height: 10px;
+  width: 65px;
+
+  padding: 12px;
+
+  --handle-width: 25px;
+  --handle-height: 27px;
+  --handle-max-height: auto;
+  --handle-spacing: 6px;
+
+  /* Required for iOS handle to overflow the height of the track */
+  overflow: visible;
+  contain: none;
+}
+
+ion-toggle::part(track),
+ion-toggle.toggle-checked::part(track) {
+  background: #ddd;
+}
+
+ion-toggle::part(handle) {
+  background: #eb7769;
+
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+ion-toggle.toggle-checked::part(handle) {
+  background: #95c34e;
+}
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..b66cfc51480
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-toggle></ion-toggle>
+<ion-toggle [checked]="true"></ion-toggle>
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/demo.html b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..5647327547a
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Item</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-toggle {
+      height: 10px;
+      width: 65px;
+
+      padding: 12px;
+
+      --handle-width: 25px;
+      --handle-height: 27px;
+      --handle-max-height: auto;
+      --handle-spacing: 6px;
+
+      /* Required for iOS handle to overflow the height of the track */
+      overflow: visible;
+      contain: none;
+    }
+
+    ion-toggle::part(track),
+    ion-toggle.toggle-checked::part(track) {
+      background: #ddd;
+    }
+
+    ion-toggle::part(handle) {
+      background: #eb7769;
+
+      border-radius: 4px;
+      box-shadow: none;
+    }
+
+    ion-toggle.toggle-checked::part(handle) {
+      background: #95c34e;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toggle></ion-toggle>
+        <ion-toggle checked="true"></ion-toggle>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/index.md b/static/usage/v7/toggle/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..6241f8b029f
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v7/toggle/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/javascript.md b/static/usage/v7/toggle/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..bda83da747a
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,38 @@
+```html
+<ion-toggle></ion-toggle>
+<ion-toggle checked="true"></ion-toggle>
+
+<style>
+  ion-toggle {
+    height: 10px;
+    width: 65px;
+
+    padding: 12px;
+
+    --handle-width: 25px;
+    --handle-height: 27px;
+    --handle-max-height: auto;
+    --handle-spacing: 6px;
+
+    /* Required for iOS handle to overflow the height of the track */
+    overflow: visible;
+    contain: none;
+  }
+
+  ion-toggle::part(track),
+  ion-toggle.toggle-checked::part(track) {
+    background: #ddd;
+  }
+
+  ion-toggle::part(handle) {
+    background: #eb7769;
+
+    border-radius: 4px;
+    box-shadow: none;
+  }
+
+  ion-toggle.toggle-checked::part(handle) {
+    background: #95c34e;
+  }
+</style>
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/toggle/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..e34322115b6
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,33 @@
+```css
+ion-toggle {
+  height: 10px;
+  width: 65px;
+
+  padding: 12px;
+
+  --handle-width: 25px;
+  --handle-height: 27px;
+  --handle-max-height: auto;
+  --handle-spacing: 6px;
+
+  /* Required for iOS handle to overflow the height of the track */
+  overflow: visible;
+  contain: none;
+}
+
+ion-toggle::part(track),
+ion-toggle.toggle-checked::part(track) {
+  background: #ddd;
+}
+
+ion-toggle::part(handle) {
+  background: #eb7769;
+
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+ion-toggle.toggle-checked::part(handle) {
+  background: #95c34e;
+}
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/toggle/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..6548f53b021
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonToggle></IonToggle>
+      <IonToggle checked={true}></IonToggle>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/vue.md b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..dbf40a9ed62
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <ion-toggle></ion-toggle>
+  <ion-toggle :checked="true"></ion-toggle>
+</template>
+
+<script lang="ts">
+  import { IonToggle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonToggle },
+  });
+</script>
+
+<style scoped>
+  ion-toggle {
+    height: 10px;
+    width: 65px;
+
+    padding: 12px;
+
+    --handle-width: 25px;
+    --handle-height: 27px;
+    --handle-max-height: auto;
+    --handle-spacing: 6px;
+
+    /* Required for iOS handle to overflow the height of the track */
+    overflow: visible;
+    contain: none;
+  }
+
+  ion-toggle::part(track),
+  ion-toggle.toggle-checked::part(track) {
+    background: #ddd;
+  }
+
+  ion-toggle::part(handle) {
+    background: #eb7769;
+
+    border-radius: 4px;
+    box-shadow: none;
+  }
+
+  ion-toggle.toggle-checked::part(handle) {
+    background: #95c34e;
+  }
+</style>
+```
diff --git a/static/usage/v7/toolbar/basic/angular.md b/static/usage/v7/toolbar/basic/angular.md
new file mode 100644
index 00000000000..40fbd442061
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/angular.md
@@ -0,0 +1,13 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Header Toolbar</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>Footer Toolbar</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/toolbar/basic/demo.html b/static/usage/v7/toolbar/basic/demo.html
new file mode 100644
index 00000000000..bc598f63d22
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Header Toolbar</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-footer>
+      <ion-toolbar>
+        <ion-title>Footer Toolbar</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/basic/index.md b/static/usage/v7/toolbar/basic/index.md
new file mode 100644
index 00000000000..43cc48e1fe9
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/toolbar/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/toolbar/basic/javascript.md b/static/usage/v7/toolbar/basic/javascript.md
new file mode 100644
index 00000000000..40fbd442061
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/javascript.md
@@ -0,0 +1,13 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Header Toolbar</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>Footer Toolbar</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/toolbar/basic/react.md b/static/usage/v7/toolbar/basic/react.md
new file mode 100644
index 00000000000..42b46929d3f
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Header Toolbar</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonFooter>
+        <IonToolbar>
+          <IonTitle>Footer Toolbar</IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/basic/vue.md b/static/usage/v7/toolbar/basic/vue.md
new file mode 100644
index 00000000000..ec71b1a340b
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Header Toolbar</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-footer>
+    <ion-toolbar>
+      <ion-title>Footer Toolbar</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script lang="ts">
+  import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonFooter, IonHeader, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/toolbar/buttons/angular.md b/static/usage/v7/toolbar/buttons/angular.md
new file mode 100644
index 00000000000..ceafe115821
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/angular.md
@@ -0,0 +1,92 @@
+```html
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-button>
+      Start
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Start / End Buttons</ion-title>
+  <ion-buttons slot="end">
+    <ion-button>
+      End
+    </ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button>
+      Secondary
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button>
+      Primary
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Primary / Secondary Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+    </ion-button>
+    <ion-button>
+      <ion-icon slot="icon-only" name="search"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Icon Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button fill="solid">
+      <ion-icon slot="start" name="person-circle"></ion-icon>
+      Contact
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button fill="solid">
+      Help
+      <ion-icon slot="end" name="help-circle"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Solid Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button fill="outline">
+      <ion-icon slot="start" name="star"></ion-icon>
+      Star
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button fill="outline">
+      Edit
+      <ion-icon slot="end" name="create"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Outline Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-back-button default-href="#"></ion-back-button>
+  </ion-buttons>
+  <ion-title>Back Button</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-menu-button auto-hide="false"></ion-menu-button>
+  </ion-buttons>
+  <ion-title>Menu Button</ion-title>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/toolbar/buttons/demo.html b/static/usage/v7/toolbar/buttons/demo.html
new file mode 100644
index 00000000000..55941b2c348
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/demo.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button>
+              Start
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Start / End Buttons</ion-title>
+          <ion-buttons slot="end">
+            <ion-button>
+              End
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button>
+              Secondary
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button>
+              Primary
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Primary / Secondary Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button>
+              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Icon Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="solid">
+              <ion-icon slot="start" name="person-circle"></ion-icon>
+              Contact
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button fill="solid">
+              Help
+              <ion-icon slot="end" name="help-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Solid Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="outline">
+              <ion-icon slot="start" name="star"></ion-icon>
+              Star
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button fill="outline">
+              Edit
+              <ion-icon slot="end" name="create"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Outline Buttons</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="#"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Back Button</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+          </ion-buttons>
+          <ion-title>Menu Button</ion-title>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/buttons/index.md b/static/usage/v7/toolbar/buttons/index.md
new file mode 100644
index 00000000000..d0d4897944b
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/toolbar/buttons/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v7/toolbar/buttons/javascript.md b/static/usage/v7/toolbar/buttons/javascript.md
new file mode 100644
index 00000000000..ceafe115821
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/javascript.md
@@ -0,0 +1,92 @@
+```html
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-button>
+      Start
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Start / End Buttons</ion-title>
+  <ion-buttons slot="end">
+    <ion-button>
+      End
+    </ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button>
+      Secondary
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button>
+      Primary
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Primary / Secondary Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+    </ion-button>
+    <ion-button>
+      <ion-icon slot="icon-only" name="search"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Icon Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button fill="solid">
+      <ion-icon slot="start" name="person-circle"></ion-icon>
+      Contact
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button fill="solid">
+      Help
+      <ion-icon slot="end" name="help-circle"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Solid Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="secondary">
+    <ion-button fill="outline">
+      <ion-icon slot="start" name="star"></ion-icon>
+      Star
+    </ion-button>
+  </ion-buttons>
+  <ion-buttons slot="primary">
+    <ion-button fill="outline">
+      Edit
+      <ion-icon slot="end" name="create"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Outline Buttons</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-back-button default-href="#"></ion-back-button>
+  </ion-buttons>
+  <ion-title>Back Button</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-menu-button auto-hide="false"></ion-menu-button>
+  </ion-buttons>
+  <ion-title>Menu Button</ion-title>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/toolbar/buttons/react.md b/static/usage/v7/toolbar/buttons/react.md
new file mode 100644
index 00000000000..ff7736981f0
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/react.md
@@ -0,0 +1,103 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react';
+import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonButton>
+            Start
+          </IonButton>
+        </IonButtons>
+        <IonTitle>Start / End Buttons</IonTitle>
+        <IonButtons slot="end">
+          <IonButton>
+            End
+          </IonButton>
+        </IonButtons>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="secondary">
+          <IonButton>
+            Secondary
+          </IonButton>
+        </IonButtons>
+        <IonButtons slot="primary">
+          <IonButton>
+            Primary
+          </IonButton>
+        </IonButtons>
+        <IonTitle>Primary / Secondary Buttons</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="secondary">
+          <IonButton>
+            <IonIcon slot="icon-only" icon={personCircle}></IonIcon>
+          </IonButton>
+          <IonButton>
+            <IonIcon slot="icon-only" icon={search}></IonIcon>
+          </IonButton>
+        </IonButtons>
+        <IonButtons slot="primary">
+          <IonButton>
+            <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
+          </IonButton>
+        </IonButtons>
+        <IonTitle>Icon Buttons</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="secondary">
+          <IonButton fill="solid">
+            <IonIcon slot="start" icon={personCircle}></IonIcon>
+            Contact
+          </IonButton>
+        </IonButtons>
+        <IonButtons slot="primary">
+          <IonButton fill="solid">
+            Help
+            <IonIcon slot="end" icon={helpCircle}></IonIcon>
+          </IonButton>
+        </IonButtons>
+        <IonTitle>Solid Buttons</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="secondary">
+          <IonButton fill="outline">
+            <IonIcon slot="start" icon={star}></IonIcon>
+            Star
+          </IonButton>
+        </IonButtons>
+        <IonButtons slot="primary">
+          <IonButton fill="outline">
+            Edit
+            <IonIcon slot="end" icon={create}></IonIcon>
+          </IonButton>
+        </IonButtons>
+        <IonTitle>Outline Buttons</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton defaultHref="#"></IonBackButton>
+        </IonButtons>
+        <IonTitle>Back Button</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonMenuButton autoHide={false}></IonMenuButton>
+        </IonButtons>
+        <IonTitle>Menu Button</IonTitle>
+      </IonToolbar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/buttons/vue.md b/static/usage/v7/toolbar/buttons/vue.md
new file mode 100644
index 00000000000..388760dcd9f
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/vue.md
@@ -0,0 +1,107 @@
+```html
+<template>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button>
+        Start
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Start / End Buttons</ion-title>
+    <ion-buttons slot="end">
+      <ion-button>
+        End
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        Secondary
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button>
+        Primary
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Primary / Secondary Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button>
+        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Icon Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="solid">
+        <ion-icon slot="start" :icon="personCircle"></ion-icon>
+        Contact
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button fill="solid">
+        Help
+        <ion-icon slot="end" :icon="helpCircle"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Solid Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="outline">
+        <ion-icon slot="start" :icon="star"></ion-icon>
+        Star
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button fill="outline">
+        Edit
+        <ion-icon slot="end" :icon="create"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Outline Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button default-href="#"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Back Button</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button :auto-hide="false"></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Menu Button</ion-title>
+  </ion-toolbar>
+</template>
+
+<script lang="ts">
+  import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
+  import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
+    setup() {
+      return { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/toolbar/progress-bars/angular.md b/static/usage/v7/toolbar/progress-bars/angular.md
new file mode 100644
index 00000000000..0c80f0f5955
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Toolbar</ion-title>
+    <ion-progress-bar type="indeterminate"></ion-progress-bar>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v7/toolbar/progress-bars/demo.html b/static/usage/v7/toolbar/progress-bars/demo.html
new file mode 100644
index 00000000000..58ddadffe72
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/demo.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toolbar</ion-title>
+        <ion-progress-bar type="indeterminate"></ion-progress-bar>
+      </ion-toolbar>
+    </ion-header>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/progress-bars/index.md b/static/usage/v7/toolbar/progress-bars/index.md
new file mode 100644
index 00000000000..067e8bed05f
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/toolbar/progress-bars/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/toolbar/progress-bars/javascript.md b/static/usage/v7/toolbar/progress-bars/javascript.md
new file mode 100644
index 00000000000..0c80f0f5955
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Toolbar</ion-title>
+    <ion-progress-bar type="indeterminate"></ion-progress-bar>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v7/toolbar/progress-bars/react.md b/static/usage/v7/toolbar/progress-bars/react.md
new file mode 100644
index 00000000000..52720f12b14
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Toolbar</IonTitle>
+        <IonProgressBar type="indeterminate"></IonProgressBar>
+      </IonToolbar>
+    </IonHeader>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/progress-bars/vue.md b/static/usage/v7/toolbar/progress-bars/vue.md
new file mode 100644
index 00000000000..2b3a3b85d0c
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Toolbar</ion-title>
+      <ion-progress-bar type="indeterminate"></ion-progress-bar>
+    </ion-toolbar>
+  </ion-header>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonHeader, IonProgressBar, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/toolbar/searchbars/angular.md b/static/usage/v7/toolbar/searchbars/angular.md
new file mode 100644
index 00000000000..9016e1e04cf
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/angular.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v7/toolbar/searchbars/demo.html b/static/usage/v7/toolbar/searchbars/demo.html
new file mode 100644
index 00000000000..a75cf4e6483
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toolbar</ion-title>
+      </ion-toolbar>
+      <ion-toolbar>
+        <ion-searchbar></ion-searchbar>
+      </ion-toolbar>
+    </ion-header>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/searchbars/index.md b/static/usage/v7/toolbar/searchbars/index.md
new file mode 100644
index 00000000000..c1327b9c45a
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/toolbar/searchbars/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/toolbar/searchbars/javascript.md b/static/usage/v7/toolbar/searchbars/javascript.md
new file mode 100644
index 00000000000..9016e1e04cf
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/javascript.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v7/toolbar/searchbars/react.md b/static/usage/v7/toolbar/searchbars/react.md
new file mode 100644
index 00000000000..dcf4fc644f3
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Toolbar</IonTitle>
+      </IonToolbar>
+      <IonToolbar>
+        <IonSearchbar></IonSearchbar>
+      </IonToolbar>
+    </IonHeader>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/searchbars/vue.md b/static/usage/v7/toolbar/searchbars/vue.md
new file mode 100644
index 00000000000..8543a2ef976
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Toolbar</ion-title>
+    </ion-toolbar>
+    <ion-toolbar>
+      <ion-searchbar></ion-searchbar>
+    </ion-toolbar>
+  </ion-header>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonHeader, IonSearchbar, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/toolbar/segments/angular.md b/static/usage/v7/toolbar/segments/angular.md
new file mode 100644
index 00000000000..179f75c3ae4
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/angular.md
@@ -0,0 +1,14 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-segment value="all">
+      <ion-segment-button value="all">
+        All
+      </ion-segment-button>
+      <ion-segment-button value="favorites">
+        Favorites
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v7/toolbar/segments/demo.html b/static/usage/v7/toolbar/segments/demo.html
new file mode 100644
index 00000000000..8eb5e3cff7b
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-segment value="all">
+          <ion-segment-button value="all">
+            All
+          </ion-segment-button>
+          <ion-segment-button value="favorites">
+            Favorites
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+    </ion-header>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/segments/index.md b/static/usage/v7/toolbar/segments/index.md
new file mode 100644
index 00000000000..1cd0613d883
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/index.md
@@ -0,0 +1,14 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/toolbar/segments/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/toolbar/segments/javascript.md b/static/usage/v7/toolbar/segments/javascript.md
new file mode 100644
index 00000000000..179f75c3ae4
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/javascript.md
@@ -0,0 +1,14 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-segment value="all">
+      <ion-segment-button value="all">
+        All
+      </ion-segment-button>
+      <ion-segment-button value="favorites">
+        Favorites
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v7/toolbar/segments/react.md b/static/usage/v7/toolbar/segments/react.md
new file mode 100644
index 00000000000..54a63e7f8f8
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonHeader>
+      <IonToolbar>
+        <IonSegment value="all">
+          <IonSegmentButton value="all">
+            All
+          </IonSegmentButton>
+          <IonSegmentButton value="favorites">
+            Favorites
+          </IonSegmentButton>
+        </IonSegment>
+      </IonToolbar>
+    </IonHeader>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/segments/vue.md b/static/usage/v7/toolbar/segments/vue.md
new file mode 100644
index 00000000000..3be08612557
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-segment value="all">
+        <ion-segment-button value="all">
+          All
+        </ion-segment-button>
+        <ion-segment-button value="favorites">
+          Favorites
+        </ion-segment-button>
+      </ion-segment>
+    </ion-toolbar>
+  </ion-header>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/toolbar/theming/colors/angular.md b/static/usage/v7/toolbar/theming/colors/angular.md
new file mode 100644
index 00000000000..a2763a1c1c7
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/angular.md
@@ -0,0 +1,32 @@
+```html
+<ion-toolbar>
+  <ion-title>Default Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="primary">
+  <ion-title>Primary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="secondary">
+  <ion-title>Secondary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="tertiary">
+  <ion-title>Tertiary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="success">
+  <ion-title>Success Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="warning">
+  <ion-title>Warning Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="danger">
+  <ion-title>Danger Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="light">
+  <ion-title>Light Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="medium">
+  <ion-title>Medium Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="dark">
+  <ion-title>Dark Toolbar</ion-title>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/toolbar/theming/colors/demo.html b/static/usage/v7/toolbar/theming/colors/demo.html
new file mode 100644
index 00000000000..f8c44dcd8e2
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/demo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-title>Default Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="primary">
+          <ion-title>Primary Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="secondary">
+          <ion-title>Secondary Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="tertiary">
+          <ion-title>Tertiary Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="success">
+          <ion-title>Success Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="warning">
+          <ion-title>Warning Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="danger">
+          <ion-title>Danger Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="light">
+          <ion-title>Light Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="medium">
+          <ion-title>Medium Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="dark">
+          <ion-title>Dark Toolbar</ion-title>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/theming/colors/index.md b/static/usage/v7/toolbar/theming/colors/index.md
new file mode 100644
index 00000000000..686cc8df40b
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/toolbar/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v7/toolbar/theming/colors/javascript.md b/static/usage/v7/toolbar/theming/colors/javascript.md
new file mode 100644
index 00000000000..a2763a1c1c7
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+<ion-toolbar>
+  <ion-title>Default Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="primary">
+  <ion-title>Primary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="secondary">
+  <ion-title>Secondary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="tertiary">
+  <ion-title>Tertiary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="success">
+  <ion-title>Success Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="warning">
+  <ion-title>Warning Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="danger">
+  <ion-title>Danger Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="light">
+  <ion-title>Light Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="medium">
+  <ion-title>Medium Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="dark">
+  <ion-title>Dark Toolbar</ion-title>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/toolbar/theming/colors/react.md b/static/usage/v7/toolbar/theming/colors/react.md
new file mode 100644
index 00000000000..ba6fd010f23
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonToolbar>
+        <IonTitle>Default Toolbar</IonTitle>
+      </IonToolbar>
+      <IonToolbar color="primary">
+        <IonTitle>Primary Toolbar</IonTitle>
+      </IonToolbar>
+      <IonToolbar color="secondary">
+        <IonTitle>Secondary Toolbar</IonTitle>
+      </IonToolbar>
+      <IonToolbar color="tertiary">
+        <IonTitle>Tertiary Toolbar</IonTitle>
+      </IonToolbar>
+      <IonToolbar color="success">
+        <IonTitle>Success Toolbar</IonTitle>
+      </IonToolbar>
+      <IonToolbar color="warning">
+        <IonTitle>Warning Toolbar</IonTitle>
+      </IonToolbar>
+      <IonToolbar color="danger">
+        <IonTitle>Danger Toolbar</IonTitle>
+      </IonToolbar>
+      <IonToolbar color="light">
+        <IonTitle>Light Toolbar</IonTitle>
+      </IonToolbar>
+      <IonToolbar color="medium">
+        <IonTitle>Medium Toolbar</IonTitle>
+      </IonToolbar>
+      <IonToolbar color="dark">
+        <IonTitle>Dark Toolbar</IonTitle>
+      </IonToolbar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/theming/colors/vue.md b/static/usage/v7/toolbar/theming/colors/vue.md
new file mode 100644
index 00000000000..d71cb7a3c05
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+<template>
+  <ion-toolbar>
+    <ion-title>Default Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar color="primary">
+    <ion-title>Primary Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar color="secondary">
+    <ion-title>Secondary Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar color="tertiary">
+    <ion-title>Tertiary Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar color="success">
+    <ion-title>Success Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar color="warning">
+    <ion-title>Warning Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar color="danger">
+    <ion-title>Danger Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar color="light">
+    <ion-title>Light Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar color="medium">
+    <ion-title>Medium Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar color="dark">
+    <ion-title>Dark Toolbar</ion-title>
+  </ion-toolbar>
+</template>
+
+<script lang="ts">
+  import { IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/angular/example_component_css.md b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..f485553f7ad
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,14 @@
+```css
+ion-toolbar {
+  --background: #19422d;
+  --color: white;
+
+  --border-color: #f24aec;
+  --border-width: 4px 0;
+  --border-style: double;
+
+  --min-height: 80px;
+  --padding-top: 20px;
+  --padding-bottom: 20px;
+}
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/angular/example_component_html.md b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..8f21356a707
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-toolbar>
+  <ion-title>Custom Toolbar</ion-title>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/demo.html b/static/usage/v7/toolbar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..dca3fea437d
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/demo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toolbar</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+    }
+
+    ion-toolbar {
+      --background: #19422d;
+      --color: white;
+
+      --border-color: #f24aec;
+      --border-width: 4px 0;
+      --border-style: double;
+
+      --min-height: 80px;
+      --padding-top: 20px;
+      --padding-bottom: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-toolbar>
+          <ion-title>Custom Toolbar</ion-title>
+        </ion-toolbar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/theming/css-properties/index.md b/static/usage/v7/toolbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..9ca22f52d07
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/toolbar/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/toolbar/theming/css-properties/javascript.md b/static/usage/v7/toolbar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..7ee9cd6d581
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/javascript.md
@@ -0,0 +1,20 @@
+```html
+<ion-toolbar>
+  <ion-title>Custom Toolbar</ion-title>
+</ion-toolbar>
+
+<style>
+  ion-toolbar {
+    --background: #19422d;
+    --color: white;
+
+    --border-color: #f24aec;
+    --border-width: 4px 0;
+    --border-style: double;
+
+    --min-height: 80px;
+    --padding-top: 20px;
+    --padding-bottom: 20px;
+  }
+</style>
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/react/main_css.md b/static/usage/v7/toolbar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..f485553f7ad
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-toolbar {
+  --background: #19422d;
+  --color: white;
+
+  --border-color: #f24aec;
+  --border-width: 4px 0;
+  --border-style: double;
+
+  --min-height: 80px;
+  --padding-top: 20px;
+  --padding-bottom: 20px;
+}
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/react/main_tsx.md b/static/usage/v7/toolbar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..8e8f663cd98
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonToolbar>
+      <IonTitle>Custom Toolbar</IonTitle>
+    </IonToolbar>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/vue.md b/static/usage/v7/toolbar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..17d8653117c
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-toolbar>
+    <ion-title>Custom Toolbar</ion-title>
+  </ion-toolbar>
+</template>
+
+<script lang="ts">
+  import { IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonTitle, IonToolbar },
+  });
+</script>
+
+<style scoped>
+  ion-toolbar {
+    --background: #19422d;
+    --color: white;
+
+    --border-color: #f24aec;
+    --border-width: 4px 0;
+    --border-style: double;
+
+    --min-height: 80px;
+    --padding-top: 20px;
+    --padding-bottom: 20px;
+  }
+</style>
+```
diff --git a/versioned_docs/version-v6/README.md b/versioned_docs/version-v6/README.md
new file mode 100644
index 00000000000..2da29748116
--- /dev/null
+++ b/versioned_docs/version-v6/README.md
@@ -0,0 +1,17 @@
+# Docs folder
+
+The `/docs` folder houses all markdown files. The page structure loosely maps to the routing on the site since paths can be changed in the frontmatter.
+
+## Versioning
+
+This folder can also contain components, assets, and whatever else is meant to be versioned when the docusaurus versioning script is run. For example, if there is a page component that is only relevant to the `layout` section in the current version of Ionic, it could be added to a `_components/` folder in `docs/layout/`. When the versioning script is run, the component will be copied to `versioned_docs/verion-{X}/layout/_components/` and there will now be a separate component in `docs/layout/_components/` that can be deleted or updated to the latest version. The same concept applies to images and other files.
+
+If components are meant to be shared across versions, they can be put in `src/components/`. If images and other served files are meant to be shared across versions they can be put in `static/`.
+
+## Auto Generated Files
+
+All markdown files in these directories are generated from [scripts](/scripts):
+
+- `docs/api/`
+- `docs/cli/commands/`
+- `docs/native/`
diff --git a/versioned_docs/version-v6/angular/config.md b/versioned_docs/version-v6/angular/config.md
new file mode 100644
index 00000000000..01844cc067c
--- /dev/null
+++ b/versioned_docs/version-v6/angular/config.md
@@ -0,0 +1,258 @@
+---
+title: Config
+---
+
+<head>
+  <title>Config | Ionic Config to Change Component Properties Globally</title>
+  <meta
+    name="description"
+    content="Ionic Config provides a way to change the properties of components globally across an app. Config can set the app mode, tab button layout, animations, and more."
+  />
+</head>
+
+Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more.
+
+## Global Config
+
+To override the default Ionic configurations for your app, provide your own custom config to `IonicModule.forRoot(...)`. The available config keys can be found in the [`IonicConfig`](#ionicconfig) interface.
+
+For example, to disable ripple effects and default the mode to Material Design:
+
+```tsx title="app.module.ts"
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot({
+      rippleEffect: false,
+      mode: 'md'
+    })
+  ],
+  ...
+})
+```
+
+## Per-Component Config
+
+Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values.
+
+**Not recommended**
+
+```ts
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot({
+      // Not recommended when your app requires reactive values
+      backButtonText: 'Go Back'
+    })
+  ],
+  ...
+})
+```
+
+**Recommended**
+
+```html
+<ion-back-button [text]="backButtonText"></ion-back-button>
+```
+
+```ts
+@Component(...)
+class MyComponent {
+  backButtonText = this.config.get('backButtonText');
+
+  constructor(private config: Config) { }
+
+  localeChanged(locale: string) {
+    if (locale === 'es_ES') {
+      this.backButtonText = 'Devolver';
+    }
+  }
+
+}
+```
+
+## Per-Platform Config
+
+Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.
+
+Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly.
+
+In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
+The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values.
+
+```tsx
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot({
+      animated: !isPlatform('mobileweb')
+    })
+  ],
+  ...
+})
+```
+
+**Per-platform config with fallback for unmatched platforms:**
+
+```tsx
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      backButtonText: 'Previous',
+      tabButtonLayout: 'label-hide'
+    }
+  }
+
+  return {
+    menuIcon: 'ellipsis-vertical'
+  }
+}
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot(getConfig())
+  ],
+  ...
+})
+```
+
+**Per-platform config overrides:**
+
+```tsx
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+const getConfig = () => {
+  let config = {
+    animated: false
+  };
+
+  if (isPlatform('iphone')) {
+    config = {
+      ...config,
+      backButtonText: 'Previous'
+    }
+  }
+
+  return config;
+}
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot(getConfig())
+  ],
+  ...
+})
+```
+
+## Methods
+
+### get
+
+|                 |                                                                                  |
+| --------------- | -------------------------------------------------------------------------------- |
+| **Description** | Returns a config value as an `any`. Returns `null` if the config is not defined. |
+| **Signature**   | `get(key: string, fallback?: any) => any`                                          |
+
+#### Examples
+
+```ts
+import { Config } from '@ionic/angular';
+
+@Component(...)
+class AppComponent {
+  constructor(config: Config) {
+    const mode = config.get('mode');
+  }
+}
+```
+
+### getBoolean
+
+|                 |                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------ |
+| **Description** | Returns a config value as a `boolean`. Returns `false` if the config is not defined. |
+| **Signature**   | `getBoolean(key: string, fallback?: boolean) => boolean`                               |
+
+#### Examples
+
+```ts
+import { Config } from '@ionic/angular';
+
+@Component(...)
+class AppComponent {
+  constructor(config: Config) {
+    const swipeBackEnabled = config.getBoolean('swipeBackEnabled');
+  }
+}
+```
+
+### getNumber
+
+|                 |                                                                                 |
+| --------------- | ------------------------------------------------------------------------------- |
+| **Description** | Returns a config value as a `number`. Returns `0` if the config is not defined. |
+| **Signature**   | `getNumber(key: string, fallback?: number) => number`                             |
+
+#### Examples
+
+```ts
+import { Config } from '@ionic/angular';
+
+@Component(...)
+class AppComponent {
+  constructor(config: Config) {
+    const keyboardHeight = config.getNumber('keyboardHeight');
+  }
+}
+```
+
+## Interfaces
+
+### IonicConfig
+
+Below are the config options that Ionic uses.
+
+| Config                   | Type                                                                              | Description                                                                                              |
+| ------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `actionSheetEnter`       | `AnimationBuilder`                                                                | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation".        |
+| `actionSheetLeave`       | `AnimationBuilder`                                                                | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation".        |
+| `alertEnter`             | `AnimationBuilder`                                                                | Provides a custom enter animation for all `ion-alert`, overriding the default "animation".               |
+| `alertLeave`             | `AnimationBuilder`                                                                | Provides a custom leave animation for all `ion-alert`, overriding the default "animation".               |
+| `animated`               | `boolean`                                                                         | If `true`, Ionic will enable all animations and transitions across the app.                              |
+| `backButtonDefaultHref`  | `string`                                                                          | Overrides the default value for the `defaultHref` property in all `<ion-back-button>` components.        |
+| `backButtonIcon`         | `string`                                                                          | Overrides the default icon in all `<ion-back-button>` components.                                        |
+| `backButtonText`         | `string`                                                                          | Overrides the default text in all `<ion-back-button>` components.                                        |
+| `hardwareBackButton`     | `boolean`                                                                         | If `true`, Ionic will respond to the hardware back button in an Android device.                          |
+| `infiniteLoadingSpinner` | `SpinnerTypes`                                                                    | Overrides the default spinner type in all `<ion-infinite-scroll-content>` components.                    |
+| `loadingEnter`           | `AnimationBuilder`                                                                | Provides a custom enter animation for all `ion-loading`, overriding the default "animation".             |
+| `loadingLeave`           | `AnimationBuilder`                                                                | Provides a custom leave animation for all `ion-loading`, overriding the default "animation".             |
+| `loadingSpinner`         | `SpinnerTypes`                                                                    | Overrides the default spinner for all `ion-loading` overlays.                                            |
+| `menuIcon`               | `string`                                                                          | Overrides the default icon in all `<ion-menu-button>` components.                                        |
+| `menuType`               | `string`                                                                          | Overrides the default menu type for all `<ion-menu>` components.                                         |
+| `modalEnter`             | `AnimationBuilder`                                                                | Provides a custom enter animation for all `ion-modal`, overriding the default "animation".               |
+| `modalLeave`             | `AnimationBuilder`                                                                | Provides a custom leave animation for all `ion-modal`, overriding the default "animation".               |
+| `mode`                   | `Mode`                                                                            | The mode determines which platform styles to use for the whole application.                              |
+| `navAnimation`           | `AnimationBuilder`                                                                | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. |
+| `pickerEnter`            | `AnimationBuilder`                                                                | Provides a custom enter animation for all `ion-picker`, overriding the default "animation".              |
+| `pickerLeave`            | `AnimationBuilder`                                                                | Provides a custom leave animation for all `ion-picker`, overriding the default "animation".              |
+| `platform`               | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods.                                                        |
+| `popoverEnter`           | `AnimationBuilder`                                                                | Provides a custom enter animation for all `ion-popover`, overriding the default "animation".             |
+| `popoverLeave`           | `AnimationBuilder`                                                                | Provides a custom leave animation for all `ion-popover`, overriding the default "animation".             |
+| `refreshingIcon`         | `string`                                                                          | Overrides the default icon in all `<ion-refresh-content>` components.                                    |
+| `refreshingSpinner`      | `SpinnerTypes`                                                                    | Overrides the default spinner type in all `<ion-refresh-content>` components.                            |
+| `sanitizerEnabled`       | `boolean`                                                                         | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML.      |
+| `spinner`                | `SpinnerTypes`                                                                    | Overrides the default spinner in all `<ion-spinner>` components.                                         |
+| `statusTap`              | `boolean`                                                                         | If `true`, clicking or tapping the status bar will cause the content to scroll to the top.               |
+| `swipeBackEnabled`       | `boolean`                                                                         | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application.                      |
+| `tabButtonLayout`        | `TabButtonLayout`                                                                 | Overrides the default "layout" of all `ion-bar-button` across the whole application.                     |
+| `toastEnter`             | `AnimationBuilder`                                                                | Provides a custom enter animation for all `ion-toast`, overriding the default "animation".               |
+| `toastLeave`             | `AnimationBuilder`                                                                | Provides a custom leave animation for all `ion-toast`, overriding the default "animation".               |
diff --git a/versioned_docs/version-v6/angular/lifecycle.md b/versioned_docs/version-v6/angular/lifecycle.md
new file mode 100644
index 00000000000..09206bdf137
--- /dev/null
+++ b/versioned_docs/version-v6/angular/lifecycle.md
@@ -0,0 +1,101 @@
+---
+title: Ionic Page Life Cycle
+sidebar_label: Lifecycle
+---
+
+<head>
+  <title>Angular Page Component Life Cycle - App Events Documentation</title>
+  <meta
+    name="description"
+    content="This guide covers how the page life cycle works in an Ionic app built with Angular. Learn how Ionic embraces life cycle events provided by Angular components."
+  />
+</head>
+
+This guide covers how the page life cycle works in an app built with Ionic and Angular.
+
+![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.png)
+
+## Angular Life Cycle Events
+
+Ionic embraces the life cycle events provided by Angular. The two Angular events you will find using the most are:
+
+| Event Name    | Description                                                                                                                                                 |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ngOnInit`    | Fired once during component initialization. This event can be used to initialize local members and make calls into services that only need to be done once. |
+| `ngOnDestroy` | Fired right before Angular destroys the view. Useful for cleanup like unsubscribing from observables.                                                       |
+
+For more info on the Angular Component Life Cycle events, visit their [component lifecycle docs](https://angular.io/guide/lifecycle-hooks).
+
+:::note
+Components that use `ion-nav` or `ion-router-outlet` should not use the `OnPush` change detection strategy. Doing so will prevent lifecycle hooks such as `ngOnInit` from firing. Additionally, asynchronous state changes may not render properly.
+:::
+
+## Ionic Page Events
+
+In addition to the Angular life cycle events, Ionic Angular provides a few additional events that you can use:
+
+| Event Name         | Description                                                        |
+| ------------------ | ------------------------------------------------------------------ |
+| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. |
+| `ionViewDidEnter`  | Fired when the component routing to has finished animating.        |
+| `ionViewWillLeave` | Fired when the component routing from is about to animate.         |
+| `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
+
+The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fire. The former fires right after `ngOnInit` but before the page transition begins, and the latter directly after the transition ends.
+
+For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires).
+
+![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.gif)
+
+## How Ionic Handles the Life of a Page
+
+Ionic has its router outlet, called `<ion-router-outlet />`. This outlet extends Angular's `<router-outlet />` with some additional functionality to enable better experiences for mobile devices.
+
+When an app is wrapped in `<ion-router-outlet />`, Ionic treats navigation a bit differently. When you navigate to a new page, Ionic will keep the old page in the existing DOM, but hide it from your view and transition the new page. The reason we do this is two-fold:
+
+1. We can maintain the state of the old page (data on the screen, scroll position, etc..)
+2. We can provide a smoother transition back to the page since it is already there and doesn't need to be recreated.
+
+Pages are only removed from the DOM when they are "popped", for instance, by pressing the back button in the UI or the browsers back button.
+
+Because of this special handling, the `ngOnInit` and `ngOnDestroy` methods might not fire when you would usually think they should.
+
+`ngOnInit` will only fire each time the page is freshly created, but not when navigated back to the page. For instance, navigating between each page in a tabs interface will only call each page's `ngOnInit` method once, but not on subsequent visits. `ngOnDestroy` will only fire when a page "popped".
+
+## Route Guards
+
+In Ionic 3, there were a couple of additional life cycle methods that were useful to control when a page could be entered (`ionViewCanEnter`) and left (`ionViewCanLeave`). These could be used to protect pages from unauthorized users and to keep a user on a page when you don't want them to leave (like during a form fill).
+
+These methods were removed in Ionic 4 in favor of using Angular's Route Guards.
+
+A route guard helps determine if a particular action can be taken against a route. They are classes that implement a certain interface. The `CanActivate` and `CanDeactivate` interfaces can be used to implement the same type of logic that the removed events `ionViewCanEnter` and `ionViewCanLeave` did.
+
+```tsx
+@Injectable()
+export class AuthGuard implements CanActivate {
+  constructor(private authService: AuthService) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    return this.authService.isAuthenticated();
+  }
+}
+```
+
+To use this guard, add it to the appropriate param in the route definition:
+
+```tsx
+{ path: 'settings', canActivate: [AuthGuard], loadChildren: '...',  }
+```
+
+For more info on how to use route guards, go to Angular's [router documentation](https://angular.io/guide/router).
+
+## Guidance for Each Life Cycle Method
+
+Below are some tips on use cases for each of the life cycle events.
+
+- `ngOnInit` - Initialize your component and load data from services that don't need refreshing on each subsequent visit.
+- `ionViewWillEnter` - Since `ionViewWillEnter` is called every time the view is navigated to (regardless if initialized or not), it's a good method to load data from services. However, if your data comes back during the animation, it can start lots of DOM manipulation, which can cause some janky animations.
+- `ionViewDidEnter` - If you see performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible by the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete.
+- `ionViewWillLeave` - Can be used for cleanup, like unsubscribing from observables. Since `ngOnDestroy` might not fire when you navigate from the current page, put your cleanup code here if you don't want it active while the screen is not in view.
+- `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here.
+- `ngOnDestroy` - Cleanup logic for your pages that you don't want to clean up in `ionViewWillLeave`.
diff --git a/versioned_docs/version-v6/angular/navigation.md b/versioned_docs/version-v6/angular/navigation.md
new file mode 100644
index 00000000000..0c249d9d055
--- /dev/null
+++ b/versioned_docs/version-v6/angular/navigation.md
@@ -0,0 +1,453 @@
+---
+title: Angular Navigation
+sidebar_label: Navigation/Routing
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+<head>
+  <title>Angular Navigation: How Routing & Redirects Work in Angular Apps</title>
+  <meta
+    name="description"
+    content="Our Angular Navigation guide covers how routing works in an app built with Ionic and Angular. Read to learn more about basic routing and redirects in Angular."
+  />
+</head>
+
+This guide covers how routing works in an app built with Ionic and Angular.
+
+The Angular Router is one of the most important libraries in an Angular application. Without it, apps would be single view/single context apps or would not be able to maintain their navigation state on browser reloads. With Angular Router, we can create rich apps that are linkable and have rich animations (when paired with Ionic of course). Let's look at the basics of the Angular Router and how we can configure it for Ionic apps.
+
+## A simple Route
+
+For most apps, having some sort of route is often required. The most basic configuration looks a bit like this:
+
+```tsx
+
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+  ...
+  RouterModule.forRoot([
+    { path: '', component: LoginComponent },
+    { path: 'detail', component: DetailComponent },
+  ])
+  ],
+})
+```
+
+The simplest breakdown for what we have here is a path/component lookup. When our app loads, the router kicks things off by reading the URL the user is trying to load. In our sample, our route looks for `''`, which is essentially our index route. So for this, we load the `LoginComponent`. Fairly straight forward. This pattern of matching paths with a component continues for every entry we have in the router config. But what if we wanted to load a different path on our initial load?
+
+## Handling Redirects
+
+For this we can use router redirects. Redirects work the same way that a typical route object does, but just includes a few different keys.
+
+```tsx
+[
+  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: 'login', component: LoginComponent },
+  { path: 'detail', component: DetailComponent },
+];
+```
+
+In our redirect, we look for the index path of our app. Then if we load that, we redirect to the `login` route. The last key of `pathMatch` is required to tell the router how it should look up the path.
+
+Since we use `full`, we're telling the router that we should compare the full path, even if ends up being something like `/route1/route2/route3`. Meaning that if we have:
+
+```tsx
+{ path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' },
+{ path: 'login', component: LoginComponent },
+```
+
+And load `/route1/route2/route3` we'll redirect. But if we loaded `/route1/route2/route4`, we won't redirect, as the paths don't match fully.
+
+Alternatively, if we used:
+
+```tsx
+{ path: '/route1/route2', redirectTo: 'login', pathMatch: 'prefix' },
+{ path: 'login', component: LoginComponent },
+```
+
+Then load both `/route1/route2/route3` and `/route1/route2/route4`, we'll be redirected for both routes. This is because `pathMatch: 'prefix'` will match only part of the path.
+
+## Navigating to different routes
+
+Talking about routes is good and all, but how does one actually navigate to said routes? For this, we can use the `routerLink` directive. Let's go back and take our simple router setup from earlier:
+
+```ts
+RouterModule.forRoot([
+  { path: '', component: LoginComponent },
+  { path: 'detail', component: DetailComponent },
+]);
+```
+
+Now from the `LoginComponent`, we can use the following HTML to navigate to the detail route.
+
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Login</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-button [routerLink]="['/detail']">Go to detail</ion-button>
+</ion-content>
+```
+
+The important part here is the `ion-button` and `routerLink` directive. RouterLink works on a similar idea as typical `href`s, but instead of building out the URL as a string, it can be built as an array, which can provide more complicated paths.
+
+We also can programmatically navigate in our app by using the router API.
+
+```tsx
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  ...
+})
+export class LoginComponent {
+
+  constructor(private router: Router){}
+
+  navigate(){
+    this.router.navigate(['/detail'])
+  }
+}
+```
+
+Both options provide the same navigation mechanism, just fitting different use cases.
+
+:::note
+A note on navigation with relative URLs: Currently, to support multiple navigation stacks, relative URLs are something not supported
+:::
+
+### Navigating using LocationStrategy.historyGo
+
+Angular Router has a [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) method that allows developers to move forward or backward through the application history. Let's take a look at an example.
+
+Say you have the following application history:
+
+`/pageA` --> `/pageB` --> `/pageC`
+
+If you were to call `LocationStrategy.historyGo(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `LocationStrategy.historyGo(2)`, you would be brought to `/pageC`.
+
+An key characteristic of `LocationStrategy.historyGo()` is that it expects your application history to be linear. This means that `LocationStrategy.historyGo()` should not be used in applications that make use of non-linear routing. See [Linear Routing versus Non-Linear Routing](#linear-routing-versus-non-linear-routing) for more information.
+
+## Lazy loading routes
+
+Now the current way our routes are setup makes it so they are included in the same chunk as the root app.module, which is not ideal. Instead, the router has a setup that allows the components to be isolated to their own chunks.
+
+```tsx
+
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+  ...
+  RouterModule.forRoot([
+    { path: '', redirectTo: 'login', pathMatch: 'full' },
+    { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
+    { path: 'detail', loadChildren: () => import('./detail/detail.module').then(m => m.DetailModule) }
+  ])
+  ],
+})
+```
+
+While similar, the `loadChildren` property is a way to reference a module by using native import instead of a component directly. In order to do this though, we need to create a module for each of the components.
+
+```tsx
+...
+import { RouterModule } from '@angular/router';
+import { LoginComponent } from './login.component';
+
+@NgModule({
+  imports: [
+  ...
+  RouterModule.forChild([
+    { path: '', component: LoginComponent },
+  ])
+  ],
+})
+```
+
+:::note
+We're excluding some additional content and only including the necessary parts.
+:::
+
+Here, we have a typical Angular Module setup, along with a RouterModule import, but we're now using `forChild` and declaring the component in that setup. With this setup, when we run our build, we will produce separate chunks for both the app component, the login component, and the detail component.
+
+## Live Example
+
+If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-angular-routing?file=src/app/app-routing.module.ts) of the topics above on StackBlitz.
+
+## Linear Routing versus Non-Linear Routing
+
+### Linear Routing
+
+If you have built a web app that uses routing, you likely have used linear routing before. Linear routing means that you can move forward or backward through the application history by pushing and popping pages.
+
+The following is an example of linear routing in a mobile app:
+
+<video
+  style={{
+    'margin': '40px auto',
+    'display': 'flex'
+  }}
+  width="400"
+  src={useBaseUrl('video/linear-routing-demo.mp4')}
+  controls
+></video>
+
+The application history in this example has the following path:
+
+`Accessibility` --> `VoiceOver` --> `Speech`
+
+When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategy).
+
+The downside of linear routing is that it does not allow for complex user experiences such as tab views. This is where non-linear routing comes into play.
+
+### Non-Linear Routing
+
+Non-linear routing is a concept that may be new to many web developers learning to build mobile apps with Ionic.
+
+Non-linear routing means that the view that the user should go back to is not necessarily the previous view that was displayed on the screen.
+
+The following is an example of non-linear routing:
+
+<video
+  style={{
+    'margin': '40px auto',
+    'display': 'flex'
+  }}
+  width="400"
+  src={useBaseUrl('video/non-linear-routing-demo.mp4')}
+  controls
+></video>
+
+In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab.
+
+From here, we switch to the `Search` tab. Then, we tap the `Originals` tab again and are brought back to the `Ted Lasso` view. At this point, we have started using non-linear routing.
+
+Why is this non-linear routing? The previous view we were on was the `Search` view. However, pressing the back button on the `Ted Lasso` view should bring us back to the root `Originals` view. This happens because each tab in a mobile app is treated as its own stack. The [Working with Tabs](#working-with-tabs) sections goes over this in more detail.
+
+If tapping the back button simply called `LocationStrategy.historyGo(-1)` from the `Ted Lasso` view, we would be brought back to the `Search` view which is not correct.
+
+Non-linear routing allows for sophisticated user flows that linear routing cannot handle. However, certain linear routing APIs such as `LocationStrategy.historyGo()` cannot be used in this non-linear environment. This means that `LocationStrategy.historyGo()` should not be used when using tabs or nested outlets.
+
+### Which one should I choose?
+
+We recommend keeping your application as simple as possible until you need to add non-linear routing. Non-linear routing is very powerful, but it also adds a considerable amount of complexity to mobile applications.
+
+The two most common uses of non-linear routing is with tabs and nested `ion-router-outlet`s. We recommend only using non-linear routing if your application meets the tabs or nested router outlet use cases.
+
+For more on tabs, please see [Working with Tabs](#working-with-tabs).
+
+For more on nested router outlets, please see [Nested Routes](#nested-routes).
+
+## Shared URLs versus Nested Routes
+
+A common point of confusion when setting up routing is deciding between shared URLs or nested routes. This part of the guide will explain both and help you decide which one to use.
+
+### Shared URLs
+
+Shared URLs is a route configuration where routes have pieces of the URL in common. The following is an example of a shared URL configuration:
+
+```tsx
+const routes: Routes = [
+  {
+    path: 'dashboard',
+    component: DashboardMainPage,
+  },
+  {
+    path: 'dashboard/stats',
+    component: DashboardStatsPage,
+  },
+];
+```
+
+The above routes are considered "shared" because they reuse the `dashboard` piece of the URL.
+
+### Nested Routes
+
+Nested Routes is a route configuration where routes are listed as children of other routes. The following is an example of a nested route configuration:
+
+```tsx
+const routes: Routes = [
+  {
+    path: 'dashboard',
+    component: DashboardRouterOutlet,
+    children: [
+      {
+        path: '',
+        component: DashboardMainPage,
+      },
+      {
+        path: 'stats',
+        component: DashboardStatsPage,
+      },
+    ],
+  },
+];
+```
+
+The above routes are nested because they are in the `children` array of the parent route. Notice that the parent route renders the `DashboardRouterOutlet` component. When you nest routes, you need to render another instance of `ion-router-outlet`.
+
+### Which one should I choose?
+
+Shared URLs are great when you want to transition from page A to page B while preserving the relationship between the two pages in the URL. In our previous example, a button on the `/dashboard` page could transition to the `/dashboard/stats` page. The relationship between the two pages is preserved because of a) the page transition and b) the url.
+
+Nested routes should be used when you want to render content in outlet A while also rendering sub-content inside of a nested outlet B. The most common use case you will run into is tabs. When you load up a tabs Ionic starter application, you will see `ion-tab-bar` and `ion-tabs` components rendered in the first `ion-router-outlet`. The `ion-tabs` component renders another `ion-router-outlet` which is responsible for rendering the contents of each tab.
+
+There are very few use cases in which nested routes make sense in mobile applications. When in doubt, use the shared URL route configuration. We strongly caution against using nested routing in contexts other than tabs as it can quickly make navigating your app confusing.
+
+## Working with Tabs
+
+With Tabs, the Angular Router provides Ionic the mechanism to know what components should be loaded, but the heavy lifting is actually done by the tabs component. Let's look at a simple example.
+
+```ts
+const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      {
+        path: 'tab1',
+        children: [
+          {
+            path: '',
+            loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule),
+          },
+        ],
+      },
+      {
+        path: '',
+        redirectTo: '/tabs/tab1',
+        pathMatch: 'full',
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/tabs/tab1',
+    pathMatch: 'full',
+  },
+];
+```
+
+Here we have a "tabs" path that we load. In this example we call the path "tabs", but the name of the paths can be changed. They can be called whatever fits your app. In that route object, we can define a child route as well. In this example, the top level child route "tab1" acts as our "outlet", and can load additional child routes. For this example, we have a single sub-child-route, which just loads a new component. The markup for the tab is as follows:
+
+```html
+<ion-tabs>
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="tab1">
+      <ion-icon name="flash"></ion-icon>
+      <ion-label>Tab One</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```
+
+If you've built apps with Ionic before, this should feel familiar. We create a `ion-tabs` component, and provide a `ion-tab-bar`. The `ion-tab-bar` provides a `ion-tab-button` with a `tab` property that is associated with the tab "outlet" in the router config. Note that the latest version of `@ionic/angular` no longer requires `<ion-tab>`, but instead allows developers to fully customize the tab bar, and the single source of truth lives within the router configuration.
+
+### How Tabs in Ionic Work
+
+Each tab in Ionic is treated as an individual navigation stack. This means if you have three tabs in your application, each tab has its own navigation stack. Within each stack you can navigate forwards (push a view) and backwards (pop a view).
+
+This behavior is important to note as it is different than most tab implementations that are found in other web based UI libraries. Other libraries typically manage tabs as one single history stack.
+
+Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations you have seen in other UI libraries. Read on to learn more about some of these differences.
+
+### Child Routes within Tabs
+
+When adding additional routes to tabs you should write them as sibling routes with the parent tab as the path prefix. The example below defines the `/tabs/tab1/view` route as a sibling of the `/tabs/tab1` route. Since this new route has the `tab1` prefix, it will be rendered inside of the `Tabs` component, and Tab 1 will still be selected in the `ion-tab-bar`.
+
+```ts
+const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      {
+        path: 'tab1',
+        children: [
+          {
+            path: '',
+            loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule),
+          },
+        ],
+      },
+      {
+        path: 'tab1/view',
+        children: [
+          {
+            path: '',
+            loadChildren: () => import('../tab1/tab1view.module').then((m) => m.Tab1ViewPageModule),
+          },
+        ],
+      },
+      {
+        path: 'tab2',
+        children: [
+          {
+            path: '',
+            loadChildren: () => import('../tab2/tab2.module').then((m) => m.Tab2PageModule),
+          },
+        ],
+      },
+      {
+        path: 'tab3',
+        children: [
+          {
+            path: '',
+            loadChildren: () => import('../tab3/tab3.module').then((m) => m.Tab3PageModule),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/tabs/tab1',
+    pathMatch: 'full',
+  },
+];
+```
+
+### Switching Between Tabs
+
+Since each tab is its own navigation stack, it is important to note that these navigation stacks should never interact. This means that there should never be a button in Tab 1 that routes a user to Tab 2. In other words, tabs should only be changed by the user tapping a tab button in the tab bar.
+
+A good example of this in practice is the iOS App Store and Google Play Store mobile applications. These apps both provide tabbed interfaces, but neither one ever routes the user across tabs. For example, the "Games" tab in the iOS App Store app never directs users to the "Search" tab and vice versa.
+
+Let's take a look at a couple common mistakes that are made with tabs.
+
+**A Settings Tab That Multiple Tabs Reference**
+
+A common practice is to create a Settings view as its own tab. This is great if developers need to present several nested settings menus. However, other tabs should never try to route to the Settings tab. As we mentioned above, the only way that the Settings tab should be activated is by a user tapping the appropriate tab button.
+
+If you find that your tabs need to reference the Settings tab, we recommend making the Settings view a modal by using `ion-modal`. This is a practice found in the iOS App Store app. With this approach, any tab can present the modal without breaking the mobile tabs pattern of each tab being its own stack.
+
+The example below shows how the iOS App Store app handles presenting an "Account" view from multiple tabs. By presenting the "Account" view in a modal, the app can work within the mobile tabs best practices to show the same view across multiple tabs.
+
+<video
+  style={{
+    'margin': '40px auto',
+    'display': 'flex'
+  }}
+  width="400"
+  src={useBaseUrl('video/tabs-account-demo.mp4')}
+  controls
+></video>
+
+**Reusing Views Across Tabs**
+
+Another common practice is to present the same view in multiple tabs. Developers often try to do this by having the view contained in a single tab, with other tabs routing to that tab. As we mentioned above, this breaks the mobile tabs pattern and should be avoided.
+
+Instead, we recommend having routes in each tab that reference the same component. This is a practice done in popular apps like Spotify. For example, you can access an album or podcast from the "Home", "Search", and "Your Library" tabs. When accessing the album or podcast, users stay within that tab. The app does this by creating routes per tab and sharing a common component in the codebase.
+
+The example below shows how the Spotify app reuses the same album component to show content in multiple tabs. Notice that each screenshot shows the same album but from a different tab.
+
+| Home Tab | Search Tab |
+| :------: | :--------: |
+| <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |
diff --git a/versioned_docs/version-v6/angular/overview.md b/versioned_docs/version-v6/angular/overview.md
new file mode 100644
index 00000000000..ce6cd60c6be
--- /dev/null
+++ b/versioned_docs/version-v6/angular/overview.md
@@ -0,0 +1,22 @@
+---
+title: 'Ionic Angular Overview'
+sidebar_label: Overview
+---
+
+<head>
+  <title>Ionic Angular Overview | Angular Version Support and Tooling</title>
+  <meta
+    name="description"
+    content="@ionic/angular combines the Ionic experience with the tooling and APIs tailored to Angular Developers. Learn more about version support in our Angular Overview."
+  />
+</head>
+
+`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers.
+
+## Angular Version Support
+
+Ionic supports `Angular 6.0.0 and up`. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state.
+
+## Angular Tooling
+
+With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps.
diff --git a/versioned_docs/version-v6/angular/performance.md b/versioned_docs/version-v6/angular/performance.md
new file mode 100644
index 00000000000..c19ee5d7b2c
--- /dev/null
+++ b/versioned_docs/version-v6/angular/performance.md
@@ -0,0 +1,69 @@
+---
+title: Angular Performance
+sidebar_label: Performance
+---
+
+<head>
+  <title>Angular Performance: Manage App Component Change with ngFor</title>
+  <meta
+    name="description"
+    content="Learn how Angular manages change propagation using ngFor with Ionic Components. Read for more information about Angular performance on Ionic apps."
+  />
+</head>
+
+## \*ngFor with Ionic Components
+
+When using `*ngFor` with Ionic components, we recommend using Angular's `trackBy` option. This allows Angular to manage change propagation in a much more efficient way and only update the content inside of the component rather than re-create the component altogether.
+
+By using `trackBy` you can provide a stable identity for each loop element so Angular can track insertions and deletions within the iterator. Below is an example of how to use `trackBy`:
+
+**home.page.html**
+
+```html
+<ion-item *ngFor="let item of items; trackBy:trackItems">
+  <ion-label>{{ item.value }}</ion-label>
+</ion-item>
+```
+
+**home.component.ts**
+
+```tsx
+
+items = [
+  { id: 0, value: 'Item 0' },
+  { id: 1, value: 'Item 1' },
+  ...
+]
+
+trackItems(index: number, itemObject: any) {
+  return itemObject.id;
+}
+```
+
+In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using `trackBy`, we pass a `trackItems` function which returns the `id` of each object. This `id` is used to provide a stable identity for each loop element.
+
+For more information on how Angular manages change propagation with `ngFor` see https://angular.io/api/common/NgForOf#change-propagation.
+
+## From the Ionic Team
+
+[How to Lazy Load in Ionic Angular](https://ionicframework.com/blog/how-to-lazy-load-in-ionic-angular/)
+
+[Improved Perceived Performance with Skeleton Screens](https://ionicframework.com/blog/improved-perceived-performance-with-skeleton-screens/)
+
+## From the Angular Team
+
+[Build performant and progressive Angular apps](https://web.dev/angular) - web.dev
+
+## From the Community
+
+[High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony
+
+[High Performance List Filtering in Ionic](https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/) - Josh Morony
+
+[Increasing Performance with Efficient DOM Writes in Ionic](https://www.joshmorony.com/increasing-performance-with-efficient-dom-writes-in-ionic-2/) - Josh Morony
+
+[Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony
+
+:::note
+Do you have a guide you'd like to share? Click the _Edit this page_ button below.
+:::
diff --git a/versioned_docs/version-v6/angular/platform.md b/versioned_docs/version-v6/angular/platform.md
new file mode 100644
index 00000000000..ac957693971
--- /dev/null
+++ b/versioned_docs/version-v6/angular/platform.md
@@ -0,0 +1,216 @@
+---
+title: Platform
+---
+
+<head>
+  <title>Platform | Ionic Platform to Customize Apps to Fit Any Device</title>
+  <meta
+    name="description"
+    content="Ionic Platform service can be used to get information about your current device. With this information you can completely customize your app to fit any device."
+  />
+</head>
+
+The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the `platforms` method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device.
+
+## Usage
+
+```tsx
+import { Platform } from '@ionic/angular';
+
+@Component({...})
+export class MyPage {
+  constructor(public platform: Platform) {
+
+  }
+}
+```
+
+## Methods
+
+### `is`
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Depending on the platform the user is on, `is(platformName)` will return true or false. Note that the same app can return true for more than one platform name. For example, an app running from an iPad would return true for the platform names: `mobile`, `ios`, `ipad`, and `tablet`. Additionally, if the app was running from Cordova then `cordova` would be true. |
+| **Signature**   | `is(platformName: Platforms) => boolean`                                                                                                                                                                                                                                                                                                                                  |
+
+#### Parameters
+
+| Name           | Type        | Description                                                                                                                                         |
+| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `platformName` | `Platforms` | Name of the platform. Available options are android, capacitor, cordova, desktop, electron, hybrid, ios, ipad, iphone, mobile, phablet, pwa, tablet |
+
+#### Platforms
+
+Below is a table listing all the possible platform values along with corresponding descriptions.
+
+| Platform Name | Description                              |
+| ------------- | ---------------------------------------- |
+| android       | a device running Android                 |
+| capacitor     | a device running Capacitor               |
+| cordova       | a device running Cordova                 |
+| desktop       | a desktop device                         |
+| electron      | a desktop device running Electron        |
+| hybrid        | a device running Capacitor or Cordova    |
+| ios           | a device running iOS                     |
+| ipad          | an iPad device                           |
+| iphone        | an iPhone device                         |
+| mobile        | a mobile device                          |
+| mobileweb     | a web browser running in a mobile device |
+| phablet       | a phablet device                         |
+| pwa           | a PWA app                                |
+| tablet        | a tablet device                          |
+
+#### Customizing Platform Detection Functions
+
+The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](./config). Each function takes `window` as a parameter and returns a boolean.
+
+```tsx
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  ...
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot({
+      platform: {
+        /** The default `desktop` function returns false for devices with a touchscreen.
+        * This is not always wanted, so this function tests the User Agent instead.
+        **/
+        'desktop': (win) => {
+          const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent);
+          return !isMobile;
+        }
+      },
+    }),
+    AppRoutingModule
+  ],
+  ...
+})
+```
+
+```ts
+type PlatformConfig = {
+  android?: ((win: Window) => boolean) | undefined;
+  capacitor?: ((win: Window) => boolean) | undefined;
+  cordova?: ((win: Window) => boolean) | undefined;
+  desktop?: ((win: Window) => boolean) | undefined;
+  electron?: ((win: Window) => boolean) | undefined;
+  hybrid?: ((win: Window) => boolean) | undefined;
+  ios?: ((win: Window) => boolean) | undefined;
+  ipad?: ((win: Window) => boolean) | undefined;
+  iphone?: ((win: Window) => boolean) | undefined;
+  mobile?: ((win: Window) => boolean) | undefined;
+  mobileweb?: ((win: Window) => boolean) | undefined;
+  phablet?: ((win: Window) => boolean) | undefined;
+  pwa?: ((win: Window) => boolean) | undefined;
+  tablet?: ((win: Window) => boolean) | undefined;
+};
+```
+
+### `platforms`
+
+|                 |                                                                                                                                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Depending on what device you are on, `platforms` can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return `mobile`, `ios`, and `iphone`. |
+| **Signature**   | `platforms() => string[]`                                                                                                                                                                               |
+
+### `ready`
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Returns a promise when the platform is ready and native functionality can be called. If the app is running from within a web browser, then the promise will resolve when the DOM is ready. When the app is running from an application engine such as Cordova, then the promise will resolve when Cordova triggers the `deviceready` event. The resolved value is the `readySource`, which states the platform that was used. <br /><br />For example, when Cordova is ready, the resolved ready source is `cordova`. The default ready source value will be `dom`. The `readySource` is useful if different logic should run depending on the platform the app is running from. For example, only Capacitor and Cordova can execute the status bar plugin, so the web should not run status bar plugin logic. |
+| **Signature**   | `ready() => Promise<string>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+### `isRTL`
+
+|                 |                                                                                                                                                                                                                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Returns if this app is using right-to-left language direction or not. We recommend the app's `index.html` file already has the correct `dir` attribute value set, such as `<html dir="ltr">` or `<html dir="rtl">`. [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir) |
+| **Signature**   | `isRTL() => boolean`                                                                                                                                                                                                                                                                                                               |
+
+### `isLandscape`
+
+|                 |                                                 |
+| --------------- | ----------------------------------------------- |
+| **Description** | Returns `true` if the app is in landscape mode. |
+| **Signature**   | `isLandscape() => boolean`                      |
+
+### `isPortrait`
+
+|                 |                                                |
+| --------------- | ---------------------------------------------- |
+| **Description** | Returns `true` if the app is in portrait mode. |
+| **Signature**   | `isPortrait() => boolean`                      |
+
+### `width`
+
+|                 |                                                                      |
+| --------------- | -------------------------------------------------------------------- |
+| **Description** | Gets the width of the platform's viewport using `window.innerWidth`. |
+| **Signature**   | `width() => number`                                                  |
+
+### `height`
+
+|                 |                                                                        |
+| --------------- | ---------------------------------------------------------------------- |
+| **Description** | Gets the height of the platform's viewport using `window.innerHeight`. |
+| **Signature**   | `height() => number`                                                   |
+
+### `url`
+
+|                 |                      |
+| --------------- | -------------------- |
+| **Description** | Get the current url. |
+| **Signature**   | `url() => string`    |
+
+### `testUserAgent`
+
+|                 |                                                                        |
+| --------------- | ---------------------------------------------------------------------- |
+| **Description** | Returns `true` if the expression is included in the user agent string. |
+| **Signature**   | `testUserAgent(expression: string) => boolean`                         |
+
+#### Parameters
+
+| Name       | Type   | Description                           |
+| ---------- | ------ | ------------------------------------- |
+| expression | string | The string to check in the user agent |
+
+## Events
+
+### `pause`
+
+The `pause` event emits when the native platform puts the application into the background, typically when the user switches to a different application. This event emits when a Cordova/Capacitor app is put into the background but doesn't fire in a standard web browser.
+
+#### Examples
+
+```tsx
+this.platform.pause.subscribe(async () => {
+  alert('Pause event detected');
+});
+```
+
+### `resize`
+
+The `resize` event emits when the browser window has changed dimensions. This could be from a browser window being physically resized, or from a device changing orientation.
+
+#### Examples
+
+```tsx
+this.platform.resize.subscribe(async () => {
+  alert('Resize event detected');
+});
+```
+
+### `resume`
+
+The `resume` event fires when the native platform pulls the application out from the background. This event emits when a Cordova/Capacitor app comes out from the background but doesn't fire in a standard web browser.
+
+#### Examples
+
+```tsx
+this.platform.resume.subscribe(async () => {
+  alert('Resume event detected');
+});
+```
diff --git a/versioned_docs/version-v6/angular/pwa.md b/versioned_docs/version-v6/angular/pwa.md
new file mode 100644
index 00000000000..8b90caf5d89
--- /dev/null
+++ b/versioned_docs/version-v6/angular/pwa.md
@@ -0,0 +1,152 @@
+---
+title: Progressive Web Apps in Angular
+sidebar_label: Progressive Web Apps
+---
+
+<head>
+  <title>Make Progressive Web Apps (PWA) in Angular - Ionic Tutorial</title>
+  <meta
+    name="description"
+    content="When Making an Angular app a Progressive Web App, the two main requirements are a Service Worker and a Web Manifest. Read to learn more in Ionic's PWA tutorial."
+  />
+</head>
+
+## Making your Angular app a PWA
+
+The two main requirements of a PWA are a <a href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank">Service Worker</a> and a <a href="https://developers.google.com/web/fundamentals/web-app-manifest/" target="_blank">Web Manifest</a>. While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this.
+
+The `@angular/pwa` package will automatically add a service worker and an app manifest to the app.
+To add this package to the app, run:
+
+```shell
+ng add @angular/pwa
+```
+
+Once this package has been added run `ionic build --prod` and the `www` directory will be ready to deploy as a PWA.
+
+:::note
+By default, the `@angular/pwa` package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons.
+:::
+
+:::note
+Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.
+:::
+
+## Service Worker configuration
+
+After `@angular/pwa` has been added, a new `ngsw-config.json` file will be created at the root of the project. This file is responsible for configuring how Angular's service worker mechanism will handle caching assets. By default, the following will be provided:
+
+```json
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
+      }
+    }
+  ]
+}
+```
+
+There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read [the official guide from the Angular Team.](https://angular.io/guide/service-worker-config)
+
+## Deploying
+
+### Firebase
+
+Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html).
+
+First, if not already available, [create the project](https://console.firebase.google.com) in Firebase.
+
+Next, in a Terminal, install the Firebase CLI:
+
+```shell
+npm install -g firebase-tools
+```
+
+:::note
+If it's the first time you use firebase-tools, login to your Google account with `firebase login` command.
+:::
+
+With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts:
+
+**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure and deploy Firebase Hosting sites."
+
+**"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website.
+
+**"What do you want to use as your public directory?"** Enter "www".
+
+:::note
+Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:
+:::
+
+**Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes".
+
+**"File www/index.html already exists. Overwrite?"** Enter "No".
+
+A `firebase.json` config file is generated, configuring the app for deployment.
+
+The last thing needed is to make sure caching headers are being set correctly. To do this, add a `headers` snippet to the `firebase.json` file. The complete `firebase.json` looks like:
+
+```json
+{
+  "hosting": {
+    "public": "www",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ],
+    "headers": [
+      {
+        "source": "/build/app/**",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "public, max-age=31536000"
+          }
+        ]
+      },
+      {
+        "source": "ngsw-worker.js",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache"
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+For more information about the `firebase.json` properties, see the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json).
+
+Next, build an optimized version of the app by running:
+
+```shell
+ionic build --prod
+```
+
+Last, deploy the app by running:
+
+```shell
+firebase deploy
+```
+
+After this completes, the app will be live.
diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.md
new file mode 100644
index 00000000000..6f6d7554b31
--- /dev/null
+++ b/versioned_docs/version-v6/angular/slides.md
@@ -0,0 +1,441 @@
+---
+title: Slides
+---
+
+<head>
+  <title>Set Up Swiper.js for Angular Slides [Example] | Ionic</title>
+  <meta
+    name="description"
+    content="Read this guide to learn how to get Swiper.js for Angular set up in your Ionic Framework application for a modern touch slider component."
+  />
+</head>
+
+:::caution Looking for `ion-slides`?
+
+`ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
+
+:::
+
+We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for Angular set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Angular integration.
+
+## Getting Started
+
+First, update to the latest version of Ionic:
+
+```shell
+npm install @ionic/angular@latest
+```
+
+Once that is done, install the Swiper dependency in your project:
+
+```shell
+npm install swiper
+```
+
+Once that is done, we need to import the `SwiperModule` module. This should be done in your component's module file:
+
+```typescript
+// home.module.ts
+import { SwiperModule } from 'swiper/angular';
+
+@NgModule({
+  imports: [..., SwiperModule]
+});
+...
+```
+
+## Swiping with Style
+
+Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `ion-slides`.
+
+You can import these files in `global.scss`:
+
+```scss
+// global.scss
+@import '~swiper/scss';
+@import '~@ionic/angular/css/ionic-swiper';
+```
+
+If you prefer to import these in the CSS file for your slides component, you will need to disable [ViewEncapsulation in Angular](https://angular.io/api/core/ViewEncapsulation), otherwise the styles will not apply:
+
+```typescript
+// home.page.ts
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class HomePage {
+  ...
+}
+```
+
+```scss
+// home.page.scss
+@import '~swiper/scss';
+@import '~@ionic/angular/css/ionic-swiper';
+```
+
+### Updating Selectors
+
+Previously, we were able to target `ion-slides` and `ion-slide` to apply any custom styling. The contents of those style blocks remain the same, but we need to update the selectors. Below is a list of selector changes when going from `ion-slides` to Swiper Angular:
+
+| ion-slides Selector | Swiper Selector |
+| ------------------- | --------------- |
+| `ion-slides`        | `.swiper`       |
+| `ion-slide`         | `.swiper-slide` |
+
+### Vanilla CSS (Optional)
+
+For developers not using a CSS pre-processor, Swiper also provides the styles bundled together. It is important to note that this will import styles for all modules as well.
+
+```javascript
+// slides.component.css
+@import 'swiper/css';
+@import '@ionic/angular/css/ionic-swiper';
+```
+
+## Using Components
+
+Swiper Angular exports a `Swiper` component which is the equivalent of `ion-slides`. It also exports a `swiperSlide` directive which can be used on an `<ng-template>` for each slide:
+
+```html
+<!-- home.page.html -->
+<ion-content>
+  <swiper>
+    <ng-template swiperSlide>Slide 1</ng-template>
+    <ng-template swiperSlide>Slide 2</ng-template>
+    <ng-template swiperSlide>Slide 3</ng-template>
+  </swiper>
+</ion-content>
+```
+
+## Using Modules
+
+By default, Swiper for Angular does not import any additional modules. To use modules such as Navigation or Pagination, you need to import them first.
+
+`ion-slides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
+
+To begin, we need to import the modules and provide them to Swiper:
+
+```typescript
+// home.page.ts
+import { Component } from '@angular/core';
+import SwiperCore, { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+
+SwiperCore.use([Autoplay, Keyboard, Pagination, Scrollbar, Zoom]);
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss']
+})
+export class HomePage {
+  ...
+}
+```
+
+Next, we need to import the stylesheets for each module:
+
+```scss
+// global.scss
+@import '~swiper/scss';
+@import '~swiper/scss/autoplay';
+@import '~swiper/scss/keyboard';
+@import '~swiper/scss/pagination';
+@import '~swiper/scss/scrollbar';
+@import '~swiper/scss/zoom';
+@import '~@ionic/angular/css/ionic-swiper';
+```
+
+Finally, we can turn these features on by using the appropriate properties:
+
+```html
+<!-- home.page.html -->
+<ion-content>
+  <swiper [autoplay]="true" [keyboard]="true" [pagination]="true" [scrollbar]="true" [zoom]="true">
+    <ng-template swiperSlide>Slide 1</ng-template>
+    <ng-template swiperSlide>Slide 2</ng-template>
+    <ng-template swiperSlide>Slide 3</ng-template>
+  </swiper>
+</ion-content>
+```
+
+:::note
+See <a href="https://swiperjs.com/angular#usage" target="_blank" rel="noopener noreferrer">https://swiperjs.com/angular#usage</a> for a full list of modules.
+:::
+
+## The IonicSlides Module
+
+With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly.
+
+We can install the `IonicSlides` module by importing it from `@ionic/angular` and passing it in as the last item in the array provided in `SwiperCore.use`:
+
+```javascript
+// home.page.ts
+import { Component } from '@angular/core';
+import SwiperCore, { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+import { IonicSlides } from '@ionic/angular';
+
+SwiperCore.use([Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides]);
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss']
+})
+export class HomePage {
+  ...
+}
+```
+
+:::note
+The `IonicSlides` module must be the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more.
+:::
+
+## Properties
+
+Swiper options can be provided as individual properties directly on the `<swiper>` component or via the `config` property.
+
+Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set:
+
+```html
+<ion-slides [options]="{ slidesPerView: true, loop: true }">
+  <ion-slide>Slide 1</ion-slide>
+  <ion-slide>Slide 3</ion-slide>
+  <ion-slide>Slide 3</ion-slide>
+</ion-slides>
+```
+
+To set these options as properties directly on `<swiper>` we would do the following:
+
+```html
+<swiper [slidesPerView]="3" [loop]="true">
+  <ng-template swiperSlide>Slide 1</ng-template>
+  <ng-template swiperSlide>Slide 2</ng-template>
+  <ng-template swiperSlide>Slide 3</ng-template>
+</swiper>
+```
+
+To set these options using the `config` object, we would do:
+
+```html
+<swiper [config]="{ slidesPerView: true, loop: true }">
+  <ng-template swiperSlide>Slide 1</ng-template>
+  <ng-template swiperSlide>Slide 3</ng-template>
+  <ng-template swiperSlide>Slide 3</ng-template>
+</swiper>
+```
+
+Below is a full list of property changes when going from `ion-slides` to Swiper Angular:
+
+| Name      | Notes                                                                                                                 |
+| --------- | --------------------------------------------------------------------------------------------------------------------- |
+| options   | Use the `config` property instead or set each option as a property directly on the `<swiper>` component.              |
+| mode      | For different styles based upon the mode, you can target the slides with `.ios .swiper` or `.md .swiper` in your CSS. |
+| pager     | Use the `pagination` property instead. Requires installation of the Pagination module.                                |
+| scrollbar | You can continue to use the `scrollbar` property, just be sure to install the Scrollbar module first.                 |
+
+:::note
+All properties available in Swiper Angular can be found at <a href="https://swiperjs.com/angular#swiper-component-props" target="_blank" rel="noopener noreferrer">https://swiperjs.com/angular#swiper-component-props</a>.
+:::
+
+## Events
+
+Since the `Swiper` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them.
+
+Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
+
+```html
+<ion-slides (ionSlideDidChange)="onSlideChange()">
+  <ion-slide>Slide 1</ion-slide>
+  <ion-slide>Slide 3</ion-slide>
+  <ion-slide>Slide 3</ion-slide>
+</ion-slides>
+```
+
+To migrate, we would change the name of the event to `slideChange`:
+
+```html
+<swiper (slideChange)="onSlideChange()">
+  <ng-template swiperSlide>Slide 1</ng-template>
+  <ng-template swiperSlide>Slide 2</ng-template>
+  <ng-template swiperSlide>Slide 3</ng-template>
+</swiper>
+```
+
+Below is a full list of event name changes when going from `ion-slides` to Swiper Angular:
+
+| ion-slides Event        | Swiper Event               |
+| ----------------------- | -------------------------- |
+| ionSlideWillChange      | slideChangeTransitionStart |
+| ionSlideDidChange       | slideChangeTransitionEnd   |
+| ionSlideDoubleTap       | doubleTap                  |
+| ionSlideDrag            | sliderMove                 |
+| ionSlideNextStart       | slideNextTransitionStart   |
+| ionSlideNextEnd         | slideNextTransitionEnd     |
+| ionSlidePrevStart       | slidePrevTransitionStart   |
+| ionSlidePrevEnd         | slidePrevTransitionEnd     |
+| ionSlideReachStart      | reachBeginning             |
+| ionSlideReachEnd        | reachEnd                   |
+| ionSlideTap             | tap                        |
+| ionSlideTouchStart      | touchStart                 |
+| ionSlideTouchEnd        | touchEnd                   |
+| ionSlideTransitionStart | transitionStart            |
+| ionSlideTransitionEnd   | transitionEnd              |
+| ionSlidesDidLoad        | init                       |
+
+:::note
+All events available in Swiper Angular can be found at <a href="https://swiperjs.com/angular#swiper-component-events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/angular#swiper-component-events</a>.
+:::
+
+## Methods
+
+Most methods have been removed in favor of accessing the `<swiper>` props directly.
+
+Accessing these properties can be tricky as you want to access the properties on the Swiper instance itself, not your Angular component. To do this, we recommend getting a reference to the `Swiper` instance via `(swiper)`:
+
+```html
+<!-- slides.component.html -->
+
+<swiper (swiper)="setSwiperInstance($event)">
+  <ng-template swiperSlide>Slide 1</ng-template>
+  <ng-template swiperSlide>Slide 2</ng-template>
+  <ng-template swiperSlide>Slide 3</ng-template>
+</swiper>
+```
+
+```javascript
+// slides.component.ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-slides-example',
+  templateUrl: 'slides.component.html',
+  styleUrls: ['slides.component.scss']
+})
+export class SlidesExample {
+  private slides: any;
+
+  constructor() {}
+  setSwiperInstance(swiper: any) {
+    this.slides = swiper;
+  }
+}
+```
+
+From here, if you wanted to access a property on the Swiper instance you would access `this.slides`. For example, if you wanted to check the `isBeginning` property, you could do: `this.slides.isBeginning`. Make sure `this.slides` is defined first though!
+
+Below is a full list of method changes when going from `ion-slides` to Swiper Angular:
+
+| ion-slides Method  | Notes                                                                                |
+| ------------------ | ------------------------------------------------------------------------------------ |
+| getActiveIndex()   | Use the `activeIndex` property instead.                                              |
+| getPreviousIndex() | Use the `previousIndex` property instead.                                            |
+| getSwiper()        | Get a reference to the Swiper instance using `(swiper)`. See example above.          |
+| isBeginning()      | Use the `isBeginning` property instead.                                              |
+| isEnd()            | Use the `isEnd` property instead.                                                    |
+| length()           | Use the `slides` property instead. (i.e swiperRef.slides.length)                     |
+| lockSwipeToNext()  | Use the `allowSlidesNext` property instead.                                          |
+| lockSwipeToPrev()  | Use the `allowSlidePrev` property instead.                                           |
+| lockSwipes()       | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. |
+| startAutoplay()    | Use the `autoplay` property instead.                                                 |
+| stopAutoplay()     | Use the `autoplay` property instead.                                                 |
+
+## Effects
+
+If you are using effects such as Cube or Fade, you can install them just like we did with the other modules. In this example, we will use the fade effect. To start, we will import the `EffectFade` module and register it using `SwiperCore.use`:
+
+```html
+<!-- slides.component.html -->
+
+<swiper>
+  <ng-template swiperSlide>Slide 1</ng-template>
+  <ng-template swiperSlide>Slide 2</ng-template>
+  <ng-template swiperSlide>Slide 3</ng-template>
+</swiper>
+```
+
+```javascript
+// slides.component.ts
+import { Component } from '@angular/core';
+import SwiperCore, { EffectFade } from 'swiper';
+import { IonicSlides } from '@ionic/angular';
+
+SwiperCore.use([EffectFade, IonicSlides]);
+
+@Component({
+  selector: 'app-slides-example',
+  templateUrl: 'slides.component.html',
+  styleUrls: ['slides.component.scss'],
+})
+export class SlidesExample {
+  constructor() {}
+}
+```
+
+Next, we need to import the stylesheet associated with the effect:
+
+```scss
+// global.scss
+@import '~swiper/scss/effect-fade';
+```
+
+After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`:
+
+```html
+<!-- slides.component.html -->
+
+<swiper effect="fade">
+  <ng-template swiperSlide>Slide 1</ng-template>
+  <ng-template swiperSlide>Slide 2</ng-template>
+  <ng-template swiperSlide>Slide 3</ng-template>
+</swiper>
+```
+
+```javascript
+// slides.component.ts
+import { Component } from '@angular/core';
+import SwiperCore, { EffectFade } from 'swiper';
+import { IonicSlides } from '@ionic/angular';
+
+SwiperCore.use([EffectFade, IonicSlides]);
+
+@Component({
+  selector: 'app-slides-example',
+  templateUrl: 'slides.component.html',
+  styleUrls: ['slides.component.scss'],
+})
+export class SlidesExample {
+  constructor() {}
+}
+```
+
+:::note
+For more information on effects in Swiper, please see <a href="https://swiperjs.com/angular#effects" target="_blank" rel="noopener noreferrer">https://swiperjs.com/angular#effects</a>.
+:::
+
+## Wrap Up
+
+Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the <a href="https://swiperjs.com/angular" target="_blank" rel="noopener noreferrer">Swiper Angular Introduction</a> and then referencing <a href="https://swiperjs.com/swiper-api" target="_blank" rel="noopener noreferrer">the Swiper API docs</a>.
+
+## FAQ
+
+### Where can I find an example of this migration?
+
+You can find a sample app with `ion-slides` and the equivalent Swiper usage at https://github.com/ionic-team/slides-migration-samples.
+
+### Where can I get help with this migration?
+
+If you are running into issues with the migration, please create a post on the [Ionic Forum](https://forum.ionicframework.com/).
+
+### Where do I file bug reports?
+
+Before opening an issue, please consider creating a post on the <a href="https://github.com/nolimits4web/swiper/discussions" target="_blank" rel="noopener noreferrer">Swiper Discussion Board</a> or the <a href="https://forum.ionicframework.com" target="_blank">Ionic Forum</a> to see if your issue can be resolved by the community.
+
+If you are running into problems with the Swiper library, new bugs should be filed on the Swiper repo: <a href="https://github.com/nolimits4web/swiper/issues" target="_blank" rel="noopener noreferrer">https://github.com/nolimits4web/swiper/issues</a>
+
+If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework repo: <a href="https://github.com/ionic-team/ionic-framework/issues" target="_blank" rel="noopener noreferrer">https://github.com/ionic-team/ionic-framework/issues</a>
diff --git a/versioned_docs/version-v6/angular/storage.md b/versioned_docs/version-v6/angular/storage.md
new file mode 100644
index 00000000000..dad80e77f3a
--- /dev/null
+++ b/versioned_docs/version-v6/angular/storage.md
@@ -0,0 +1,32 @@
+---
+title: Data Storage
+sidebar_label: Storage
+---
+
+<head>
+  <title>Angular App Data Storage Options - Ionic Documentation</title>
+  <meta
+    name="description"
+    content="A variety of options are available for storing data within Ionic apps made using Angular. Read our documentation for Ionic Secure Storage and @ionic/storage."
+  />
+</head>
+
+There are variety of options available for storing data within an Ionic app.
+
+Here are two official Ionic options:
+
+## Ionic Secure Storage
+
+For teams building mission-critical apps or requiring encryption support, [Ionic Secure Storage](https://ionic.io/docs/secure-storage) is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android.
+
+It makes it easy to build high performance, offline-ready Ionic apps across iOS, Android, and the web.
+
+[Learn more](https://ionic.io/products/secure-storage)
+
+## @ionic/storage
+
+For developers not requiring encryption nor relational data support, [@ionic/storage](https://github.com/ionic-team/ionic-storage) is an open source key/value API for building apps that work across storage engines on multiple platforms.
+
+Additionally, Ionic Secure Storage has a driver that works with the key/value API in `@ionic/storage` while providing encryption and SQLite support.
+
+Learn more about [@ionic/storage](https://github.com/ionic-team/ionic-storage)
diff --git a/versioned_docs/version-v6/angular/testing.md b/versioned_docs/version-v6/angular/testing.md
new file mode 100644
index 00000000000..b8aedacd3fe
--- /dev/null
+++ b/versioned_docs/version-v6/angular/testing.md
@@ -0,0 +1,595 @@
+---
+title: Testing
+---
+
+<head>
+  <title>Angular Unit and End-to-End Testing for Ionic App Components</title>
+  <meta
+    name="description"
+    content="Angular apps created using Ionic are automatically set up for unit and end-to-end testing. Read to learn more about testing tools for Ionic components."
+  />
+</head>
+
+When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the <a href="https://angular.io/guide/testing" target="_blank">Angular Testing Guide</a> for detailed information on testing Angular applications.
+
+## Testing Principles
+
+When testing an application, it is best to keep in mind that testing can show if defects are present in a system. However, it is impossible to prove that any non-trivial system is completely free of defects. For this reason, the goal of testing is not to verify that the code is correct but to find problems within the code. This is a subtle but important distinction.
+
+If we set out to prove that the code is correct, we are more likely to stick to the happy path through the code. If we set out to find problems, we are more likely to more fully exercise the code and find the bugs that are lurking there.
+
+It is also best to begin testing an application from the very start. This allows defects to be found early in the process when they are easier to fix. This also allows code to be refactored with confidence as new features are added to the system.
+
+## Unit Testing
+
+Unit tests exercise a single unit of code (component, page, service, pipe, etc) in isolation from the rest of the system. Isolation is achieved through the injection of mock objects in place of the code's dependencies. The mock objects allow the test to have fine-grained control of the outputs of the dependencies. The mocks also allow the test to determine which dependencies have been called and what has been passed to them.
+
+Well-written unit tests are structured such that the unit of code and the features it contains are described via `describe()` callbacks. The requirements for the unit of code and its features are tested via `it()` callbacks. When the descriptions for the `describe()` and `it()` callbacks are read, they make sense as a phrase. When the descriptions for nested `describe()`s and a final `it()` are concatenated together, they form a sentence that fully describes the test case.
+
+Since unit tests exercise the code in isolation, they are fast, robust, and allow for a high degree of code coverage.
+
+### Using Mocks
+
+Unit tests exercise a code module in isolation. To facilitate this, we recommend using Jasmine (https://jasmine.github.io/). Jasmine creates mock objects (which Jasmine calls "spies") to take the place of dependencies while testing. When a mock object is used, the test can control the values returned by calls to that dependency, making the current test independent of changes made to the dependency. This also makes the test setup easier, allowing the test to only be concerned with the code within the module under test.
+
+Using mocks also allows the test to query the mock to determine if it was called and how it was called via the `toHaveBeenCalled*` set of functions. Tests should be as specific as possible with these functions, favoring calls to `toHaveBeenCalledTimes` over calls to `toHaveBeenCalled` when testing that a method has been called. That is `expect(mock.foo).toHaveBeenCalledTimes(1)` is better than `expect(mock.foo).toHaveBeenCalled()`. The opposite advice should be followed when testing that something has not been called (`expect(mock.foo).not.toHaveBeenCalled()`).
+
+There are two common ways to create mock objects in Jasmine. Mock objects can be constructed from scratch using `jasmine.createSpy` and `jasmine.createSpyObj` or spies can be installed onto existing objects using `spyOn()` and `spyOnProperty()`.
+
+#### Using `jasmine.createSpy` and `jasmine.createSpyObj`
+
+`jasmine.createSpyObj` creates a full mock object from scratch with a set of mock methods defined on creation. This is useful in that it is very simple. Nothing needs to be constructed or injected into the test. The disadvantage of using this function is that it allows the creation of objects that may not match the real objects.
+
+`jasmine.createSpy` is similar but it creates a stand-alone mock function.
+
+#### Using `spyOn()` and `spyOnProperty()`
+
+`spyOn()` installs the spy on an existing object. The advantage of using this technique is that if an attempt is made to spy on a method that does not exist on the object, an exception is raised. This prevents the test from mocking methods that do not exist. The disadvantage is that the test needs a fully formed object to begin with, which may increase the amount of test setup required.
+
+`spyOnProperty()` is similar with the difference being that it spies on a property and not a method.
+
+### General Testing Structure
+
+Unit tests are contained in `spec` files with one `spec` file per entity (component, page, service, pipe, etc.). The `spec` files live side-by-side with and are named after the source that they are testing. For example, if the project has a service called WeatherService, the code for it is in a file named `weather.service.ts` with the tests in a file named `weather.service.spec.ts`. Both of those files are in the same folder.
+
+The `spec` files themselves contain a single `describe` call that defines that overall test. Nested within it are other `describe` calls that define major areas of functionality. Each `describe` call can contain setup and teardown code (generally handled via `beforeEach` and `afterEach` calls), more `describe` calls forming a hierarchical breakdown of functionality, and `it` calls which define individual test cases.
+
+The `describe` and `it` calls also contain a descriptive text label. In well-formed tests, the `describe` and `it` calls combine with their labels to perform proper phrases and the full label for each test case, formed by combining the `describe` and `it` labels, creates a full sentence.
+
+For example:
+
+```tsx
+describe('Calculation', () => {
+  describe('divide', () => {
+    it('calculates 4 / 2 properly' () => {});
+    it('cowardly refuses to divide by zero' () => {});
+    ...
+  });
+
+  describe('multiply', () => {
+    ...
+  });
+});
+```
+
+The outer `describe` call states that the `Calculation` service is being tested, the inner `describe` calls state exactly what functionality is being tested, and the `it` calls state what the test cases are. When run the full label for each test case is a sentence that makes sense (Calculation divide cowardly refuses to divide by zero).
+
+### Pages and Components
+
+Pages are just Angular components. Thus, pages and components are both tested using <a href="https://angular.io/guide/testing#component-test-basics">Angular's Component Testing</a> guidelines.
+
+Since pages and components contain both TypeScript code and HTML template markup it is possible to perform both component class testing and component DOM testing. When a page is created, the template test that is generated looks like this:
+
+```tsx
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TabsPage } from './tabs.page';
+
+describe('TabsPage', () => {
+  let component: TabsPage;
+  let fixture: ComponentFixture<TabsPage>;
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [TabsPage],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TabsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+```
+
+When doing component class testing, the component object is accessed using the component object defined via `component = fixture.componentInstance;`. This is an instance of the component class. When doing DOM testing, the `fixture.nativeElement` property is used. This is the actual `HTMLElement` for the component, which allows the test to use standard HTML API methods such as `HTMLElement.querySelector` in order to examine the DOM.
+
+## Services
+
+Services often fall into one of two broad categories: utility services that perform calculations and other operations, and data services that perform primarily HTTP operations and data manipulation.
+
+### Basic Service Testing
+
+The suggested way to test most services is to instantiate the service and manually inject mocks for any dependency the service has. This way, the code can be tested in isolation.
+
+Let's say that there is a service with a method that takes an array of timecards and calculates net pay. Let's also assume that the tax calculations are handled via another service that the current service depends on. This payroll service could be tested as such:
+
+```tsx
+import { PayrollService } from './payroll.service';
+
+describe('PayrollService', () => {
+  let service: PayrollService;
+  let taxServiceSpy;
+
+   beforeEach(() => {
+     taxServiceSpy = jasmine.createSpyObj('TaxService', {
+       federalIncomeTax: 0,
+       stateIncomeTax: 0,
+       socialSecurity: 0,
+       medicare: 0
+     });
+     service = new PayrollService(taxServiceSpy);
+   });
+
+   describe('net pay calculations', () => {
+     ...
+   });
+});
+```
+
+This allows the test to control the values returned by the various tax calculations via mock setup such as `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)`. This allows the "net pay" tests to be independent of the tax calculation logic. When the tax codes change, only the tax service related code and tests need to change. The tests for the net pay can continue to operate as they are since these tests do not care how the tax is calculated, just that the value is applied properly.
+
+The scaffolding that is used when a service is generated via `ionic g service name` uses Angular's testing utilities and sets up a testing module. Doing so is not strictly necessary. That code may be left in, however, allowing the service to be built manually or injected as such:
+
+```tsx
+import { TestBed, inject } from '@angular/core/testing';
+
+import { PayrollService } from './payroll.service';
+import { TaxService } from './tax.service';
+
+describe('PayrolService', () => {
+  let taxServiceSpy;
+
+  beforeEach(() => {
+    taxServiceSpy = jasmine.createSpyObj('TaxService', {
+      federalIncomeTax: 0,
+      stateIncomeTax: 0,
+      socialSecurity: 0,
+      medicare: 0,
+    });
+    TestBed.configureTestingModule({
+      providers: [PayrollService, { provide: TaxService, useValue: taxServiceSpy }],
+    });
+  });
+
+  it('does some test where it is injected', inject([PayrollService], (service: PayrollService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('does some test where it is manually built', () => {
+    const service = new PayrollService(taxServiceSpy);
+    expect(service).toBeTruthy();
+  });
+});
+```
+
+#### Testing HTTP Data Services
+
+Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please see Angular's <a href="https://angular.io/guide/http#testing-http-requests" target="_blank">Angular's Testing HTTP requests</a> guide.
+
+This basic setup for such a test looks like this:
+
+```tsx
+import { HttpBackend, HttpClient } from '@angular/common/http';
+import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing';
+import { TestBed, inject } from '@angular/core/testing';
+
+import { IssTrackingDataService } from './iss-tracking-data.service';
+
+describe('IssTrackingDataService', () => {
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let issTrackingDataService: IssTrackingDataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [IssTrackingDataService],
+    });
+
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    issTrackingDataService = new IssTrackingDataService(httpClient);
+  });
+
+  it('exists', inject([IssTrackingDataService], (service: IssTrackingDataService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  describe('location', () => {
+    it('gets the location of the ISS now', () => {
+      issTrackingDataService.location().subscribe((x) => {
+        expect(x).toEqual({ longitude: -138.1719, latitude: 44.4423 });
+      });
+      const req = httpTestingController.expectOne('http://api.open-notify.org/iss-now.json');
+      expect(req.request.method).toEqual('GET');
+      req.flush({
+        iss_position: { longitude: '-138.1719', latitude: '44.4423' },
+        timestamp: 1525950644,
+        message: 'success',
+      });
+      httpTestingController.verify();
+    });
+  });
+});
+```
+
+### Pipes
+
+A pipe is like a service with a specifically defined interface. It is a class that contains one public method, `transform`, which manipulates the input value (and other optional arguments) in order to create the output that is rendered on the page. To test a pipe: instantiate the pipe, call the transform method, and verify the results.
+
+As a simple example, let's look at a pipe that takes a `Person` object and formats the name. For the sake of simplicity, let's say a `Person` consists of an `id`, `firstName`, `lastName`, and `middleInitial`. The requirements for the pipe are to print the name as "Last, First M." handling situations where a first name, last name, or middle initial do not exist. Such a test might look like this:
+
+```tsx
+import { NamePipe } from './name.pipe';
+
+import { Person } from '../../models/person';
+
+describe('NamePipe', () => {
+  let pipe: NamePipe;
+  let testPerson: Person;
+
+  beforeEach(() => {
+    pipe = new NamePipe();
+    testPerson = {
+      id: 42,
+      firstName: 'Douglas',
+      lastName: 'Adams',
+      middleInitial: 'N',
+    };
+  });
+
+  it('exists', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('formats a full name properly', () => {
+    expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas N.');
+  });
+
+  it('handles having no middle initial', () => {
+    delete testPerson.middleInitial;
+    expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas');
+  });
+
+  it('handles having no first name', () => {
+    delete testPerson.firstName;
+    expect(pipe.transform(testPerson)).toBeEqual('Adams N.');
+  });
+
+  it('handles having no last name', () => {
+    delete testPerson.lastName;
+    expect(pipe.transform(testPerson)).toBeEqual('Douglas N.');
+  });
+});
+```
+
+It is also beneficial to exercise the pipe via DOM testing in the components and pages that utilize the pipe.
+
+## End-to-end Testing
+
+End-to-end testing is used to verify that an application works as a whole and often includes a connection to live data. Whereas unit tests focus on code units in isolation and thus allow for low-level testing of the application logic, end-to-end tests focus on various user stories or usage scenarios, providing high-level testing of the overall flow of data through the application. Whereas unit tests try to uncover problems with an application's logic, end-to-end tests try to uncover problems that occur when those individual units are used together. End-to-end tests uncover problems with the overall architecture of the application.
+
+Since end-to-end tests exercise user stories and cover the application as a whole rather than individual code modules, end-to-end tests exist in their own application in the project apart from the code for the main application itself. Most end-to-end tests operate by automating common user interactions with the application and examining the DOM to determine the results of those interactions.
+
+### Test Structure
+
+When an `@ionic/angular` application is generated, a default end-to-end test application is generated in the `e2e` folder. This application uses <a href="">Protractor</a> to control the browser and <a href="">Jasmine</a> to structure and execute the tests. The application initially consists of four files:
+
+- `protractor.conf.js` - the Protractor configuration file
+- `tsconfig.e2e.json` - specific TypeScript configuration for the testing application
+- `src/app.po.ts` - a page object containing methods that navigate the application, query elements in the DOM, and maninpulate elements on the page
+- `src/app.e2e-spec.ts` - a testing script
+
+#### Page Objects
+
+End-to-end tests operate by automating common user interactions with the application, waiting for the application to respond, and examining the DOM to determine the results of the interaction. This involves a lot of DOM manipulation and examination. If this were all done manually, the tests would be very brittle and difficult to read and maintain.
+
+Page objects encapsulate the HTML for a single page in a TypeScript class, providing an API that the test scripts use to interact with the application. The encapsulation of the DOM manipulation logic in page objects makes the tests more readable and far easier to reason about, lowering the maintenance costs of the test. Creating well-crafted page objects is the key to creating high quality and maintainable end-to-end tests.
+
+##### Base Page Object
+
+A lot of tests rely on actions such as waiting for a page to be visible, entering text into an input, and clicking a button. The methods used to do this remain consistent with only the CSS selectors used to get the appropriate DOM element changing. Therefore it makes sense to abstract this logic into a base class that can be used by the other page objects.
+
+Here is an example that implements a few basic methods that all page objects will need to support.
+
+```tsx
+import { browser, by, element, ExpectedConditions } from 'protractor';
+
+export class PageObjectBase {
+  private path: string;
+  protected tag: string;
+
+  constructor(tag: string, path: string) {
+    this.tag = tag;
+    this.path = path;
+  }
+
+  load() {
+    return browser.get(this.path);
+  }
+
+  rootElement() {
+    return element(by.css(this.tag));
+  }
+
+  waitUntilInvisible() {
+    browser.wait(ExpectedConditions.invisibilityOf(this.rootElement()), 3000);
+  }
+
+  waitUntilPresent() {
+    browser.wait(ExpectedConditions.presenceOf(this.rootElement()), 3000);
+  }
+
+  waitUntilNotPresent() {
+    browser.wait(ExpectedConditions.not(ExpectedConditions.presenceOf(this.rootElement())), 3000);
+  }
+
+  waitUntilVisible() {
+    browser.wait(ExpectedConditions.visibilityOf(this.rootElement()), 3000);
+  }
+
+  getTitle() {
+    return element(by.css(`${this.tag} ion-title`)).getText();
+  }
+
+  protected enterInputText(sel: string, text: string) {
+    const el = element(by.css(`${this.tag} ${sel}`));
+    const inp = el.element(by.css('input'));
+    inp.sendKeys(text);
+  }
+
+  protected enterTextareaText(sel: string, text: string) {
+    const el = element(by.css(`${this.tag} ${sel}`));
+    const inp = el.element(by.css('textarea'));
+    inp.sendKeys(text);
+  }
+
+  protected clickButton(sel: string) {
+    const el = element(by.css(`${this.tag} ${sel}`));
+    browser.wait(ExpectedConditions.elementToBeClickable(el));
+    el.click();
+  }
+}
+```
+
+##### Per-Page Abstractions
+
+Each page in the application will have its own page object class that abstracts the elements on that page. If a base page object class is used, creating the page object involves mostly creating custom methods for elements that are specific to that page. Often, these custom elements take advantage of methods in the base class in order to perform the work that is required.
+
+Here is an example page object for a simple but typical login page. Notice that many of the methods, such as `enterEMail()`, call methods in the base class that perform the bulk of the work.
+
+```tsx
+import { browser, by, element, ExpectedConditions } from 'protractor';
+import { PageObjectBase } from './base.po';
+
+export class LoginPage extends PageObjectBase {
+  constructor() {
+    super('app-login', '/login');
+  }
+
+  waitForError() {
+    browser.wait(ExpectedConditions.presenceOf(element(by.css('.error'))), 3000);
+  }
+
+  getErrorMessage() {
+    return element(by.css('.error')).getText();
+  }
+
+  enterEMail(email: string) {
+    this.enterInputText('#email-input', email);
+  }
+
+  enterPassword(password: string) {
+    this.enterInputText('#password-input', password);
+  }
+
+  clickSignIn() {
+    this.clickButton('#signin-button');
+  }
+}
+```
+
+#### Testing Scripts
+
+Similar to unit tests, end-to-end test scripts consist of nested `describe()` and `it()` functions. In the case of end-to-end tests, the `describe()` functions generally denote specific scenarios with the `it()` functions denoting specific behaviors that should be exhibited by the application as actions are performed within that scenario.
+
+Also similar to unit tests, the labels used in the `describe()` and `it()` functions should make sense both with the "describe" or "it" and when concatenated together to form the complete test case.
+
+Here is a sample end-to-end test script that exercises some typical login scenarios.
+
+```tsx
+import { AppPage } from '../page-objects/pages/app.po';
+import { AboutPage } from '../page-objects/pages/about.po';
+import { CustomersPage } from '../page-objects/pages/customers.po';
+import { LoginPage } from '../page-objects/pages/login.po';
+import { MenuPage } from '../page-objects/pages/menu.po';
+import { TasksPage } from '../page-objects/pages/tasks.po';
+
+describe('Login', () => {
+  const about = new AboutPage();
+  const app = new AppPage();
+  const customers = new CustomersPage();
+  const login = new LoginPage();
+  const menu = new MenuPage();
+  const tasks = new TasksPage();
+
+  beforeEach(() => {
+    app.load();
+  });
+
+  describe('before logged in', () => {
+    it('displays the login screen', () => {
+      expect(login.rootElement().isDisplayed()).toEqual(true);
+    });
+
+    it('allows in-app navigation to about', () => {
+      menu.clickAbout();
+      about.waitUntilVisible();
+      login.waitUntilInvisible();
+    });
+
+    it('does not allow in-app navigation to tasks', () => {
+      menu.clickTasks();
+      app.waitForPageNavigation();
+      expect(login.rootElement().isDisplayed()).toEqual(true);
+    });
+
+    it('does not allow in-app navigation to customers', () => {
+      menu.clickCustomers();
+      app.waitForPageNavigation();
+      expect(login.rootElement().isDisplayed()).toEqual(true);
+    });
+
+    it('displays an error message if the login fails', () => {
+      login.enterEMail('test@test.com');
+      login.enterPassword('bogus');
+      login.clickSignIn();
+      login.waitForError();
+      expect(login.getErrorMessage()).toEqual('The password is invalid or the user does not have a password.');
+    });
+
+    it('navigates to the tasks page if the login succeeds', () => {
+      login.enterEMail('test@test.com');
+      login.enterPassword('testtest');
+      login.clickSignIn();
+      tasks.waitUntilVisible();
+    });
+  });
+
+  describe('once logged in', () => {
+    beforeEach(() => {
+      tasks.waitUntilVisible();
+    });
+
+    it('allows navigation to the customers page', () => {
+      menu.clickCustomers();
+      customers.waitUntilVisible();
+      tasks.waitUntilInvisible();
+    });
+
+    it('allows navigation to the about page', () => {
+      menu.clickAbout();
+      about.waitUntilVisible();
+      tasks.waitUntilInvisible();
+    });
+
+    it('allows navigation back to the tasks page', () => {
+      menu.clickAbout();
+      tasks.waitUntilInvisible();
+      menu.clickTasks();
+      tasks.waitUntilVisible();
+    });
+  });
+});
+```
+
+### Configuration
+
+The default configuration uses the same `environment.ts` file that is used for development. In order to provide better control over the data used by the end-to-end tests, it is often useful to create a specific environment for testing and use that environment for the tests. This section shows one possible way to create this configuration.
+
+#### Testing Environment
+
+Setting up a testing environment involves creating a new environment file that uses a dedicated testing backend, updating the `angular.json` file to use that environment, and modifying the `e2e` script in the `package.json` to specify the `test` environment.
+
+##### Create the `environment.e2e.ts` File
+
+The Angular `environment.ts` and `environment.prod.ts` files are often used to store information such as the base URL for the application's backend data services. Create an `environment.e2e.ts` that provides the same information, only connecting to backend services that are dedicated to testing rather than the development or production backend services. Here is an example:
+
+```tsx
+export const environment = {
+  production: false,
+  databaseURL: 'https://e2e-test-api.my-great-app.com',
+  projectId: 'my-great-app-e2e',
+};
+```
+
+##### Modify the `angular.json` File
+
+The `angular.json` file needs to be modified to use this file. This is a layered process. Follow the XPaths listed below to add the configuration that is required.
+
+Add a configuration at `/projects/app/architect/build/configurations` called `test` that does the file replacement:
+
+```json
+"test": {
+  "fileReplacements": [
+    {
+      "replace": "src/environments/environment.ts",
+      "with": "src/environments/environment.e2e.ts"
+    }
+  ]
+}
+```
+
+Add a configuration at `/projects/app/architect/serve/configurations` called `test` that points the browser target at the `test` build configuration that was defined above.
+
+```json
+"test": {
+  "browserTarget": "app:build:test"
+}
+```
+
+Add a configuration at `/projects/app-e2e/architect/e2e/configurations` called `test` that does points the dev server target at the `test` serve configuration defined above.
+
+```json
+"test": {
+  "devServerTarget": "app:serve:test"
+}
+```
+
+##### Modify the `package.json` File
+
+Modify the `package.json` file so that `npm run e2e` uses the `test` configuration.
+
+```json
+"scripts": {
+  "e2e": "ng e2e --configuration=test",
+  "lint": "ng lint",
+  "ng": "ng",
+  "start": "ng serve",
+  "test": "ng test",
+  "test:dev": "ng test --browsers=ChromeHeadlessCI",
+  "test:ci": "ng test --no-watch --browsers=ChromeHeadlessCI"
+},
+```
+
+#### Test Cleanup
+
+If the end-to-end tests modify data in any way it is helpful to reset the data to a known state once the test completes. One way to do that is to:
+
+1. Create an endpoint that performs the cleanup.
+1. Add a `onCleanUp()` function to the `config` object exported by the `protractor.conf.js` file.
+
+Here is an example:
+
+```javascript
+onCleanUp() {
+  const axios = require('axios');
+  return axios
+    .post(
+      'https://e2e-test-api.my-great-app.com/purgeDatabase',
+      {}
+    )
+    .then(res => {
+      console.log(res.data);
+    })
+    .catch(err => console.log(err));
+}
+```
diff --git a/versioned_docs/version-v6/angular/virtual-scroll.md b/versioned_docs/version-v6/angular/virtual-scroll.md
new file mode 100644
index 00000000000..634821b18f6
--- /dev/null
+++ b/versioned_docs/version-v6/angular/virtual-scroll.md
@@ -0,0 +1,133 @@
+# Virtual Scroll
+
+:::caution Looking for `ion-virtual-scroll`?
+
+`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below.
+
+:::
+
+## Installation
+
+To setup the CDK Scroller, first install `@angular/cdk`:
+
+```shell
+npm add @angular/cdk
+```
+
+This provides a collection of different utilities, but we'll focus on `ScrollingModule` for now.
+
+When we want to use the CDK Scroller, we'll need to import the module in our component. For example, in a tabs starter project, we can add our import to the `tabs1.module.ts` file.
+
+```diff
+  import { IonicModule } from '@ionic/angular';
+  import { NgModule } from '@angular/core';
+  import { CommonModule } from '@angular/common';
+  import { FormsModule } from '@angular/forms';
+  import { Tab1Page } from './tab1.page';
+  import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
++ import { ScrollingModule } from '@angular/cdk/scrolling';
+  import { Tab1PageRoutingModule } from './tab1-routing.module';
+  @NgModule({
+    imports: [
+      IonicModule,
+      CommonModule,
+      FormsModule,
+      ExploreContainerComponentModule,
+      Tab1PageRoutingModule,
++     ScrollingModule
+    ],
+    declarations: [Tab1Page]
+  })
+  export class Tab1PageModule {}
+```
+
+With this added, we have access to the Virtual Scroller in the Tab1Page component.
+
+## Usage
+
+The CDK Virtual Scroller can be added to a component by adding the `cdk-virtual-scroll-viewport` to a component's template.
+
+```html
+<ion-content>
+  <cdk-virtual-scroll-viewport> </cdk-virtual-scroll-viewport>
+</ion-content>
+```
+
+`cdk-virtual-scroll-viewport` becomes the root of our scrollable content and is responsible for recycling DOM nodes as they scroll out of view.
+
+The DOM nodes at this point can be any content needed for an app. The difference is that when we want to iterate over a collection, `*cdkVirtualFor` is used instead of `*ngFor`.
+
+```html
+<ion-content>
+  <cdk-virtual-scroll-viewport>
+    <ion-list>
+      <ion-item *cdkVirtualFor="let item of items">
+        <ion-avatar slot="start">
+          <img src="https://loremflickr.com/40/40" />
+        </ion-avatar>
+        <ion-label> {{item }} </ion-label>
+      </ion-item>
+    </ion-list>
+  </cdk-virtual-scroll-viewport>
+</ion-content>
+```
+
+Here, `items` is an array, but it can be an array, `Observable<Array>`, or `DataSource`. `DataSource` is an abstract class that can provide the data needed as well as utility methods. For more details, check out the [CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview).
+
+The component is not complete yet as the `cdk-virtual-scroll-viewport` needs to know how big each node will be as well as the min/max buffer sizes.
+
+At the moment, CDK Virtual Scroller only supports fixed sized elements, but dynamic sized elements are planned for the future. For the `Tab1Page` component, since it is only rendering an item, it can be hard-coded to a fixed size.
+
+The min/max buffer size tells the scroller "render as many nodes as it takes to meet this minimum height, but not over this".
+
+```html
+<cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350"></cdk-virtual-scroll-viewport>
+```
+
+For this case, the `cdk-virtual-scroll-viewport` will render cells at a height 56px until it reaches a height of 900px, but no more at 1350px. These numbers are arbitrary, so be sure to test out what values will work in a real use case.
+
+Putting everything together, the final HTML should look like:
+
+```html
+<ion-content>
+  <cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350">
+    <ion-list>
+      <ion-item *cdkVirtualFor="let item of items">
+        <ion-avatar slot="start">
+          <img src="https://loremflickr.com/40/40" />
+        </ion-avatar>
+        <ion-label> {{item }} </ion-label>
+      </ion-item>
+    </ion-list>
+  </cdk-virtual-scroll-viewport>
+</ion-content>
+```
+
+The last piece needed is a some CSS to size the viewport correctly. In the `tab1.page.scss` file, add the following
+
+```scss
+cdk-virtual-scroll-viewport {
+  height: 100%;
+  width: 100%;
+}
+```
+
+Since the viewport is built to fit various use cases, the default sizing is not set and is up to developers to set.
+
+## Usage with Ionic Components
+
+Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport.
+
+For example:
+
+```html
+<ion-content [scrollY]="false">
+  <cdk-virtual-scroll-viewport class="ion-content-scroll-host">
+    <!-- Your existing content and configurations -->
+  </cdk-virtual-scroll-viewport>
+</ion-content>
+```
+
+## Further Reading
+
+This only covers a small portion of what the CDK Virtual Scroller is capable of. For more details, please see the [Angular CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview).
diff --git a/versioned_docs/version-v6/angular/your-first-app.md b/versioned_docs/version-v6/angular/your-first-app.md
new file mode 100644
index 00000000000..3a6f63286ef
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app.md
@@ -0,0 +1,176 @@
+---
+title: 'Your First Ionic App: Angular'
+sidebar_label: Build Your First App
+---
+
+<head>
+  <title>Build Your First Ionic Mobile App: Angular Development Tutorial</title>
+  <meta
+    name="description"
+    content="Ionic's single codebase builds for any platform using just HTML, CSS, & JavaScript. Develop your first mobile app with our step-by-step Angular tutorial."
+  />
+</head>
+
+The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
+
+Here’s the finished app running on all 3 platforms:
+
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+></iframe>
+
+:::note
+Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.md)
+:::
+
+## What We'll Build
+
+We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device.
+
+Highlights include:
+
+- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
+- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
+
+Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng).
+
+## Download Required Tools
+
+Download and install these right away to ensure an optimal Ionic development experience:
+
+- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
+- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
+- **Command-line interface/terminal (CLI)**:
+  - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell
+    CLI, running in Administrator mode.
+  - **Mac/Linux** users, virtually any terminal will work.
+
+## Install Ionic Tooling
+
+Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens:
+
+:::note
+To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
+:::
+
+```shell
+npm install -g @ionic/cli native-run cordova-res
+```
+
+:::note
+The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
+
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+:::
+
+## Create an App
+
+Next, create an Ionic Angular app that uses the “Tabs” starter template and adds Capacitor for native functionality:
+
+```shell
+ionic start photo-gallery tabs --type=angular --capacitor
+```
+
+This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
+
+Next, change into the app folder:
+
+```shell
+cd photo-gallery
+```
+
+Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
+
+```shell
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
+```
+
+### PWA Elements
+
+Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/ionic-pwa-elements).
+
+It's a separate dependency, so install it next:
+
+```shell
+npm install @ionic/pwa-elements
+```
+
+Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
+
+```tsx
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
+
+// Call the element loader after the platform has been bootstrapped
+defineCustomElements(window);
+```
+
+That’s it! Now for the fun part - let’s see the app in action.
+
+## Run the App
+
+Run this command next:
+
+```shell
+ionic serve
+```
+
+And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.
+
+## Photo Gallery!!!
+
+There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
+
+![Before and after going through this tutorial](/img/guides/first-app-cap-ng/email-photogallery.gif)
+
+Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
+
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 2</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tab 2</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>
+```
+
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](https://ionicframework.com/docs/api/title#collapsible-large-titles) support). Rename both `ion-title` elements to:
+
+```html
+<ion-title>Photo Gallery</ion-title>
+```
+
+We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB) to the bottom of the page and set the camera image as the icon.
+
+```html
+<ion-content>
+  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="camera"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+</ion-content>
+```
+
+Next, open `src/app/tabs/tabs.page.html`. Change the label to “Photos” and the icon name to “images”:
+
+```html
+<ion-tab-button tab="tab2">
+  <ion-icon name="images"></ion-icon>
+  <ion-label>Photos</ion-label>
+</ion-tab-button>
+```
+
+Save all changes to see them automatically applied in the browser. That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.
diff --git a/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md
new file mode 100644
index 00000000000..73b6d20533f
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md
@@ -0,0 +1,134 @@
+---
+title: Taking Photos with the Camera
+sidebar_label: Taking Photos
+---
+
+<head>
+  <title>Build Camera API for iOS, Android & Web | Ionic Capacitor Camera</title>
+  <meta
+    name="description"
+    content="Add the ability to take photos with your device's camera using the Ionic Capacitor Camera API for mobile iOS, Android, and the web. Learn how here."
+  />
+</head>
+
+Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
+
+## Photo Service
+
+All Capacitor logic (Camera usage and other native features) will be encapsulated in a service class. Create `PhotoService` using the `ionic generate` command:
+
+```shell
+ionic g service services/photo
+```
+
+Open the new `services/photo.service.ts` file, and let’s add the logic that will power the camera functionality. First, import Capacitor dependencies and get references to the Camera, Filesystem, and Storage plugins:
+
+```tsx
+import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
+import { Filesystem, Directory } from '@capacitor/filesystem';
+import { Preferences } from '@capacitor/preferences';
+```
+
+Next, define a new class method, `addNewToGallery`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera:
+
+```tsx
+public async addNewToGallery() {
+  // Take a photo
+  const capturedPhoto = await Camera.getPhoto({
+    resultType: CameraResultType.Uri,
+    source: CameraSource.Camera,
+    quality: 100
+  });
+}
+```
+
+Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `Camera.getPhoto()` - that will open up the device's camera and allow us to take photos.
+
+Next, open up `tab2.page.ts` and import the PhotoService class and add a method that calls the `addNewToGallery` method on the imported service:
+
+```tsx
+import { PhotoService } from '../services/photo.service';
+
+constructor(public photoService: PhotoService) { }
+
+addPhotoToGallery() {
+  this.photoService.addNewToGallery();
+}
+```
+
+Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the FAB is tapped/clicked:
+
+```html
+<ion-content>
+  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
+    <ion-fab-button (click)="addPhotoToGallery()">
+      <ion-icon name="camera"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+</ion-content>
+```
+
+Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
+
+![Camera API on the web](/img/guides/first-app-cap-ng/camera-web.png)
+
+_(Your selfie is probably much better than mine)_
+
+After taking a photo, it disappears right away. We need to display it within our app and save it for future access.
+
+## Displaying Photos
+
+Outside of the `PhotoService` class definition (the very bottom of the file), create a new interface, `UserPhoto`, to hold our photo metadata:
+
+```tsx
+export interface UserPhoto {
+  filepath: string;
+  webviewPath: string;
+}
+```
+
+Back at the top of the file, define an array of Photos, which will contain a reference to each photo captured with the Camera.
+
+```tsx
+export class PhotoService {
+  public photos: UserPhoto[] = [];
+
+  // other code
+}
+```
+
+Over in the `addNewToGallery` function, add the newly captured photo to the beginning of the Photos array.
+
+```tsx
+  const capturedPhoto = await Camera.getPhoto({
+    resultType: CameraResultType.Uri,
+    source: CameraSource.Camera,
+    quality: 100
+  });
+
+  this.photos.unshift({
+    filepath: "soon...",
+    webviewPath: capturedPhoto.webPath
+  });
+}
+```
+
+Next, move over to `tab2.page.html` so we can display the image on the screen. Add a [Grid component](https://ionicframework.com/docs/api/grid) so that each photo will display nicely as photos are added to the gallery, and loop through each photo in the `PhotoServices`'s Photos array, adding an Image component (`<ion-img>`) for each. Point the `src` (source) at the photo’s path:
+
+```html
+<ion-content>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
+        <ion-img [src]="photo.webviewPath"></ion-img>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <!-- ion-fab markup  -->
+</ion-content>
+```
+
+Save all files. Within the web browser, click the Camera button and take another photo. This time, the photo is displayed in the Photo Gallery!
+
+Up next, we’ll add support for saving the photos to the filesystem, so they can be retrieved and displayed in our app at a later time.
diff --git a/versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md
new file mode 100644
index 00000000000..27109d61432
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md
@@ -0,0 +1,81 @@
+---
+sidebar_label: Saving Photos
+---
+
+# Saving Photos to the Filesystem
+
+We’re now able to take multiple photos and display them in a photo gallery on the second tab of our app. These photos, however, are not currently being stored permanently, so when the app is closed, they will be deleted.
+
+## Filesystem API
+
+Fortunately, saving them to the filesystem only takes a few steps. Begin by creating a new class method, `savePicture()`, in the `PhotoService` class (`src/app/services/photo.service.ts`). We pass in the `photo` object, which represents the newly captured device photo:
+
+```tsx
+private async savePicture(photo: Photo) { }
+```
+
+We can use this new method immediately in `addNewToGallery()`:
+
+```tsx
+public async addNewToGallery() {
+  // Take a photo
+  const capturedPhoto = await Camera.getPhoto({
+    resultType: CameraResultType.Uri, // file-based data; provides best performance
+    source: CameraSource.Camera, // automatically take a new photo with the camera
+    quality: 100 // highest quality (0 to 100)
+  });
+
+  // Save the picture and add it to photo collection
+  const savedImageFile = await this.savePicture(capturedPhoto);
+  this.photos.unshift(savedImageFile);
+}
+```
+
+We’ll use the Capacitor [Filesystem API](https://capacitorjs.com/docs/apis/filesystem) to save the photo to the filesystem. To start, convert the photo to base64 format, then feed the data to the Filesystem’s `writeFile` function. As you’ll recall, we display each photo on the screen by setting each image’s source path (`src` attribute) in `tab2.page.html` to the webviewPath property. So, set it then return the new Photo object.
+
+```tsx
+private async savePicture(photo: Photo) {
+  // Convert photo to base64 format, required by Filesystem API to save
+  const base64Data = await this.readAsBase64(photo);
+
+  // Write the file to the data directory
+  const fileName = new Date().getTime() + '.jpeg';
+  const savedFile = await Filesystem.writeFile({
+    path: fileName,
+    data: base64Data,
+    directory: Directory.Data
+  });
+
+  // Use webPath to display the new image instead of base64 since it's
+  // already loaded into memory
+  return {
+    filepath: fileName,
+    webviewPath: photo.webPath
+  };
+}
+```
+
+`readAsBase64()` is a helper function we’ll define next. It's useful to organize via a separate method since it requires a small amount of platform-specific (web vs. mobile) logic - more on that in a bit. For now, implement the logic for running on the web:
+
+```tsx
+private async readAsBase64(photo: Photo) {
+  // Fetch the photo, read as a blob, then convert to base64 format
+  const response = await fetch(photo.webPath!);
+  const blob = await response.blob();
+
+  return await this.convertBlobToBase64(blob) as string;
+}
+
+private convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onerror = reject;
+  reader.onload = () => {
+      resolve(reader.result);
+  };
+  reader.readAsDataURL(blob);
+});
+```
+
+Obtaining the camera photo as base64 format on the web appears to be a bit trickier than on mobile. In reality, we’re just using built-in web APIs: [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) as a neat way to read the file into blob format, then FileReader’s [readAsDataURL()](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) to convert the photo blob to base64.
+
+There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem.
diff --git a/versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md
new file mode 100644
index 00000000000..1e6896557cf
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md
@@ -0,0 +1,69 @@
+---
+sidebar_label: Loading Photos
+---
+
+# Loading Photos from the Filesystem
+
+We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
+
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitorjs.com/docs/apis/preferences) to store our array of Photos in a key-value store.
+
+## Preferences API
+
+Begin by defining a constant variable that will act as the key for the store:
+
+```tsx
+export class PhotoService {
+  public photos: UserPhoto[] = [];
+  private PHOTO_STORAGE: string = 'photos';
+
+  // other code
+}
+```
+
+Next, at the end of the `addNewToGallery` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
+
+```tsx
+Preferences.set({
+  key: this.PHOTO_STORAGE,
+  value: JSON.stringify(this.photos),
+});
+```
+
+With the photo array data saved, create a function called `loadSaved()` that can retrieve that data. We use the same key to retrieve the photos array in JSON format, then parse it into an array:
+
+```tsx
+public async loadSaved() {
+  // Retrieve cached photo array data
+  const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
+  this.photos = JSON.parse(photoList.value) || [];
+
+  // more to come...
+}
+```
+
+On mobile (coming up next!), we can directly set the source of an image tag - `<img src="x" />` - to each photo file on the Filesystem, displaying them automatically. On the web, however, we must read each image from the Filesystem into base64 format, using a new `base64` property on the `Photo` object. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Below is the code you need to add in the `loadSaved()` function you just added:
+
+```tsx
+// Display the photo by reading into base64 format
+for (let photo of this.photos) {
+  // Read each saved photo's data from the Filesystem
+  const readFile = await Filesystem.readFile({
+    path: photo.filepath,
+    directory: Directory.Data,
+  });
+
+  // Web platform only: Load the photo as base64 data
+  photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
+}
+```
+
+After, call this new method in `tab2.page.ts` so that when the user first navigates to Tab 2 (the Photo Gallery), all photos are loaded and displayed on the screen.
+
+```tsx
+async ngOnInit() {
+  await this.photoService.loadSaved();
+}
+```
+
+That’s it! We’ve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, we’ll transform it into a mobile app for iOS and Android!
diff --git a/versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md
new file mode 100644
index 00000000000..72ef3429132
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md
@@ -0,0 +1,117 @@
+---
+strip_number_prefixes: false
+---
+
+# Adding Mobile
+
+Our photo gallery app won’t be complete until it runs on iOS, Android, and the web - all using one codebase. All it takes is some small logic changes to support mobile platforms, installing some native tooling, then running the app on a device. Let’s go!
+
+## Import Platform API
+
+Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
+
+Import the Ionic [Platform API](https://ionicframework.com/docs/angular/platform) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile):
+
+```tsx
+import { Platform } from '@ionic/angular';
+
+export class PhotoService {
+  public photos: UserPhoto[] = [];
+  private PHOTO_STORAGE: string = 'photos';
+  private platform: Platform;
+
+  constructor(platform: Platform) {
+    this.platform = platform;
+  }
+
+  // other code
+}
+```
+
+## Platform-specific Logic
+
+First, we’ll update the photo saving functionality to support mobile. In the `readAsBase64()` function, check which platform the app is running on. If it’s “hybrid” (Capacitor or Cordova, two native runtimes), then read the photo file into base64 format using the Filesystem `readFile()` method. Otherwise, use the same logic as before when running the app on the web:
+
+```tsx
+private async readAsBase64(photo: Photo) {
+  // "hybrid" will detect Cordova or Capacitor
+  if (this.platform.is('hybrid')) {
+    // Read the file into base64 format
+    const file = await Filesystem.readFile({
+      path: photo.path
+    });
+
+    return file.data;
+  }
+  else {
+    // Fetch the photo, read as a blob, then convert to base64 format
+    const response = await fetch(photo.webPath);
+    const blob = await response.blob();
+
+    return await this.convertBlobToBase64(blob) as string;
+  }
+}
+```
+
+Next, update the `savePicture()` method. When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details here](https://ionicframework.com/docs/core-concepts/webview#file-protocol)).
+
+```tsx
+// Save picture to file on device
+  private async savePicture(photo: Photo) {
+    // Convert photo to base64 format, required by Filesystem API to save
+    const base64Data = await this.readAsBase64(photo);
+
+    // Write the file to the data directory
+    const fileName = new Date().getTime() + '.jpeg';
+    const savedFile = await Filesystem.writeFile({
+      path: fileName,
+      data: base64Data,
+      directory: Directory.Data
+    });
+
+    if (this.platform.is('hybrid')) {
+      // Display the new image by rewriting the 'file://' path to HTTP
+      // Details: https://ionicframework.com/docs/building/webview#file-protocol
+      return {
+        filepath: savedFile.uri,
+        webviewPath: Capacitor.convertFileSrc(savedFile.uri),
+      };
+    }
+    else {
+      // Use webPath to display the new image instead of base64 since it's
+      // already loaded into memory
+      return {
+        filepath: fileName,
+        webviewPath: photo.webPath
+      };
+    }
+  }
+```
+
+Next, head back over to the `loadSaved()` function we implemented for the web earlier. On mobile, we can directly set the source of an image tag - `<img src="x" />` - to each photo file on the Filesystem, displaying them automatically. Thus, only the web requires reading each image from the Filesystem into base64 format. Update this function to add an _if statement_ around the Filesystem code:
+
+```tsx
+public async loadSaved() {
+  // Retrieve cached photo array data
+  const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
+  this.photos = JSON.parse(photoList.value) || [];
+
+  // Easiest way to detect when running on the web:
+  // “when the platform is NOT hybrid, do this”
+  if (!this.platform.is('hybrid')) {
+    // Display the photo by reading into base64 format
+    for (let photo of this.photos) {
+      // Read each saved photo's data from the Filesystem
+      const readFile = await Filesystem.readFile({
+          path: photo.filepath,
+          directory: Directory.Data
+      });
+
+      // Web platform only: Load the photo as base64 data
+      photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
+    }
+  }
+}
+```
+
+Our Photo Gallery now consists of one codebase that runs on the web, Android, and iOS. Next up, the part you’ve been waiting for - deploying the app to a device.
diff --git a/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md
new file mode 100644
index 00000000000..e30d8acd79d
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md
@@ -0,0 +1,114 @@
+---
+title: Deploying to iOS and Android
+sidebar_label: Deploying Mobile
+---
+
+<head>
+  <title>Deploying to iOS and Android Apps - Capacitor Setup on Ionic</title>
+  <meta
+    name="description"
+    content="Deploying to iOS and Android is easy with Capacitor setup for Ionic Framework apps. Read to learn more about deployment in our Ionic Documentation."
+  />
+</head>
+
+Since we added Capacitor to our project when it was first created, there’s only a handful of steps remaining until the Photo Gallery app is on our device! Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/photo-gallery-capacitor-ng).
+
+## Capacitor Setup
+
+Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova).
+
+If you’re still running `ionic serve` in the terminal, cancel it. Complete a fresh build of your Ionic project, fixing any errors that it reports:
+
+```shell
+ionic build
+```
+
+Next, create both the iOS and Android projects:
+
+```shell
+$ ionic cap add ios
+$ ionic cap add android
+```
+
+Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.).
+
+Every time you perform a build (e.g. `ionic build`) that updates your web directory (default: `www`), you'll need to copy those changes into your native projects:
+
+```shell
+ionic cap copy
+```
+
+Note: After making updates to the native portion of the code (such as adding a new plugin), use the `sync` command:
+
+```shell
+ionic cap sync
+```
+
+## iOS Deployment
+
+:::note
+To build an iOS app, you’ll need a Mac computer.
+:::
+
+Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by [CocoaPods](https://cocoapods.org/). Before running this app on an iOS device, there's a couple of steps to complete.
+
+First, run the Capacitor `open` command, which opens the native iOS project in Xcode:
+
+```shell
+ionic cap open ios
+```
+
+In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+
+![Xcode Custom iOS Target Properties](/img/guides/first-app-cap-ng/xcode-info-plist.png)
+
+Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
+
+Add the `NSCameraUsageDescription` Key and set the Value to something that describes why the app needs to use the camera, such as "To Take Photos." The Value field is displayed to the app user when the permission prompt opens.
+
+Follow the same process to add the other two Keys required of the Camera plugin: `NSPhotoLibraryAddUsageDescription` and `NSPhotoLibraryUsageDescription`.
+
+Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
+
+![Xcode - Selecting Development Team](/img/guides/first-app-cap-ng/xcode-signing.png)
+
+With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
+
+![Xcode build button](/img/guides/first-app-cap-ng/xcode-build-button.png)
+
+Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
+
+![iOS Camera permissions](/img/guides/first-app-cap-ng/ios-permissions-photo.png)
+
+## Android Deployment
+
+Capacitor Android apps are configured and managed through Android Studio. Before running this app on an Android device, there's a couple of steps to complete.
+
+First, run the Capacitor `open` command, which opens the native Android project in Android Studio:
+
+```shell
+ionic cap open android
+```
+
+Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
+
+![Android Manifest location](/img/guides/first-app-cap-ng/android-manifest.png)
+
+Scroll to the `Permissions` section and ensure these entries are included:
+
+```xml
+<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+```
+
+Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
+
+![Launching app on Android](/img/guides/first-app-cap-ng/android-device.png)
+
+Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
+
+![Android Camera permissions](/img/guides/first-app-cap-ng/android-permissions-photo.png)
+
+Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
+
+In the next portion of this tutorial, we’ll use the Ionic CLI’s Live Reload functionality to quickly implement photo deletion - thus completing our Photo Gallery feature.
diff --git a/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md
new file mode 100644
index 00000000000..26fe3b4fbf0
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md
@@ -0,0 +1,114 @@
+---
+title: Rapid App Development with Live Reload
+sidebar_label: Live Reload
+---
+
+<head>
+  <meta
+    name="description"
+    content="Use the Ionic CLI’s Live Reload functionality to boost your productivity when building Ionic apps. Learn how you can utilize rapid app development."
+  />
+</head>
+
+So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
+
+We can use the Ionic CLI’s [Live Reload functionality](https://ionicframework.com/docs/cli/livereload) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+
+## Live Reload
+
+Remember `ionic serve`? That was Live Reload working in the browser, allowing us to iterate quickly.
+
+We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins - we must run it on a device to verify that it works. Therefore, being able to quickly write, build, test, and deploy code is crucial to keeping up our development speed.
+
+Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform:
+
+```shell
+$ ionic cap run ios -l --external
+
+$ ionic cap run android -l --external
+```
+
+The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device.
+
+## Deleting Photos
+
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+
+```html
+<ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
+  <ion-img [src]="photo.webviewPath" (click)="showActionSheet(photo, position)"></ion-img>
+</ion-col>
+```
+
+Over in `tab2.page.ts`, import Action Sheet and add it to the constructor:
+
+```tsx
+import { ActionSheetController } from '@ionic/angular';
+
+constructor(public photoService: PhotoService,
+            public actionSheetController: ActionSheetController) {}
+```
+
+Add `UserPhoto` to the import statement.
+
+```tsx
+import { PhotoService, UserPhoto } from '../services/photo.service';
+```
+
+Next, implement the `showActionSheet()` function. We add two options: `Delete` that calls PhotoService’s `deletePicture()` function (to be added next) and `Cancel`, which when given the role of “cancel” will automatically close the action sheet:
+
+```tsx
+public async showActionSheet(photo: UserPhoto, position: number) {
+  const actionSheet = await this.actionSheetController.create({
+    header: 'Photos',
+    buttons: [{
+      text: 'Delete',
+      role: 'destructive',
+      icon: 'trash',
+      handler: () => {
+        this.photoService.deletePicture(photo, position);
+      }
+    }, {
+      text: 'Cancel',
+      icon: 'close',
+      role: 'cancel',
+      handler: () => {
+        // Nothing to do, action sheet is automatically closed
+        }
+    }]
+  });
+  await actionSheet.present();
+}
+```
+
+Save both of the files we just edited. The Photo Gallery app will reload automatically, and now when we tap on one of the photos in the gallery, the action sheet displays. Tapping “Delete” doesn’t do anything yet, so head back into your code editor.
+
+In `src/app/services/photo.service.ts`, add the `deletePicture()` function:
+
+```tsx
+public async deletePicture(photo: UserPhoto, position: number) {
+  // Remove this photo from the Photos reference data array
+  this.photos.splice(position, 1);
+
+  // Update photos array cache by overwriting the existing photo array
+  Preferences.set({
+    key: this.PHOTO_STORAGE,
+    value: JSON.stringify(this.photos)
+  });
+
+  // delete photo file from filesystem
+  const filename = photo.filepath
+                      .substr(photo.filepath.lastIndexOf('/') + 1);
+
+  await Filesystem.deleteFile({
+    path: filename,
+    directory: Directory.Data
+  });
+}
+```
+
+The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
+
+Save this file, then tap on a photo again and choose the “Delete” option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪
+
+In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices.
diff --git a/versioned_docs/version-v6/angular/your-first-app/8-distribute.md b/versioned_docs/version-v6/angular/your-first-app/8-distribute.md
new file mode 100644
index 00000000000..44b3781b476
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/8-distribute.md
@@ -0,0 +1,100 @@
+---
+sidebar_label: Distribute
+---
+
+# Build and Deploy your App
+
+Now that you have built your first app, you are going to want to get it distributed so everyone can start using it. The mechanics of building and deploying your application can be quite cumbersome. That is where [Appflow](https://ionic.io/docs/appflow/) comes into play. Appflow allows you to effectively generate web and native builds, push out live app updates, publish your app to the app stores, and automate the whole process. The entire Quickstart guide can be found [here](https://ionic.io/docs/appflow/quickstart).
+
+Below we will run through an overview of the steps.
+
+## Connect Your Repo
+
+Appflow works directly with Git version control and uses your existing code base as the source of truth for Deploy and Package builds. You will first need to integrate with your hosting service, such as GitHub or Bitbucket, or you can push your code directly to Appflow. Once this is completed, Appflow will have access to your code.
+
+For more on connecting your code repository to Appflow, checkout the [Connect your Repo](https://ionic.io/docs/appflow/quickstart/connect) section inside the Appflow docs.
+
+## Install the Appflow SDK
+
+The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard.
+
+To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the `Deploy > Destinations` section. Alternatively, you can install the plugin manually by excuting the following command in your app's root directory:
+
+```shell
+ionic deploy add  \
+    --app-id="YOUR_APP_ID" \
+    --channel-name="YOUR_CHANNEL_NAME" \
+    --update-method="background|auto|none" \
+```
+
+For prerequisite and additional instructions on installing the Appflow SDK, visit the [Install the Appflow SDK](https://ionic.io/docs/appflow/quickstart/installation) section inside the Appflow docs.
+
+## Push a Commit
+
+In order for Appflow to access the latest and greatest changes to your code, you will need to push a commit via the version control integration of your choosing. For those that use GitHub or Bitbucket, this would look as follows:
+
+```shell
+git add . # stage any changes
+git commit -m "added appflow sdk" #  commit staged changes
+git push origin main # push the changes from the main branch to your git host
+```
+
+After the push is made, you will then see your commit under the `Commits` tab of the Appflow Dashboard. For more on this, take a look at the [Push a Commit](https://ionic.io/docs/appflow/quickstart/push) section inside the Appflow docs.
+
+## Deploy a Live Update
+
+With the Appflow SDK installed and your commit pushed up to the Dashboard, you are ready to deploy a live update to a device. The Live Update feature uses the installed Appflow SDK with your native application to listen to a particular Deploy Channel Destination. When a live update is assigned to a Channel Destination, that update will be deployed to user devices running binaries that are configured to listen to that specific Channel Destination.
+
+To get the live update deployed, a Web build will need to be created. This can be done through the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right corner of the `Build > Builds` tab. After selecting the correct commit to deploy, select the `Web` target platform and the `Latest` build stack. Depending on your Appflow plan, you will then be able to include custom environments, if any are configured. Finally, you can enable `Live Update` and pick the Channel to automatically assign the build to once it successfully completes.
+
+Upon completion of the Web Build, additional versioning options are available to you. After completing this section and you have a successful Deploy build, you can then assign it to the same Channel you configured the Appflow SDK to listen to when you installed it by clicking the `Deploy live updates` button in the build detail page. The same can be done by clicking the `Deploy live updates` icon on the build in the `Build > Builds` tab and select the Channel from the dropdown.
+
+To receive this live update, you will need to run the app on a device or an emulator. The quickest and easiest way to do this is through the following command:
+
+```shell
+ionic [cordova | cap] run [ios | android] [options]
+```
+
+Assuming the app is configured correctly to listen to the channel you deployed too, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied!
+
+To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the [Deploy a Live Update](https://ionic.io/docs/appflow/quickstart/deploy) section inside the Appflow docs.
+
+## Build a Native Binary
+
+Next up is a native binary for your app build and deploy process. This is done via the [Ionic Package](https://ionic.io/docs/appflow/package/intro) service. First things first, you will need to create a [Package build](https://ionic.io/docs/appflow/package/builds). This can be done by clicking the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right from the `Build > Builds` tab. Then you will select the proper commit for your build and fill in all of the several required fields and any optional fields that you want to specify. After filling in all of the information and the build begins, you can check out it's progress and review the logs if you encounter any errors.
+
+Given a successful Package build, an iOS binary (`.ipa` or IPA) or/and an Android binary (`.apk` or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the `Artifacts` section in the right of the build detail page or clicking the `Download IPA/APK` icon on the build in the `Build > Builds` tab.
+
+Further information regarding building native binaries can be found inside of the [Build a Native Binary](https://ionic.io/docs/appflow/quickstart/package) section inside the Appflow docs.
+
+## Create an Automation
+
+[Automations](https://ionic.io/docs/appflow/automation/intro) enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger [Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production.
+
+For more information, visit the [Create an Automation](https://ionic.io/docs/appflow/quickstart/automation) section within the Appflow docs. There you will see details on creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our [Basic plans](https://ionic.io/pricing) and above.
+
+## Create an Environment
+
+[Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) can be futher customized via [Environments](https://ionic.io/docs/appflow/automation/environments). This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the [Automation](https://ionic.io/docs/appflow/automation/intro) feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever.
+
+Creating an Environment is available for those on our [Basic plans](https://ionic.io/pricing) and above. More information on this can be found in the [Create an Environment](https://ionic.io/docs/appflow/quickstart/environment) section within the Appflow docs.
+
+## Create a Native Configuration
+
+[Native Configurations](https://ionic.io/docs/appflow/package/native-configs) allow you to easily modify common configuration values that can change between different environments (development, production, staging, etc.) so you do not need to use extra logic or manually commit them to version control. Native configurations can be attached to any [Package build](https://ionic.io/docs/appflow/package/intro) or [Automation](https://ionic.io/docs/appflow/automation/intro).
+
+Native configs can be used to:
+
+- Overwrite the unique bundle identifier or [id attribute](https://cordova.apache.org/docs/en/latest/config_ref/#widget) in `config.xml`
+- Overwrite the App Name as it will appear on the home screen of a device
+- Overwrite the [Appflow SDK (Deploy Plugin) variables and preferences](https://ionic.io/docs/appflow/deploy/api#plugin-variables)
+
+For access to the ability to create a Native Configuration, you will need to be on our [Basic plans](https://ionic.io/pricing) and above. Additional details of this feature can be found in the [Create a Native Configuration](https://ionic.io/docs/appflow/quickstart/native-config) section within the Appflow docs.
+
+## What’s Next?
+
+Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users devices!
+
+There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the the build and deploy process again through Appflow to get it out to your users.
+
+Happy app building! 💙
diff --git a/versioned_docs/version-v6/api.md b/versioned_docs/version-v6/api.md
new file mode 100644
index 00000000000..45e4c1d8d19
--- /dev/null
+++ b/versioned_docs/version-v6/api.md
@@ -0,0 +1,17 @@
+---
+title: API Index
+---
+
+import APIList from '@components/page/api/APIList';
+
+<head>
+  <title>API Index | Ionic Docs API Index for all API Custom Elements</title>
+  <meta
+    name="description"
+    content="Each component in the Ionic Docs API Index consists of one or more custom elements—which each, in turn, may expose methods, events, and CSS custom properties."
+  />
+</head>
+
+Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties.
+
+<APIList sidebar={require('@site/sidebars.js').default} />
diff --git a/versioned_docs/version-v6/api/accordion-group.md b/versioned_docs/version-v6/api/accordion-group.md
new file mode 100644
index 00000000000..2880703001c
--- /dev/null
+++ b/versioned_docs/version-v6/api/accordion-group.md
@@ -0,0 +1,59 @@
+---
+title: "ion-accordion-group"
+---
+import Props from '@site/static/auto-generated/accordion-group/props.md';
+import Events from '@site/static/auto-generated/accordion-group/events.md';
+import Methods from '@site/static/auto-generated/accordion-group/methods.md';
+import Parts from '@site/static/auto-generated/accordion-group/parts.md';
+import CustomProps from '@site/static/auto-generated/accordion-group/custom-props.md';
+import Slots from '@site/static/auto-generated/accordion-group/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Accordion group is a container for accordion instances. It manages the state of the accordions and provides keyboard navigation.
+
+See the [Accordion](./accordion) documentation for more information.
+
+
+## Interfaces
+
+### AccordionGroupChangeEventDetail
+
+```typescript
+interface AccordionGroupChangeEventDetail<T = any> {
+  value: T;
+}
+```
+
+### AccordionGroupCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
+  detail: AccordionGroupChangeEventDetail<T>;
+  target: HTMLIonAccordionGroupElement;
+}
+```
+
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/accordion.md b/versioned_docs/version-v6/api/accordion.md
new file mode 100644
index 00000000000..803f0efbfe4
--- /dev/null
+++ b/versioned_docs/version-v6/api/accordion.md
@@ -0,0 +1,220 @@
+---
+title: 'ion-accordion'
+---
+
+import Props from '@site/static/auto-generated/accordion/props.md';
+import Events from '@site/static/auto-generated/accordion/events.md';
+import Methods from '@site/static/auto-generated/accordion/methods.md';
+import Parts from '@site/static/auto-generated/accordion/parts.md';
+import CustomProps from '@site/static/auto-generated/accordion/custom-props.md';
+import Slots from '@site/static/auto-generated/accordion/slots.md';
+
+<head>
+  <title>Ion-Accordion Components: How to Build & Examples | Ionic</title>
+  <meta
+    name="description"
+    content="Ion-accordion components provide collapsible sections in content to reduce vertical space and organize information. Learn how to build one and see examples."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All `ion-accordion` components should be grouped inside `ion-accordion-group` components.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/accordion/basic/index.md';
+
+<Basic />
+
+## Toggle Accordions
+
+Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions.
+
+import Toggle from '@site/static/usage/v6/accordion/toggle/index.md';
+
+<Toggle />
+
+## Listen for Accordion State Changes
+
+Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.
+
+import ListenChanges from '@site/static/usage/v6/accordion/listen-changes/index.md';
+
+<ListenChanges />
+
+## Multiple Accordions
+
+Developers can allow multiple accordions to be open at once with the `multiple` property.
+
+import Multiple from '@site/static/usage/v6/accordion/multiple/index.md';
+
+<Multiple />
+
+## Disabling Accordions
+
+### Individual Accordion
+
+Individual accordions can be disabled with the `disabled` property on `ion-accordion`.
+
+import DisableIndividual from '@site/static/usage/v6/accordion/disable/individual/index.md';
+
+<DisableIndividual />
+
+### Accordion Group
+
+The accordion group can be disabled with the `disabled` property on `ion-accordion-group`.
+
+import DisableGroup from '@site/static/usage/v6/accordion/disable/group/index.md';
+
+<DisableGroup />
+
+## Readonly Accordions
+
+### Individual Accordion
+
+Individual accordions can be disabled with the `readonly` property on `ion-accordion`.
+
+import ReadonlyIndividual from '@site/static/usage/v6/accordion/readonly/individual/index.md';
+
+<ReadonlyIndividual />
+
+### Accordion Group
+
+The accordion group can be disabled with the `readonly` property on `ion-accordion-group`.
+
+import ReadonlyGroup from '@site/static/usage/v6/accordion/readonly/group/index.md';
+
+<ReadonlyGroup />
+
+## Anatomy
+
+### Header
+
+The `header` slot is used as the toggle that will expand or collapse your accordion. We recommend you use an `ion-item` here to take advantage of the accessibility and theming functionalities.
+
+When using `ion-item` in the `header` slot, the `ion-item`'s `button` prop is set to `true` and the `detail` prop is set to `false`. In addition, we will also automatically add a toggle icon to the `ion-item`. This icon will automatically be rotated when you expand or collapse the accordion. See [Customizing Icons](#icons) for more information.
+
+### Content
+
+The `content` slot is used as the part of the accordion that is revealed or hidden depending on the state of your accordion. You can place anything here except for another `ion-content` instance as only one instance of `ion-content` should be added per page.
+
+## Customization
+
+### Expansion Styles
+
+There are two built in expansion styles: `compact` and `inset`. This expansion style is set via the `expand` property on `ion-accordion-group`.
+
+When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened.
+
+import ExpansionStyles from '@site/static/usage/v6/accordion/customization/expansion-styles/index.md';
+
+<ExpansionStyles />
+
+### Advanced Expansion Styles
+
+You can customize the expansion behavior by styling based on the accordion's state. There are four state classes applied to `ion-accordion`. Styling using these classes can allow you to create advanced state transitions:
+
+| Class Name              | Description                                       |
+| ----------------------- | ------------------------------------------------- |
+| `.accordion-expanding`  | Applied when the accordion is actively expanding  |
+| `.accordion-expanded`   | Applied when the accordion is fully expanded      |
+| `.accordion-collapsing` | Applied when the accordion is actively collapsing |
+| `.accordion-collapsed`  | Applied when the accordion is fully collapsed     |
+
+If you need to target specific pieces of the accordion, we recommend targeting the element directly. For example, if you want to customize the ion-item in your header slot when the accordion is expanded, you can use the following selector:
+
+```css
+ion-accordion.accordion-expanding ion-item[slot='header'],
+ion-accordion.accordion-expanded ion-item[slot='header'] {
+  --color: red;
+}
+```
+
+import AdvancedExpansionStyles from '@site/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md';
+
+<AdvancedExpansionStyles />
+
+### Icons
+
+When using an `ion-item` in the `header` slot, we automatically add an `ion-icon`. The type of icon used can be controlled by the `toggleIcon` property, and the slot it is added to can be controlled with the `toggleIconSlot` property.
+
+If you would like to manage the icon yourself or use an icon that is not an `ion-icon`, you can add the `ion-accordion-toggle-icon` class to the icon element.
+
+Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion.
+
+import Icons from '@site/static/usage/v6/accordion/customization/icons/index.md';
+
+<Icons />
+
+### Theming
+
+Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot.
+
+import Theming from '@site/static/usage/v6/accordion/customization/theming/index.md';
+
+<Theming />
+
+## Accessibility
+
+### Animations
+
+By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app.
+
+import AccessibilityAnimations from '@site/static/usage/v6/accordion/accessibility/animations/index.md';
+
+<AccessibilityAnimations />
+
+### Keyboard Navigation
+
+When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does:
+
+| Key                | Function                                                                                                                                                                             |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `Space` or `Enter` | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component.                                                                |
+| `Tab`              | Moves focus to the next focusable element.                                                                                                                                           |
+| `Shift` + `Tab`    | Moves focus to the previous focusable element.                                                                                                                                       |
+| `Down Arrow`       | - When focus is on an accordion header, moves focus to the next accordion header. <br />- When focus is on the last accordion header, moves focus to the first accordion header.     |
+| `Up Arrow`         | - When focus is on an accordion header, moves focus to the previous accordion header. <br />- When focus is on the first accordion header, moves focus to the last accordion header. |
+| `Home`             | When focus is on an accordion header, moves focus to the first accordion header.                                                                                                     |
+| `End`              | When focus is on an accordion header, moves focus to the last accordion header.                                                                                                      |
+
+## Performance
+
+### Animations
+
+The accordion animation works by knowing the height of the `content` slot when the animation starts. The accordion expects that this height will remain consistent throughout the animation. As a result, developers should avoid performing any operation that may change the height of the content during the animation.
+
+For example, using [ion-img](./img) may cause layout shifts as it lazily loads images. This means that as the animation plays, `ion-img` will load the image data, and the dimensions of `ion-img` will change to account for the loaded image data. This can result in the height of the `content` slot changing. Developers have a few options for avoiding this:
+
+1. Use an `img` element without any lazy loading. `ion-img` always uses lazy loading, but `img` does not use lazy loading by default. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading.
+
+2. Set a minimum width and height on `ion-img`. If you need to use lazy loading and know the dimensions of the images ahead of time (such as if you are loading icons of the same size), you can set the `ion-img` to have a minimum width or height using CSS. This gives developers the benefit of lazy loading while avoiding layout shifts. This works when using an `img` element with `loading="lazy"` too!
+
+3. If neither of these options are applicable, developers may want to consider disabling animations altogether by using the `animated` property on [ion-accordion-group](./accordion-group).
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/action-sheet.md b/versioned_docs/version-v6/api/action-sheet.md
new file mode 100644
index 00000000000..3f2917d979f
--- /dev/null
+++ b/versioned_docs/version-v6/api/action-sheet.md
@@ -0,0 +1,132 @@
+---
+title: 'ion-action-sheet'
+---
+
+import Props from '@site/static/auto-generated/action-sheet/props.md';
+import Events from '@site/static/auto-generated/action-sheet/events.md';
+import Methods from '@site/static/auto-generated/action-sheet/methods.md';
+import Parts from '@site/static/auto-generated/action-sheet/parts.md';
+import CustomProps from '@site/static/auto-generated/action-sheet/custom-props.md';
+import Slots from '@site/static/auto-generated/action-sheet/slots.md';
+
+<head>
+  <title>ion-action-sheet | Action Sheet Dialog for iOS and Android Apps</title>
+  <meta
+    name="description"
+    content="Action Sheets are dialogs that display a set of options above app content and must be manually dismissed. Read to learn about use on iOS and Android devices."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
+
+import Basic from '@site/static/usage/v6/action-sheet/basic/index.md';
+
+<Basic />
+
+## Buttons
+
+A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.
+
+A button can also be passed data via the `data` property on `ActionSheetButton`. This will populate the `data` field in the return value of the `onDidDismiss` method.
+
+## Theming
+
+Action Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
+
+### Styling
+
+We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces.
+
+```css
+/* DOES NOT WORK - not specific enough */
+.action-sheet-group {
+  background: #e5e5e5;
+}
+
+/* Works - pass "my-custom-class" in cssClass to increase specificity */
+.my-custom-class .action-sheet-group {
+  background: #e5e5e5;
+}
+```
+
+import Styling from '@site/static/usage/v6/action-sheet/theming/styling/index.md';
+
+<Styling />
+
+### CSS Custom Properties
+
+Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements.
+
+import CssCustomProperties from '@site/static/usage/v6/action-sheet/theming/css-properties/index.md';
+
+<CssCustomProperties />
+
+## Accessibility
+
+Action Sheets are given a `role` of [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role). In order to align with the ARIA spec, either the `aria-label` or `aria-labelledby` attribute must be set.
+
+It is strongly recommended that every Action Sheet have the `header` property defined, as Ionic will automatically set `aria-labelledby` to point to the header element. However, if you choose not to include a `header`, an alternative is to use the `htmlAttributes` property to provide a descriptive `aria-label` or set a custom `aria-labelledby` value.
+
+## Interfaces
+
+### ActionSheetButton
+
+```typescript
+interface ActionSheetButton<T = any> {
+  text?: string;
+  role?: 'cancel' | 'destructive' | 'selected' | string;
+  icon?: string;
+  cssClass?: string | string[];
+  handler?: () => boolean | void | Promise<boolean | void>;
+  data?: T;
+}
+```
+
+### ActionSheetOptions
+
+```typescript
+interface ActionSheetOptions {
+  header?: string;
+  subHeader?: string;
+  cssClass?: string | string[];
+  buttons: (ActionSheetButton | string)[];
+  backdropDismiss?: boolean;
+  translucent?: boolean;
+  animated?: boolean;
+  mode?: Mode;
+  keyboardClose?: boolean;
+  id?: string;
+  htmlAttributes?: { [key: string]: any };
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/alert.md b/versioned_docs/version-v6/api/alert.md
new file mode 100644
index 00000000000..a90625feb27
--- /dev/null
+++ b/versioned_docs/version-v6/api/alert.md
@@ -0,0 +1,254 @@
+---
+title: 'ion-alert'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@site/static/auto-generated/alert/props.md';
+import Events from '@site/static/auto-generated/alert/events.md';
+import Methods from '@site/static/auto-generated/alert/methods.md';
+import Parts from '@site/static/auto-generated/alert/parts.md';
+import CustomProps from '@site/static/auto-generated/alert/custom-props.md';
+import Slots from '@site/static/auto-generated/alert/slots.md';
+
+<head>
+  <title>ion-alert: Ionic API Alert Buttons with Custom Message Prompts</title>
+  <meta
+    name="description"
+    content="ion-alert dialog presents or collects information using inputs. Custom alert button messages appear above the app's content and must be manually dismissed."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`.
+
+## Presenting
+
+### Controller
+
+import Controller from '@site/static/usage/v6/alert/presenting/controller/index.md';
+
+<Controller />
+
+### Inline
+
+When using Ionic with React or Vue, `ion-alert` can also be placed directly in the template through use of the `isOpen` property. Note that `isOpen` must be set to `false` manually when the alert is dismissed; it will not be updated automatically.
+
+<Tabs defaultValue="react" values={[{ value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+<TabItem value="react">
+
+```tsx
+import React, { useState } from 'react';
+import { IonAlert, IonButton, IonContent } from '@ionic/react';
+
+function Example() {
+  const [showAlert, setShowAlert] = useState(false);
+
+  return (
+    <IonContent>
+      <IonButton onClick={() => setShowAlert(true)}>Click Me</IonButton>
+      <IonAlert
+        isOpen={showAlert}
+        onDidDismiss={() => setShowAlert(false)}
+        header="Alert"
+        subHeader="Important message"
+        message="This is an alert!"
+        buttons={['OK']}
+      />
+    </IonContent>
+  );
+}
+```
+
+</TabItem>
+<TabItem value="vue">
+
+```html
+<template>
+  <ion-content>
+    <ion-button @click="setOpen(true)">Show Alert</ion-button>
+    <ion-alert
+      :is-open="isOpenRef"
+      header="Alert"
+      sub-header="Important message"
+      message="This is an alert!"
+      :buttons="['OK']"
+      @didDismiss="setOpen(false)"
+    ></ion-alert>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonAlert, IonButton, IonContent } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonAlert, IonButton },
+    setup() {
+      const isOpenRef = ref(false);
+      const setOpen = (state: boolean) => (isOpenRef.value = state);
+
+      return { isOpenRef, setOpen };
+    },
+  });
+</script>
+```
+
+</TabItem>
+</Tabs>
+
+## Buttons
+
+In the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button.
+
+Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
+
+import Buttons from '@site/static/usage/v6/alert/buttons/index.md';
+
+<Buttons />
+
+## Inputs
+
+Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
+
+### Text Inputs Example
+
+import TextInputs from '@site/static/usage/v6/alert/inputs/text-inputs/index.md';
+
+<TextInputs />
+
+### Radio Example
+
+import Radios from '@site/static/usage/v6/alert/inputs/radios/index.md';
+
+<Radios />
+
+## Customization
+
+Alert uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
+
+We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces.
+
+```css
+/* DOES NOT WORK - not specific enough */
+.alert-wrapper {
+  background: #e5e5e5;
+}
+
+/* Works - pass "my-custom-class" in cssClass to increase specificity */
+.my-custom-class .alert-wrapper {
+  background: #e5e5e5;
+}
+```
+
+Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Alert without needing to target individual elements:
+
+```css
+.my-custom-class {
+  --background: #e5e5e5;
+}
+```
+
+import Customization from '@site/static/usage/v6/alert/customization/index.md';
+
+<Customization />
+
+:::note
+If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
+:::
+
+## Accessibility
+
+Ionic automatically sets the Alert's `role` to either [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) if there are any inputs or buttons included, or [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) if there are none.
+
+If the `header` property is defined for the Alert, the `aria-labelledby` attribute will be automatically set to the header's ID. The `subHeader` element will be used as a fallback if `header` is not defined. Similarly, the `aria-describedby` attribute will be automatically set to the ID of the `message` element if that property is defined.
+
+It is strongly recommended that your Alert have a `message`, as well as either a `header` or `subHeader`, in order to align with the ARIA spec. If you choose not to include a `header` or `subHeader`, an alternative is to provide a descriptive `aria-label` using the `htmlAttributes` property.
+
+All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert.
+
+## Interfaces
+
+### AlertButton
+
+```typescript
+interface AlertButton {
+  text: string;
+  role?: 'cancel' | 'destructive' | string;
+  cssClass?: string | string[];
+  handler?: (value: any) => boolean | void | { [key: string]: any };
+}
+```
+
+### AlertInput
+
+```typescript
+interface AlertInput {
+  type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
+  name?: string;
+  placeholder?: string;
+  value?: any;
+  label?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  id?: string;
+  handler?: (input: AlertInput) => void;
+  min?: string | number;
+  max?: string | number;
+  cssClass?: string | string[];
+  attributes?: { [key: string]: any };
+  tabindex?: number;
+}
+```
+
+### AlertOptions
+
+```typescript
+interface AlertOptions {
+  header?: string;
+  subHeader?: string;
+  message?: string | IonicSafeString;
+  cssClass?: string | string[];
+  inputs?: AlertInput[];
+  buttons?: (AlertButton | string)[];
+  backdropDismiss?: boolean;
+  translucent?: boolean;
+  animated?: boolean;
+  htmlAttributes?: { [key: string]: any };
+
+  mode?: Mode;
+  keyboardClose?: boolean;
+  id?: string;
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/app.md b/versioned_docs/version-v6/api/app.md
new file mode 100644
index 00000000000..98125d4aa8e
--- /dev/null
+++ b/versioned_docs/version-v6/api/app.md
@@ -0,0 +1,47 @@
+---
+title: "ion-app"
+---
+import Props from '@site/static/auto-generated/app/props.md';
+import Events from '@site/static/auto-generated/app/events.md';
+import Methods from '@site/static/auto-generated/app/methods.md';
+import Parts from '@site/static/auto-generated/app/parts.md';
+import CustomProps from '@site/static/auto-generated/app/custom-props.md';
+import Slots from '@site/static/auto-generated/app/slots.md';
+
+<head>
+  <title>ion-app: Container Element for an Ionic Application</title>
+  <meta name="description" content="ion-app is a container element for an Ionic application. Apps can have many Ionic components including menus, headers, content, and footers. Read to learn more." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+App is a container element for an Ionic application. There should only be one `<ion-app>` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `<ion-app>` when they are presented.
+
+Using `ion-app` enables the following behaviors:
+
+* [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins
+* [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices
+* Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar
+* Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard
+* [Ripple effect](./ripple-effect) when activating buttons on Material Design mode
+* Other tap and focus utilities which make the experience of using an Ionic app feel more native
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/avatar.md b/versioned_docs/version-v6/api/avatar.md
new file mode 100644
index 00000000000..0f32507e1d7
--- /dev/null
+++ b/versioned_docs/version-v6/api/avatar.md
@@ -0,0 +1,76 @@
+---
+title: 'ion-avatar'
+---
+
+import Props from '@site/static/auto-generated/avatar/props.md';
+import Events from '@site/static/auto-generated/avatar/events.md';
+import Methods from '@site/static/auto-generated/avatar/methods.md';
+import Parts from '@site/static/auto-generated/avatar/parts.md';
+import CustomProps from '@site/static/auto-generated/avatar/custom-props.md';
+import Slots from '@site/static/auto-generated/avatar/slots.md';
+
+<head>
+  <title>ion-avatar: Circular Application Avatar Icon Component</title>
+  <meta
+    name="description"
+    content="Ion-avatars are circular application components that wrap an image or icon. They can represent a person or an object, by themselves or inside of any element."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
+
+Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/avatar/basic/index.md';
+
+<Basic />
+
+## Chip Avatar
+
+import Chip from '@site/static/usage/v6/avatar/chip/index.md';
+
+<Chip />
+
+## Item Avatar
+
+import Item from '@site/static/usage/v6/avatar/item/index.md';
+
+<Item />
+
+## Theming
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/avatar/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/back-button.md b/versioned_docs/version-v6/api/back-button.md
new file mode 100644
index 00000000000..89ae57ad0ee
--- /dev/null
+++ b/versioned_docs/version-v6/api/back-button.md
@@ -0,0 +1,371 @@
+---
+title: "ion-back-button"
+hide_table_of_contents: true
+demoUrl: "/docs/demos/api/back-button/index.html"
+demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/back-button/index.html"
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/back-button/props.md';
+import Events from '@site/static/auto-generated/back-button/events.md';
+import Methods from '@site/static/auto-generated/back-button/methods.md';
+import Parts from '@site/static/auto-generated/back-button/parts.md';
+import CustomProps from '@site/static/auto-generated/back-button/custom-props.md';
+import Slots from '@site/static/auto-generated/back-button/slots.md';
+
+<head>
+  <title>Back Button | ion-back-button: Custom Menu Icon for Applications</title>
+  <meta name="description" content="The ion-back-button is a custom menu icon for Android, iOS, and Progressive Web Apps. Use Ionic Framework components to easily build applications." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+
+The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack.
+
+To change what is displayed in the back button, use the `text` and `icon` properties.
+
+
+
+
+## Usage
+
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```html
+<!-- Default back button -->
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<!-- Back button with a default href -->
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="home"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<!-- Back button with custom text and icon -->
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button
+          [text]="buttonText"
+          [icon]="buttonIcon">
+      </ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<!-- Back button with no text and custom icon -->
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button text="" icon="add"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<!-- Danger back button next to a menu button -->
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+      <ion-back-button color="danger"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+```
+
+</TabItem>
+
+
+<TabItem value="javascript">
+
+```html
+<!-- Default back button -->
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<!-- Back button with a default href -->
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button default-href="home"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<!-- Back button with custom text and icon -->
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button text="Volver" icon="close"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<!-- Back button with no text and custom icon -->
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button text="" icon="add"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<!-- Danger back button next to a menu button -->
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+      <ion-back-button color="danger"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+```
+
+</TabItem>
+
+
+<TabItem value="react">
+
+```tsx
+import React from 'react';
+import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
+
+export const BackButtonExample: React.FC = () => (
+  <IonContent>
+    {/*-- Default back button --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Back button with a default href --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton defaultHref="home" />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Back button with custom text and icon --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton text="buttonText" icon="buttonIcon" />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Back button with no text and custom icon --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton text="" icon="add" />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Danger back button next to a menu button --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonMenuButton />
+          <IonBackButton color="danger" />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+  </IonContent>
+);
+```
+
+</TabItem>
+
+
+<TabItem value="stencil">
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'back-button-example',
+  styleUrl: 'back-button-example.css'
+})
+export class BackButtonExample {
+  render() {
+    const buttonText = "Custom";
+    const buttonIcon = "add";
+
+    return [
+      // Default back button
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Back button with a default href
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button defaultHref="home"></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Back button with custom text and icon
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button
+              text={buttonText}
+              icon={buttonIcon}>
+            </ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Back button with no text and custom icon
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button text="" icon="add"></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Danger back button next to a menu button
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button></ion-menu-button>
+            <ion-back-button color="danger"></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+    ];
+  }
+}
+```
+
+</TabItem>
+
+
+<TabItem value="vue">
+
+```html
+<template>
+  <!-- Default back button -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Back button with a default href -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button default-href="home"></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Back button with custom text and icon -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button
+            :text="buttonText"
+            :icon="buttonIcon">
+        </ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Back button with no text and custom icon -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button text="" icon="add"></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Danger back button next to a menu button -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-menu-button></ion-menu-button>
+        <ion-back-button color="danger"></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+</template>
+
+<script>
+import { IonButtons, IonHeader, IonMenuButton, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButtons, IonHeader, IonMenuButton, IonToolbar }
+});
+</script>
+```
+
+</TabItem>
+
+</Tabs>
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/backdrop.md b/versioned_docs/version-v6/api/backdrop.md
new file mode 100644
index 00000000000..97217b36b59
--- /dev/null
+++ b/versioned_docs/version-v6/api/backdrop.md
@@ -0,0 +1,58 @@
+---
+title: 'ion-backdrop'
+---
+
+import Props from '@site/static/auto-generated/backdrop/props.md';
+import Events from '@site/static/auto-generated/backdrop/events.md';
+import Methods from '@site/static/auto-generated/backdrop/methods.md';
+import Parts from '@site/static/auto-generated/backdrop/parts.md';
+import CustomProps from '@site/static/auto-generated/backdrop/custom-props.md';
+import Slots from '@site/static/auto-generated/backdrop/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component.
+
+## Basic Usage
+
+The backdrop is transparent by default. The backdrop will prevent clicking or tapping on the content behind it.
+
+import Basic from '@site/static/usage/v6/backdrop/basic/index.md';
+
+<Basic />
+
+## Styling
+
+The backdrop can be customized by assigning CSS properties directly to the backdrop element. Common properties include `background-color`, `background` and `opacity`.
+
+Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`).
+
+import Styling from '@site/static/usage/v6/backdrop/styling/index.md';
+
+<Styling />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/badge.md b/versioned_docs/version-v6/api/badge.md
new file mode 100644
index 00000000000..202b2f32878
--- /dev/null
+++ b/versioned_docs/version-v6/api/badge.md
@@ -0,0 +1,68 @@
+---
+title: 'ion-badge'
+---
+
+import Props from '@site/static/auto-generated/badge/props.md';
+import Events from '@site/static/auto-generated/badge/events.md';
+import Methods from '@site/static/auto-generated/badge/methods.md';
+import Parts from '@site/static/auto-generated/badge/parts.md';
+import CustomProps from '@site/static/auto-generated/badge/custom-props.md';
+import Slots from '@site/static/auto-generated/badge/slots.md';
+
+<head>
+  <title>Badges | ion-badge: iOS & Android App Notification Badge Icons</title>
+  <meta
+    name="description"
+    content="Badges are inline block elements that appear near other elements on iOS & Android apps—use ion-badges as notifications that indicate how many items there are."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/badge/basic/index.md';
+
+<Basic />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/badge/theming/colors/index.md';
+
+<Colors />
+
+### CSS Properties
+
+import CSSProps from '@site/static/usage/v6/badge/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/breadcrumb.md b/versioned_docs/version-v6/api/breadcrumb.md
new file mode 100644
index 00000000000..5be2aa6c695
--- /dev/null
+++ b/versioned_docs/version-v6/api/breadcrumb.md
@@ -0,0 +1,60 @@
+---
+title: "ion-breadcrumb"
+---
+import Props from '@site/static/auto-generated/breadcrumb/props.md';
+import Events from '@site/static/auto-generated/breadcrumb/events.md';
+import Methods from '@site/static/auto-generated/breadcrumb/methods.md';
+import Parts from '@site/static/auto-generated/breadcrumb/parts.md';
+import CustomProps from '@site/static/auto-generated/breadcrumb/custom-props.md';
+import Slots from '@site/static/auto-generated/breadcrumb/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+A Breadcrumb is a single navigation item that is a child of the Breadcrumbs component. A breadcrumb can link elsewhere in an app or it can be plain text. Each breadcrumb has a separator between it and the next breadcrumb and can optionally contain an icon.
+
+See the [Breadcrumbs](./breadcrumbs) documentation for more information.
+
+## Interfaces
+
+### BreadcrumbCollapsedClickEventDetail
+
+```typescript
+interface BreadcrumbCollapsedClickEventDetail {
+  collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
+}
+```
+
+### BreadcrumbCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing .
+
+```typescript
+interface BreadcrumbCustomEvent extends CustomEvent {
+  detail: BreadcrumbCollapsedClickEventDetail;
+  target: HTMLIonBreadcrumbElement;
+}
+```
+
+
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/breadcrumbs.md b/versioned_docs/version-v6/api/breadcrumbs.md
new file mode 100644
index 00000000000..561539a973e
--- /dev/null
+++ b/versioned_docs/version-v6/api/breadcrumbs.md
@@ -0,0 +1,108 @@
+---
+title: 'ion-breadcrumbs'
+---
+
+import Props from '@site/static/auto-generated/breadcrumbs/props.md';
+import Events from '@site/static/auto-generated/breadcrumbs/events.md';
+import Methods from '@site/static/auto-generated/breadcrumbs/methods.md';
+import Parts from '@site/static/auto-generated/breadcrumbs/parts.md';
+import CustomProps from '@site/static/auto-generated/breadcrumbs/custom-props.md';
+import Slots from '@site/static/auto-generated/breadcrumbs/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/breadcrumbs/basic/index.md';
+
+<Basic />
+
+## Using Icons
+
+### Icons on Items
+
+import IconsOnItems from '@site/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md';
+
+<IconsOnItems />
+
+### Custom Separators
+
+import CustomSeparators from '@site/static/usage/v6/breadcrumbs/icons/custom-separators/index.md';
+
+<CustomSeparators />
+
+## Collapsing Items
+
+### Max Items
+
+If there are more items than the value of `maxItems`, the breadcrumbs will be collapsed. By default, only the first and last items will be shown.
+
+import MaxItems from '@site/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md';
+
+<MaxItems />
+
+### Items Before or After Collapse
+
+Once the items are collapsed, the number of items to show can be controlled by the `itemsBeforeCollapse` and `itemsAfterCollapse` properties.
+
+import ItemsBeforeAfter from '@site/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md';
+
+<ItemsBeforeAfter />
+
+### Collapsed Indicator Click -- Expand Breadcrumbs
+
+Clicking the collapsed indicator will fire the `ionCollapsedClick` event. This can be used to, for example, expand the breadcrumbs.
+
+import ExpandOnClick from '@site/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md';
+
+<ExpandOnClick />
+
+### Collapsed Indicator Click -- Present Popover
+
+The `ionCollapsedClick` event can also be used to present an overlay (in this case, an `ion-popover`) showing the hidden breadcrumbs.
+
+import PopoverOnClick from '@site/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md';
+
+<PopoverOnClick />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/breadcrumbs/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/breadcrumbs/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/button.md b/versioned_docs/version-v6/api/button.md
new file mode 100644
index 00000000000..a78f98da7a8
--- /dev/null
+++ b/versioned_docs/version-v6/api/button.md
@@ -0,0 +1,106 @@
+---
+title: 'ion-button'
+---
+
+import Props from '@site/static/auto-generated/button/props.md';
+import Events from '@site/static/auto-generated/button/events.md';
+import Methods from '@site/static/auto-generated/button/methods.md';
+import Parts from '@site/static/auto-generated/button/parts.md';
+import CustomProps from '@site/static/auto-generated/button/custom-props.md';
+import Slots from '@site/static/auto-generated/button/slots.md';
+
+<head>
+  <title>ion-button: Design and Style Buttons with Custom CSS Properties</title>
+  <meta
+    name="description"
+    content="ion-button provides a clickable element for use anywhere needing standard button functionality. Design and style button elements with custom CSS properties."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/button/basic/index.md';
+
+<Basic />
+
+## Expand
+
+This property lets you specify how wide the button should be. By default, buttons are inline blocks, but setting this property will change the button to a full-width block element.
+
+import Expand from '@site/static/usage/v6/button/expand/index.md';
+
+<Expand />
+
+## Shape
+
+This property lets you specify the shape of the button. By default, buttons are rectangular with a small border radius, but setting this to `"round"` will change the button to a rounded element.
+
+import Shape from '@site/static/usage/v6/button/shape/index.md';
+
+<Shape />
+
+## Fill
+
+This property determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background.
+
+import Fill from '@site/static/usage/v6/button/fill/index.md';
+
+<Fill />
+
+## Size
+
+This property specifies the size of the button. Setting this property will change the height and padding of a button.
+
+import Size from '@site/static/usage/v6/button/size/index.md';
+
+<Size />
+
+## Icons
+
+import Icons from '@site/static/usage/v6/button/icons/index.md';
+
+<Icons />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/button/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/button/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/buttons.md b/versioned_docs/version-v6/api/buttons.md
new file mode 100644
index 00000000000..c22bd4c0ad5
--- /dev/null
+++ b/versioned_docs/version-v6/api/buttons.md
@@ -0,0 +1,93 @@
+---
+title: 'ion-buttons'
+---
+
+import Props from '@site/static/auto-generated/buttons/props.md';
+import Events from '@site/static/auto-generated/buttons/events.md';
+import Methods from '@site/static/auto-generated/buttons/methods.md';
+import Parts from '@site/static/auto-generated/buttons/parts.md';
+import CustomProps from '@site/static/auto-generated/buttons/custom-props.md';
+import Slots from '@site/static/auto-generated/buttons/slots.md';
+
+<head>
+  <title>ion-buttons: Toolbar Element with Named Slots for Buttons</title>
+  <meta
+    name="description"
+    content="The Buttons component is a container element. Buttons placed in a toolbar should be inside the ion-buttons element and can be positioned using named slots."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+The Buttons component is a container element. It should be used inside of a [toolbar](./toolbar) and can contain several types of buttons, including standard [buttons](./button), [menu buttons](./menu-button), and [back buttons](./back-button).
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/buttons/basic/index.md';
+
+<Basic />
+
+## Buttons Placement
+
+Buttons can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.
+
+| Slot        | Description                                                                                             |
+| ----------- | ------------------------------------------------------------------------------------------------------- |
+| `start`     | Positions to the `left` of the content in LTR, and to the `right` in RTL.                               |
+| `end`       | Positions to the `right` of the content in LTR, and to the `left` in RTL.                               |
+| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. |
+| `primary`   | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode.     |
+
+import Placement from '@site/static/usage/v6/buttons/placement/index.md';
+
+<Placement />
+
+## Types of Buttons
+
+A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on [back button](./back-button) and [menu button](./menu-button) in this example are for display purposes; see their respective documentation for proper usage.
+
+import Types from '@site/static/usage/v6/buttons/types/index.md';
+
+<Types />
+
+## Collapsible Buttons
+
+The `collapse` property can be set on the buttons to collapse them when the header collapses. This is typically used with [collapsible large titles](./title#collapsible-large-titles).
+
+:::info
+
+This feature is only available for iOS.
+
+:::
+
+<!-- Reuse the playground from the Title directory -->
+
+import CollapsibleLargeTitleButtons from '@site/static/usage/v6/title/collapsible-large-title/buttons/index.md';
+
+<CollapsibleLargeTitleButtons />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/card-content.md b/versioned_docs/version-v6/api/card-content.md
new file mode 100644
index 00000000000..647cba00897
--- /dev/null
+++ b/versioned_docs/version-v6/api/card-content.md
@@ -0,0 +1,35 @@
+---
+title: "ion-card-content"
+---
+import Props from '@site/static/auto-generated/card-content/props.md';
+import Events from '@site/static/auto-generated/card-content/events.md';
+import Methods from '@site/static/auto-generated/card-content/methods.md';
+import Parts from '@site/static/auto-generated/card-content/parts.md';
+import CustomProps from '@site/static/auto-generated/card-content/custom-props.md';
+import Slots from '@site/static/auto-generated/card-content/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+Card content is a child component of card that adds padding around its contents. It is recommended that any text content for a card should be placed inside of card content.
+
+See the [Card](./card) documentation for more information.
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/card-header.md b/versioned_docs/version-v6/api/card-header.md
new file mode 100644
index 00000000000..2e52467ed43
--- /dev/null
+++ b/versioned_docs/version-v6/api/card-header.md
@@ -0,0 +1,37 @@
+---
+title: "ion-card-header"
+---
+import Props from '@site/static/auto-generated/card-header/props.md';
+import Events from '@site/static/auto-generated/card-header/events.md';
+import Methods from '@site/static/auto-generated/card-header/methods.md';
+import Parts from '@site/static/auto-generated/card-header/parts.md';
+import CustomProps from '@site/static/auto-generated/card-header/custom-props.md';
+import Slots from '@site/static/auto-generated/card-header/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Card header is a child component of card that should be placed before the card content. It can contain a [card title](./card-title) and a [card subtitle](./card-subtitle).
+
+See the [Card](./card) documentation for more information.
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/card-subtitle.md b/versioned_docs/version-v6/api/card-subtitle.md
new file mode 100644
index 00000000000..ec72784cd99
--- /dev/null
+++ b/versioned_docs/version-v6/api/card-subtitle.md
@@ -0,0 +1,37 @@
+---
+title: "ion-card-subtitle"
+---
+import Props from '@site/static/auto-generated/card-subtitle/props.md';
+import Events from '@site/static/auto-generated/card-subtitle/events.md';
+import Methods from '@site/static/auto-generated/card-subtitle/methods.md';
+import Parts from '@site/static/auto-generated/card-subtitle/parts.md';
+import CustomProps from '@site/static/auto-generated/card-subtitle/custom-props.md';
+import Slots from '@site/static/auto-generated/card-subtitle/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Card subtitle is a child component of card that should be placed inside of a [card header](./card-header).
+
+See the [Card](./card) documentation for more information.
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/card-title.md b/versioned_docs/version-v6/api/card-title.md
new file mode 100644
index 00000000000..33b24158eb5
--- /dev/null
+++ b/versioned_docs/version-v6/api/card-title.md
@@ -0,0 +1,42 @@
+---
+title: "ion-card-title"
+---
+import Props from '@site/static/auto-generated/card-title/props.md';
+import Events from '@site/static/auto-generated/card-title/events.md';
+import Methods from '@site/static/auto-generated/card-title/methods.md';
+import Parts from '@site/static/auto-generated/card-title/parts.md';
+import CustomProps from '@site/static/auto-generated/card-title/custom-props.md';
+import Slots from '@site/static/auto-generated/card-title/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<head>
+  <title>ion-card-title | Ionic App Card Title Component and Properties</title>
+  <meta name="description" content="ion-card-title is a child component of ion-card. Read to learn more about card title properties and how this component is used on Ionic Framework apps." />
+</head>
+
+<EncapsulationPill type="shadow" />
+
+
+Card title is a child component of card that should be placed inside of a [card header](./card-header).
+
+See the [Card](./card) documentation for more information.
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/card.md b/versioned_docs/version-v6/api/card.md
new file mode 100644
index 00000000000..fda33f2e804
--- /dev/null
+++ b/versioned_docs/version-v6/api/card.md
@@ -0,0 +1,90 @@
+---
+title: 'ion-card'
+---
+
+import Props from '@site/static/auto-generated/card/props.md';
+import Events from '@site/static/auto-generated/card/events.md';
+import Methods from '@site/static/auto-generated/card/methods.md';
+import Parts from '@site/static/auto-generated/card/parts.md';
+import CustomProps from '@site/static/auto-generated/card/custom-props.md';
+import Slots from '@site/static/auto-generated/card/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<head>
+  <title>ion-card: Card UI Components for Ionic Framework API</title>
+  <meta
+    name="description"
+    content="ion-card UI components are entry points to more detailed information. Cards can be single components or made up of some header, title, subtitle, and content."
+  />
+</head>
+
+<EncapsulationPill type="shadow" />
+
+Cards are containers that display content such as text, images, buttons, and lists.
+A card can be a single component, but is often made up of a header, title, subtitle,
+and content. Cards are broken up into several components to accommodate this structure:
+[card header](./card-header), [card title](./card-title), [card subtitle](./card-subtitle),
+and [card content](./card-content).
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/card/basic/index.md';
+
+<Basic />
+
+## Media Cards
+
+import Media from '@site/static/usage/v6/card/media/index.md';
+
+<Media />
+
+## Card Buttons
+
+import Buttons from '@site/static/usage/v6/card/buttons/index.md';
+
+<Buttons />
+
+## List Card
+
+import List from '@site/static/usage/v6/card/list/index.md';
+
+<List />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/card/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/card/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/checkbox.md b/versioned_docs/version-v6/api/checkbox.md
new file mode 100644
index 00000000000..7344a77f0d1
--- /dev/null
+++ b/versioned_docs/version-v6/api/checkbox.md
@@ -0,0 +1,90 @@
+---
+title: 'ion-checkbox'
+---
+
+import Props from '@site/static/auto-generated/checkbox/props.md';
+import Events from '@site/static/auto-generated/checkbox/events.md';
+import Methods from '@site/static/auto-generated/checkbox/methods.md';
+import Parts from '@site/static/auto-generated/checkbox/parts.md';
+import CustomProps from '@site/static/auto-generated/checkbox/custom-props.md';
+import Slots from '@site/static/auto-generated/checkbox/slots.md';
+
+<head>
+  <title>ion-checkboxes: Ionic App Component to Select Multiple Options</title>
+  <meta
+    name="description"
+    content="ion-checkboxes allow selection of multiple options from a set and appear as checked (ticked) when activated. Learn about the checkbox component for Ionic apps."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/checkbox/basic/index.md';
+
+<Basic />
+
+## Indeterminate Checkboxes
+
+import Indeterminate from '@site/static/usage/v6/checkbox/indeterminate/index.md';
+
+<Indeterminate />
+
+## Theming
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/checkbox/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Interfaces
+
+### CheckboxChangeEventDetail
+
+```typescript
+interface CheckboxChangeEventDetail<T = any> {
+  value: T;
+  checked: boolean;
+}
+```
+
+### CheckboxCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface CheckboxCustomEvent<T = any> extends CustomEvent {
+  detail: CheckboxChangeEventDetail<T>;
+  target: HTMLIonCheckboxElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/chip.md b/versioned_docs/version-v6/api/chip.md
new file mode 100644
index 00000000000..46e13e98292
--- /dev/null
+++ b/versioned_docs/version-v6/api/chip.md
@@ -0,0 +1,74 @@
+---
+title: 'ion-chip'
+---
+
+import Props from '@site/static/auto-generated/chip/props.md';
+import Events from '@site/static/auto-generated/chip/events.md';
+import Methods from '@site/static/auto-generated/chip/methods.md';
+import Parts from '@site/static/auto-generated/chip/parts.md';
+import CustomProps from '@site/static/auto-generated/chip/custom-props.md';
+import Slots from '@site/static/auto-generated/chip/slots.md';
+
+<head>
+  <title>ion-chip: Name, Text, Icon and Avatar for Ionic Framework Apps</title>
+  <meta
+    name="description"
+    content="ion-chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as names, avatars, text, and icons."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/chip/basic/index.md';
+
+<Basic />
+
+## Slotting Components and Icons
+
+import SlotExample from '@site/static/usage/v6/chip/slots/index.md';
+
+<SlotExample />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/chip/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/chip/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/col.md b/versioned_docs/version-v6/api/col.md
new file mode 100644
index 00000000000..e5872b4f6a1
--- /dev/null
+++ b/versioned_docs/version-v6/api/col.md
@@ -0,0 +1,49 @@
+---
+title: "ion-col"
+---
+import Props from '@site/static/auto-generated/col/props.md';
+import Events from '@site/static/auto-generated/col/events.md';
+import Methods from '@site/static/auto-generated/col/methods.md';
+import Parts from '@site/static/auto-generated/col/parts.md';
+import CustomProps from '@site/static/auto-generated/col/custom-props.md';
+import Slots from '@site/static/auto-generated/col/slots.md';
+
+<head>
+  <title>ion-col: Column Component Padding, Size and Other Properties</title>
+  <meta name="description" content="ion-col is a column component that goes inside a row. Content within a grid goes inside of a column. Read more on column padding, size, and other properties." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Columns are cellular components of the [grid](./grid) system and go inside of a [row](./row). They will expand to fill the row. All content within a grid should go inside of a column.
+
+See the [grid](./grid) documentation for more information.
+
+
+## Column Alignment
+
+By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior.
+
+
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/content.md b/versioned_docs/version-v6/api/content.md
new file mode 100644
index 00000000000..528f39b7958
--- /dev/null
+++ b/versioned_docs/version-v6/api/content.md
@@ -0,0 +1,158 @@
+---
+title: 'ion-content'
+---
+
+import Props from '@site/static/auto-generated/content/props.md';
+import Events from '@site/static/auto-generated/content/events.md';
+import Methods from '@site/static/auto-generated/content/methods.md';
+import Parts from '@site/static/auto-generated/content/parts.md';
+import CustomProps from '@site/static/auto-generated/content/custom-props.md';
+import Slots from '@site/static/auto-generated/content/slots.md';
+
+<head>
+  <title>ion-content: Scrollable CSS Component for Ionic App Content Areas</title>
+  <meta
+    name="description"
+    content="ion-content provides an easy to use content area with useful methods to control the scrollable area. Learn more about this CSS component for Ionic apps."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+The content component provides an easy to use content area with some useful methods
+to control the scrollable area. There should only be one content in a single
+view.
+
+Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties).
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/content/basic/index.md';
+
+<Basic />
+
+## Header & Footer
+
+Content can be the only top-level component in a page, or it can be used alongside a [header](./header), [footer](./footer), or both. When used with a header or footer, it will adjust its size to fill the remaining height.
+
+import HeaderFooter from '@site/static/usage/v6/content/header-footer/index.md';
+
+<HeaderFooter />
+
+## Fullscreen Content
+
+By default, content fills the space between a [header](./header) and [footer](./footer) but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the `translucent` property is set on either of them, or `opacity` is set on the toolbar. This can be achieved by setting the `fullscreen` property on the content to `true`.
+
+import Fullscreen from '@site/static/usage/v6/content/fullscreen/index.md';
+
+<Fullscreen />
+
+## Fixed Content
+
+To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties.
+
+import Fixed from '@site/static/usage/v6/content/fixed/index.md';
+
+<Fixed />
+
+## Scroll Methods
+
+Content provides [methods](#methods) that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a `duration` in order to smoothly transition instead of instantly changing the position.
+
+import ScrollMethods from '@site/static/usage/v6/content/scroll-methods/index.md';
+
+<ScrollMethods />
+
+## Scroll Events
+
+Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events).
+
+import ScrollEvents from '@site/static/usage/v6/content/scroll-events/index.md';
+
+<ScrollEvents />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/content/theming/colors/index.md';
+
+<Colors />
+
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v6/content/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/content/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Interfaces
+
+### ScrollBaseDetail
+
+```typescript
+interface ScrollBaseDetail {
+  isScrolling: boolean;
+}
+```
+
+### ScrollDetail
+
+```typescript
+interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
+  scrollTop: number;
+  scrollLeft: number;
+}
+```
+
+### ScrollBaseCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events.
+
+```typescript
+interface ScrollBaseCustomEvent extends CustomEvent {
+  detail: ScrollBaseDetail;
+  target: HTMLIonContentElement;
+}
+```
+
+### ScrollCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScroll` event.
+
+```typescript
+interface ScrollCustomEvent extends ScrollBaseCustomEvent {
+  detail: ScrollDetail;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/datetime-button.md b/versioned_docs/version-v6/api/datetime-button.md
new file mode 100644
index 00000000000..78e691b231d
--- /dev/null
+++ b/versioned_docs/version-v6/api/datetime-button.md
@@ -0,0 +1,82 @@
+---
+title: 'ion-datetime-button'
+---
+
+import Props from '@site/static/auto-generated/datetime-button/props.md';
+import Events from '@site/static/auto-generated/datetime-button/events.md';
+import Methods from '@site/static/auto-generated/datetime-button/methods.md';
+import Parts from '@site/static/auto-generated/datetime-button/parts.md';
+import CustomProps from '@site/static/auto-generated/datetime-button/custom-props.md';
+import Slots from '@site/static/auto-generated/datetime-button/slots.md';
+
+<head>
+  <title>ion-datetime-button: Ionic API Input for interacting with Datetime picker</title>
+  <meta
+    name="description"
+    content="Datetime button links with a datetime instance to easily a datetime in a popover, modal, and more."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Datetime Button links with a [Datetime](./datetime) component to display the formatted date and time. It also provides buttons to present the datetime in a modal, popover, and more.
+
+## Overview
+
+Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
+
+When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#keepcontentsmounted) or the [keepContentsMounted property on ion-popover](./popover#keepcontentsmounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/datetime-button/basic/index.md';
+
+<Basic />
+
+## Localization
+
+The localized text on `ion-datetime-button` is determined by the `locale` property on the associated `ion-datetime` instance. See [Datetime Localization](./datetime#localization) for more details.
+
+## Usage with Modals and Popovers
+
+`ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used.
+
+<!--
+## Customization
+
+TODO
+
+### Buttons
+
+TODO
+
+### Theming
+
+TODO
+-->
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
new file mode 100644
index 00000000000..021146d87ff
--- /dev/null
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -0,0 +1,437 @@
+---
+title: 'ion-datetime'
+---
+
+import Props from '@site/static/auto-generated/datetime/props.md';
+import Events from '@site/static/auto-generated/datetime/events.md';
+import Methods from '@site/static/auto-generated/datetime/methods.md';
+import Parts from '@site/static/auto-generated/datetime/parts.md';
+import CustomProps from '@site/static/auto-generated/datetime/custom-props.md';
+import Slots from '@site/static/auto-generated/datetime/slots.md';
+
+import Basic from '@site/static/usage/v6/datetime/basic/index.md';
+
+import MaxMin from '@site/static/usage/v6/datetime/date-constraints/max-min/index.md';
+import Values from '@site/static/usage/v6/datetime/date-constraints/values/index.md';
+import Advanced from '@site/static/usage/v6/datetime/date-constraints/advanced/index.md';
+
+import CustomLocale from '@site/static/usage/v6/datetime/localization/custom-locale/index.md';
+import HourCycle from '@site/static/usage/v6/datetime/localization/hour-cycle/index.md';
+import FirstDayOfWeek from '@site/static/usage/v6/datetime/localization/first-day-of-week/index.md';
+import LocaleExtensionTags from '@site/static/usage/v6/datetime/localization/locale-extension-tags/index.md';
+import TimeLabel from '@site/static/usage/v6/datetime/localization/time-label/index.md';
+
+import MonthAndYear from '@site/static/usage/v6/datetime/presentation/month-and-year/index.md';
+import Time from '@site/static/usage/v6/datetime/presentation/time/index.md';
+import Date from '@site/static/usage/v6/datetime/presentation/date/index.md';
+
+import ShowingDefaultTitle from '@site/static/usage/v6/datetime/title/showing-default-title/index.md';
+import CustomizingTitle from '@site/static/usage/v6/datetime/title/customizing-title/index.md';
+
+import ShowingConfirmationButtons from '@site/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md';
+import CustomizingButtons from '@site/static/usage/v6/datetime/buttons/customizing-buttons/index.md';
+import CustomizingButtonTexts from '@site/static/usage/v6/datetime/buttons/customizing-button-texts/index.md';
+
+import MultipleDateSelection from '@site/static/usage/v6/datetime/multiple/index.md';
+
+import Theming from '@site/static/usage/v6/datetime/theming/index.md';
+
+<head>
+  <title>ion-datetime: Ionic API Input for Datetime Format Picker</title>
+  <meta
+    name="description"
+    content="Datetimes present a picker interface to select dates and times. Ionic's API Datetime input component easily displays a preferred format, and manages values."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native `input` elements of `datetime-local`, however, Ionic Framework's Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values.
+
+## Overview
+
+Historically, handling datetime values within JavaScript, or even within HTML
+inputs, has always been a challenge. Specifically, JavaScript's `Date` object is
+notoriously difficult to correctly parse apart datetime strings or to format
+datetime values. Even worse is how different browsers and JavaScript versions
+parse various datetime strings differently, especially per locale.
+
+Fortunately, Ionic Framework's datetime input has been designed so developers can avoid
+the common pitfalls, allowing developers to easily manipulate datetime values and give the user a simple datetime picker for a great user experience.
+
+### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
+
+Ionic Framework uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime)
+for its value. The value is simply a string, rather than using JavaScript's
+`Date` object. Using the ISO datetime format makes it easy to serialize
+and parse within JSON objects and databases.
+
+Below are some examples of ISO 8601 formats that can be used with `ion-datetime`:
+
+| Description     | Format                 | Datetime Value Example    |
+| --------------- | ---------------------- | ------------------------- |
+| Year            | YYYY                   | 1994                      |
+| Year and Month  | YYYY-MM                | 1994-12                   |
+| Complete Date   | YYYY-MM-DD             | 1994-12-15                |
+| Date and Time   | YYYY-MM-DDTHH:mm       | 1994-12-15T13:47          |
+| UTC Timezone    | YYYY-MM-DDTHH:mm:ssZ   | 1994-12-15T13:47:20Z      |
+| Timezone Offset | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20+05:00 |
+| Hour and Minute | HH:mm                  | 13:47                     |
+
+Note that the year is always four-digits, milliseconds (if it's added) is always
+three-digits, and all others are always two-digits. So the number representing
+January always has a leading zero, such as `01`. Additionally, the hour is
+always in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means
+`1pm`, and `23` means `11pm`.
+
+:::note
+While seconds and milliseconds can be specified using the ISO 8601 datetime format, `ion-datetime` does not provide an interface for second and millisecond selection. Any second or millisecond values provided will be ignored.
+:::
+
+## Basic Usage
+
+<Basic />
+
+## Usage with Datetime Button
+
+If you need to present a datetime in an overlay such as a modal or a popover, we recommend using [ion-datetime-button](./datetime-button). `ion-datetime-button` should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
+
+## Date Constraints
+
+### Max and Min Dates
+
+To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user.
+
+The following example restricts date selection to March 2022 through May 2022 only.
+
+<MaxMin />
+
+### Selecting Specific Values
+
+While the `min` and `max` properties allow you to restrict date selection to a certain range, the `monthValues`, `dayValues`, `yearValues`, `hourValues`, and `minuteValues` properties allow you choose specific days and times that users can select.
+
+The following example allows minutes to be selected in increments of 15. It also allows for days to be selected in increments of 5.
+
+<Values />
+
+### Advanced Date Constraints
+
+With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string.
+The `isDateEnabled` property accepts a function returning a boolean, indicating if a date is enabled. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
+
+The following example shows how to disable all weekend dates. For more advanced date manipulation, we recommend using a date utility such as `date-fns`.
+
+<Advanced />
+
+## Localization
+
+Ionic Framework makes use of the [Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API which allows us to automatically localize the month and day names according to the language and region set on the user's device.
+
+### Custom Locale
+
+For instances where you need a specific locale, you can use the `locale` property to set it. The locale controls both the language and the date and time formats that are displayed.
+
+The following example shows how to set the locale to Spanish (Spain).
+
+<CustomLocale />
+
+:::note
+The time label is not automatically localized. See [Time Label](#time-label) for more information.
+:::
+
+### Hour Cycle
+
+`ion-datetime` will use the hour cycle that is specified by the `locale` property by default. For example, if `locale` is set to `en-US`, then `ion-datetime` will use a 12 hour cycle.
+
+There are 4 primary hour cycle types:
+
+| Hour cycle type | Description                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------------------- |
+| `'h12'`         | Hour system using 1–12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am. |
+| `'h23'`         | Hour system using 0–23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00.     |
+| `'h11'`         | Hour system using 0–11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am.  |
+| `'h24'`         | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00.     |
+
+:::note
+Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
+:::
+
+There may be scenarios where you need to have more control over which hour cycle is used. This is where the `hourCycle` property can help.
+
+In the following example, we can use the `hourCycle` property to force `ion-datetime` to use the 12 hour cycle even though the locale is `en-GB`, which uses a 24 hour cycle by default:
+
+<HourCycle />
+
+### First Day of the Week
+
+For `ion-datetime`, the default first day of the week is Sunday. As of 2022, there is no browser API that lets Ionic automatically determine the first day of the week based on a device's locale, though there is on-going work regarding this (see: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6)).
+
+<FirstDayOfWeek />
+
+### Time Label
+
+The time label is not automatically localized. Fortunately, Ionic makes it easy to provide custom localizations with the `time-label` slot.
+
+<TimeLabel />
+
+### Locale Extension Tags
+
+`ion-datetime` also supports [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) as part of the `Intl.Locale` API. These tags let you encode information about the locale in the locale string itself. Developers may prefer to use the extension tag approach if they are using the [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) in their apps.
+
+For example, if you wanted to use a 12 hour cycle with the `en-GB` locale, you could provide extension tags instead of using both the `locale` and `hourCycle` properties:
+
+<LocaleExtensionTags />
+
+:::note
+Be sure to check the [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) for `Intl.Locale` before using it in your app.
+:::
+
+## Presentation
+
+By default, `ion-datetime` allows users to select both date and time. In addition, users have access to selecting the specific month, year, hour, and minute.
+
+Some use cases may call for only date selection or only time selection. The `presentation` property allows you to specify which pickers to show and the order to show them in. For example, setting `date-time` will have the calendar picker appear before the time picker. Setting `time-date` will have the calendar picker appear after the time picker.
+
+### Month and Year Selection
+
+Month and year selection is available by passing `month-year`, `year-month`, `month`, or `year` to the `presentation` property.
+
+This example shows a datetime with the `month-year` configuration.
+
+<MonthAndYear />
+
+### Time Selection
+
+Time selection is available by passing `date-time`, `time-date`, or `time` to the `presentation` property.
+
+This example shows a datetime with the `time` configuration.
+
+<Time />
+
+### Date Selection
+
+Date selection is available by passing `date-time`, `time-date`, or `date` to the `presentation` property.
+
+This example shows a datetime with the `date` configuration.
+
+<Date />
+
+### Wheel Style Pickers
+
+By default, Ionic will prefer to show a grid style layout when using `presentation`. However, it is possible to show a wheel style using the `preferWheel` property. When `preferWheel` is `true`, Ionic will prefer to show the wheel style layout when possible.
+
+Certain `presentation` options have both grid and wheel styles that developers can choose from with the `preferWheel` property. Other `presentation` values only have a wheel style and will never show a grid style. The table below shows which `presentation` values have grid or wheel styles.
+
+| `presentation` | Has Grid Style? | Has Wheel Style? |
+| -------------- | --------------- | ---------------- |
+| `date`         | Yes             | Yes              |
+| `date-time`    | Yes             | Yes              |
+| `month`        | No              | Yes              |
+| `month-year`   | No              | Yes              |
+| `time`         | No              | Yes              |
+| `time-date`    | Yes             | Yes              |
+| `year`         | No              | Yes              |
+
+The example below shows the wheel picker with `presentation="date-time"`.
+
+import Wheel from '@site/static/usage/v6/datetime/presentation/wheel/index.md';
+
+<Wheel />
+
+## Multiple Date Selection
+
+If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it.
+
+:::note
+This property is only supported when using `presentation="date"` and `preferWheel="false"`.
+:::
+
+<MultipleDateSelection />
+
+## Titles
+
+By default, `ion-datetime` does not show any header or title associated with the component. Developers can use the `showDefaultTitle` property to show the default title/header configuration. They can also use the `title` slot to customize what is rendered in the header.
+
+### Showing the Default Title
+
+<ShowingDefaultTitle />
+
+### Customizing the Title
+
+<CustomizingTitle />
+
+## Buttons
+
+By default, `ionChange` is emitted with the new datetime value whenever a new date is selected. To require user confirmation before emitting `ionChange`, you can either set the `showDefaultButtons` property to `true` or use the `buttons` slot to pass in a custom confirmation button. When passing in custom buttons, the confirm button must call the `confirm` method on `ion-datetime` for `ionChange` to be emitted.
+
+### Showing Confirmation Buttons
+
+The default Done and Cancel buttons are already preconfigured to call the [`confirm`](#confirm) and [`cancel`](#cancel) methods, respectively.
+
+<ShowingConfirmationButtons />
+
+### Customizing Button Texts
+
+For simple use cases, developers can provide custom button text to the confirmation and cancel values through the `doneText` and `cancelText` properties. We recommend doing this when you only need to change the button text and do not need any custom behavior.
+
+<CustomizingButtonTexts />
+
+### Customizing Button Elements
+
+Developers can provide their own buttons for advanced custom behavior.
+
+`ion-datetime` has `confirm`, `cancel`, and `reset` methods that developers can call when clicking on custom buttons. The `reset` method also allows developers to provide a date to reset the datetime to.
+
+<CustomizingButtons />
+
+## Theming
+
+Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`.
+
+The benefit of this approach is that every component, not just `ion-datetime`, can automatically take advantage of this theme.
+
+<Theming />
+
+## Time Zones
+
+Ionic's `ion-datetime` follows the [datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) behavior of not manipulating or setting the time zone inside of a datetime control. In other words, a time value of "07:00" will not be adjusted according to different time zones.
+
+We recommend using a library such as [date-fns-tz](https://github.com/marnusw/date-fns-tz) to convert a datetime value to the desired time zone.
+
+Below is an example of formatting an ISO-8601 string to display in the time zone set on a user's device:
+
+```typescript
+import { format, utcToZonedTime } from 'date-fns-tz';
+
+// Get the time zone set on the user's device
+const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+// Create a date object from a UTC date string
+const date = new Date('2014-10-25T10:46:20Z');
+
+// Use date-fns-tz to convert from UTC to a zoned time
+const zonedTime = dateFnsTz.utcToZonedTime(date, userTimeZone);
+
+// Create a formatted string from the zoned time
+format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });
+```
+
+### Parsing Date Values
+
+The `ionChange` event will emit the date value as an ISO-8601 string in the event payload. It is the developer's responsibility to format it based on their application needs. We recommend using [date-fns](https://date-fns.org) to format the date value.
+
+Below is an example of formatting an ISO-8601 string to display the month, date and year:
+
+```typescript
+import { format, parseISO } from 'date-fns';
+
+/**
+ * This is provided in the event
+ * payload from the `ionChange` event.
+ *
+ * The value is an ISO-8601 date string.
+ */
+const dateFromIonDatetime = '2021-06-04T14:23:00-04:00';
+const formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy');
+
+console.log(formattedString); // Jun 4, 2021
+```
+
+See https://date-fns.org/docs/format for a list of all the valid format tokens.
+
+## Advanced Datetime Validation and Manipulation
+
+The datetime picker provides the simplicity of selecting an exact format, and
+persists the datetime values as a string using the standardized [ISO 8601
+datetime format](https://www.w3.org/TR/NOTE-datetime). However, it's important
+to note that `ion-datetime` does not attempt to solve all situations when
+validating and manipulating datetime values. If datetime values need to be
+parsed from a certain format, or manipulated (such as adding 5 days to a date,
+subtracting 30 minutes, etc.), or even formatting data to a specific locale,
+then we highly recommend using [date-fns](https://date-fns.org) to work with
+dates in JavaScript.
+
+## Accessibility
+
+### Keyboard Navigation
+
+`ion-datetime` has full keyboard support for navigating between focusable elements inside of the component. The following table details what each key does:
+
+| Key                | Function                                       |
+| ------------------ | ---------------------------------------------- |
+| `Tab`              | Moves focus to the next focusable element.     |
+| `Shift` + `Tab`    | Moves focus to the previous focusable element. |
+| `Space` or `Enter` | Clicks the focusable element.                  |
+
+#### Date Grid
+
+| Key                  | Function                                          |
+| -------------------- | ------------------------------------------------- |
+| `ArrowUp`            | Moves focus to the same day of the previous week. |
+| `ArrowDown`          | Moves focus to the same day of the next week.     |
+| `ArrowRight`         | Moves focus to the next day.                      |
+| `ArrowLeft`          | Moves focus to the previous day.                  |
+| `Home`               | Moves focus to the first day of the current week. |
+| `End`                | Moves focus to the last day of the current week.  |
+| `PageUp`             | Changes the grid of dates to the previous month.  |
+| `PageDown`           | Changes the grid of dates to the next month.      |
+| `Shift` + `PageUp`   | Changes the grid of dates to the previous year.   |
+| `Shift` + `PageDown` | Changes the grid of dates to the next year.       |
+
+#### Time, Month, and Year Wheels
+
+When using the time wheel picker, you can use the number keys to select hour and minute values when the columns are focused.
+
+| Key         | Function                     |
+| ----------- | ---------------------------- |
+| `ArrowUp`   | Scroll to the previous item. |
+| `ArrowDown` | Scroll to the next item.     |
+| `Home`      | Scroll to the first item.    |
+| `End`       | Scroll to the last item.     |
+
+## Interfaces
+
+### DatetimeChangeEventDetail
+
+```typescript
+interface DatetimeChangeEventDetail {
+  value?: string | null;
+}
+```
+
+### DatetimeCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface DatetimeCustomEvent extends CustomEvent {
+  detail: DatetimeChangeEventDetail;
+  target: HTMLIonDatetimeElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/fab-button.md b/versioned_docs/version-v6/api/fab-button.md
new file mode 100644
index 00000000000..ab86a48426e
--- /dev/null
+++ b/versioned_docs/version-v6/api/fab-button.md
@@ -0,0 +1,43 @@
+---
+title: "ion-fab-button"
+---
+import Props from '@site/static/auto-generated/fab-button/props.md';
+import Events from '@site/static/auto-generated/fab-button/events.md';
+import Methods from '@site/static/auto-generated/fab-button/methods.md';
+import Parts from '@site/static/auto-generated/fab-button/parts.md';
+import CustomProps from '@site/static/auto-generated/fab-button/custom-props.md';
+import Slots from '@site/static/auto-generated/fab-button/slots.md';
+
+<head>
+  <title>Floating Action Button | Ionic FAB Button Icon for Primary Action</title>
+  <meta name="description" content="Floating Action Buttons (FABs) represent the primary action in an app. The icons are circular and, when pressed, the button may open more related actions." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions.
+
+As the name suggests, FABs generally float over the content in a fixed position. This is achieved by wrapping the fab button in a [fab](./fab) component. If the button is not wrapped with a fab, it will scroll with the content.
+
+For usage examples, see the [fab documentation](./fab).
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/fab-list.md b/versioned_docs/version-v6/api/fab-list.md
new file mode 100644
index 00000000000..a0659a394d7
--- /dev/null
+++ b/versioned_docs/version-v6/api/fab-list.md
@@ -0,0 +1,35 @@
+---
+title: "ion-fab-list"
+---
+import Props from '@site/static/auto-generated/fab-list/props.md';
+import Events from '@site/static/auto-generated/fab-list/events.md';
+import Methods from '@site/static/auto-generated/fab-list/methods.md';
+import Parts from '@site/static/auto-generated/fab-list/parts.md';
+import CustomProps from '@site/static/auto-generated/fab-list/custom-props.md';
+import Slots from '@site/static/auto-generated/fab-list/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+The fab list component is a container for multiple [fab buttons](./fab-button). It contains actions related to the main fab button and is flung out on click. To specify what side the buttons should appear on, set the `side` property to `"start"`, `"end"`, `"top"`, or `"bottom"`.
+
+For usage examples, see the [fab documentation](./fab).
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/fab.md b/versioned_docs/version-v6/api/fab.md
new file mode 100644
index 00000000000..5ecfbbd012d
--- /dev/null
+++ b/versioned_docs/version-v6/api/fab.md
@@ -0,0 +1,98 @@
+---
+title: 'ion-fab'
+---
+
+import Props from '@site/static/auto-generated/fab/props.md';
+import Events from '@site/static/auto-generated/fab/events.md';
+import Methods from '@site/static/auto-generated/fab/methods.md';
+import Parts from '@site/static/auto-generated/fab/parts.md';
+import CustomProps from '@site/static/auto-generated/fab/custom-props.md';
+import Slots from '@site/static/auto-generated/fab/slots.md';
+
+<head>
+  <title>ion-fab: Floating Action Button for Android and iOS Ionic Apps</title>
+  <meta
+    name="description"
+    content="Fabs, floating action buttons, are container elements that contain one or more fab buttons. Use ion-fab when creating Android and iOS apps with Ionic Framework."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Fabs are container elements that contain one or more [fab buttons](./fab-button). They should be placed in a fixed position that does not scroll with the content. Fabs should have one main fab button. Fabs can also contain one or more [fab lists](./fab-list) which contain related buttons that show when the main fab button is clicked.
+
+## Basic Usage
+
+import BasicUsage from '@site/static/usage/v6/fab/basic/index.md';
+
+<BasicUsage />
+
+## List Side
+
+The `side` property of the [fab list](./fab-list) component controls where it appears relative to the main fab button. A single fab can have multiple fab lists as long as they all have different values for `side`.
+
+import ListSide from '@site/static/usage/v6/fab/list-side/index.md';
+
+<ListSide />
+
+## Positioning
+
+In order to place the fab in a fixed position, it should be assigned to the `fixed` slot of the outer [content](./content) component. Use the `vertical` and `horizontal` props to control the alignment of the fab in the viewport. The `edge` prop will cause the fab button to overlap with the app's header or footer.
+
+import Positioning from '@site/static/usage/v6/fab/positioning/index.md';
+
+<Positioning />
+
+## Button Sizing
+
+Setting the `size` property of the main fab button to `"small"` will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons.
+
+import ButtonSizing from '@site/static/usage/v6/fab/button-sizing/index.md';
+
+<ButtonSizing />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/fab/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSCustomProperties from '@site/static/usage/v6/fab/theming/css-custom-properties/index.md';
+
+<CSSCustomProperties />
+
+### CSS Shadow Parts
+
+import CSSShadowParts from '@site/static/usage/v6/fab/theming/css-shadow-parts/index.md';
+
+<CSSShadowParts />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/footer.md b/versioned_docs/version-v6/api/footer.md
new file mode 100644
index 00000000000..0a4820b5713
--- /dev/null
+++ b/versioned_docs/version-v6/api/footer.md
@@ -0,0 +1,84 @@
+---
+title: 'ion-footer'
+---
+
+import Props from '@site/static/auto-generated/footer/props.md';
+import Events from '@site/static/auto-generated/footer/events.md';
+import Methods from '@site/static/auto-generated/footer/methods.md';
+import Parts from '@site/static/auto-generated/footer/parts.md';
+import CustomProps from '@site/static/auto-generated/footer/custom-props.md';
+import Slots from '@site/static/auto-generated/footer/slots.md';
+
+<head>
+  <title>Page Footer | Ionic App Footer: Wrapper Root Page Component</title>
+  <meta
+    name="description"
+    content="A footer is a root component that sits at the bottom of a page. Ionic footers can be a wrapper for ion-toolbar to make sure the content area is sized correctly."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+Footer is a root component of a page that aligns itself to the bottom of the page. It is recommended to be used as a wrapper for one or more [toolbars](./toolbar), but it can be used to wrap any element. When a toolbar is used inside of a footer, the content will be adjusted so it is sized correctly, and the footer will account for any device safe areas.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/footer/basic/index.md';
+
+<Basic />
+
+## Translucent Footer
+
+Footers can match the transparency found in native iOS applications by setting the `translucent` property. In order to see the content scrolling behind the footer, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility).
+
+import Translucent from '@site/static/usage/v6/footer/translucent/index.md';
+
+<Translucent />
+
+## Fade Footer
+
+Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the footer to `"fade"`. When the content is scrolled to the end, the background and border on the footer will fade away. This effect will only apply when the mode is `"ios"`.
+
+import Fade from '@site/static/usage/v6/footer/fade/index.md';
+
+<Fade />
+
+### Usage with Virtual Scroll
+
+A fade footer requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
+
+import CustomScrollTarget from '@site/static/usage/v6/footer/custom-scroll-target/index.md';
+
+<CustomScrollTarget />
+
+## Borders
+
+In `"md"` mode, the footer will have a `box-shadow` on the top. In `"ios"` mode, it will receive a `border` on the top. These can be removed by adding the `.ion-no-border` class to the footer.
+
+import NoBorder from '@site/static/usage/v6/footer/no-border/index.md';
+
+<NoBorder />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/grid.md b/versioned_docs/version-v6/api/grid.md
new file mode 100644
index 00000000000..22ea8c2f0f1
--- /dev/null
+++ b/versioned_docs/version-v6/api/grid.md
@@ -0,0 +1,217 @@
+---
+title: 'ion-grid'
+---
+
+import Props from '@site/static/auto-generated/grid/props.md';
+import Events from '@site/static/auto-generated/grid/events.md';
+import Methods from '@site/static/auto-generated/grid/methods.md';
+import Parts from '@site/static/auto-generated/grid/parts.md';
+import CustomProps from '@site/static/auto-generated/grid/custom-props.md';
+import Slots from '@site/static/auto-generated/grid/slots.md';
+
+<head>
+  <title>Ion-Grid: Display Grids to Build Mobile-First Custom App Layout</title>
+  <meta
+    name="description"
+    content="Ion-Grid is a mobile-first flexbox system to build custom application display layouts with a 12 column layout and different breakpoints based on screen size."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.md) and [column(s)](col.md). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
+
+## Overview
+
+- Grids act as a container for all rows and columns. Grids take up the full width of their container,
+  but adding the `fixed` property will set the width based on the screen size, see [Fixed Grid](#fixed-grid) below.
+- Rows are horizontal groups of columns that line the columns up properly.
+- Content should be placed within columns, and only columns may be immediate children of rows.
+- The `size` property indicates the number of columns to use out of the default 12 per row.
+  So, `size="4"` can be added to a column in order to take up 1/3 of the grid, or 4 of the 12 columns.
+- Columns without a value for size will automatically have equal widths. For example, four columns will each automatically be 25% wide.
+- Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element.
+- There is padding between individual columns. However, the padding can be removed from the grid and
+  columns by adding the `ion-no-padding` class to the grid. See the [CSS Utilities](../layout/css-utilities) for more styles that can be applied to the grid.
+- There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
+- Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them
+  (e.g., `size-sm="4"` applies to small, medium, large, and extra large devices).
+- Grids can be customized via CSS variables. See [Customizing the Grid](#customizing-the-grid).
+
+## Default Breakpoints
+
+The default breakpoints for the grid and the corresponding properties are defined in the table below. Breakpoint values can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced#variables-in-media-queries).
+
+| Name | Value  | Width Property | Offset Property | Push Property | Pull Property | Description                          |
+| ---- | ------ | -------------- | --------------- | ------------- | ------------- | ------------------------------------ |
+| xs   | 0      | `size`         | `offset`        | `push`        | `pull`        | Set columns when (min-width: 0)      |
+| sm   | 576px  | `sizeSm`       | `offsetSm`      | `pushSm`      | `pullSm`      | Set columns when (min-width: 576px)  |
+| md   | 768px  | `sizeMd`       | `offsetMd`      | `pushMd`      | `pullMd`      | Set columns when (min-width: 768px)  |
+| lg   | 992px  | `sizeLg`       | `offsetLg`      | `pushLg`      | `pullLg`      | Set columns when (min-width: 992px)  |
+| xl   | 1200px | `sizeXl`       | `offsetXl`      | `pushXl`      | `pullXl`      | Set columns when (min-width: 1200px) |
+
+## Basic Usage
+
+By default, columns will take up equal width inside of a row for all devices and screen sizes.
+
+import Basic from '@site/static/usage/v6/grid/basic/index.md';
+
+<Basic />
+
+## Fixed Grid
+
+Grids take up 100% width of their container. By adding the `fixed` property to the grid, the width will be set based on the screen size. The width of the grid for each breakpoint is listed in the table below, but it can be customized. For more information, see [Customizing the Grid](#customizing-the-grid). Open the below example in StackBlitz and resize the screen to see the grid width change.
+
+| Name | Value  | Description                                       |
+| ---- | ------ | ------------------------------------------------- |
+| xs   | 100%   | Width is 100% for xs screens                      |
+| sm   | 540px  | Set grid width to 540px when (min-width: 576px)   |
+| md   | 720px  | Set grid width to 720px when (min-width: 768px)   |
+| lg   | 960px  | Set grid width to 960px when (min-width: 992px)   |
+| xl   | 1140px | Set grid width to 1140px when (min-width: 1200px) |
+
+import Fixed from '@site/static/usage/v6/grid/fixed/index.md';
+
+<Fixed />
+
+## Column Size
+
+Columns can be set to specific sizes to take up a certain number out of the total number of columns, or resize their width based on the content. The default number of columns is 12, but this can be customized. See the [Number of Columns](#number-of-columns) section below for more information.
+
+### Content-based size
+
+By setting the `size` to `"auto"` the column can size itself based on the natural width of its content. This is necessary when setting a column to an absolute width, such as a specific number of pixels. The columns next to the auto-width column will resize to fill the row.
+
+import SizeAuto from '@site/static/usage/v6/grid/size-auto/index.md';
+
+<SizeAuto />
+
+### Specified size
+
+Set the `size` of a column and the others will automatically resize around it. If a size is specified on all of the columns and it doesn't add up to the total number of columns, there will be empty space after the columns.
+
+import Size from '@site/static/usage/v6/grid/size/index.md';
+
+<Size />
+
+### Responsive size
+
+The `size` property will change the column width for all [breakpoints](#default-breakpoints). Column also provides several size properties with the breakpoint name appended to the end of "size". These properties can be used to change the width of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column widths change.
+
+import SizeResponsive from '@site/static/usage/v6/grid/size-responsive/index.md';
+
+<SizeResponsive />
+
+## Column Offset
+
+Columns can be offset to shift to the right by a certain number of columns out of the total number of columns.
+
+### Specified offset
+
+Columns can be moved to the right by using the `offset` property. This property increases the left margin of the column by the number of specified columns. It also shifts the columns to the right of it, if any exist.
+
+import Offset from '@site/static/usage/v6/grid/offset/index.md';
+
+<Offset />
+
+### Responsive offset
+
+The `offset` property will change the column's left margin for all [breakpoints](#default-breakpoints). Column also provides several offset properties with the breakpoint name appended to the end of "offset". These properties can be used to change the offset of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column offsets change.
+
+import OffsetResponsive from '@site/static/usage/v6/grid/offset-responsive/index.md';
+
+<OffsetResponsive />
+
+## Column Push & Pull
+
+Columns can be pushed to to the right or pulled to the left by a certain number of columns out of the total number of columns.
+
+### Specified push & pull
+
+Reorder the columns by adding the `push` and `pull` properties. These properties adjust the `left` and `right` of the columns by the specified number of columns making it easy to reorder columns. This will cause columns to overlap if they are shifted to where another column is positioned.
+
+import PushPull from '@site/static/usage/v6/grid/push-pull/index.md';
+
+<PushPull />
+
+### Responsive push & pull
+
+The `push` and `pull` properties will change the column's position for all [breakpoints](#default-breakpoints). Column also provides several `push` and `pull` properties with the breakpoint name appended to the end of "push" / "pull". These properties can be used to change the position of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column positions change.
+
+import PushPullResponsive from '@site/static/usage/v6/grid/push-pull-responsive/index.md';
+
+<PushPullResponsive />
+
+## Alignment
+
+### Vertical Alignment
+
+All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities#flex-container-properties).
+
+import VerticalAlignment from '@site/static/usage/v6/grid/vertical-alignment/index.md';
+
+<VerticalAlignment />
+
+### Horizontal Alignment
+
+All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.md#flex-container-properties).
+
+import HorizontalAlignment from '@site/static/usage/v6/grid/horizontal-alignment/index.md';
+
+<HorizontalAlignment />
+
+## Customizing the Grid
+
+Using our built-in CSS variables, it’s possible to customize the predefined grid attributes. Change the values of the padding, the number of columns, and more.
+
+### Fixed Width
+
+The width of a fixed grid can be set for all breakpoints with the `--ion-grid-width` CSS variable. To override individual breakpoints, use the `--ion-grid-width-{breakpoint}` CSS variables. The default value for each of the breakpoints can be found in the [Fixed Grid](#fixed-grid) section. Open the below example in StackBlitz and resize the screen to see the grid width change.
+
+import Width from '@site/static/usage/v6/grid/customizing/width/index.md';
+
+<Width />
+
+### Number of Columns
+
+The number of grid columns can be modified with the `--ion-grid-columns` CSS variable. By default there are 12 grid columns, but this can be changed to any positive integer and be used to calculate the width of each individual column.
+
+import ColumnNumber from '@site/static/usage/v6/grid/customizing/column-number/index.md';
+
+<ColumnNumber />
+
+### Padding
+
+The padding on the grid container can be set for all breakpoints with the `--ion-grid-padding` CSS variable. To override individual breakpoints, use the `--ion-grid-padding-{breakpoint}` CSS variables.
+
+The padding on the columns can be set for all breakpoints with the `--ion-grid-column-padding` CSS variable. To override individual breakpoints, use the `--ion-grid-column-padding-{breakpoint}` CSS variables.
+
+import Padding from '@site/static/usage/v6/grid/customizing/padding/index.md';
+
+<Padding />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/header.md b/versioned_docs/version-v6/api/header.md
new file mode 100644
index 00000000000..a746f955361
--- /dev/null
+++ b/versioned_docs/version-v6/api/header.md
@@ -0,0 +1,94 @@
+---
+title: 'ion-header'
+---
+
+import Props from '@site/static/auto-generated/header/props.md';
+import Events from '@site/static/auto-generated/header/events.md';
+import Methods from '@site/static/auto-generated/header/methods.md';
+import Parts from '@site/static/auto-generated/header/parts.md';
+import CustomProps from '@site/static/auto-generated/header/custom-props.md';
+import Slots from '@site/static/auto-generated/header/slots.md';
+
+<head>
+  <title>ion-header: Header Parent Component for Ionic Framework Apps</title>
+  <meta
+    name="description"
+    content="Ion-header is a parent component that holds the toolbar. It's important to note that ion-header needs to be the one of the three root elements of a page."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+Header is a root component of a page that aligns itself to the top of the page. It is recommended to be used as a wrapper for one or more [toolbars](./toolbar), but it can be used to wrap any element. When a toolbar is used inside of a header, the content will be adjusted so it is sized correctly, and the header will account for any device safe areas.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/header/basic/index.md';
+
+<Basic />
+
+## Translucent Header
+
+Headers can match the transparency found in native iOS applications by setting the `translucent` property. In order to see the content scrolling behind the header, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility).
+
+import Translucent from '@site/static/usage/v6/header/translucent/index.md';
+
+<Translucent />
+
+## Condensed Header
+
+Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the `collapse` property to `"condense"` on the header inside of the content. This effect will only apply when the mode is "ios".
+
+import Condense from '@site/static/usage/v6/header/condense/index.md';
+
+<Condense />
+
+## Fade Header
+
+Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the header to `"fade"`. When the page is first loaded, the background and border on the header will be hidden. As the content is scrolled, the header will fade back in. This effect will only apply when the mode is "ios".
+
+This functionality can be combined with a [Condensed Header](#condensed-header) as well. The `collapse` property with a value set to `"fade"` should be on the header outside of the content.
+
+import Fade from '@site/static/usage/v6/header/fade/index.md';
+
+<Fade />
+
+### Usage with Virtual Scroll
+
+A fade header requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
+
+import CustomScrollTarget from '@site/static/usage/v6/header/custom-scroll-target/index.md';
+
+<CustomScrollTarget />
+
+## Borders
+
+In `"md"` mode, the header will have a `box-shadow` on the bottom. In `"ios"` mode, it will receive a `border` on the bottom. These can be removed by adding the `.ion-no-border` class to the header.
+
+import NoBorder from '@site/static/usage/v6/header/no-border/index.md';
+
+<NoBorder />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/img.md b/versioned_docs/version-v6/api/img.md
new file mode 100644
index 00000000000..aa1010e46b5
--- /dev/null
+++ b/versioned_docs/version-v6/api/img.md
@@ -0,0 +1,54 @@
+---
+title: 'ion-img'
+---
+
+import Props from '@site/static/auto-generated/img/props.md';
+import Events from '@site/static/auto-generated/img/events.md';
+import Methods from '@site/static/auto-generated/img/methods.md';
+import Parts from '@site/static/auto-generated/img/parts.md';
+import CustomProps from '@site/static/auto-generated/img/custom-props.md';
+import Slots from '@site/static/auto-generated/img/slots.md';
+
+<head>
+  <title>Img Tag to Lazy Load Images in Viewport | ion-img Tag</title>
+  <meta
+    name="description"
+    content="Img tag lazy loads images whenever the tag is in the viewport. Utilize this component when generating large lists—as images are only loaded when visible."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Img is a tag that will lazily load an image whenever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browsers, but falls back to a `setTimeout` when it is not supported.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/img/basic/index.md';
+
+<Basic />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/infinite-scroll-content.md b/versioned_docs/version-v6/api/infinite-scroll-content.md
new file mode 100644
index 00000000000..2647dffdb87
--- /dev/null
+++ b/versioned_docs/version-v6/api/infinite-scroll-content.md
@@ -0,0 +1,34 @@
+---
+title: "ion-infinite-scroll-content"
+---
+
+import Props from '@site/static/auto-generated/infinite-scroll-content/props.md';
+import Events from '@site/static/auto-generated/infinite-scroll-content/events.md';
+import Methods from '@site/static/auto-generated/infinite-scroll-content/methods.md';
+import Parts from '@site/static/auto-generated/infinite-scroll-content/parts.md';
+import CustomProps from '@site/static/auto-generated/infinite-scroll-content/custom-props.md';
+import Slots from '@site/static/auto-generated/infinite-scroll-content/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
+
+For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content).
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/infinite-scroll.md b/versioned_docs/version-v6/api/infinite-scroll.md
new file mode 100644
index 00000000000..0ea2be497e9
--- /dev/null
+++ b/versioned_docs/version-v6/api/infinite-scroll.md
@@ -0,0 +1,119 @@
+---
+title: 'ion-infinite-scroll'
+---
+
+import Props from '@site/static/auto-generated/infinite-scroll/props.md';
+import Events from '@site/static/auto-generated/infinite-scroll/events.md';
+import Methods from '@site/static/auto-generated/infinite-scroll/methods.md';
+import Parts from '@site/static/auto-generated/infinite-scroll/parts.md';
+import CustomProps from '@site/static/auto-generated/infinite-scroll/custom-props.md';
+import Slots from '@site/static/auto-generated/infinite-scroll/slots.md';
+
+<head>
+  <title>Infinite Scroller | ion-infinite-scroll Action Component</title>
+  <meta
+    name="description"
+    content="The ion-infinite-scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page.
+
+The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance.
+
+import Basic from '@site/static/usage/v6/infinite-scroll/basic/index.md';
+
+<Basic />
+
+## Loading Text and Spinner
+
+The `ion-infinite-scroll-content` is responsible for the visual display of the infinite scroll interaction. By default this component changes its look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. Both the spinner and loading text can be customized by setting properties on the `ion-infinite-scroll-content` component.
+
+import InfiniteScrollContent from '@site/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md';
+
+<InfiniteScrollContent />
+
+## Custom Content
+
+Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` components allows developers to create their own content components, if desired. This content can contain anything, from an SVG element to elements with unique CSS animations.
+
+import CustomContent from '@site/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md';
+
+<CustomContent />
+
+## Usage with Virtual Scroll
+
+Infinite scroll requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
+
+```html
+<ion-content scroll-y="false">
+  <virtual-scroll-element class="ion-content-scroll-host">
+    <!-- Your virtual scroll content -->
+  </virtual-scroll-element>
+  <ion-infinite-scroll>
+    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+</ion-content>
+```
+
+## Accessibility
+
+Developers should assign the `role="feed"` attribute to the scrollable list of items that are added to or removed from as the user scrolls.
+
+Individual list items should either have `role="article"` or use the `<article>` element directly.
+
+For example, when rendering a collection of items in an `ion-list`:
+
+```html
+<ion-content role="feed">
+  <ion-list>
+    <ion-item role="article"> First item </ion-item>
+    <ion-item role="article"> Second item </ion-item>
+    ...
+  </ion-list>
+
+  <ion-infinite-scroll>
+    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+</ion-content>
+```
+
+Please refer to the [ARIA: feed role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role) documentation for additional information.
+
+## Interfaces
+
+### InfiniteScrollCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface InfiniteScrollCustomEvent extends CustomEvent {
+  target: HTMLIonInfiniteScrollElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/input.md b/versioned_docs/version-v6/api/input.md
new file mode 100644
index 00000000000..94ff562caff
--- /dev/null
+++ b/versioned_docs/version-v6/api/input.md
@@ -0,0 +1,143 @@
+---
+title: 'ion-input'
+---
+
+import Props from '@site/static/auto-generated/input/props.md';
+import Events from '@site/static/auto-generated/input/events.md';
+import Methods from '@site/static/auto-generated/input/methods.md';
+import Parts from '@site/static/auto-generated/input/parts.md';
+import CustomProps from '@site/static/auto-generated/input/custom-props.md';
+import Slots from '@site/static/auto-generated/input/slots.md';
+
+<head>
+  <title>ion-input: Custom Input Value Type Styling and CSS Properties</title>
+  <meta
+    name="description"
+    content="ion-input is a wrapper to the HTML input element, with custom value type styling and functionality. It works on desktops and integrates with mobile keyboards."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/input/basic/index.md';
+
+<Basic />
+
+## Types
+
+The input component is meant for text type inputs only, such as `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, and `"url"`. It supports all standard text input events including keyup, keydown, keypress, and more. The default `type` is `"text"`.
+
+import Types from '@site/static/usage/v6/input/types/index.md';
+
+<Types />
+
+## Label Positioning
+
+Labels will take up the width of their content by default. This positioning can be changed to be a fixed width, stacked, or floating label.
+
+import Labels from '@site/static/usage/v6/input/labels/index.md';
+
+<Labels />
+
+## Clear Options
+
+Inputs offer two options for clearing the input based on how you interact with it. The first way is by adding the `clearInput` property which will show a clear button when the input has a `value`. The second way is the `clearOnEdit` property which will clear the input after it has been blurred and then typed in again. Inputs with a `type` set to `"password"` will have `clearOnEdit` enabled by default.
+
+import Clear from '@site/static/usage/v6/input/clear/index.md';
+
+<Clear />
+
+## Filled Inputs
+
+Material Design offers filled styles for an input when it is inside of an item. The `fill` property on the item can be set to either `"solid"` or `"outline"`.
+
+import Fill from '@site/static/usage/v6/input/fill/index.md';
+
+<Fill />
+
+## Helper & Error Text
+
+Helper & error text can be used inside of an item with an input by slotting a note in the `"helper"` and `"error"` slots. The error slot will not be displayed unless the `ion-invalid` class is added to the `ion-item`. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
+
+<!-- Reuse the playground from the Item directory -->
+
+import HelperError from '@site/static/usage/v6/item/helper-error/index.md';
+
+<HelperError />
+
+## Item Counter
+
+The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as `inputLength` / `maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property.
+
+<!-- Reuse the playground from the Item directory -->
+
+import Counter from '@site/static/usage/v6/item/counter/index.md';
+
+<Counter />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/input/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+Input uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` for customization will not work; therefore we recommend adding a class and customizing it that way.
+
+import CSSProps from '@site/static/usage/v6/input/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Interfaces
+
+### InputChangeEventDetail
+
+```typescript
+interface InputChangeEventDetail {
+  value: string | undefined | null;
+}
+```
+
+### InputCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface InputCustomEvent extends CustomEvent {
+  detail: InputChangeEventDetail;
+  target: HTMLIonInputElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/item-divider.md b/versioned_docs/version-v6/api/item-divider.md
new file mode 100644
index 00000000000..381d9eb414a
--- /dev/null
+++ b/versioned_docs/version-v6/api/item-divider.md
@@ -0,0 +1,68 @@
+---
+title: 'ion-item-divider'
+---
+
+import Props from '@site/static/auto-generated/item-divider/props.md';
+import Events from '@site/static/auto-generated/item-divider/events.md';
+import Methods from '@site/static/auto-generated/item-divider/methods.md';
+import Parts from '@site/static/auto-generated/item-divider/parts.md';
+import CustomProps from '@site/static/auto-generated/item-divider/custom-props.md';
+import Slots from '@site/static/auto-generated/item-divider/slots.md';
+
+<head>
+  <title>Item Divider | List Item Divider Block Element for Ionic Apps</title>
+  <meta
+    name="description"
+    content="Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead, go in between groups of items."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Item dividers are block elements that can be used to separate [items](./item) in a list. They are similar to list headers, but instead of only being placed at the top of a list, they should go in between groups of items.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/item-divider/basic/index.md';
+
+<Basic />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/item-divider/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/item-divider/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/item-group.md b/versioned_docs/version-v6/api/item-group.md
new file mode 100644
index 00000000000..c7920c017dd
--- /dev/null
+++ b/versioned_docs/version-v6/api/item-group.md
@@ -0,0 +1,58 @@
+---
+title: 'ion-item-group'
+---
+
+import Props from '@site/static/auto-generated/item-group/props.md';
+import Events from '@site/static/auto-generated/item-group/events.md';
+import Methods from '@site/static/auto-generated/item-group/methods.md';
+import Parts from '@site/static/auto-generated/item-group/parts.md';
+import CustomProps from '@site/static/auto-generated/item-group/custom-props.md';
+import Slots from '@site/static/auto-generated/item-group/slots.md';
+
+<head>
+  <title>ion-item-group: Group Items to Divide into Multiple Sections</title>
+  <meta
+    name="description"
+    content="Item groups are containers that organize similar items together. ion-item-groups can contain item dividers to divide the items into multiple sections. "
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+Item groups are containers that organize similar [items](./item) together. They can contain [item dividers](./item-divider) to divide the items into multiple sections. They can also be used to group [sliding items](./item-sliding).
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/item-group/basic/index.md';
+
+<Basic />
+
+## Sliding Items
+
+import SlidingItems from '@site/static/usage/v6/item-group/sliding-items/index.md';
+
+<SlidingItems />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/item-option.md b/versioned_docs/version-v6/api/item-option.md
new file mode 100644
index 00000000000..800d1030f50
--- /dev/null
+++ b/versioned_docs/version-v6/api/item-option.md
@@ -0,0 +1,42 @@
+---
+title: "ion-item-option"
+---
+import Props from '@site/static/auto-generated/item-option/props.md';
+import Events from '@site/static/auto-generated/item-option/events.md';
+import Methods from '@site/static/auto-generated/item-option/methods.md';
+import Parts from '@site/static/auto-generated/item-option/parts.md';
+import CustomProps from '@site/static/auto-generated/item-option/custom-props.md';
+import Slots from '@site/static/auto-generated/item-option/slots.md';
+
+<head>
+  <title>ion-item-options: Option Button Components for Ionic Apps</title>
+  <meta name="description" content="ion-item-option is the option button for an ion-item-sliding and must be placed inside of an <ion-item-options>. Read to learn more about properties." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+The item option component is an button for a sliding item. It must be placed inside of [item options](./item-options). The `ionSwipe` event and the `expandable` property can be combined to create a full swipe action for the item.
+
+See the [item sliding](./item-sliding) documentation for more information.
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/item-options.md b/versioned_docs/version-v6/api/item-options.md
new file mode 100644
index 00000000000..cbee8f5289b
--- /dev/null
+++ b/versioned_docs/version-v6/api/item-options.md
@@ -0,0 +1,50 @@
+---
+title: "ion-item-options"
+---
+import Props from '@site/static/auto-generated/item-options/props.md';
+import Events from '@site/static/auto-generated/item-options/events.md';
+import Methods from '@site/static/auto-generated/item-options/methods.md';
+import Parts from '@site/static/auto-generated/item-options/parts.md';
+import CustomProps from '@site/static/auto-generated/item-options/custom-props.md';
+import Slots from '@site/static/auto-generated/item-options/slots.md';
+
+<head>
+  <title>ion-item-options: Option Button Components for Ionic Apps</title>
+  <meta name="description" content="ion-item-options are for ion-item-sliding. These option buttons can be placed either on the start or end side. Read to learn more about use on Ionic apps." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+The item options component is a container for the [item option](./item-option) buttons in a sliding item. These buttons can be placed either on the [start or end side](#side-description).
+
+See the [item sliding](./item-sliding) documentation for more information.
+
+
+## Side Description
+
+| Side    | Position                                                        | Swipe Direction                                                   |
+|---------|-----------------------------------------------------------------|-------------------------------------------------------------------|
+| `start` | To the `left` of the content in LTR, and to the `right` in RTL. | From `left` to `right` in LTR, and from `right` to `left` in RTL. |
+| `end`   | To the `right` of the content in LTR, and to the `left` in RTL. | From `right` to `left` in LTR, and from `left` to `right` in RTL. |
+
+
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/item-sliding.md b/versioned_docs/version-v6/api/item-sliding.md
new file mode 100644
index 00000000000..dba424f2b7f
--- /dev/null
+++ b/versioned_docs/version-v6/api/item-sliding.md
@@ -0,0 +1,82 @@
+---
+title: 'ion-item-sliding'
+---
+
+import Props from '@site/static/auto-generated/item-sliding/props.md';
+import Events from '@site/static/auto-generated/item-sliding/events.md';
+import Methods from '@site/static/auto-generated/item-sliding/methods.md';
+import Parts from '@site/static/auto-generated/item-sliding/parts.md';
+import CustomProps from '@site/static/auto-generated/item-sliding/custom-props.md';
+import Slots from '@site/static/auto-generated/item-sliding/slots.md';
+
+<head>
+  <title>Slide Buttons | Slide Right to Left with ion-item-sliding</title>
+  <meta
+    name="description"
+    content="ion-item-sliding component contains items that are dragged to reveal buttons. Options are revealed when the sliding item is swiped from left to right."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+A sliding item contains an item that can be dragged to reveal option buttons. It requires an [item](./item) component as a child. All options to reveal should be placed in the [item options](./item-options) element.
+
+## Basic Usage
+
+Sliding item options are placed on the `"end"` side of the item by default. This means that options are revealed when the item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the side attribute to `"start"` on the [item options](./item-options) element. Up to two item options can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
+
+import Basic from '@site/static/usage/v6/item-sliding/basic/index.md';
+
+<Basic />
+
+## Icon Options
+
+When an icon is placed alongside text in the [item option](./item-option), it will display the icon on top of the text by default. The slot on the icon can be changed to any of the available [item option slots](./item-option#slots) to change its position.
+
+import Icons from '@site/static/usage/v6/item-sliding/icons/index.md';
+
+<Icons />
+
+## Expandable Options
+
+Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the `ionSwipe` event on the [item options](./item-options) to call a method when the item is fully swiped.
+
+import Expandable from '@site/static/usage/v6/item-sliding/expandable/index.md';
+
+<Expandable />
+
+## Interfaces
+
+### ItemSlidingCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface ItemSlidingCustomEvent extends CustomEvent {
+  target: HTMLIonItemSlidingElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/item.md b/versioned_docs/version-v6/api/item.md
new file mode 100644
index 00000000000..eb3df16d32e
--- /dev/null
+++ b/versioned_docs/version-v6/api/item.md
@@ -0,0 +1,168 @@
+---
+title: 'ion-item'
+---
+
+import Props from '@site/static/auto-generated/item/props.md';
+import Events from '@site/static/auto-generated/item/events.md';
+import Methods from '@site/static/auto-generated/item/methods.md';
+import Parts from '@site/static/auto-generated/item/parts.md';
+import CustomProps from '@site/static/auto-generated/item/custom-props.md';
+import Slots from '@site/static/auto-generated/item/slots.md';
+
+<head>
+  <title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
+  <meta
+    name="description"
+    content="ion-item elements for iOS/Android contain text, icons, images, and other custom elements. They're placed in a list and can be input, deleted, edited, and more."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a [list](./list) with other items. Items can be swiped, deleted, reordered, edited, and more.
+
+## Basic Usage
+
+Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-wrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text.
+
+import Basic from '@site/static/usage/v6/item/basic/index.md';
+
+<Basic />
+
+## Clickable Items
+
+An item is considered "clickable" if it has an `href` or `button` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode.
+
+import Clickable from '@site/static/usage/v6/item/clickable/index.md';
+
+<Clickable />
+
+## Detail Arrows
+
+By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`.
+
+import DetailArrows from '@site/static/usage/v6/item/detail-arrows/index.md';
+
+<DetailArrows />
+
+<!--
+
+TODO add this functionality back as a css variable
+
+This feature is not enabled by default on clickable items for the `md` mode, but it can be enabled by setting the following CSS variable:
+
+```css
+--item-detail-push-show: true;
+```
+
+See the [theming documentation](/docs/theming/css-variables) for more information.
+
+-->
+
+## Item Lines
+
+Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the `"start"` slot. The `lines` property can be modified to `"full"` or `"none"` which will show a full width border or no border, respectively.
+
+import Lines from '@site/static/usage/v6/item/lines/index.md';
+
+<Lines />
+
+## Media Items
+
+[Avatars](./avatar) and [Thumbnails](./thumbnail) can be slotted inside of an item. This is useful when making lists of images and text.
+
+import Media from '@site/static/usage/v6/item/media/index.md';
+
+<Media />
+
+## Buttons in Items
+
+Buttons are styled smaller inside of items than when they are outside of them. To make the button size match buttons outside of an item, set the `size` attribute to `"default"`.
+
+import Buttons from '@site/static/usage/v6/item/buttons/index.md';
+
+<Buttons />
+
+## Icons in Items
+
+import Icons from '@site/static/usage/v6/item/icons/index.md';
+
+<Icons />
+
+## Item Inputs
+
+import Inputs from '@site/static/usage/v6/item/inputs/index.md';
+
+<Inputs />
+
+## Helper & Error Text
+
+Helper & error text can be used inside of an item with an input by slotting a note in the `"helper"` and `"error"` slots. The error slot will not be displayed unless the `ion-invalid` class is added to the `ion-item`. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
+
+import HelperError from '@site/static/usage/v6/item/helper-error/index.md';
+
+<HelperError />
+
+## Item Counter
+
+The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding `counter`, the default behavior is to format the value that gets displayed as `inputLength / maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property.
+
+import Counter from '@site/static/usage/v6/item/counter/index.md';
+
+<Counter />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/item/theming/colors/index.md';
+
+<Colors />
+
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v6/item/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/item/theming/css-properties/index.md';
+
+<CSSProps />
+
+### Input Highlight
+
+Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`.
+
+The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. This can be customized using the provided CSS properties.
+
+import InputHighlight from '@site/static/usage/v6/item/theming/input-highlight/index.md';
+
+<InputHighlight />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/label.md b/versioned_docs/version-v6/api/label.md
new file mode 100644
index 00000000000..329f40c56a4
--- /dev/null
+++ b/versioned_docs/version-v6/api/label.md
@@ -0,0 +1,74 @@
+---
+title: 'ion-label'
+---
+
+import Props from '@site/static/auto-generated/label/props.md';
+import Events from '@site/static/auto-generated/label/events.md';
+import Methods from '@site/static/auto-generated/label/methods.md';
+import Parts from '@site/static/auto-generated/label/parts.md';
+import CustomProps from '@site/static/auto-generated/label/custom-props.md';
+import Slots from '@site/static/auto-generated/label/slots.md';
+
+<head>
+  <title>Item Label Color and Properties for Applications | ion-label</title>
+  <meta
+    name="description"
+    content="Label is a wrapper element that can be used in combination with other Ionic components. Easily design item label colors and other properties with ion-label."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/label/basic/index.md';
+
+<Basic />
+
+## Item Labels
+
+import Item from '@site/static/usage/v6/label/item/index.md';
+
+<Item />
+
+## Input Labels
+
+import Input from '@site/static/usage/v6/label/input/index.md';
+
+<Input />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/label/theming/colors/index.md';
+
+<Colors />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/list-header.md b/versioned_docs/version-v6/api/list-header.md
new file mode 100644
index 00000000000..2410ffc044f
--- /dev/null
+++ b/versioned_docs/version-v6/api/list-header.md
@@ -0,0 +1,76 @@
+---
+title: 'ion-list-header'
+---
+
+import Props from '@site/static/auto-generated/list-header/props.md';
+import Events from '@site/static/auto-generated/list-header/events.md';
+import Methods from '@site/static/auto-generated/list-header/methods.md';
+import Parts from '@site/static/auto-generated/list-header/parts.md';
+import CustomProps from '@site/static/auto-generated/list-header/custom-props.md';
+import Slots from '@site/static/auto-generated/list-header/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+List headers are block elements that are used to describe the contents of a [list](./list). Unlike [item dividers](./item-divider), list headers should only be used once at the top of a list of [items](./item).
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/list-header/basic/index.md';
+
+<Basic />
+
+## Buttons in List Headers
+
+A [button](./button) placed in a list header can be useful for showing part of a list and redirecting to the full list with the button.
+
+import Buttons from '@site/static/usage/v6/list-header/buttons/index.md';
+
+<Buttons />
+
+## List Header Lines
+
+List headers do not show a bottom border by default. The `lines` property can be modified to `"full"` or `"inset"` which will show a full width border or an inset border with left padding, respectively.
+
+import Lines from '@site/static/usage/v6/list-header/lines/index.md';
+
+<Lines />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/list-header/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/list-header/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/list.md b/versioned_docs/version-v6/api/list.md
new file mode 100644
index 00000000000..336fe851f08
--- /dev/null
+++ b/versioned_docs/version-v6/api/list.md
@@ -0,0 +1,71 @@
+---
+title: 'ion-list'
+---
+
+import Props from '@site/static/auto-generated/list/props.md';
+import Events from '@site/static/auto-generated/list/events.md';
+import Methods from '@site/static/auto-generated/list/methods.md';
+import Parts from '@site/static/auto-generated/list/parts.md';
+import CustomProps from '@site/static/auto-generated/list/custom-props.md';
+import Slots from '@site/static/auto-generated/list/slots.md';
+
+<head>
+  <title>ion-list: Item List View Component for iOS and Android Apps</title>
+  <meta
+    name="description"
+    content="ion-lists are made up of multiple rows of items containing text, icons, toggles, and more. Learn about the list view component for iOS and Android Ionic apps."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+Lists are made up of multiple rows of [items](./item) which can contain text, buttons, toggles,
+icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text.
+
+Lists support several interactions including swiping items to reveal options, dragging to [reorder](./reorder) items within the list, and deleting items.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/list/basic/index.md';
+
+<Basic />
+
+## Inset List
+
+Adding the `inset` property to a list will apply margin around the list. In `ios` mode it will also add rounded corners to the list.
+
+import Inset from '@site/static/usage/v6/list/inset/index.md';
+
+<Inset />
+
+## List Lines
+
+Adding the `lines` property to a list will adjust the bottom borders of all of the items in the list. Setting it to `"full"` will display full width borders, `"inset"` will display borders adjusted with left padding, and `"none"` will show no borders. If the `lines` property is set on an item in a list, that will take priority over the property on the list.
+
+import Lines from '@site/static/usage/v6/list/lines/index.md';
+
+<Lines />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/loading.md b/versioned_docs/version-v6/api/loading.md
new file mode 100644
index 00000000000..c9bd57dd163
--- /dev/null
+++ b/versioned_docs/version-v6/api/loading.md
@@ -0,0 +1,179 @@
+---
+title: 'ion-loading'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@site/static/auto-generated/loading/props.md';
+import Events from '@site/static/auto-generated/loading/events.md';
+import Methods from '@site/static/auto-generated/loading/methods.md';
+import Parts from '@site/static/auto-generated/loading/parts.md';
+import CustomProps from '@site/static/auto-generated/loading/custom-props.md';
+import Slots from '@site/static/auto-generated/loading/slots.md';
+
+<head>
+  <title>Loading | Application Loading Indicator Overlay | ion-loading</title>
+  <meta
+    name="description"
+    content="The ion-loading overlay indicates activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting `showBackdrop: false` upon creation.
+
+## Basic Usage
+
+Once presented, the loading indicator will display indefinitely by default. Developers can manually dismiss the loading indicator after creation by calling the `dismiss()` method on the component. The `onDidDismiss` function can be called to perform an action after the loading indicator is dismissed.
+
+Alternatively, developers can configure the loading indicator to dismiss automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the loading options.
+
+### Controller
+
+import Controller from '@site/static/usage/v6/loading/controller/index.md';
+
+<Controller />
+
+### Inline
+
+Ionic React and Ionic Vue users also have the option to use the `ion-loading` component directly in their template.
+
+<Tabs defaultValue="react" values={[{ value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+<TabItem value="react">
+
+```tsx
+import React, { useState } from 'react';
+import { IonLoading, IonButton, IonContent } from '@ionic/react';
+
+export const LoadingExample: React.FC = () => {
+  const [showLoading, setShowLoading] = useState(false);
+
+  return (
+    <IonContent>
+      <IonButton onClick={() => setShowLoading(true)}>Show Loading</IonButton>
+      <IonLoading
+        cssClass="my-custom-class"
+        isOpen={showLoading}
+        onDidDismiss={() => setShowLoading(false)}
+        message={'Please wait...'}
+        duration={5000}
+      />
+    </IonContent>
+  );
+};
+```
+
+</TabItem>
+<TabItem value="vue">
+
+```html
+<template>
+  <ion-content>
+    <ion-button @click="setOpen(true)">Show Loading</ion-button>
+    <ion-loading
+      :is-open="isOpenRef"
+      cssClass="my-custom-class"
+      message="Please wait..."
+      :duration="timeout"
+      @didDismiss="setOpen(false)"
+    >
+    </ion-loading>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonLoading } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+  export default defineComponent({
+    props: {
+      timeout: { type: Number, default: 1000 },
+    },
+    components: { IonButton, IonContent, IonLoading },
+    setup() {
+      const isOpenRef = ref(false);
+      const setOpen = (state: boolean) => (isOpenRef.value = state);
+
+      return { isOpenRef, setOpen };
+    },
+  });
+</script>
+```
+
+</TabItem>
+</Tabs>
+
+## Customization
+
+### Spinners
+
+The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#spinner) for a full list of options.
+
+import Spinners from '@site/static/usage/v6/loading/spinners/index.md';
+
+<Spinners />
+
+### Theming
+
+Loading uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
+
+We recommend passing a custom class and using that to add custom styles to the host and inner elements.
+
+import Theming from '@site/static/usage/v6/loading/theming/index.md';
+
+<Theming />
+
+:::note
+`ion-loading` is presented at the root of your application, so we recommend placing any `ion-loading` styles in a global stylesheet.
+:::
+
+## Interfaces
+
+### LoadingOptions
+
+```typescript
+interface LoadingOptions {
+  spinner?: SpinnerTypes | null;
+  message?: string | IonicSafeString;
+  cssClass?: string | string[];
+  showBackdrop?: boolean;
+  duration?: number;
+  translucent?: boolean;
+  animated?: boolean;
+  backdropDismiss?: boolean;
+  mode?: Mode;
+  keyboardClose?: boolean;
+  id?: string;
+  htmlAttributes?: { [key: string]: any };
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/menu-button.md b/versioned_docs/version-v6/api/menu-button.md
new file mode 100644
index 00000000000..adba980b958
--- /dev/null
+++ b/versioned_docs/version-v6/api/menu-button.md
@@ -0,0 +1,42 @@
+---
+title: "ion-menu-button"
+---
+import Props from '@site/static/auto-generated/menu-button/props.md';
+import Events from '@site/static/auto-generated/menu-button/events.md';
+import Methods from '@site/static/auto-generated/menu-button/methods.md';
+import Parts from '@site/static/auto-generated/menu-button/parts.md';
+import CustomProps from '@site/static/auto-generated/menu-button/custom-props.md';
+import Slots from '@site/static/auto-generated/menu-button/slots.md';
+
+<head>
+  <title>Menu Button | ion-menu-button to Open an App Menu on A Page</title>
+  <meta name="description" content="Menu Button is component that automatically creates the icon and functionality to open a menu on an app page. Read to learn more about ion-menu-button." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+The Menu Button component contains an icon and automatically adds functionality to open a menu when clicked.
+
+See the [menu](./menu) documentation for more information.
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/menu-toggle.md b/versioned_docs/version-v6/api/menu-toggle.md
new file mode 100644
index 00000000000..e6a10201362
--- /dev/null
+++ b/versioned_docs/version-v6/api/menu-toggle.md
@@ -0,0 +1,44 @@
+---
+title: "ion-menu-toggle"
+---
+import Props from '@site/static/auto-generated/menu-toggle/props.md';
+import Events from '@site/static/auto-generated/menu-toggle/events.md';
+import Methods from '@site/static/auto-generated/menu-toggle/methods.md';
+import Parts from '@site/static/auto-generated/menu-toggle/parts.md';
+import CustomProps from '@site/static/auto-generated/menu-toggle/custom-props.md';
+import Slots from '@site/static/auto-generated/menu-toggle/slots.md';
+
+<head>
+  <title>ion-menu-toggle | MenuToggle Component to Open/Close Active Menus</title>
+  <meta name="description" content="The MenuToggle component can be used to toggle a menu open or closed—by default, it's only visible when the selected menu is active. Read more about usage." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+The Menu Toggle component can be used to toggle a menu open or closed.
+
+Menu toggles are only visible when the selected menu is enabled. If the menu is disabled or it's being presented as a split pane, the menu toggle will be hidden. To always display the menu toggle, the `autoHide` property can be set to `false`.
+
+See the [menu](./menu#menu-toggle) documentation for more information.
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/menu.md b/versioned_docs/version-v6/api/menu.md
new file mode 100644
index 00000000000..323f90dd18b
--- /dev/null
+++ b/versioned_docs/version-v6/api/menu.md
@@ -0,0 +1,96 @@
+---
+title: 'ion-menu'
+---
+
+import Props from '@site/static/auto-generated/menu/props.md';
+import Events from '@site/static/auto-generated/menu/events.md';
+import Methods from '@site/static/auto-generated/menu/methods.md';
+import Parts from '@site/static/auto-generated/menu/parts.md';
+import CustomProps from '@site/static/auto-generated/menu/custom-props.md';
+import Slots from '@site/static/auto-generated/menu/slots.md';
+
+<head>
+  <title>ion-menu: API Framework Docs for Types of Menu Components</title>
+  <meta
+    name="description"
+    content="ion-menu components are navigation drawers that slide in from the side of the current view. Read our framework docs for the available menu types on Ionic API."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+The Menu component is a navigation drawer that slides in from the side of the current view.
+By default, it slides in from the left, but the side can be overridden.
+The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types.
+The menu element should be a sibling to the root content element.
+There can be any number of menus attached to the content.
+These can be controlled from the templates, or programmatically using the MenuController.
+
+## Basic Usage
+
+import BasicUsage from '@site/static/usage/v6/menu/basic/index.md';
+
+<BasicUsage />
+
+## Menu Toggle
+
+The [ion-menu-toggle](./menu-toggle) component can be used to create custom button that can open or close the menu.
+
+import MenuToggle from '@site/static/usage/v6/menu/toggle/index.md';
+
+<MenuToggle />
+
+## Menu Types
+
+The `type` property can be used to customize how menus display in your application.
+
+import MenuType from '@site/static/usage/v6/menu/type/index.md';
+
+<MenuType />
+
+## Theming
+
+### CSS Shadow Parts
+
+import Theming from '@site/static/usage/v6/menu/theming/index.md';
+
+<Theming />
+
+## Interfaces
+
+### MenuCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface MenuCustomEvent<T = any> extends CustomEvent {
+  detail: T;
+  target: HTMLIonMenuElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.md
new file mode 100644
index 00000000000..38079cb6cc9
--- /dev/null
+++ b/versioned_docs/version-v6/api/modal.md
@@ -0,0 +1,292 @@
+---
+title: 'ion-modal'
+---
+
+import Props from '@site/static/auto-generated/modal/props.md';
+import Events from '@site/static/auto-generated/modal/events.md';
+import Methods from '@site/static/auto-generated/modal/methods.md';
+import Parts from '@site/static/auto-generated/modal/parts.md';
+import CustomProps from '@site/static/auto-generated/modal/custom-props.md';
+import Slots from '@site/static/auto-generated/modal/slots.md';
+
+<head>
+  <title>ion-modal: Ionic Mobile App Custom Modal API Component</title>
+  <meta
+    name="description"
+    content="ion-modal is a dialog that appears on top of mobile app content, and must be dismissed before interaction resumes. Learn more about custom modal components."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases.
+
+## Inline Modals (Recommended)
+
+`ion-modal` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the modal.
+
+When using `ion-modal` with Angular, React, or Vue, the component you pass in will be destroyed when the modal is dismissed. As this functionality is provided by the JavaScript framework, using `ion-modal` without a JavaScript framework will not destroy the component you passed in. If this is a needed functionality, we recommend using the `modalController` instead.
+
+import InlineModalTriggerExample from '@site/static/usage/v6/modal/inline/basic/index.md';
+
+<InlineModalTriggerExample />
+
+### Using `isOpen`
+
+The `isOpen` property on `ion-modal` allows developers to control the presentation state of the modal from their application state. This means when `isOpen` is set to `true` the modal will be presented and when `isOpen` is set to `false` the modal will be dismissed.
+
+`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the modal is dismissed. Developers should listen for the `ionModalDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-modal` from being tightly coupled with the state of the application. With a one way data binding, the modal only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the modal needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
+
+import InlineModalIsOpenExample from '@site/static/usage/v6/modal/inline/is-open/index.md';
+
+<InlineModalIsOpenExample />
+
+## Controller Modals
+
+With the `modalController` developers can present an `ion-modal` programmatically. Developers will have complete control over when a modal is presented and dismissed.
+
+import ControllerExample from '@site/static/usage/v6/modal/controller/index.md';
+
+<ControllerExample />
+
+## Preventing a Modal from Dismissing
+
+When entering data into a modal, it is often desirable to have a way of preventing accidental data loss. The `canDismiss` property on `ion-modal` gives developers control over when a modal is allowed to dismiss.
+
+There are two different ways of using the `canDismiss` property.
+
+:::note
+Note: When using a sheet modal, `canDismiss` will not be checked on swipe if there is no `0` breakpoint set. However, it will still be checked when pressing `Esc` or the hardware back button.
+:::
+
+### Setting a boolean value
+
+Developers can set `canDismiss` to a boolean value. If `canDismiss` is `true`, then the modal will close when users attempt to dismiss the modal. If `canDismiss` is `false`, then the modal will not close when users attempt to dismiss the modal.
+
+Setting a boolean value should be used when you need to require a particular action to be taken prior to a modal being dismissed. For example, if developers want to require that a "Terms of Use" checkbox is checked prior to closing the modal, they could set `canDismiss` to `false` initially and update it to `true` when the checkbox is checked.
+
+import CanDismissBooleanExample from '@site/static/usage/v6/modal/can-dismiss/boolean/index.md';
+
+<CanDismissBooleanExample />
+
+### Setting a callback function
+
+Developers can set `canDismiss` to be a function. This function must return a `Promise` that resolves to either `true` or `false`. If the promise resolves to `true`, then the modal will dismiss. If the promise resolves to `false`, then the modal will not dismiss.
+
+Setting a callback function should be used when you have complex dismissing criteria such as showing a confirmation dialog prior to dismissing the modal. The option that users select in this dialog can then be used to determine whether or not the modal should proceed with dismissing.
+
+Note that setting a callback function will cause the swipe gesture to be interrupted when using a card or sheet modal. This is because Ionic does not know what your callback function will resolve to ahead of time.
+
+import CanDismissFunctionExample from '@site/static/usage/v6/modal/can-dismiss/function/index.md';
+
+<CanDismissFunctionExample />
+
+## Types of modals
+
+### Card Modal
+
+Developers can create a card modal effect where the modal appears as a card stacked on top of your app's main content. To create a card modal, developers need to set the `presentingElement` property on `ion-modal`.
+
+The `presentingElement` property accepts a reference to the element that should display under your modal. This is typically a reference to `ion-router-outlet`.
+
+The `canDismiss` property can be used to control whether or not the card modal can be swiped to close.
+
+:::note
+The card display style is only available on iOS.
+:::
+
+import CardExample from '@site/static/usage/v6/modal/card/basic/index.md';
+
+<CardExample />
+
+### Sheet Modal
+
+Developers can create a sheet modal effect similar to the drawer components available in maps applications. To create a sheet modal, developers need to set the `breakpoints` and `initialBreakpoint` properties on `ion-modal`.
+
+The `breakpoints` property accepts an array which states each breakpoint that the sheet can snap to when swiped. A `breakpoints` property of `[0, 0.5, 1]` would indicate that the sheet can be swiped to show 0% of the modal, 50% of the modal, and 100% of the modal. When the modal is swiped to 0%, the modal will be automatically dismissed.
+
+The `initialBreakpoint` property is required so that the sheet modal knows which breakpoint to start at when presenting. The `initialBreakpoint` value must also exist in the `breakpoints` array. Given a `breakpoints` value of `[0, 0.5, 1]`, an `initialBreakpoint` value of `0.5` would be valid as `0.5` is in the `breakpoints` array. An `initialBreakpoint` value of `0.25` would not be valid as `0.25` does not exist in the `breakpoints` array.
+
+The `backdropBreakpoint` property can be used to customize the point at which the `ion-backdrop` will begin to fade in. This is useful when creating interfaces that have content underneath the sheet that should remain interactive. A common use case is a sheet modal that overlays a map where the map is interactive until the sheet is fully expanded.
+
+import SheetExample from '@site/static/usage/v6/modal/sheet/basic/index.md';
+
+<SheetExample />
+
+#### Interacting with background content
+
+import SheetBackgroundContentExample from '@site/static/usage/v6/modal/sheet/background-content/index.md';
+
+<SheetBackgroundContentExample />
+
+#### Handle Behavior
+
+Sheet modals can optionally render a handle indicator used for dragging the sheet between breakpoints. The `handleBehavior` property can be used to configure the behavior of when the handle is activated by the user.
+
+import SheetHandleBehaviorExample from '@site/static/usage/v6/modal/sheet/handle-behavior/index.md';
+
+<SheetHandleBehaviorExample />
+
+## Styling
+
+Modals are presented at the root of your application so they overlay your entire app. This behavior applies to both inline modals and modals presented from a controller. As a result, custom modal styles can not be scoped to a particular component as they will not apply to the modal. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient.
+
+:::note
+If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.
+:::
+
+:::note
+`ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables:
+:::
+
+```
+ion-modal.stack-modal {
+  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
+}
+```
+
+import ThemeExample from '@site/static/usage/v6/modal/styling/theming/index.md';
+
+<ThemeExample />
+
+### Animations
+
+The enter and leave animations can be customized by using our animation builder and assigning animations to `enterAnimation` and `leaveAnimation`.
+
+import AnimationsExample from '@site/static/usage/v6/modal/styling/animations/index.md';
+
+<AnimationsExample />
+
+## Custom Dialogs
+
+While `ion-modal` is most often used for full-page views, cards, or sheets, it is also possible to use it for custom dialogs. This is useful if developers need an interface that is more complex than what components such as [ion-alert](./alert) or [ion-loading](./loading) provide.
+
+import CustomDialogs from '@site/static/usage/v6/modal/custom-dialogs/index.md';
+
+<CustomDialogs />
+
+A few things to keep in mind when creating custom dialogs:
+
+- `ion-content` is intended to be used in full-page modals, cards, and sheets. If your custom dialog has a dynamic or unknown size, `ion-content` should not be used.
+- Creating custom dialogs provides a way of ejecting from the default modal experience. As a result, custom dialogs should not be used with card or sheet modals.
+
+## Interfaces
+
+### ModalOptions
+
+Below you will find all of the options available to you when using the `modalController`. These options should be supplied when calling `modalController.create()`.
+
+```typescript
+interface ModalOptions {
+  component: any;
+  componentProps?: { [key: string]: any };
+  presentingElement?: HTMLElement;
+  showBackdrop?: boolean;
+  backdropDismiss?: boolean;
+  cssClass?: string | string[];
+  animated?: boolean;
+  canDismiss?: boolean | (() => Promise<boolean>);
+
+  mode?: 'ios' | 'md';
+  keyboardClose?: boolean;
+  id?: string;
+  htmlAttributes?: { [key: string]: any };
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+
+  breakpoints?: number[];
+  initialBreakpoint?: number;
+  backdropBreakpoint?: number;
+  handle?: boolean;
+}
+```
+
+### ModalCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface ModalCustomEvent extends CustomEvent {
+  target: HTMLIonModalElement;
+}
+```
+
+## Accessibility
+
+### Keyboard Navigation
+
+| Key   | Function            |
+| ----- | ------------------- |
+| `Esc` | Dismisses the modal |
+
+### Labels
+
+Modals have a [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) role. As a result, developers **must** properly label their modals. If the modal is using `ion-title`, the text inside can be used to label the modal itself by setting [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) on `ion-modal`. If the modal contains additional descriptive text, this text can be associated with the modal by using [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby).
+
+### Screen Readers
+
+Modals have the `aria-modal` attribute applied. This attribute can cause assistive technologies to limit navigation to the modal element's contents. As a result, using gestures that move to the next or previous items may not focus elements outside of the modal. This applies even when the backdrop is disabled in sheet modals using the `backdropBreakpoint` property.
+
+Assistive technologies will not limit navigation to the modal element's contents if developers manually move focus. However, manually moving focus outside of a modal is not supported in Ionic for modals that have focus trapping enabled.
+
+See https://w3c.github.io/aria/#aria-modal for more information.
+
+### Focus Trapping
+
+When a modal is presented, focus will be trapped inside of the presented modal. Users can focus other interactive elements inside the modal but will never be able to focus interactive elements outside the modal while the modal is presented. For applications that present multiple stacked modals, focus will be trapped on the modal that was presented last.
+
+Sheet modals that have had their backdrop disabled by the `backdropBreakpoint` property are not subject to focus trapping.
+
+### Sheet Modals
+
+Sheet modals allow users to interact with content behind the modal when the `backdropBreakpoint` property is used. The backdrop will be disabled up to and including the specified `backdropBreakpoint` and will be enabled after it.
+
+When the backdrop is disabled, users will be able to interact with elements outside the sheet modal using a pointer or keyboard. Assistive technologies may not focus outside the sheet modal by default due to the usage of `aria-modal`. We recommend avoiding features such as autofocus here as it can cause assistive technologies to jump between two interactive contexts without warning the user.
+
+## Performance
+
+### Mounting Inner Contents
+
+The content of an inline `ion-modal` is unmounted when closed. If this content is expensive to render, developers can use the `keepContentsMounted` property to mount the content as soon as the modal is mounted. This can help optimize the responsiveness of your application as the inner contents will have already been mounted when the modal opens.
+
+import Mount from '@site/static/usage/v6/modal/performance/mount/index.md';
+
+<Mount />
+
+Developers should keep the following in mind when using `keepContentsMounted`:
+
+- This feature should be used as a last resort in order to deal with existing performance problems. Try to identify and resolve performance bottlenecks before using this feature. Additionally, do not use this to anticipate performance problems.
+
+- This feature is only needed when using a JavaScript Framework. Developers not using a framework can pass the contents to be rendered into the modal, and the contents will be rendered automatically.
+
+- This feature only works with inline modals. Modals created with the `modalController` are not created ahead of time, so the inner contents are not created either.
+
+- Any JavaScript Framework lifecycle hooks on the inner component will run as soon as the modal is mounted, not when the modal is presented.
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/nav-link.md b/versioned_docs/version-v6/api/nav-link.md
new file mode 100644
index 00000000000..30a8f3264ed
--- /dev/null
+++ b/versioned_docs/version-v6/api/nav-link.md
@@ -0,0 +1,42 @@
+---
+title: "ion-nav-link"
+---
+import Props from '@site/static/auto-generated/nav-link/props.md';
+import Events from '@site/static/auto-generated/nav-link/events.md';
+import Methods from '@site/static/auto-generated/nav-link/methods.md';
+import Parts from '@site/static/auto-generated/nav-link/parts.md';
+import CustomProps from '@site/static/auto-generated/nav-link/custom-props.md';
+import Slots from '@site/static/auto-generated/nav-link/slots.md';
+
+<head>
+  <title>ion-nav-link: The Element for Navigation to a Specified Component</title>
+  <meta name="description" content="Navigation links navigate to specified components. It is the element form of calling the push(), pop(), and setRoot() methods. Read for more on ion-nav-link." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+A navigation link is used to navigate to a specified component. The component can be navigated to by going `forward`, `back` or as a `root` component.
+
+It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller.
+
+See the [nav](./nav#using-navlink) documentation for more information.
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/nav.md b/versioned_docs/version-v6/api/nav.md
new file mode 100644
index 00000000000..0e4262885d2
--- /dev/null
+++ b/versioned_docs/version-v6/api/nav.md
@@ -0,0 +1,70 @@
+---
+title: 'ion-nav'
+---
+
+import Props from '@site/static/auto-generated/nav/props.md';
+import Events from '@site/static/auto-generated/nav/events.md';
+import Methods from '@site/static/auto-generated/nav/methods.md';
+import Parts from '@site/static/auto-generated/nav/parts.md';
+import CustomProps from '@site/static/auto-generated/nav/custom-props.md';
+import Slots from '@site/static/auto-generated/nav/slots.md';
+
+<head>
+  <title>ion-nav | Nav View Component for Ionic Framework Apps</title>
+  <meta
+    name="description"
+    content="ion-nav is a standalone for loading arbitrary, and pushing new, components on to the stack. Loading Nav view, and pushing others, won't affect overall routers."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
+
+Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
+
+## Using NavLink
+
+NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating.
+
+import NavLinkExample from '@site/static/usage/v6/nav/nav-link/index.md';
+
+<NavLinkExample />
+
+## Interfaces
+
+### NavCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface NavCustomEvent extends CustomEvent {
+  target: HTMLIonNavElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/note.md b/versioned_docs/version-v6/api/note.md
new file mode 100644
index 00000000000..f512aaf7753
--- /dev/null
+++ b/versioned_docs/version-v6/api/note.md
@@ -0,0 +1,74 @@
+---
+title: 'ion-note'
+---
+
+import Props from '@site/static/auto-generated/note/props.md';
+import Events from '@site/static/auto-generated/note/events.md';
+import Methods from '@site/static/auto-generated/note/methods.md';
+import Parts from '@site/static/auto-generated/note/parts.md';
+import CustomProps from '@site/static/auto-generated/note/custom-props.md';
+import Slots from '@site/static/auto-generated/note/slots.md';
+
+<head>
+  <title>ion-note: Note Text Elements for iOS and Android Ionic Apps</title>
+  <meta
+    name="description"
+    content="ion-notes are text elements generally used as subtitles that provide more information. Learn how notes can be used and styled on iOS and Android Ionic apps."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Notes are text elements generally used as subtitles that provide more information. They are styled to appear grey by default. Notes can be used in an item as metadata text.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/note/basic/index.md';
+
+<Basic />
+
+## Item Notes
+
+import Item from '@site/static/usage/v6/note/item/index.md';
+
+<Item />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/note/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/note/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/picker.md b/versioned_docs/version-v6/api/picker.md
new file mode 100644
index 00000000000..3bb5393194b
--- /dev/null
+++ b/versioned_docs/version-v6/api/picker.md
@@ -0,0 +1,327 @@
+---
+title: 'ion-picker'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@site/static/auto-generated/picker/props.md';
+import Events from '@site/static/auto-generated/picker/events.md';
+import Methods from '@site/static/auto-generated/picker/methods.md';
+import Parts from '@site/static/auto-generated/picker/parts.md';
+import CustomProps from '@site/static/auto-generated/picker/custom-props.md';
+import Slots from '@site/static/auto-generated/picker/slots.md';
+
+<head>
+  <title>Picker | Display Buttons and Columns for ion-picker on Ionic Apps</title>
+  <meta
+    name="description"
+    content="A Picker is a dialog that displays a row of buttons and columns underneath. Ion-picker appears on top of the app's content, and at the bottom of the viewport."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.
+
+## Single Column
+
+Display a list of options in a single, scrollable column.
+
+import SingleColumn from '@site/static/usage/v6/picker/single-column/index.md';
+
+<SingleColumn />
+
+## Multiple Columns
+
+Display multiple columns of different options.
+
+import MultipleColumn from '@site/static/usage/v6/picker/multiple-column/index.md';
+
+<MultipleColumn />
+
+## Interfaces
+
+### PickerButton
+
+```typescript
+interface PickerButton {
+  text?: string;
+  role?: string;
+  cssClass?: string | string[];
+  handler?: (value: any) => boolean | void;
+}
+```
+
+### PickerColumn
+
+```typescript
+interface PickerColumn {
+  name: string;
+  align?: string;
+  selectedIndex?: number;
+  prevSelected?: number;
+  prefix?: string;
+  suffix?: string;
+  options: PickerColumnOption[];
+  cssClass?: string | string[];
+  columnWidth?: string;
+  prefixWidth?: string;
+  suffixWidth?: string;
+  optionsWidth?: string;
+}
+```
+
+### PickerColumnOption
+
+```typescript
+interface PickerColumnOption {
+  text?: string;
+  value?: any;
+  disabled?: boolean;
+  duration?: number;
+  transform?: string;
+  selected?: boolean;
+}
+```
+
+### PickerOptions
+
+```typescript
+interface PickerOptions {
+  columns: PickerColumn[];
+  buttons?: PickerButton[];
+  cssClass?: string | string[];
+  showBackdrop?: boolean;
+  backdropDismiss?: boolean;
+  animated?: boolean;
+
+  mode?: Mode;
+  keyboardClose?: boolean;
+  id?: string;
+  htmlAttributes?: { [key: string]: any };
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+}
+```
+
+## Usage
+
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```html
+<ion-button expand="block" (click)="presentPicker()">Show Picker</ion-button>
+```
+
+```ts
+import { Component } from '@angular/core';
+import { PickerController } from '@ionic/angular';
+@Component({
+  selector: 'app-picker-example',
+  template: 'picker-example.component.html',
+})
+export class PickerExample {
+  private selectedAnimal: string;
+  constructor(private pickerController: PickerController) {}
+
+  async presentPicker() {
+    const picker = await this.pickerController.create({
+      buttons: [
+        {
+          text: 'Confirm',
+          handler: (selected) => {
+            this.selectedAnimal = selected.animal.value;
+          },
+        },
+      ],
+      columns: [
+        {
+          name: 'animal',
+          options: [
+            { text: 'Dog', value: 'dog' },
+            { text: 'Cat', value: 'cat' },
+            { text: 'Bird', value: 'bird' },
+          ],
+        },
+      ],
+    });
+    await picker.present();
+  }
+}
+```
+
+</TabItem>
+
+<TabItem value="react">
+
+```tsx
+/* Using with useIonPicker Hook */
+
+import React, { useState } from 'react';
+import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react';
+
+const PickerExample: React.FC = () => {
+  const [present] = useIonPicker();
+  const [value, setValue] = useState('');
+  return (
+    <IonPage>
+      <IonContent>
+        <IonButton
+          expand="block"
+          onClick={() =>
+            present({
+              buttons: [
+                {
+                  text: 'Confirm',
+                  handler: (selected) => {
+                    setValue(selected.animal.value);
+                  },
+                },
+              ],
+              columns: [
+                {
+                  name: 'animal',
+                  options: [
+                    { text: 'Dog', value: 'dog' },
+                    { text: 'Cat', value: 'cat' },
+                    { text: 'Bird', value: 'bird' },
+                  ],
+                },
+              ],
+            })
+          }
+        >
+          Show Picker
+        </IonButton>
+        <IonButton
+          expand="block"
+          onClick={() =>
+            present(
+              [
+                {
+                  name: 'animal',
+                  options: [
+                    { text: 'Dog', value: 'dog' },
+                    { text: 'Cat', value: 'cat' },
+                    { text: 'Bird', value: 'bird' },
+                  ],
+                },
+                {
+                  name: 'vehicle',
+                  options: [
+                    { text: 'Car', value: 'car' },
+                    { text: 'Truck', value: 'truck' },
+                    { text: 'Bike', value: 'bike' },
+                  ],
+                },
+              ],
+              [
+                {
+                  text: 'Confirm',
+                  handler: (selected) => {
+                    setValue(`${selected.animal.value}, ${selected.vehicle.value}`);
+                  },
+                },
+              ]
+            )
+          }
+        >
+          Show Picker using params
+        </IonButton>
+        {value && <div>Selected Value: {value}</div>}
+      </IonContent>
+    </IonPage>
+  );
+};
+```
+
+</TabItem>
+
+<TabItem value="vue">
+
+```vue
+<template>
+  <div>
+    <ion-button @click="openPicker">SHOW PICKER</ion-button>
+    <p v-if="picked.animal">picked: {{ picked.animal.text }}</p>
+  </div>
+</template>
+
+<script>
+import { IonButton, pickerController } from '@ionic/vue';
+export default {
+  components: {
+    IonButton,
+  },
+  data() {
+    return {
+      pickingOptions: {
+        name: 'animal',
+        options: [
+          { text: 'Dog', value: 'dog' },
+          { text: 'Cat', value: 'cat' },
+          { text: 'Bird', value: 'bird' },
+        ],
+      },
+      picked: {
+        animal: '',
+      },
+    };
+  },
+  methods: {
+    async openPicker() {
+      const picker = await pickerController.create({
+        columns: [this.pickingOptions],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+          },
+          {
+            text: 'Confirm',
+            handler: (value) => {
+              this.picked = value;
+              console.log(`Got Value ${value}`);
+            },
+          },
+        ],
+      });
+      await picker.present();
+    },
+  },
+};
+</script>
+```
+
+</TabItem>
+
+</Tabs>
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/popover.md b/versioned_docs/version-v6/api/popover.md
new file mode 100644
index 00000000000..a65065904f5
--- /dev/null
+++ b/versioned_docs/version-v6/api/popover.md
@@ -0,0 +1,262 @@
+---
+title: 'ion-popover'
+---
+
+import Props from '@site/static/auto-generated/popover/props.md';
+import Events from '@site/static/auto-generated/popover/events.md';
+import Methods from '@site/static/auto-generated/popover/methods.md';
+import Parts from '@site/static/auto-generated/popover/parts.md';
+import CustomProps from '@site/static/auto-generated/popover/custom-props.md';
+import Slots from '@site/static/auto-generated/popover/slots.md';
+
+<head>
+  <title>ion-popover: iOS / Android Popover UI Component & CSS Properties</title>
+  <meta
+    name="description"
+    content="ion-popover is a dialog that appears on top of the current page. Learn about the popover UI component and CSS custom properties for iOS and Android devices."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar.
+
+There are two ways to use `ion-popover`: inline or via the `popoverController`. Each method comes with different considerations, so be sure to use the approach that best fits your use case.
+
+## Inline Popovers
+
+`ion-popover` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the popover.
+
+When using `ion-popover` with Angular, React, or Vue, the component you pass in will be destroyed when the popover is dismissed. As this functionality is provided by the JavaScript framework, using `ion-popover` without a JavaScript framework will not destroy the component you passed in. If this is a needed functionality, we recommend using the `popoverController` instead.
+
+### When to use
+
+Using a popover inline is useful when you do not want to explicitly wire up click events to open the popover. For example, you can use the `trigger` property to designate a button that should present the popover when clicked. You can also use the `trigger-action` property to customize whether the popover should be presented when the trigger is left clicked, right clicked, or hovered over.
+
+If you need fine grained control over when the popover is presented and dismissed, we recommend you use the `popoverController`.
+
+### Angular
+
+Since the component you passed in needs to be created when the popover is presented and destroyed when the popover is dismissed, we are unable to project the content using `<ng-content>` internally. Instead, we use `<ng-container>` which expects an `<ng-template>` to be passed in. As a result, when passing in your component you will need to wrap it in an `<ng-template>`:
+
+```html
+<ion-popover [isOpen]="isPopoverOpen">
+  <ng-template>
+    <app-popover-content></app-popover-content>
+  </ng-template>
+</ion-popover>
+```
+
+### Triggers
+
+A trigger for an inline `ion-popover` is the element that will open a popover when interacted with. The interaction behavior can be customized by setting the `trigger-action` property. Note that `trigger-action="context-menu"` will prevent your system's default context menu from opening.
+
+:::note
+Triggers are not applicable when using the `popoverController` because the `ion-popover` is not created ahead of time.
+:::
+
+import InlineTrigger from '@site/static/usage/v6/popover/presenting/inline-trigger/index.md';
+
+<InlineTrigger />
+
+### isOpen Property
+
+Inline popovers can also be opened by setting the `isOpen` property to `true`. This method can be used if you need finer grained control over the popover than with a trigger.
+
+`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the popover is dismissed. Developers should listen for the `ionPopoverDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-popover` from being tightly coupled with the state of the application. With a one way data binding, the popover only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the popover needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
+
+import IsOpenTrigger from '@site/static/usage/v6/popover/presenting/inline-isopen/index.md';
+
+<IsOpenTrigger />
+
+## Controller Popovers
+
+`ion-popover` can also be presented programmatically by using the `popoverController` imported from Ionic Framework. This allows you to have complete control over when a popover is presented above and beyond the customization that inline popovers give you.
+
+### When to use
+
+We typically recommend that you write your popovers inline as it streamlines the amount of code in your application. You should only use the `popoverController` for complex use cases where writing a popover inline is impractical. When using a controller, your popover is not created ahead of time, so properties such as `trigger` and `trigger-action` are not applicable here. In addition, nested popovers are not compatible with the controller approach because the popover is automatically added to the root of your application when the `create` method is called.
+
+### React
+
+Instead of a controller, React has a hook called `useIonPopover` which behaves in a similar fashion. Note that `useIonPopover` requires being a descendant of `<IonApp>`. If you need to use a popover outside of an `<IonApp>`, consider using an inline popover instead.
+
+### Usage
+
+import ControllerExample from '@site/static/usage/v6/popover/presenting/controller/index.md';
+
+<ControllerExample />
+
+## Styling
+
+Popovers are presented at the root of your application so they overlay your entire app. This behavior applies to both inline popovers and popovers presented from a controller. As a result, custom popover styles can not be scoped to a particular component as they will not apply to the popover. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient.
+
+:::note
+If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
+:::
+
+import Styling from '@site/static/usage/v6/popover/customization/styling/index.md';
+
+<Styling />
+
+## Positioning
+
+### Reference
+
+When presenting a popover, Ionic Framework needs a reference point to present the popover relative to. With `reference="event"`, the popover will be presented relative to the x-y coordinates of the pointer event that was dispatched on your trigger element. With `reference="trigger"`, the popover will be presented relative to the bounding box of your trigger element.
+
+### Side
+
+Regardless of what you choose for your reference point, you can position a popover to the `top`, `right`, `left`, or `bottom` of your reference point by using the `side` property. You can also use the `start` or `end` values if you would like the side to switch based on LTR or RTL modes.
+
+### Alignment
+
+The `alignment` property allows you to line up an edge of your popover with a corresponding edge on your trigger element. The exact edge that is used depends on the value of the `side` property.
+
+### Side and Alignment Demo
+
+import Positioning from '@site/static/usage/v6/popover/customization/positioning/index.md';
+
+<Positioning />
+
+### Offsets
+
+If you need finer grained control over the positioning of your popover you can use the `--offset-x` and `--offset-y` CSS Variables. For example, `--offset-x: 10px` will move your popover content to the right by `10px`.
+
+## Sizing
+
+When making dropdown menus, you may want to have the width of the popover match the width of the trigger element. Doing this without knowing the trigger width ahead of time is tricky. You can set the `size` property to `'cover'` and Ionic Framework will ensure that the width of the popover matches the width of your trigger element.
+
+If you are using the `popoverController`, you must provide an event via the `event` option and Ionic Framework will use `event.target` as the reference element. See the [controller demo](#controller-popovers) for an example of this pattern.
+
+import Sizing from '@site/static/usage/v6/popover/customization/sizing/index.md';
+
+<Sizing />
+
+## Nested Popovers
+
+When using `ion-popover` inline, you can nested popovers to create nested dropdown menus. When doing this, only the backdrop on the first popover will appear so that the screen does not get progressively darker as you open more popovers.
+
+You can use the `dismissOnSelect` property to automatically close the popover when the popover content has been clicked. This behavior does not apply when clicking a trigger element for another popover.
+
+:::note
+Nested popovers cannot be created when using the `popoverController` because the popover is automatically added to the root of your application when the `create` method is called.
+:::
+
+import NestedPopover from '@site/static/usage/v6/popover/nested/index.md';
+
+<NestedPopover />
+
+## Interfaces
+
+Below you will find all of the options available to you when using the `popoverController`. These options should be supplied when calling `popoverController.create()`.
+
+```typescript
+interface PopoverOptions {
+  component: any;
+  componentProps?: { [key: string]: any };
+  showBackdrop?: boolean;
+  backdropDismiss?: boolean;
+  translucent?: boolean;
+  cssClass?: string | string[];
+  event?: Event;
+  animated?: boolean;
+
+  mode?: 'ios' | 'md';
+  keyboardClose?: boolean;
+  id?: string;
+  htmlAttributes?: { [key: string]: any };
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+
+  size?: PopoverSize;
+  dismissOnSelect?: boolean;
+  reference?: PositionReference;
+  side?: PositionSide;
+  alignment?: PositionAlign;
+  arrow?: boolean;
+}
+```
+
+## Types
+
+Below you will find all of the custom types for `ion-popover`:
+
+```typescript
+type PopoverSize = 'cover' | 'auto';
+type TriggerAction = 'click' | 'hover' | 'context-menu';
+type PositionReference = 'trigger' | 'event';
+type PositionSide = 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';
+type PositionAlign = 'start' | 'center' | 'end';
+```
+
+## Accessibility
+
+### Keyboard Navigation
+
+`ion-popover` has basic keyboard support for navigating between focusable elements inside of the popover. The following table details what each key does:
+
+| Key                | Function                                       |
+| ------------------ | ---------------------------------------------- |
+| `Tab`              | Moves focus to the next focusable element.     |
+| `Shift` + `Tab`    | Moves focus to the previous focusable element. |
+| `Esc`              | Closes the popover.                            |
+| `Space` or `Enter` | Clicks the focusable element.                  |
+
+`ion-popover` has full arrow key support for navigating between `ion-item` elements with the `button` property. The most common use case for this is as a dropdown menu in a desktop-focused application. In addition to the basic keyboard support, the following table details arrow key support for dropdown menus:
+
+| Key                                | Function                                                                                  |
+| ---------------------------------- | ----------------------------------------------------------------------------------------- |
+| `ArrowUp`                          | Moves focus to the previous focusable element.                                            |
+| `ArrowDown`                        | Moves focus to the next focusable element.                                                |
+| `Home`                             | Moves focus to the first focusable element.                                               |
+| `End`                              | Moves focus to the last focusable element.                                                |
+| `ArrowLeft`                        | When used in a child popover, closes the popover and returns focus to the parent popover. |
+| `Space`, `Enter`, and `ArrowRight` | When focusing a trigger element, opens the associated popover.                            |
+
+## Performance
+
+### Mounting Inner Contents
+
+The content of an inline `ion-popover` is unmounted when closed. If this content is expensive to render, developers can use the `keepContentsMounted` property to mount the content as soon as the popover is mounted. This can help optimize the responsiveness of your application as the inner contents will have already been mounted when the popover opens.
+
+import Mount from '@site/static/usage/v6/popover/performance/mount/index.md';
+
+<Mount />
+
+Developers should keep the following in mind when using `keepContentsMounted`:
+
+- This feature should be used as a last resort in order to deal with existing performance problems. Try to identify and resolve performance bottlenecks before using this feature. Additionally, do not use this to anticipate performance problems.
+
+- This feature is only needed when using a JavaScript Framework. Developers not using a framework can pass the contents to be rendered into the popover, and the contents will be rendered automatically.
+
+- This feature only works with inline popovers. Popovers created with the `popoverController` are not created ahead of time, so the inner contents are not created either.
+
+- Any JavaScript Framework lifecycle hooks on the inner component will run as soon as the popover is mounted, not when the popover is presented.
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/progress-bar.md b/versioned_docs/version-v6/api/progress-bar.md
new file mode 100644
index 00000000000..f28e826e60d
--- /dev/null
+++ b/versioned_docs/version-v6/api/progress-bar.md
@@ -0,0 +1,100 @@
+---
+title: 'ion-progress-bar'
+---
+
+import Props from '@site/static/auto-generated/progress-bar/props.md';
+import Events from '@site/static/auto-generated/progress-bar/events.md';
+import Methods from '@site/static/auto-generated/progress-bar/methods.md';
+import Parts from '@site/static/auto-generated/progress-bar/parts.md';
+import CustomProps from '@site/static/auto-generated/progress-bar/custom-props.md';
+import Slots from '@site/static/auto-generated/progress-bar/slots.md';
+
+<head>
+  <title>Progress Bar | Horizontal App Progress Bar for Loading Indicator</title>
+  <meta
+    name="description"
+    content="ion-progress-bars are horizontal loading indicators that inform users about the status of ongoing app processes—such as submitting a form or saving updates."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. There are two types of progress bars: `determinate` and `indeterminate`.
+
+## Determinate
+
+Determinate is the default type. It should be used when the percentage of an operation is known. The progress is represented by setting the `value` property. This can be used to show the progress increasing from 0 to 100% of the track.
+
+import Determinate from '@site/static/usage/v6/progress-bar/determinate/index.md';
+
+<Determinate />
+
+### Buffer
+
+If the `buffer` property is set, a buffer stream will show with animated circles to indicate activity. The value of the `buffer` property will also be represented by how much visible track there is. If the value of `buffer` is less than the `value` property, there will be no visible track. If `buffer` is equal to `1` then the buffer stream will be hidden.
+
+import Buffer from '@site/static/usage/v6/progress-bar/buffer/index.md';
+
+<Buffer />
+
+## Indeterminate
+
+The indeterminate type should be used when it is unknown how long the process will take. The progress bar is not tied to the `value`, instead it continually slides along the track until the process is complete.
+
+import Indeterminate from '@site/static/usage/v6/progress-bar/indeterminate/index.md';
+
+<Indeterminate />
+
+## Progress Bars in Toolbars
+
+<!-- Reuse the playground from the Toolbar directory -->
+
+import Toolbar from '@site/static/usage/v6/toolbar/progress-bars/index.md';
+
+<Toolbar />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/progress-bar/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/progress-bar/theming/css-properties/index.md';
+
+<CSSProps />
+
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/radio-group.md b/versioned_docs/version-v6/api/radio-group.md
new file mode 100644
index 00000000000..b083ee208b2
--- /dev/null
+++ b/versioned_docs/version-v6/api/radio-group.md
@@ -0,0 +1,60 @@
+---
+title: "ion-radio-group"
+---
+import Props from '@site/static/auto-generated/radio-group/props.md';
+import Events from '@site/static/auto-generated/radio-group/events.md';
+import Methods from '@site/static/auto-generated/radio-group/methods.md';
+import Parts from '@site/static/auto-generated/radio-group/parts.md';
+import CustomProps from '@site/static/auto-generated/radio-group/custom-props.md';
+import Slots from '@site/static/auto-generated/radio-group/slots.md';
+
+<head>
+  <title>ion-radio-group | Radio Button Group Usage for Ionic Apps</title>
+  <meta name="description" content="A radio group is a group of radio buttons. Radio groups allow a user to select at most one radio button from a set. Learn more about ion-radio-group usage." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+A radio group is a container for a group of [radios](./radio). It allows a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group. For example usage of the radio group, see the [radio](./radio) documentation.
+
+
+## Interfaces
+
+### RadioGroupChangeEventDetail
+
+```typescript
+interface RadioGroupChangeEventDetail<T = any> {
+  value: T;
+}
+```
+
+### RadioGroupCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface RadioGroupCustomEvent<T = any> extends CustomEvent {
+  detail: RadioGroupChangeEventDetail<T>;
+  target: HTMLIonRadioGroupElement;
+}
+```
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/radio.md b/versioned_docs/version-v6/api/radio.md
new file mode 100644
index 00000000000..a841a557642
--- /dev/null
+++ b/versioned_docs/version-v6/api/radio.md
@@ -0,0 +1,84 @@
+---
+title: 'ion-radio'
+---
+
+import Props from '@site/static/auto-generated/radio/props.md';
+import Events from '@site/static/auto-generated/radio/events.md';
+import Methods from '@site/static/auto-generated/radio/methods.md';
+import Parts from '@site/static/auto-generated/radio/parts.md';
+import CustomProps from '@site/static/auto-generated/radio/custom-props.md';
+import Slots from '@site/static/auto-generated/radio/slots.md';
+
+<head>
+  <title>ion-radio Component: Radio Property for iOS and Android</title>
+  <meta
+    name="description"
+    content="Radio components should be used inside of ion-radio-groups on iOS and Android devices. Read to learn more about radio property usage and installation."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Radios should be used inside of a [radio group](./radio-group). Pressing a radio will check it and uncheck the previously selected radio, if there is one. They can also be checked programmatically by setting the value property of the parent radio group to the value of the radio.
+
+When radios are inside of a radio group, only one radio will be checked at any time. If more than one item should be selected, [checkboxes](./checkbox) should be used instead. Radios can be disabled within a group to prevent interaction with them.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/radio/basic/index.md';
+
+<Basic />
+
+## Deselecting Radios
+
+By default, once a radio is selected it cannot be deselected; pressing it again will keep it selected. This behavior can be modified by using the `allowEmptySelection` property on the parent radio group, which enables the radios to be deselected.
+
+import EmptySelection from '@site/static/usage/v6/radio/empty-selection/index.md';
+
+<EmptySelection />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/radio/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/radio/theming/css-properties/index.md';
+
+<CSSProps />
+
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v6/radio/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/range.md b/versioned_docs/version-v6/api/range.md
new file mode 100644
index 00000000000..98492b83314
--- /dev/null
+++ b/versioned_docs/version-v6/api/range.md
@@ -0,0 +1,173 @@
+---
+title: 'ion-range'
+---
+
+import Props from '@site/static/auto-generated/range/props.md';
+import Events from '@site/static/auto-generated/range/events.md';
+import Methods from '@site/static/auto-generated/range/methods.md';
+import Parts from '@site/static/auto-generated/range/parts.md';
+import CustomProps from '@site/static/auto-generated/range/custom-props.md';
+import Slots from '@site/static/auto-generated/range/slots.md';
+
+<head>
+  <title>Range Slider | ion-range: Slider Knob Controls with Labels</title>
+  <meta
+    name="description"
+    content="ion-range lets you select from a range of values by moving the slider. It accepts dual knobs but one controls the value and labels can be placed on either side."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+The Range slider lets users select from a range of values by moving the slider knob. By default one knob controls the value of the range. This behavior can be customized using [dual knobs](#dual-knobs).
+
+By default the Range slider has a minimum value of `0` and a maximum value of `100`. This can be configured with the `min` and `max` properties.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/range/basic/index.md';
+
+<Basic />
+
+## Range Labels
+
+Labels and custom UI elements can be slotted on either side of the range by adding `slot="start"` or `slot="end"` to the element. The element can be any element, such as an `ion-label`, `ion-icon` or a `div`. If the directionality of the document is set to left to right, the contents slotted to the `start` position will display to the left of the range, where as contents slotted to the `end` position will display to the right of the range. In right to left (rtl) directionality, the contents slotted to the `start` position will display to the right of the range, where as contents slotted to the `end` position` will display to the left of the range.
+
+import SlotsPlayground from '@site/static/usage/v6/range/slots/index.md';
+
+<SlotsPlayground />
+
+## Dual Knobs
+
+Dual knobs introduce two knob controls that users can use to select a value at a lower and upper bounds. When selected, the Range will emit an `ionChange` event with a [RangeValue](#rangevalue), containing the upper and lower values selected.
+
+import DualKnobs from '@site/static/usage/v6/range/dual-knobs/index.md';
+
+<DualKnobs />
+
+## Pins
+
+The `pin` attribute will display the value of the Range above the knob when dragged. This allows users to select a specific value within the Range.
+
+With the `pinFormatter` function, developers can customize the formatting of the range value to the user.
+
+import Pins from '@site/static/usage/v6/range/pins/index.md';
+
+<Pins />
+
+## Snapping & Ticks
+
+Ticks show indications for each available value on the Range. In order to use ticks, developers must set both `snaps` and the `ticks` property to `true`.
+
+With snapping enabled, the Range knob will snap to the nearest available value as the knob is dragged and released.
+
+import SnappingTicks from '@site/static/usage/v6/range/snapping-ticks/index.md';
+
+<SnappingTicks />
+
+## Event Handling
+
+### Using `ionChange`
+
+The `ionChange` event emits as the Range knob value changes.
+
+import IonChangeEvent from '@site/static/usage/v6/range/ion-change-event/index.md';
+
+<IonChangeEvent />
+
+### Using `ionKnobMoveStart` and `ionKnobMoveEnd`
+
+The `ionKnobMoveStart` event emits when the Range knob begins dragging, whether through mouse drag, touch gesture or keyboard interaction. Inversely, `ionKnobMoveEnd` emits when the Range knob is released. Both events emit with the `RangeValue` type and work in combination with the `dualKnobs` property.
+
+import IonKnobMoveEvent from '@site/static/usage/v6/range/ion-knob-move-event/index.md';
+
+<IonKnobMoveEvent />
+
+## Theming
+
+### CSS Custom Properties
+
+Range includes [CSS Variables](#css-custom-properties) to quickly theme and customize the appearance of the Range component to match your application's design.
+
+import CSSProps from '@site/static/usage/v6/range/theming/css-properties/index.md';
+
+<CSSProps />
+
+### CSS Shadow Parts
+
+Range includes [CSS Shadow Parts](#css-shadow-parts) to allow complete customization of specific element nodes within the Range component. CSS Shadow Parts offer the most customization capabilities and are the recommended approach when requiring advance styling with the Range component.
+
+import CSSParts from '@site/static/usage/v6/range/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+## Interfaces
+
+### RangeChangeEventDetail
+
+```typescript
+interface RangeChangeEventDetail {
+  value: RangeValue;
+}
+```
+
+### RangeKnobMoveStartEventDetail
+
+```typescript
+interface RangeKnobMoveStartEventDetail {
+  value: RangeValue;
+}
+```
+
+### RangeKnobMoveEndEventDetail
+
+```typescript
+interface RangeKnobMoveEndEventDetail {
+  value: RangeValue;
+}
+```
+
+### RangeCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface RangeCustomEvent extends CustomEvent {
+  detail: RangeChangeEventDetail;
+  target: HTMLIonRangeElement;
+}
+```
+
+## Types
+
+### RangeValue
+
+```typescript
+type RangeValue = number | { lower: number; upper: number };
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/refresher-content.md b/versioned_docs/version-v6/api/refresher-content.md
new file mode 100644
index 00000000000..1b80d4ef40c
--- /dev/null
+++ b/versioned_docs/version-v6/api/refresher-content.md
@@ -0,0 +1,35 @@
+---
+title: "ion-refresher-content"
+---
+import Props from '@site/static/auto-generated/refresher-content/props.md';
+import Events from '@site/static/auto-generated/refresher-content/events.md';
+import Methods from '@site/static/auto-generated/refresher-content/methods.md';
+import Parts from '@site/static/auto-generated/refresher-content/parts.md';
+import CustomProps from '@site/static/auto-generated/refresher-content/custom-props.md';
+import Slots from '@site/static/auto-generated/refresher-content/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic displays a pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher.
+
+For usage examples, see the [Refresher](/docs/api/refresher) documentation.
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/refresher.md b/versioned_docs/version-v6/api/refresher.md
new file mode 100644
index 00000000000..1f69dd3d268
--- /dev/null
+++ b/versioned_docs/version-v6/api/refresher.md
@@ -0,0 +1,123 @@
+---
+title: 'ion-refresher'
+---
+
+import Props from '@site/static/auto-generated/refresher/props.md';
+import Events from '@site/static/auto-generated/refresher/events.md';
+import Methods from '@site/static/auto-generated/refresher/methods.md';
+import Parts from '@site/static/auto-generated/refresher/parts.md';
+import CustomProps from '@site/static/auto-generated/refresher/custom-props.md';
+import Slots from '@site/static/auto-generated/refresher/slots.md';
+
+<head>
+  <title>ion-refresher: Pull-to-Refresh Page Content on Ionic Apps</title>
+  <meta
+    name="description"
+    content="ion-refresher provides pull-to-refresh functionality on content components. Learn how this lets users pull down on a page using touch to retrieve more data."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+Refresher provides pull-to-refresh functionality on a content component. The pull-to-refresh pattern lets a user pull down on a list of data in order to retrieve more data.
+
+Data should be modified during the refresher's output events. Once the async operation has completed and the refreshing should end, `complete()` needs to be called on the refresher.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/refresher/basic/index.md';
+
+<Basic />
+
+## Pull Properties
+
+The refresher has several properties for customizing the pull gesture. Set the `pullFactor` to change the speed of the pull, the `pullMin` property to change the minimum distance the user must pull down, and the `pullMax` property to change the maximum distance the user must pull down before the refresher enters the `refreshing` state.
+
+These properties do not apply when the [native refresher](#native-refreshers) is enabled.
+
+import PullProperties from '@site/static/usage/v6/refresher/pull-properties/index.md';
+
+<PullProperties />
+
+## Custom Refresher Content
+
+The default icon, spinner, and text can be customized on the [refresher content](./refresher-content) based on whether the state of the refresher is `pulling` or `refreshing`.
+
+Setting `pullingIcon` will disable the [native refresher](#native-refreshers).
+
+import CustomContent from '@site/static/usage/v6/refresher/custom-content/index.md';
+
+<CustomContent />
+
+## Native Refreshers
+
+Both iOS and Android platforms provide refreshers that use properties exposed by their respective devices in order to give pull-to-refresh a fluid, native-like feel.
+
+The iOS and Material Design native refreshers are enabled by default in Ionic. However, the native iOS refresher relies on rubber band scrolling in order to work properly and is only compatible with iOS devices as a result. We provide a fallback refresher for apps running in iOS mode on devices that do not support rubber band scrolling.
+
+The native refresher uses a `circular` spinner for Material Design, while iOS uses the `lines` spinner. On iOS, the tick marks will progressively show as the page is pulled down.
+
+Certain refresher properties such as the [Pull Properties](#pull-properties), `closeDuration` and `snapbackDuration` are not compatible because much of the native refreshers are scroll-based. See [Properties](#properties) for more information on unsupported properties.
+
+The native refreshers can be disabled by setting the `pullingIcon` on the [refresher content](#custom-refresher-content) to any icon or spinner. See the [Ionicons](https://ionic.io/ionicons) and [Spinner](./spinner) documentation for accepted values.
+
+## Usage with Virtual Scroll
+
+Refresher requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
+
+import CustomScrollTarget from '@site/static/usage/v6/refresher/custom-scroll-target/index.md';
+
+<CustomScrollTarget />
+
+## Advanced Usage
+
+While the refresher can be used with any type of content, a common use case in native apps is to display a list of data that gets updated on refresh. In the below example, the app generates a list of data and then appends data to the top of the list when the refresh is completed. In a real app, the data would be received and updated after sending a request via a network or database call.
+
+import Advanced from '@site/static/usage/v6/refresher/advanced/index.md';
+
+<Advanced />
+
+## Interfaces
+
+### RefresherEventDetail
+
+```typescript
+interface RefresherEventDetail {
+  complete(): void;
+}
+```
+
+### RefresherCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface RefresherCustomEvent extends CustomEvent {
+  detail: RefresherEventDetail;
+  target: HTMLIonRefresherElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/reorder-group.md b/versioned_docs/version-v6/api/reorder-group.md
new file mode 100644
index 00000000000..674bc2561b9
--- /dev/null
+++ b/versioned_docs/version-v6/api/reorder-group.md
@@ -0,0 +1,64 @@
+---
+title: "ion-reorder-group"
+---
+import Props from '@site/static/auto-generated/reorder-group/props.md';
+import Events from '@site/static/auto-generated/reorder-group/events.md';
+import Methods from '@site/static/auto-generated/reorder-group/methods.md';
+import Parts from '@site/static/auto-generated/reorder-group/parts.md';
+import CustomProps from '@site/static/auto-generated/reorder-group/custom-props.md';
+import Slots from '@site/static/auto-generated/reorder-group/slots.md';
+
+<head>
+  <title>ion-reorder-group: Wrapper Component for Ionic Framework Apps</title>
+  <meta name="description" content="ion-reorder-group is a wrapper component for items using the ion-reorder component on Ionic apps. Read to learn more about ion-reorder-group usage." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+The reorder group is a container for items using the [reorder](./reorder) component. When the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for this event should be implemented that calls the `complete` method.
+
+The `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index. For example usage of the reorder group, see the [reorder](./reorder) documentation.
+
+
+## Interfaces
+
+### ItemReorderEventDetail
+
+```typescript
+interface ItemReorderEventDetail {
+  from: number;
+  to: number;
+  complete: (data?: boolean | any[]) => any;
+}
+```
+
+### ItemReorderCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface ItemReorderCustomEvent extends CustomEvent {
+  detail: ItemReorderEventDetail;
+  target: HTMLIonReorderGroupElement;
+}
+```
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/reorder.md b/versioned_docs/version-v6/api/reorder.md
new file mode 100644
index 00000000000..e7d57830079
--- /dev/null
+++ b/versioned_docs/version-v6/api/reorder.md
@@ -0,0 +1,100 @@
+---
+title: 'ion-reorder'
+---
+
+import Props from '@site/static/auto-generated/reorder/props.md';
+import Events from '@site/static/auto-generated/reorder/events.md';
+import Methods from '@site/static/auto-generated/reorder/methods.md';
+import Parts from '@site/static/auto-generated/reorder/parts.md';
+import CustomProps from '@site/static/auto-generated/reorder/custom-props.md';
+import Slots from '@site/static/auto-generated/reorder/slots.md';
+
+<head>
+  <title>Reorder | ion-reorder: Drag and Drop Icon to Reorder Items</title>
+  <meta
+    name="description"
+    content="Ion-reorder is the anchor used to drag and drop the items inside of the ion-reorder-group. Read to learn more about custom reorder icons and items."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Reorder is a component that allows an item to be dragged to change its order within a group of items. It must be used within a [reorder group](./reorder-group) to provide a visual drag and drop interface.
+
+The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the `ionItemReorder` event will be dispatched from the reorder group and the `complete` method needs to be called.
+
+## Basic Usage
+
+The most basic example of a reorder is slotting it inside of an item. By default, the reorder functionality is disabled for a reorder group. It can be enabled by setting the `disabled` property on the reorder group to `false`. The reorder icon can then be used to drag and drop the items and reorder them.
+
+import Basic from '@site/static/usage/v6/reorder/basic/index.md';
+
+<Basic />
+
+## Toggling Reorder
+
+In some cases, it may be desired to have the option to toggle the reorder functionality. This can be done by making the `disabled` property reactive, based on a function or variable.
+
+import TogglingDisabled from '@site/static/usage/v6/reorder/toggling-disabled/index.md';
+
+<TogglingDisabled />
+
+## Custom Reorder Icon
+
+The reorder component uses a reorder icon with three lines on iOS and two lines on Material Design. This can be customized by adding an [Icon](https://ionic.io/ionicons) component inside of the reorder with any of the available Ionicons.
+
+import CustomIcon from '@site/static/usage/v6/reorder/custom-icon/index.md';
+
+<CustomIcon />
+
+## Reorder Wrapper
+
+Reorder can also be used as a wrapper around an item, making the item itself the anchor. Click anywhere on an item below and drag it to reorder the list.
+
+import Wrapper from '@site/static/usage/v6/reorder/wrapper/index.md';
+
+<Wrapper />
+
+## Updating Data
+
+When the `complete` method is called on the reorder group with no parameters, the DOM nodes will be reordered. If the items are rendered from an array of data that needs to be sorted, this can result in the data and DOM being out of sync. In order to sort the array upon completion of the reorder, the array should be passed as a parameter to the `complete` method. The `complete` method will sort the array and return it so it can be reassigned.
+
+In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.
+
+import UpdatingData from '@site/static/usage/v6/reorder/updating-data/index.md';
+
+<UpdatingData />
+
+## Usage with Virtual Scroll
+
+Reorder requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
+
+import CustomScrollTarget from '@site/static/usage/v6/reorder/custom-scroll-target/index.md';
+
+<CustomScrollTarget />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/ripple-effect.md b/versioned_docs/version-v6/api/ripple-effect.md
new file mode 100644
index 00000000000..83f5e0b8486
--- /dev/null
+++ b/versioned_docs/version-v6/api/ripple-effect.md
@@ -0,0 +1,72 @@
+---
+title: 'ion-ripple-effect'
+---
+
+import Props from '@site/static/auto-generated/ripple-effect/props.md';
+import Events from '@site/static/auto-generated/ripple-effect/events.md';
+import Methods from '@site/static/auto-generated/ripple-effect/methods.md';
+import Parts from '@site/static/auto-generated/ripple-effect/parts.md';
+import CustomProps from '@site/static/auto-generated/ripple-effect/custom-props.md';
+import Slots from '@site/static/auto-generated/ripple-effect/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<head>
+  <title>ion-ripple-effect | Ripple Effect Button Component for Ionic Apps</title>
+  <meta
+    name="description"
+    content="The ripple effect button component adds the Material Design ink ripple interaction effect. It can only be used in an ion-app and can be added to any component."
+  />
+</head>
+
+<EncapsulationPill type="shadow" />
+
+The ripple effect component adds the [Material Design ink ripple interaction effect](https://material.io/develop/web/supporting/ripple). This component can only be used inside of an `<ion-app>` and can be added inside of any element.
+
+It's important to set [relative positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) on the parent element because the ripple effect is absolutely positioned and will cover its closest parent that has relative positioning. The parent element should also be given the `ion-activatable` class, which tells the ripple effect that the element is clickable. It's recommended to add `overflow: hidden` to the parent element if the ripple is overflowing its container.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/ripple-effect/basic/index.md';
+
+<Basic />
+
+## Type
+
+There are two types of ripple effects: `"bounded"` and `"unbounded"`. The default type, `"bounded"`, will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, set the type to `"unbounded"`.
+
+import Type from '@site/static/usage/v6/ripple-effect/type/index.md';
+
+<Type />
+
+## Customizing
+
+The ripple can be customized to a different color through CSS. By default the ripple color is set to inherit the text color, which is generally the body color. This can be changed by setting the CSS `color` on the parent or the ripple effect itself.
+
+import Customizing from '@site/static/usage/v6/ripple-effect/customizing/index.md';
+
+<Customizing />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/route-redirect.md b/versioned_docs/version-v6/api/route-redirect.md
new file mode 100644
index 00000000000..d17f3832133
--- /dev/null
+++ b/versioned_docs/version-v6/api/route-redirect.md
@@ -0,0 +1,125 @@
+---
+title: "ion-route-redirect"
+hide_table_of_contents: true
+---
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/route-redirect/props.md';
+import Events from '@site/static/auto-generated/route-redirect/events.md';
+import Methods from '@site/static/auto-generated/route-redirect/methods.md';
+import Parts from '@site/static/auto-generated/route-redirect/parts.md';
+import CustomProps from '@site/static/auto-generated/route-redirect/custom-props.md';
+import Slots from '@site/static/auto-generated/route-redirect/slots.md';
+
+<head>
+  <title>ion-route-redirect Plugin: Redirect 'from' a URL 'to' Another URL</title>
+  <meta name="description" content="ion-route-redirect is used with as a direct child of an ion-router and redirects 'from' a URL 'to' another URL. Read to learn about the route redirect plugin." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+
+A route redirect can only be used with an `ion-router` as a direct child of it.
+
+:::note
+ Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+:::
+
+
+The route redirect has two configurable properties:
+ - `from`
+ - `to`
+
+It redirects "from" a URL "to" another URL. When the defined `ion-route-redirect` rule matches, the router will redirect from the path specified in the `from` property to the path in the `to` property. In order for a redirect to occur the `from` path needs to be an exact match to the navigated URL.
+
+
+## Multiple Route Redirects
+
+An arbitrary number of redirect routes can be defined inside an `ion-router`, but only one can match.
+
+A route redirect will never call another redirect after its own redirect, since this could lead to infinite loops.
+
+Take the following two redirects:
+
+```html
+<ion-router>
+  <ion-route-redirect from="/admin" to="/login"></ion-route-redirect>
+  <ion-route-redirect from="/login" to="/admin"></ion-route-redirect>
+</ion-router>
+```
+
+If the user navigates to `/admin` the router will redirect to `/login` and stop there. It will never evaluate more than one redirect.
+
+
+
+
+## Usage
+
+```html
+<!-- Redirects when the user navigates to `/admin` but
+will NOT redirect if the user navigates to `/admin/posts` -->
+<ion-route-redirect from="/admin" to="/login"></ion-route-redirect>
+
+<!-- By adding the wilcard character (*), the redirect will match
+any subpath of admin -->
+<ion-route-redirect from="/admin/*" to="/login"></ion-route-redirect>
+```
+
+### Route Redirects as Guards
+
+Redirection routes can work as guards to prevent users from navigating to certain areas of an application based on a given condition, such as if the user is authenticated or not.
+
+A route redirect can be added and removed dynamically to redirect (or guard) some routes from being accessed. In the following example, all urls `*` will be redirected to the `/login` url if `isLoggedIn` is `false`.
+
+```tsx
+const isLoggedIn = false;
+
+const router = document.querySelector('ion-router');
+const routeRedirect = document.createElement('ion-route-redirect');
+routeRedirect.setAttribute('from', '*');
+routeRedirect.setAttribute('to', '/login');
+
+if (!isLoggedIn) {
+  router.appendChild(routeRedirect);
+}
+```
+
+Alternatively, the value of `to` can be modified based on a condition. In the following example, the route redirect will check if the user is logged in and redirect to the `/login` url if not.
+
+```html
+<ion-route-redirect id="tutorialRedirect" from="*"></ion-route-redirect>
+```
+
+```javascript
+const isLoggedIn = false;
+const routeRedirect = document.querySelector('#tutorialRedirect');
+
+routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login');
+```
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/route.md b/versioned_docs/version-v6/api/route.md
new file mode 100644
index 00000000000..52e2e294a2a
--- /dev/null
+++ b/versioned_docs/version-v6/api/route.md
@@ -0,0 +1,280 @@
+---
+title: "ion-route"
+hide_table_of_contents: true
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/route/props.md';
+import Events from '@site/static/auto-generated/route/events.md';
+import Methods from '@site/static/auto-generated/route/methods.md';
+import Parts from '@site/static/auto-generated/route/parts.md';
+import CustomProps from '@site/static/auto-generated/route/custom-props.md';
+import Slots from '@site/static/auto-generated/route/slots.md';
+
+<head>
+  <title>ion-route: API Route Component for Ionic Framework Apps</title>
+  <meta name="description" content="The ion-route component takes a component and renders it when the Browser URL matches the URL property. Learn more about the API route component for Ionic Apps." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+
+The route component takes a component and renders it when the Browser URL matches the url property.
+
+:::note
+ Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+:::
+
+
+## Navigation Hooks
+
+Navigation hooks can be used to perform tasks or act as navigation guards. Hooks are used by providing functions to the `beforeEnter` and `beforeLeave` properties on each `ion-route`. Returning `true` allows navigation to proceed, while returning `false` causes it to be cancelled. Returning an object of type `NavigationHookOptions` allows you to redirect navigation to another page.
+
+## Interfaces
+
+```typescript
+interface NavigationHookOptions {
+  /**
+   * A valid path to redirect navigation to.
+   */
+  redirect: string;
+}
+```
+
+
+
+
+## Usage
+
+<Tabs groupId="framework" defaultValue="javascript" values={[{ value: 'javascript', label: 'Javascript' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="javascript">
+
+```html
+<ion-router>
+  <ion-route url="/home" component="page-home"></ion-route>
+  <ion-route url="/dashboard" component="page-dashboard"></ion-route>
+  <ion-route url="/new-message" component="page-new-message"></ion-route>
+  <ion-route url="/login" component="page-login"></ion-route>
+</ion-router>
+```
+
+```javascript
+const dashboardPage = document.querySelector('ion-route[url="/dashboard"]');
+dashboardPage.beforeEnter = isLoggedInGuard;
+
+const newMessagePage = document.querySelector('ion-route[url="/dashboard"]');
+newMessagePage.beforeLeave = hasUnsavedDataGuard;
+
+const isLoggedInGuard = async () => {
+  const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation
+  
+  if (isLoggedIn) {
+    return true;
+  } else {
+    return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page
+  }
+}
+
+const hasUnsavedDataGuard = async () => {
+  const hasUnsavedData = await checkData(); // Replace this with actual validation
+  
+  if (hasUnsavedData) {
+    return await confirmDiscardChanges();
+  } else {
+    return true;
+  }
+}
+
+const confirmDiscardChanges = async () => {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Discard Unsaved Changes?';
+  alert.message = 'Are you sure you want to leave? Any unsaved changed will be lost.';
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'Cancel',
+    },
+    {
+      text: 'Discard',
+      role: 'destructive',
+    }
+  ];
+  
+  document.body.appendChild(alert);
+  
+  await alert.present();
+  
+  const { role } = await alert.onDidDismiss();
+  
+  return (role === 'Cancel') ? false : true;
+}
+```
+
+
+</TabItem>
+
+
+<TabItem value="stencil">
+
+```typescript
+import { Component, h } from '@stencil/core';
+import { alertController } from '@ionic/core';
+
+@Component({
+  tag: 'router-example',
+  styleUrl: 'router-example.css'
+})
+export class RouterExample {
+  render() {
+    return (
+      <ion-router>
+        <ion-route url="/home" component="page-home"></ion-route>
+        <ion-route url="/dashboard" component="page-dashboard" beforeEnter={isLoggedInGuard}></ion-route>
+        <ion-route url="/new-message" component="page-new-message" beforeLeave={hasUnsavedDataGuard}></ion-route>
+        <ion-route url="/login" component="page-login"></ion-route>
+      </ion-router>
+    )
+  }
+}
+
+const isLoggedInGuard = async () => {
+  const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation
+  
+  if (isLoggedIn) {
+    return true;
+  } else {
+    return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page
+  }
+}
+
+const hasUnsavedDataGuard = async () => {
+  const hasUnsavedData = await checkData(); // Replace this with actual validation
+  
+  if (hasUnsavedData) {
+    return await confirmDiscardChanges();
+  } else {
+    return true;
+  }
+}
+
+const confirmDiscardChanges = async () => {
+  const alert = await alertController.create({
+    header: 'Discard Unsaved Changes?',
+    message: 'Are you sure you want to leave? Any unsaved changed will be lost.',
+    buttons: [
+      {
+        text: 'Cancel',
+        role: 'Cancel',
+      },
+      {
+        text: 'Discard',
+        role: 'destructive',
+      }
+    ]
+  });
+  
+  await alert.present();
+  
+  const { role } = await alert.onDidDismiss();
+  
+  return (role === 'Cancel') ? false : true;
+}
+```
+
+
+</TabItem>
+
+
+<TabItem value="vue">
+
+```html
+<template>
+  <ion-router>
+    <ion-route url="/home" component="page-home"></ion-route>
+    <ion-route url="/dashboard" component="page-dashboard" :beforeEnter="isLoggedInGuard"></ion-route>
+    <ion-route url="/new-message" component="page-new-message" :beforeLeave="hasUnsavedDataGuard"></ion-route>
+    <ion-route url="/login" component="page-login"></ion-route>
+  </ion-router>
+</template>
+
+<script>
+  import { alertController } from '@ionic/vue';
+
+  const isLoggedInGuard = async () => {
+    const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation
+    
+    if (isLoggedIn) {
+      return true;
+    } else {
+      return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page
+    }
+  }
+  
+  const hasUnsavedDataGuard = async () => {
+    const hasUnsavedData = await checkData(); // Replace this with actual validation
+    
+    if (hasUnsavedData) {
+      return await confirmDiscardChanges();
+    } else {
+      return true;
+    }
+  }
+  
+  const confirmDiscardChanges = async () => {
+    const alert = await alertController.create({
+      header: 'Discard Unsaved Changes?',
+      message: 'Are you sure you want to leave? Any unsaved changed will be lost.',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'Cancel',
+        },
+        {
+          text: 'Discard',
+          role: 'destructive',
+        }
+      ]
+    });
+    
+    await alert.present();
+    
+    const { role } = await alert.onDidDismiss();
+    
+    return (role === 'Cancel') ? false : true;
+  }
+</script>
+```
+
+</TabItem>
+
+</Tabs>
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/router-link.md b/versioned_docs/version-v6/api/router-link.md
new file mode 100644
index 00000000000..ea95869eea0
--- /dev/null
+++ b/versioned_docs/version-v6/api/router-link.md
@@ -0,0 +1,59 @@
+---
+title: "ion-router-link"
+hide_table_of_contents: true
+demoUrl: "/docs/demos/api/router-link/index.html"
+demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/router-link/index.html"
+---
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/router-link/props.md';
+import Events from '@site/static/auto-generated/router-link/events.md';
+import Methods from '@site/static/auto-generated/router-link/methods.md';
+import Parts from '@site/static/auto-generated/router-link/parts.md';
+import CustomProps from '@site/static/auto-generated/router-link/custom-props.md';
+import Slots from '@site/static/auto-generated/router-link/slots.md';
+
+<head>
+  <title>Router Link | Navigating The ion-router-link Component</title>
+  <meta name="description" content="Use the ion-router-link component to navigate to a specified link. The router link can accept an href for location and a direction for the transition animation." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+
+The router link component is used for navigating to a specified link. Similar to the browser's anchor tag, it can accept a href for the location, and a direction for the transition animation.
+
+:::note
+ Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `<a>` and `routerLink` with the Angular router.
+:::
+
+
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/router-outlet.md b/versioned_docs/version-v6/api/router-outlet.md
new file mode 100644
index 00000000000..b2cf5a86936
--- /dev/null
+++ b/versioned_docs/version-v6/api/router-outlet.md
@@ -0,0 +1,69 @@
+---
+title: "ion-router-outlet"
+hide_table_of_contents: true
+---
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/router-outlet/props.md';
+import Events from '@site/static/auto-generated/router-outlet/events.md';
+import Methods from '@site/static/auto-generated/router-outlet/methods.md';
+import Parts from '@site/static/auto-generated/router-outlet/parts.md';
+import CustomProps from '@site/static/auto-generated/router-outlet/custom-props.md';
+import Slots from '@site/static/auto-generated/router-outlet/slots.md';
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+
+The router outlet behaves in a similar way to Angular's built-in router outlet component and Vue's router view component, but contains the logic for providing a stacked navigation, and animating views in and out.
+
+Although router outlet has methods for navigating around, it's recommended to use the navigation methods in your framework's router.
+
+## Life Cycle Hooks
+
+Routes rendered in a Router Outlet have access to specific Ionic events that are wired up to animations
+
+
+| Event Name         | Trigger                                                            |
+|--------------------|--------------------------------------------------------------------|
+| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. |
+| `ionViewDidEnter`  | Fired when the component routing to has finished animating.        |
+| `ionViewWillLeave` | Fired when the component routing from is about to animate.         |
+| `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
+
+
+These event tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with its animation. These events are not a replacement for your framework's own event system, but an addition.
+
+For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` have been replaced with their framework specific equivalent. For Angular, there are [Router Guards](https://angular.io/guide/router#milestone-5-route-guards).
+
+
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/router.md b/versioned_docs/version-v6/api/router.md
new file mode 100644
index 00000000000..eef5d1232de
--- /dev/null
+++ b/versioned_docs/version-v6/api/router.md
@@ -0,0 +1,119 @@
+---
+title: "ion-router"
+hide_table_of_contents: true
+---
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/router/props.md';
+import Events from '@site/static/auto-generated/router/events.md';
+import Methods from '@site/static/auto-generated/router/methods.md';
+import Parts from '@site/static/auto-generated/router/parts.md';
+import CustomProps from '@site/static/auto-generated/router/custom-props.md';
+import Slots from '@site/static/auto-generated/router/slots.md';
+
+<head>
+  <title>ion-router: Router Component to Coordinate URL Navigation</title>
+  <meta name="description" content="ion-router is a URL coordinator for navigation outlets of ionic: ion-nav and ion-tabs. Router components handle routing inside vanilla and Stencil JavaScript." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+
+The router is a component for handling routing inside vanilla and Stencil JavaScript projects.
+
+:::note
+ Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+:::
+
+
+Apps should have a single `ion-router` component in the codebase.
+This component controls all interactions with the browser history and it aggregates updates through an event system.
+
+`ion-router` is just a URL coordinator for the navigation outlets of ionic: `ion-nav`, `ion-tabs`, and `ion-router-outlet`.
+
+That means the `ion-router` never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells `ion-nav`, `ion-tabs`, and `ion-router-outlet` what and when to "show" based on the browser's URL.
+
+In order to configure this relationship between components (to load/select) and URLs, `ion-router` uses a declarative syntax using JSX/HTML to define a tree of routes.
+
+## Interfaces
+
+### RouterEventDetail
+
+```typescript
+interface RouterEventDetail {
+  from: string | null;
+  redirectedFrom: string | null;
+  to: string;
+}
+```
+
+### RouterCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface RouterCustomEvent extends CustomEvent {
+  detail: RouterEventDetail;
+  target: HTMLIonRouterElement;
+}
+```
+
+
+
+## Usage
+
+```html
+<ion-router>
+  <ion-route component="page-tabs">
+    <ion-route url="/schedule" component="tab-schedule">
+      <ion-route component="page-schedule"></ion-route>
+      <ion-route url="/session/:sessionId" component="page-session"></ion-route>
+    </ion-route>
+
+    <ion-route url="/speakers" component="tab-speaker">
+      <ion-route component="page-speaker-list"></ion-route>
+      <ion-route url="/session/:sessionId" component="page-session"></ion-route>
+      <ion-route url="/:speakerId" component="page-speaker-detail"></ion-route>
+    </ion-route>
+
+    <ion-route url="/map" component="page-map"></ion-route>
+    <ion-route url="/about" component="page-about"></ion-route>
+  </ion-route>
+
+  <ion-route url="/tutorial" component="page-tutorial"></ion-route>
+  <ion-route url="/login" component="page-login"></ion-route>
+  <ion-route url="/account" component="page-account"></ion-route>
+  <ion-route url="/signup" component="page-signup"></ion-route>
+  <ion-route url="/support" component="page-support"></ion-route>
+</ion-router>
+
+```
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/row.md b/versioned_docs/version-v6/api/row.md
new file mode 100644
index 00000000000..48fc21c4ba0
--- /dev/null
+++ b/versioned_docs/version-v6/api/row.md
@@ -0,0 +1,49 @@
+---
+title: "ion-row"
+---
+import Props from '@site/static/auto-generated/row/props.md';
+import Events from '@site/static/auto-generated/row/events.md';
+import Methods from '@site/static/auto-generated/row/methods.md';
+import Parts from '@site/static/auto-generated/row/parts.md';
+import CustomProps from '@site/static/auto-generated/row/custom-props.md';
+import Slots from '@site/static/auto-generated/row/slots.md';
+
+<head>
+  <title>ion-row: Horizontal Row Components and Alignment | Ionic API Docs</title>
+  <meta name="description" content="Rows are horizontal components of the grid system and contain varying numbers of columns. Read our ion-row API Docs for more information on alignment and usage." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Rows are horizontal components of the [grid](./grid) system and contain varying numbers of
+[columns](./col). They ensure the columns are positioned properly.
+
+See the [grid](./grid) documentation for more information.
+
+
+## Row Alignment
+
+By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior.
+
+
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/versioned_docs/version-v6/api/searchbar.md b/versioned_docs/version-v6/api/searchbar.md
new file mode 100644
index 00000000000..5e75b8dc412
--- /dev/null
+++ b/versioned_docs/version-v6/api/searchbar.md
@@ -0,0 +1,143 @@
+---
+title: 'ion-searchbar'
+---
+
+import Props from '@site/static/auto-generated/searchbar/props.md';
+import Events from '@site/static/auto-generated/searchbar/events.md';
+import Methods from '@site/static/auto-generated/searchbar/methods.md';
+import Parts from '@site/static/auto-generated/searchbar/parts.md';
+import CustomProps from '@site/static/auto-generated/searchbar/custom-props.md';
+import Slots from '@site/static/auto-generated/searchbar/slots.md';
+
+<head>
+  <title>Search Bar Icon for Keyboard Text Display | Ion-Search Bar</title>
+  <meta
+    name="description"
+    content="Search bars represent a text field that can be used to search through a collection. Learn to input Ion-Search Bar as an icon on Android & iOS keyboard displays."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+Searchbars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content. A searchbar should be used instead of an input to search lists.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/searchbar/basic/index.md';
+
+<Basic />
+
+## Search Icon
+
+A search icon is displayed to the left of the input field in a searchbar. It can be customized to any [Ionicon](https://ionic.io/ionicons/).
+
+import SearchIcon from '@site/static/usage/v6/searchbar/search-icon/index.md';
+
+<SearchIcon />
+
+## Clear Button
+
+A clear button is displayed when a searchbar has a value or upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. By default, the clear button is set to show when focusing the searchbar, but it can be set to always show or never show. The icon inside of the clear button can also be customized to any [Ionicon](https://ionic.io/ionicons/).
+
+import ClearButton from '@site/static/usage/v6/searchbar/clear-button/index.md';
+
+<ClearButton />
+
+## Cancel Button
+
+A cancel button can be enabled which will clear the input and lose the focus upon click. By default, cancel buttons are set to never show, but they can be set to always show or only show when focusing the searchbar. The cancel button is displayed as text in `ios` mode, and as an icon in `md` mode. Both the text and icon can be customized using different properties, with the icon accepting any [Ionicon](https://ionic.io/ionicons/).
+
+import CancelButton from '@site/static/usage/v6/searchbar/cancel-button/index.md';
+
+<CancelButton />
+
+## Searchbars in Toolbars
+
+Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title.
+
+<!-- Reuse the playground from the Toolbar directory -->
+
+import Toolbar from '@site/static/usage/v6/toolbar/searchbars/index.md';
+
+<Toolbar />
+
+## Debounce
+
+A debounce can be set on the searchbar in order to delay triggering the `ionChange` event. This is useful when querying data, as it can be used to wait to make a request instead of requesting the data each time a character is entered in the input.
+
+import Debounce from '@site/static/usage/v6/searchbar/debounce/index.md';
+
+<Debounce />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/searchbar/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+Searchbar uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-searchbar` for customization will not work, therefore we recommend adding a class and customizing it that way.
+
+import CSSProps from '@site/static/usage/v6/searchbar/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Keyboard Display
+
+### Android
+
+By default, tapping the input will cause the keyboard to appear with a magnifying glass icon on the submit button. You can optionally set the `inputmode` property to `"search"`, which will change the icon from a magnifying glass to a carriage return.
+
+### iOS
+
+By default, tapping the input will cause the keyboard to appear with the text "return" on a gray submit button. You can optionally set the `inputmode` property to `"search"`, which will change the text from "return" to "go", and change the button color from gray to blue. Alternatively, you can wrap the `ion-searchbar` in a `form` element with an `action` property. This will cause the keyboard to appear with a blue submit button that says "search".
+
+## Interfaces
+
+### SearchbarChangeEventDetail
+
+```typescript
+interface SearchbarChangeEventDetail {
+  value?: string;
+}
+```
+
+### SearchbarCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface SearchbarCustomEvent extends CustomEvent {
+  detail: SearchbarChangeEventDetail;
+  target: HTMLIonSearchbarElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/segment-button.md b/versioned_docs/version-v6/api/segment-button.md
new file mode 100644
index 00000000000..a5a87ccd7d9
--- /dev/null
+++ b/versioned_docs/version-v6/api/segment-button.md
@@ -0,0 +1,76 @@
+---
+title: 'ion-segment-button'
+---
+
+import Props from '@site/static/auto-generated/segment-button/props.md';
+import Events from '@site/static/auto-generated/segment-button/events.md';
+import Methods from '@site/static/auto-generated/segment-button/methods.md';
+import Parts from '@site/static/auto-generated/segment-button/parts.md';
+import CustomProps from '@site/static/auto-generated/segment-button/custom-props.md';
+import Slots from '@site/static/auto-generated/segment-button/slots.md';
+
+<head>
+  <title>ion-segment-button | Segment Button Icon and Segment Value</title>
+  <meta
+    name="description"
+    content="ion-segment-buttons are groups of related buttons inside of a Segment. Learn to use segment button icons and check their values on Ionic Framework Apps."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Segment buttons are groups of related buttons inside of a [segment](segment.md). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/segment-button/basic/index.md';
+
+<Basic />
+
+## Layout
+
+The `layout` property is set to `"icon-top"` by default. When a segment button has both an icon and a label, it will display the icon on top of the label. This behavior can be changed by setting the `layout` property to `"icon-bottom"`, `"icon-start"`, or `"icon-end"` which will show the icon below the label, to the start of the label (left in LTR and right in RTL) or to the end of the label (right in LTR and left in RTL), respectively.
+
+import Layout from '@site/static/usage/v6/segment-button/layout/index.md';
+
+<Layout />
+
+## Theming
+
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v6/segment-button/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/segment-button/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/segment.md b/versioned_docs/version-v6/api/segment.md
new file mode 100644
index 00000000000..14f795ac0ed
--- /dev/null
+++ b/versioned_docs/version-v6/api/segment.md
@@ -0,0 +1,123 @@
+---
+title: 'ion-segment'
+---
+
+import Props from '@site/static/auto-generated/segment/props.md';
+import Events from '@site/static/auto-generated/segment/events.md';
+import Methods from '@site/static/auto-generated/segment/methods.md';
+import Parts from '@site/static/auto-generated/segment/parts.md';
+import CustomProps from '@site/static/auto-generated/segment/custom-props.md';
+import Slots from '@site/static/auto-generated/segment/slots.md';
+
+<head>
+  <title>ion-segment: API Documentation for Segmented Controls</title>
+  <meta
+    name="description"
+    content="ion-segments display a group of related buttons—sometimes known as segmented controls. View our Segment API Documentation to learn more about usage."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content.
+
+Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.
+
+## Basic Usage
+
+Segments consist of [segment buttons](./segment-button) with a `value` property on each button. Set the `value` property on the segment to match the value of a button to select that button. Segments can also be disabled to prevent users from interacting with them.
+
+import Basic from '@site/static/usage/v6/segment/basic/index.md';
+
+<Basic />
+
+## Scrollable Segments
+
+Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the `scrollable` property to `true`. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width.
+
+import Scrollable from '@site/static/usage/v6/segment/scrollable/index.md';
+
+<Scrollable />
+
+## Segments in Toolbars
+
+<!-- Reuse the playground from the Toolbar directory -->
+
+import Toolbar from '@site/static/usage/v6/toolbar/segments/index.md';
+
+<Toolbar />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/segment/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/segment/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Accessibility
+
+### Keyboard Navigation
+
+The component has full keyboard support for navigating between and selecting `ion-segment-button` elements. By default, keyboard navigation will only focus `ion-segment-button` elements, but you can use the `selectOnFocus` property to ensure that they get selected on focus as well. The following table details what each key does:
+
+| Key                | Function                                       |
+| ------------------ | ---------------------------------------------- |
+| `ArrowRight`       | Focuses the next focusable element.            |
+| `ArrowLeft`        | Focuses the previous focusable element.        |
+| `Home`             | Focuses the first focusable element.           |
+| `End`              | Focuses the last focusable element.            |
+| `Space` or `Enter` | Selects the element that is currently focused. |
+
+## Interfaces
+
+### SegmentChangeEventDetail
+
+```typescript
+interface SegmentChangeEventDetail {
+  value?: string;
+}
+```
+
+### SegmentCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface SegmentCustomEvent extends CustomEvent {
+  target: HTMLIonSegmentElement;
+  detail: SegmentChangeEventDetail;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/select-option.md b/versioned_docs/version-v6/api/select-option.md
new file mode 100644
index 00000000000..73dbf015e2b
--- /dev/null
+++ b/versioned_docs/version-v6/api/select-option.md
@@ -0,0 +1,42 @@
+---
+title: "ion-select-option"
+---
+import Props from '@site/static/auto-generated/select-option/props.md';
+import Events from '@site/static/auto-generated/select-option/events.md';
+import Methods from '@site/static/auto-generated/select-option/methods.md';
+import Parts from '@site/static/auto-generated/select-option/parts.md';
+import CustomProps from '@site/static/auto-generated/select-option/custom-props.md';
+import Slots from '@site/static/auto-generated/select-option/slots.md';
+
+<head>
+  <title>Select Option | What Is An Option Select on Ionic Framework Apps</title>
+  <meta name="description" content="What is an option select? Select Options are child element components of a Select—each option defined is passed and displayed in the Select dialog." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Select Options are components that are child elements of a Select. Each option defined is passed and displayed in the Select dialog.
+
+For usage examples, see the [Select](./select) documentation.
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/select.md b/versioned_docs/version-v6/api/select.md
new file mode 100644
index 00000000000..af0eb91e179
--- /dev/null
+++ b/versioned_docs/version-v6/api/select.md
@@ -0,0 +1,179 @@
+---
+title: 'ion-select'
+---
+
+import Props from '@site/static/auto-generated/select/props.md';
+import Events from '@site/static/auto-generated/select/events.md';
+import Methods from '@site/static/auto-generated/select/methods.md';
+import Parts from '@site/static/auto-generated/select/parts.md';
+import CustomProps from '@site/static/auto-generated/select/custom-props.md';
+import Slots from '@site/static/auto-generated/select/slots.md';
+
+<head>
+  <title>ion-select: Select One or Multiple Value Boxes or Placeholders</title>
+  <meta
+    name="description"
+    content="ion-select is represented by selected value(s), or a placeholder, and dropdown icon. When you tap select, a dialog box appears with an easy to select list."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Selects are form controls to select an option, or options, from a set of options, similar to a native `<select>` element. When a user taps the select, a dialog appears with all of the options in a large, easy to select list.
+
+A select should be used with child `<ion-select-option>` elements. If the child option is not given a `value` attribute then its text will be used as the value.
+
+If `value` is set on the `<ion-select>`, the selected option will be chosen based on that value.
+
+## Single Selection
+
+By default, the select allows the user to select only one option. The alert interface presents users with a radio button styled list of options. The select component's value receives the value of the selected option's value.
+
+import SingleSelectionExample from '@site/static/usage/v6/select/basic/single-selection/index.md';
+
+<SingleSelectionExample />
+
+## Interfaces
+
+By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md) or [ion-popover](popover.md) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
+
+### Action Sheet
+
+import ActionSheetExample from '@site/static/usage/v6/select/interfaces/action-sheet/index.md';
+
+<ActionSheetExample />
+
+### Popover
+
+import PopoverExample from '@site/static/usage/v6/select/interfaces/popover/index.md';
+
+<PopoverExample />
+
+## Multiple Selection
+
+By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.
+
+Note: the `action-sheet` and `popover` interfaces will not work with multiple selection.
+
+import MulipleSelectionExample from '@site/static/usage/v6/select/basic/multiple-selection/index.md';
+
+<MulipleSelectionExample />
+
+## Responding to Interaction
+
+The main ways of handling user interaction with the select are the `ionChange`, `ionDismiss`, and `ionCancel` events. See [Events](#events) for more details on these and other events that select fires.
+
+import RespondingToInteractionExample from '@site/static/usage/v6/select/basic/responding-to-interaction/index.md';
+
+<RespondingToInteractionExample />
+
+## Object Value References
+
+When using objects for select values, it is possible for the identities of these objects to change if they are coming from a server or database, while the selected value's identity remains the same. For example, this can occur when an existing record with the desired object value is loaded into the select, but the newly retrieved select options now have different identities. This will result in the select appearing to have no value at all, even though the original selection in still intact.
+
+By default, the select uses object equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
+
+### Using compareWith
+
+import UsingCompareWithExample from '@site/static/usage/v6/select/objects-as-values/using-comparewith/index.md';
+
+<UsingCompareWithExample />
+
+### Object Values and Multiple Selection
+
+import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v6/select/objects-as-values/multiple-selection/index.md';
+
+<ObjectValuesAndMultipleSelectionExample />
+
+## Select Buttons
+
+The alert supports two buttons: `Cancel` and `OK`. Each button's text can be customized using the `cancelText` and `okText` properties.
+
+The `action-sheet` and `popover` interfaces do not have an `OK` button, clicking on any of the options will automatically close the overlay and select that value. The `popover` interface does not have a `Cancel` button, clicking on the backdrop will close the overlay.
+
+import ButtonTextExample from '@site/static/usage/v6/select/customization/button-text/index.md';
+
+<ButtonTextExample />
+
+## Interface Options
+
+Since select uses the alert, action sheet and popover interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more.
+
+See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), and [ion-popover docs](popover.md) for the properties that each interface accepts.
+
+Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
+
+import InterfaceOptionsExample from '@site/static/usage/v6/select/customization/interface-options/index.md';
+
+<InterfaceOptionsExample />
+
+## Customization
+
+There are two units that make up the Select component and each need to be styled separately. The `ion-select` element is represented on the view by the selected value(s), or placeholder if there is none, and dropdown icon. The interface, which is defined in the [Interfaces](#interfaces) section above, is the dialog that opens when clicking on the `ion-select`. The interface contains all of the options defined by adding `ion-select-option` elements. The following sections will go over the differences between styling these.
+
+### Styling Select Element
+
+As mentioned, the `ion-select` element consists only of the value(s), or placeholder, and icon that is displayed on the view. To customize this, style using a combination of CSS and any of the [CSS custom properties](#css-custom-properties).
+
+Alternatively, depending on the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) needed, CSS shadow parts can be used to style the select. Notice that by using `::part`, any CSS property on the element can be targeted.
+
+import StylingSelectExample from '@site/static/usage/v6/select/customization/styling-select/index.md';
+
+<StylingSelectExample />
+
+### Styling Select Interface
+
+Customizing the interface dialog should be done by following the Customization section in that interface's documentation:
+
+- [Alert Customization](alert.md#customization)
+- [Action Sheet Customization](action-sheet.md#customization)
+- [Popover Customization](popover.md#customization)
+
+However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.md) for usage examples of customizing options.
+
+## Interfaces
+
+### SelectChangeEventDetail
+
+```typescript
+interface SelectChangeEventDetail<T = any> {
+  value: T;
+}
+```
+
+### SelectCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface SelectCustomEvent<T = any> extends CustomEvent {
+  detail: SelectChangeEventDetail<T>;
+  target: HTMLIonSelectElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/skeleton-text.md b/versioned_docs/version-v6/api/skeleton-text.md
new file mode 100644
index 00000000000..86ec40d8a6f
--- /dev/null
+++ b/versioned_docs/version-v6/api/skeleton-text.md
@@ -0,0 +1,62 @@
+---
+title: 'ion-skeleton-text'
+---
+
+import Props from '@site/static/auto-generated/skeleton-text/props.md';
+import Events from '@site/static/auto-generated/skeleton-text/events.md';
+import Methods from '@site/static/auto-generated/skeleton-text/methods.md';
+import Parts from '@site/static/auto-generated/skeleton-text/parts.md';
+import CustomProps from '@site/static/auto-generated/skeleton-text/custom-props.md';
+import Slots from '@site/static/auto-generated/skeleton-text/slots.md';
+
+<head>
+  <title>Skeleton Text | Skeleton Loading Placeholder & Framework for Text</title>
+  <meta
+    name="description"
+    content="ion-skeleton-text is a component for rendering placeholder content. The element will render a gray block at the specified width as a loading text framework."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Skeleton Text is a component for rendering placeholder content. The element will render a gray block at the specified width.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/skeleton-text/basic/index.md';
+
+<Basic />
+
+## Theming
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/skeleton-text/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/spinner.md b/versioned_docs/version-v6/api/spinner.md
new file mode 100644
index 00000000000..abe69520719
--- /dev/null
+++ b/versioned_docs/version-v6/api/spinner.md
@@ -0,0 +1,70 @@
+---
+title: 'ion-spinner'
+---
+
+import Props from '@site/static/auto-generated/spinner/props.md';
+import Events from '@site/static/auto-generated/spinner/events.md';
+import Methods from '@site/static/auto-generated/spinner/methods.md';
+import Parts from '@site/static/auto-generated/spinner/parts.md';
+import CustomProps from '@site/static/auto-generated/spinner/custom-props.md';
+import Slots from '@site/static/auto-generated/spinner/slots.md';
+
+<head>
+  <title>ion-spinner | Animated Spinner Icon Components and Properties</title>
+  <meta
+    name="description"
+    content="The ion-spinner component provides a variety of animated SVG spinners. These icons indicate that the app is loading or performing another process to wait on."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on.
+
+## Basic Usage
+
+The default spinner is based on the mode. When the mode is `ios` the spinner will be `"lines"`, and when the mode is `md` the spinner will be `"circular"`. If the `name` property is set, then that spinner will be used instead of the mode specific spinner.
+
+import Basic from '@site/static/usage/v6/spinner/basic/index.md';
+
+<Basic />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/spinner/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/spinner/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/split-pane.md b/versioned_docs/version-v6/api/split-pane.md
new file mode 100644
index 00000000000..fa5f03fc403
--- /dev/null
+++ b/versioned_docs/version-v6/api/split-pane.md
@@ -0,0 +1,89 @@
+---
+title: 'ion-split-pane'
+---
+
+import Props from '@site/static/auto-generated/split-pane/props.md';
+import Events from '@site/static/auto-generated/split-pane/events.md';
+import Methods from '@site/static/auto-generated/split-pane/methods.md';
+import Parts from '@site/static/auto-generated/split-pane/parts.md';
+import CustomProps from '@site/static/auto-generated/split-pane/custom-props.md';
+import Slots from '@site/static/auto-generated/split-pane/slots.md';
+
+<head>
+  <title>ion-split-pane: Split Plane View for Menus and Multi-View Layouts</title>
+  <meta
+    name="description"
+    content="ion-split-pane is useful when creating multi-view app layouts. It allows UI elements, like menus, to be displayed as the viewport width increases."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+A split pane is useful when creating multi-view layouts. It allows UI elements, like menus, to be
+displayed as the viewport width increases.
+
+If the device's screen width is below a certain size, the split pane will collapse and the menu will be hidden. This is ideal for creating an app that will be served in a browser and deployed through the app store to phones and tablets.
+
+## Basic Usage
+
+:::note
+This demo sets the `when` property to `'xs'` so the split pane always shows up. Your Ionic application does not need this if you want the split pane to collapse on smaller viewports. See [Setting Breakpoints](#setting-breakpoints) for more information.
+:::
+
+import Basic from '@site/static/usage/v6/split-pane/basic/index.md';
+
+<Basic />
+
+## Setting Breakpoints
+
+By default, the split pane will expand when the screen is larger than 992px. To customize this, pass a breakpoint in the `when` property. The `when` property can accept a boolean value, any valid media query, or one of Ionic's predefined sizes.
+
+```html
+<!-- can be "xs", "sm", "md", "lg", or "xl" -->
+<ion-split-pane when="md"></ion-split-pane>
+
+<!-- can be any valid media query https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries -->
+<ion-split-pane when="(min-width: 40px)"></ion-split-pane>
+```
+
+| Size | Value                 | Description                                                           |
+| ---- | --------------------- | --------------------------------------------------------------------- |
+| `xs` | `(min-width: 0px)`    | Show the split-pane when the min-width is 0px (meaning, always)       |
+| `sm` | `(min-width: 576px)`  | Show the split-pane when the min-width is 576px                       |
+| `md` | `(min-width: 768px)`  | Show the split-pane when the min-width is 768px                       |
+| `lg` | `(min-width: 992px)`  | Show the split-pane when the min-width is 992px (default break point) |
+| `xl` | `(min-width: 1200px)` | Show the split-pane when the min-width is 1200px                      |
+
+## Theming
+
+### CSS Custom Properties
+
+import CSSProperties from '@site/static/usage/v6/split-pane/theming/css-properties/index.md';
+
+<CSSProperties />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/tab-bar.md b/versioned_docs/version-v6/api/tab-bar.md
new file mode 100644
index 00000000000..491a74b30d2
--- /dev/null
+++ b/versioned_docs/version-v6/api/tab-bar.md
@@ -0,0 +1,217 @@
+---
+title: "ion-tab-bar"
+hide_table_of_contents: true
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/tab-bar/props.md';
+import Events from '@site/static/auto-generated/tab-bar/events.md';
+import Methods from '@site/static/auto-generated/tab-bar/methods.md';
+import Parts from '@site/static/auto-generated/tab-bar/parts.md';
+import CustomProps from '@site/static/auto-generated/tab-bar/custom-props.md';
+import Slots from '@site/static/auto-generated/tab-bar/slots.md';
+
+<head>
+  <title>ion-tab-bar with CSS Custom Properties for Tab Bar Components</title>
+  <meta name="description" content="The tab bar component contains a set of tab buttons and a tab bar must be provided inside of tabs to communicate. Read more about use and CSS custom properties." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+
+The tab bar is a UI component that contains a set of [tab buttons](tab-button.md). A tab bar must be provided inside of [tabs](tabs.md) to communicate with each [tab](tab.md).
+
+
+
+
+## Usage
+
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```html
+<ion-tabs>
+  <!-- Tab bar -->
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="account">
+      <ion-icon name="person"></ion-icon>
+    </ion-tab-button>
+    <ion-tab-button tab="contact">
+      <ion-icon name="call"></ion-icon>
+    </ion-tab-button>
+    <ion-tab-button tab="settings">
+      <ion-icon name="settings"></ion-icon>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```
+
+</TabItem>
+
+
+<TabItem value="javascript">
+
+```html
+<ion-tabs>
+  <!-- Tab views -->
+  <ion-tab tab="account"></ion-tab>
+  <ion-tab tab="contact"></ion-tab>
+  <ion-tab tab="settings"></ion-tab>
+
+  <!-- Tab bar -->
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="account">
+      <ion-icon name="person"></ion-icon>
+    </ion-tab-button>
+    <ion-tab-button tab="contact">
+      <ion-icon name="call"></ion-icon>
+    </ion-tab-button>
+    <ion-tab-button tab="settings">
+      <ion-icon name="settings"></ion-icon>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```
+
+</TabItem>
+
+
+<TabItem value="react">
+
+```tsx
+import React from 'react';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonContent } from '@ionic/react';
+import { call, person, settings } from 'ionicons/icons';
+
+export const TabBarExample: React.FC = () => (
+  <IonContent>
+    <IonTabs>
+      {/*-- Tab bar --*/}
+      <IonTabBar slot="bottom">
+        <IonTabButton tab="account">
+          <IonIcon icon={person} />
+        </IonTabButton>
+        <IonTabButton tab="contact">
+          <IonIcon icon={call} />
+        </IonTabButton>
+        <IonTabButton tab="settings">
+          <IonIcon icon={settings} />
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  </IonContent>
+);
+```
+
+
+</TabItem>
+
+
+<TabItem value="stencil">
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'tab-bar-example',
+  styleUrl: 'tab-bar-example.css'
+})
+export class TabBarExample {
+  render() {
+    return [
+      <ion-tabs>
+        {/* Tab views */}
+        <ion-tab tab="account" component="page-account"></ion-tab>
+        <ion-tab tab="contact" component="page-contact"></ion-tab>
+        <ion-tab tab="settings" component="page-settings"></ion-tab>
+
+        {/* Tab bar */}
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button tab="account">
+            <ion-icon name="person"></ion-icon>
+          </ion-tab-button>
+          <ion-tab-button tab="contact">
+            <ion-icon name="call"></ion-icon>
+          </ion-tab-button>
+          <ion-tab-button tab="settings">
+            <ion-icon name="settings"></ion-icon>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    ];
+  }
+}
+```
+
+
+</TabItem>
+
+
+<TabItem value="vue">
+
+```html
+<template>
+  <ion-tabs>
+    <!-- Tab bar -->
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="account">
+        <ion-icon :icon="person"></ion-icon>
+      </ion-tab-button>
+      <ion-tab-button tab="contact">
+        <ion-icon :icon="call"></ion-icon>
+      </ion-tab-button>
+      <ion-tab-button tab="settings">
+        <ion-icon :icon="settings"></ion-icon>
+      </ion-tab-button>
+    </ion-tab-bar>
+  </ion-tabs>
+</template>
+
+<script>
+import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
+import { call, person, settings } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonIcon, IonTabBar, IonTabButton, IonTabs },
+  setup() {
+    return { call, person, settings }
+  }
+});
+</script>
+```
+
+</TabItem>
+
+</Tabs>
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/tab-button.md b/versioned_docs/version-v6/api/tab-button.md
new file mode 100644
index 00000000000..4c6b7a26f3d
--- /dev/null
+++ b/versioned_docs/version-v6/api/tab-button.md
@@ -0,0 +1,305 @@
+---
+title: "ion-tab-button"
+hide_table_of_contents: true
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/tab-button/props.md';
+import Events from '@site/static/auto-generated/tab-button/events.md';
+import Methods from '@site/static/auto-generated/tab-button/methods.md';
+import Parts from '@site/static/auto-generated/tab-button/parts.md';
+import CustomProps from '@site/static/auto-generated/tab-button/custom-props.md';
+import Slots from '@site/static/auto-generated/tab-button/slots.md';
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+
+A tab button is a UI component that is placed inside of a [tab bar](tab-bar.md). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.md).
+
+See the [tabs documentation](tabs.md) for more details on configuring tabs.
+
+
+
+
+## Usage
+
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```html
+<ion-tabs>
+  <!-- Tab bar -->
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="schedule">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="speakers">
+      <ion-icon name="person-circle"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="map">
+      <ion-icon name="map"></ion-icon>
+      <ion-label>Map</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="about">
+      <ion-icon name="information-circle"></ion-icon>
+      <ion-label>About</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```
+
+
+</TabItem>
+
+
+<TabItem value="javascript">
+
+```html
+<ion-tabs>
+  <!-- Tab views -->
+  <ion-tab tab="schedule">
+    <ion-router-outlet name="schedule"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab tab="speakers">
+    <ion-router-outlet name="speakers"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab tab="map">
+    <ion-router-outlet name="map"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab tab="about">
+    <ion-router-outlet name="about"></ion-router-outlet>
+  </ion-tab>
+
+  <!-- Tab bar -->
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
+      <ion-icon name="person-circle"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="map" href="/app/tabs/(map:map)">
+      <ion-icon name="map"></ion-icon>
+      <ion-label>Map</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="about" href="/app/tabs/(about:about)">
+      <ion-icon name="information-circle"></ion-icon>
+      <ion-label>About</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```
+
+
+</TabItem>
+
+
+<TabItem value="react">
+
+```tsx
+import React from 'react';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonContent } from '@ionic/react';
+import { calendar, personCircle, map, informationCircle } from 'ionicons/icons';
+
+export const TabButtonExample: React.FC = () => (
+  <IonContent>
+    <IonTabs>
+      {/*-- Tab bar --*/}
+      <IonTabBar slot="bottom">
+        <IonTabButton tab="schedule">
+          <IonIcon icon={calendar} />
+          <IonLabel>Schedule</IonLabel>
+        </IonTabButton>
+
+        <IonTabButton tab="speakers">
+          <IonIcon icon={personCircle} />
+          <IonLabel>Speakers</IonLabel>
+        </IonTabButton>
+
+        <IonTabButton tab="map">
+          <IonIcon icon={map} />
+          <IonLabel>Map</IonLabel>
+        </IonTabButton>
+
+        <IonTabButton tab="about">
+          <IonIcon icon={informationCircle} />
+          <IonLabel>About</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  </IonContent>
+);
+```
+
+
+</TabItem>
+
+
+<TabItem value="stencil">
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'tab-button-example',
+  styleUrl: 'tab-button-example.css'
+})
+export class TabButtonExample {
+  render() {
+    return [
+      <ion-tabs>
+        {/* Tab views */}
+        <ion-tab tab="schedule">
+          <ion-router-outlet name="schedule"></ion-router-outlet>
+        </ion-tab>
+
+        <ion-tab tab="speakers">
+          <ion-router-outlet name="speakers"></ion-router-outlet>
+        </ion-tab>
+
+        <ion-tab tab="map">
+          <ion-router-outlet name="map"></ion-router-outlet>
+        </ion-tab>
+
+        <ion-tab tab="about">
+          <ion-router-outlet name="about"></ion-router-outlet>
+        </ion-tab>
+
+        {/* Tab bar */}
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
+            <ion-icon name="calendar"></ion-icon>
+            <ion-label>Schedule</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
+            <ion-icon name="person-circle"></ion-icon>
+            <ion-label>Speakers</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="map" href="/app/tabs/(map:map)">
+            <ion-icon name="map"></ion-icon>
+            <ion-label>Map</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="about" href="/app/tabs/(about:about)">
+            <ion-icon name="information-circle"></ion-icon>
+            <ion-label>About</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    ];
+  }
+}
+```
+
+
+</TabItem>
+
+
+<TabItem value="vue">
+
+```html
+<template>
+  <ion-tabs>
+    <!-- Tab bar -->
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="schedule" href="/tabs/schedule">
+        <ion-icon :icon="calendar"></ion-icon>
+        <ion-label>Schedule</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="speakers" href="/tabs/speakers">
+        <ion-icon :icon="person-circle"></ion-icon>
+        <ion-label>Speakers</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="map" href="/tabs/map">
+        <ion-icon :icon="map"></ion-icon>
+        <ion-label>Map</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="about" href="/tabs/about">
+        <ion-icon :icon="informationCircle"></ion-icon>
+        <ion-label>About</ion-label>
+      </ion-tab-button>
+    </ion-tab-bar>
+  </ion-tabs>
+</template>
+
+<script>
+import { 
+  IonIcon, 
+  IonLabel, 
+  IonTabBar, 
+  IonTabButton, 
+  IonTabs
+} from '@ionic/vue';
+import { calendar, informationCircle, map, personCircle } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonIcon, 
+    IonLabel, 
+    IonTabBar, 
+    IonTabButton, 
+    IonTabs
+  },
+  setup() {
+    return { calendar, informationCircle, map, personCircle }
+  }
+});
+</script>
+```
+
+
+</TabItem>
+
+</Tabs>
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/tab.md b/versioned_docs/version-v6/api/tab.md
new file mode 100644
index 00000000000..aff18a4a825
--- /dev/null
+++ b/versioned_docs/version-v6/api/tab.md
@@ -0,0 +1,59 @@
+---
+title: "ion-tab"
+hide_table_of_contents: true
+---
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/tab/props.md';
+import Events from '@site/static/auto-generated/tab/events.md';
+import Methods from '@site/static/auto-generated/tab/methods.md';
+import Parts from '@site/static/auto-generated/tab/parts.md';
+import CustomProps from '@site/static/auto-generated/tab/custom-props.md';
+import Slots from '@site/static/auto-generated/tab/slots.md';
+
+<head>
+  <title>ion-tab - Ionic Framework Application Component</title>
+  <meta name="description" content="ion-tab is a child component of tabs. Each ion-tab can contain a top level navigation stack for an application or a single view. Read to learn more." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+
+The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
+
+:::note
+ Note: This component should only be used with vanilla or Stencil JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components.
+:::
+
+
+See the [tabs documentation](tabs.md) for more details on configuring tabs.
+
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/tabs.md b/versioned_docs/version-v6/api/tabs.md
new file mode 100644
index 00000000000..e12003025f7
--- /dev/null
+++ b/versioned_docs/version-v6/api/tabs.md
@@ -0,0 +1,500 @@
+---
+title: "ion-tabs"
+hide_table_of_contents: true
+demoUrl: "/docs/demos/api/tabs/index.html"
+demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/tabs/index.html"
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/tabs/props.md';
+import Events from '@site/static/auto-generated/tabs/events.md';
+import Methods from '@site/static/auto-generated/tabs/methods.md';
+import Parts from '@site/static/auto-generated/tabs/parts.md';
+import CustomProps from '@site/static/auto-generated/tabs/custom-props.md';
+import Slots from '@site/static/auto-generated/tabs/slots.md';
+
+<head>
+  <title>Ion-Tabs: Tab-Based Component for App Top-Level Navigation</title>
+  <meta name="description" content="Tabs are top-level components to implement tab-based navigation. Ion-tabs have no styling & work as router outlets for navigation that behaves like native apps." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+
+Tabs are a top level navigation component to implement a tab-based navigation.
+The component is a container of individual [Tab](tab.md) components.
+
+The `ion-tabs` component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion-tabs`.
+
+Both `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don’t depend on each other to work, but they are usually used together in order to implement a tab-based navigation that behaves like a native app.
+
+The `ion-tab-bar` needs a slot defined in order to be projected to the right place in an `ion-tabs` component.
+
+## Interfaces
+
+### TabsCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface TabsCustomEvent extends CustomEvent {
+  detail: { tab: string };
+  target: HTMLIonTabsElement;
+}
+```
+
+
+
+
+## Usage
+
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```html
+<ion-tabs>
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="schedule">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+      <ion-badge>6</ion-badge>
+    </ion-tab-button>
+
+    <ion-tab-button tab="speakers">
+      <ion-icon name="person-circle"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="map">
+      <ion-icon name="map"></ion-icon>
+      <ion-label>Map</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="about">
+      <ion-icon name="information-circle"></ion-icon>
+      <ion-label>About</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```
+
+
+### Router integration
+
+When used with Angular's router the `tab` property of the `ion-tab-button` should be a reference to the route path.
+
+```html
+<ion-tabs>
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="schedule">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```
+
+```typescript
+import { Routes } from '@angular/router';
+import { TabsPage } from './tabs-page';
+
+const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      {
+        path: 'schedule',
+        children: [
+          {
+            path: '',
+            loadChildren: '../schedule/schedule.module#ScheduleModule'
+          }
+        ]
+      },
+      {
+        path: '',
+        redirectTo: '/app/tabs/schedule',
+        pathMatch: 'full'
+      }
+    ]
+  }
+];
+```
+
+
+</TabItem>
+
+
+<TabItem value="javascript">
+
+```html
+<ion-tabs>
+
+  <ion-tab tab="tab-schedule">
+    <ion-nav></ion-nav>
+  </ion-tab>
+
+  <ion-tab tab="tab-speaker">
+    <ion-nav></ion-nav>
+  </ion-tab>
+
+  <ion-tab tab="tab-map" component="page-map">
+    <ion-nav></ion-nav>
+  </ion-tab>
+
+  <ion-tab tab="tab-about" component="page-about">
+    <ion-nav></ion-nav>
+  </ion-tab>
+
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="tab-schedule">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+      <ion-badge>6</ion-badge>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab-speaker">
+      <ion-icon name="person-circle"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab-map">
+      <ion-icon name="map"></ion-icon>
+      <ion-label>Map</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab-about">
+      <ion-icon name="information-circle"></ion-icon>
+      <ion-label>About</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+
+</ion-tabs>
+```
+
+
+### Activating Tabs
+
+Each `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.
+
+```html
+<ion-tab tab="settings">
+  ...
+</ion-tab>
+
+<ion-tab-button tab="settings">
+  ...
+</ion-tab-button>
+```
+
+The `ion-tab-button` and `ion-tab` above are linked by the common `tab` property.
+
+The `tab` property identifies each tab, and it has to be unique within the `ion-tabs`. It's important to always set the `tab` property on the `ion-tab` and `ion-tab-button`, even if one component is not used.
+
+
+### Router integration
+
+When used with Ionic's router (`ion-router`) the `tab` property of the `ion-tab` matches the `component` property of an `ion-route`.
+
+The following route within the scope of an `ion-tabs` outlet:
+
+```html
+<ion-route url="/settings-page" component="settings"></ion-route>
+```
+
+will match the following tab:
+
+```html
+<ion-tab tab="settings" component="settings-component"></ion-tab>
+```
+
+</TabItem>
+
+
+<TabItem value="react">
+
+```tsx
+import React from 'react';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react';
+import { calendar, personCircle, map, informationCircle } from 'ionicons/icons';
+
+
+export const TabsExample: React.FC = () => (
+  <IonTabs>
+    <IonTabBar slot="bottom">
+      <IonTabButton tab="schedule">
+        <IonIcon icon={calendar} />
+        <IonLabel>Schedule</IonLabel>
+        <IonBadge>6</IonBadge>
+      </IonTabButton>
+
+      <IonTabButton tab="speakers">
+        <IonIcon icon={personCircle} />
+        <IonLabel>Speakers</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="map">
+        <IonIcon icon={map} />
+        <IonLabel>Map</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="about">
+        <IonIcon icon={informationCircle} />
+        <IonLabel>About</IonLabel>
+      </IonTabButton>
+    </IonTabBar>
+  </IonTabs>
+);
+```
+
+
+</TabItem>
+
+
+<TabItem value="stencil">
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'tabs-example',
+  styleUrl: 'tabs-example.css'
+})
+export class TabsExample {
+  render() {
+    return [
+     <ion-tabs>
+      <ion-tab tab="tab-schedule">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab tab="tab-speaker">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab tab="tab-map" component="page-map">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab tab="tab-about" component="page-about">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="tab-schedule">
+          <ion-icon name="calendar"></ion-icon>
+          <ion-label>Schedule</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="tab-speaker">
+          <ion-icon name="person-circle"></ion-icon>
+          <ion-label>Speakers</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="tab-map">
+          <ion-icon name="map"></ion-icon>
+          <ion-label>Map</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="tab-about">
+          <ion-icon name="information-circle"></ion-icon>
+          <ion-label>About</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+    </ion-tabs>
+    ];
+  }
+}
+```
+
+
+### Activating Tabs
+
+Each `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.
+
+```jsx
+<ion-tab tab="settings">
+  ...
+</ion-tab>
+
+<ion-tab-button tab="settings">
+  ...
+</ion-tab-button>
+```
+
+The `ion-tab-button` and `ion-tab` above are linked by the common `tab` property.
+
+The `tab` property identifies each tab, and it has to be unique within the `ion-tabs`. It's important to always set the `tab` property on the `ion-tab` and `ion-tab-button`, even if one component is not used.
+
+
+### Router integration
+
+When used with Ionic's router (`ion-router`) the `tab` property of the `ion-tab` matches the `component` property of an `ion-route`.
+
+The following route within the scope of an `ion-tabs` outlet:
+
+```tsx
+<ion-route url="/settings-page" component="settings"></ion-route>
+```
+
+will match the following tab:
+
+```tsx
+<ion-tab tab="settings" component="settings-component"></ion-tab>
+```
+
+</TabItem>
+
+
+<TabItem value="vue">
+
+**Tabs.vue**
+```html
+<template>
+  <ion-page>
+    <ion-tabs @ionTabsWillChange="beforeTabChange" @ionTabsDidChange="afterTabChange">
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="schedule" href="/tabs/schedule">
+          <ion-icon :icon="calendar"></ion-icon>
+          <ion-label>Schedule</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+  
+        <ion-tab-button tab="speakers" href="/tabs/speakers">
+          <ion-icon :icon="personCircle"></ion-icon>
+          <ion-label>Speakers</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+  </ion-page>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { 
+  IonIcon, 
+  IonLabel, 
+  IonPage,
+  IonTabBar, 
+  IonTabButton, 
+  IonTabs
+} from '@ionic/vue';
+import { calendar, personCircle } from 'ionicons/icons';
+
+export default defineComponent({
+  components: { IonIcon, IonLabel, IonPage, IonTabBar, IonTabButton, IonTabs },
+  setup() {
+    const beforeTabChange = () => {
+      // do something before tab change
+    }
+    const afterTabChange = () => {
+      // do something after tab change
+    }
+    return {
+      calendar,
+      personCircle,
+      beforeTabChange,
+      afterTabChange
+    }
+  }
+});
+</script>
+```
+
+**Schedule.vue**
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Schedule</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    
+    <ion-content class="ion-padding">Schedule Tab</ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue';
+
+export default defineComponent({
+  components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar }
+});
+</script>
+```
+
+**Speakers.vue**
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Speakers</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    
+    <ion-content class="ion-padding">Speakers Tab</ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue';
+
+export default defineComponent({
+  components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar }
+});
+</script>
+```
+
+</TabItem>
+
+</Tabs>
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/text.md b/versioned_docs/version-v6/api/text.md
new file mode 100644
index 00000000000..c6fcee4c2db
--- /dev/null
+++ b/versioned_docs/version-v6/api/text.md
@@ -0,0 +1,58 @@
+---
+title: 'ion-text'
+---
+
+import Props from '@site/static/auto-generated/text/props.md';
+import Events from '@site/static/auto-generated/text/events.md';
+import Methods from '@site/static/auto-generated/text/methods.md';
+import Parts from '@site/static/auto-generated/text/parts.md';
+import CustomProps from '@site/static/auto-generated/text/custom-props.md';
+import Slots from '@site/static/auto-generated/text/slots.md';
+
+<head>
+  <title>ion-text: Ionic App Component to Style or Change Text Color</title>
+  <meta
+    name="description"
+    content="ion-text is a simple app component that can be used to style the text color of any element. Learn how ion-text wraps elements in order to change the text color."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+The text component is a simple component that can be used to style the text color of any element. The `ion-text` element should wrap the element in order to change the text color of that element.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/text/basic/index.md';
+
+<Basic />
+
+## Theming
+
+The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides.
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/textarea.md b/versioned_docs/version-v6/api/textarea.md
new file mode 100644
index 00000000000..5b6def11096
--- /dev/null
+++ b/versioned_docs/version-v6/api/textarea.md
@@ -0,0 +1,101 @@
+---
+title: 'ion-textarea'
+---
+
+import Props from '@site/static/auto-generated/textarea/props.md';
+import Events from '@site/static/auto-generated/textarea/events.md';
+import Methods from '@site/static/auto-generated/textarea/methods.md';
+import Parts from '@site/static/auto-generated/textarea/parts.md';
+import CustomProps from '@site/static/auto-generated/textarea/custom-props.md';
+import Slots from '@site/static/auto-generated/textarea/slots.md';
+
+<head>
+  <title>Ionic Textarea Component and CSS Properties for Multi-Line Input</title>
+  <meta
+    name="description"
+    content="Textarea is for multi-line input. The component accepts native textarea attributes in addition to Ionic properties. Read to learn about use and CSS elements."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+The textarea component is used for multi-line text input. A native textarea element is rendered inside of the component. The user experience and interactivity of the textarea component is improved by having control over the native textarea.
+
+Unlike the native textarea element, the Ionic textarea does not support loading its value from the inner content. The textarea value should be set in the `value` attribute.
+
+The textarea component accepts the [native textarea attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) in addition to the Ionic properties.
+
+## Basic Usage
+
+import BasicPlayground from '@site/static/usage/v6/textarea/basic/index.md';
+
+<BasicPlayground />
+
+## Autogrow
+
+When the `autoGrow` property is set to `true`, the textarea will grow and shrink based on its contents.
+
+import AutogrowPlayground from '@site/static/usage/v6/textarea/autogrow/index.md';
+
+<AutogrowPlayground />
+
+## Clear on Edit
+
+Setting the `clearOnEdit` property to `true` will clear the textarea after it has been blurred and then typed in again.
+
+import ClearOnEditPlayground from '@site/static/usage/v6/textarea/clear-on-edit/index.md';
+
+<ClearOnEditPlayground />
+
+## Theming
+
+import ThemingPlayground from '@site/static/usage/v6/textarea/theming/index.md';
+
+<ThemingPlayground />
+
+## Interfaces
+
+### TextareaChangeEventDetail
+
+```typescript
+interface TextareaChangeEventDetail {
+  value?: string | null;
+}
+```
+
+### TextareaCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface TextareaCustomEvent extends CustomEvent {
+  detail: TextareaChangeEventDetail;
+  target: HTMLIonTextareaElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/thumbnail.md b/versioned_docs/version-v6/api/thumbnail.md
new file mode 100644
index 00000000000..f21d2f25b59
--- /dev/null
+++ b/versioned_docs/version-v6/api/thumbnail.md
@@ -0,0 +1,70 @@
+---
+title: 'ion-thumbnail'
+---
+
+import Props from '@site/static/auto-generated/thumbnail/props.md';
+import Events from '@site/static/auto-generated/thumbnail/events.md';
+import Methods from '@site/static/auto-generated/thumbnail/methods.md';
+import Parts from '@site/static/auto-generated/thumbnail/parts.md';
+import CustomProps from '@site/static/auto-generated/thumbnail/custom-props.md';
+import Slots from '@site/static/auto-generated/thumbnail/slots.md';
+
+<head>
+  <title>ion-thumbnail | Thumbnail App Component to Wrap Images or Icons</title>
+  <meta
+    name="description"
+    content="What is a thumbnail image? Thumbnail app components wrap an image or icon and can be used to display a layout of images or for previews of full-size images."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Thumbnails are square components that usually wrap an image or icon. They can be used to make it easier to display a group of larger images or provide a preview of the full-size image.
+
+Thumbnails can be used by themselves or inside of any element. If placed inside of an `ion-item`, the thumbnail will resize to fit the parent component. To position a thumbnail on the left or right side of an item, set the slot to `start` or `end`, respectively.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/thumbnail/basic/index.md';
+
+<Basic />
+
+## Item Thumbnails
+
+import Item from '@site/static/usage/v6/thumbnail/item/index.md';
+
+<Item />
+
+## Theming
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/thumbnail/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/title.md b/versioned_docs/version-v6/api/title.md
new file mode 100644
index 00000000000..07a1a36eb03
--- /dev/null
+++ b/versioned_docs/version-v6/api/title.md
@@ -0,0 +1,92 @@
+---
+title: 'ion-title'
+---
+
+import Props from '@site/static/auto-generated/title/props.md';
+import Events from '@site/static/auto-generated/title/events.md';
+import Methods from '@site/static/auto-generated/title/methods.md';
+import Parts from '@site/static/auto-generated/title/parts.md';
+import CustomProps from '@site/static/auto-generated/title/custom-props.md';
+import Slots from '@site/static/auto-generated/title/slots.md';
+
+<head>
+  <title>ion-title: Ionic Framework App Title Component for Toolbars</title>
+  <meta
+    name="description"
+    content="ion-title is a component that sets the title of the toolbar. Read to learn more about title and collapsible title components and usage for Ionic Framework Apps."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Title is a text component that sets the title for a [toolbar](./toolbar). It can be used to describe the screen or section a user is currently on or the app being used.
+
+## Basic
+
+import Basic from '@site/static/usage/v6/title/basic/index.md';
+
+<Basic />
+
+## Collapsible Large Titles
+
+The large title will display when the [content](./content) is scrolled to the start of the scroll container. When the title is scrolled behind the header, the condensed title will fade in.
+
+:::info
+
+This feature is only available for iOS.
+
+:::
+
+import CollapsibleLargeTitle from '@site/static/usage/v6/title/collapsible-large-title/basic/index.md';
+
+<CollapsibleLargeTitle />
+
+### Collapsible Buttons
+
+The [buttons](./buttons.md) component can be used with the [`collapse`](./buttons.md#collapse) property to additionally display in the header as the toolbar is collapsed.
+
+import CollapsibleLargeTitleButtons from '@site/static/usage/v6/title/collapsible-large-title/buttons/index.md';
+
+<CollapsibleLargeTitleButtons />
+
+## Theming
+
+The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the toolbar containing the collapsible large title should always match the background color of the content.
+
+By default, the toolbar that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of the content.
+
+You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable. This will give the effect of the header changing color as you collapse the large title.
+
+When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
+
+### CSS Custom Properties
+
+import CSSCustomProperties from '@site/static/usage/v6/title/theming/css-properties/index.md';
+
+<CSSCustomProperties />
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/toast.md b/versioned_docs/version-v6/api/toast.md
new file mode 100644
index 00000000000..de515e72bbb
--- /dev/null
+++ b/versioned_docs/version-v6/api/toast.md
@@ -0,0 +1,202 @@
+---
+title: 'ion-toast'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@site/static/auto-generated/toast/props.md';
+import Events from '@site/static/auto-generated/toast/events.md';
+import Methods from '@site/static/auto-generated/toast/methods.md';
+import Parts from '@site/static/auto-generated/toast/parts.md';
+import CustomProps from '@site/static/auto-generated/toast/custom-props.md';
+import Slots from '@site/static/auto-generated/toast/slots.md';
+
+<head>
+  <title>ion-toast Component: A Dismissible App Notification Alert</title>
+  <meta
+    name="description"
+    content="ion-toast component is an app notification displaying system messages or feedback. Toast alerts appear above content and are dismissed to resume interaction."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.
+
+## Presenting
+
+### Positioning
+
+Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.
+
+### Controller
+
+import ControllerExample from '@site/static/usage/v6/toast/presenting/controller/index.md';
+
+<ControllerExample />
+
+### Inline
+
+When using Ionic with React or Vue, `ion-toast` can also be placed directly in the template through use of the `isOpen` property. Note that `isOpen` must be set to `false` manually when the toast is dismissed; it will not be updated automatically.
+
+<Tabs defaultValue="react" values={[{ value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+<TabItem value="react">
+
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonToast } from '@ionic/react';
+
+function Example() {
+  const [showToast, setShowToast] = useState(false);
+
+  return (
+    <>
+      <IonButton onClick={() => setShowToast(true)}>Show Toast</IonButton>
+      <IonToast isOpen={showToast} onDidDismiss={() => setShowToast(false)} message="Hello World!" duration={1500} />
+    </>
+  );
+}
+```
+
+</TabItem>
+<TabItem value="vue">
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Toast</ion-button>
+  <ion-toast :is-open="isOpenRef" @didDismiss="setOpen(false)" message="Hello World!" :duration="1500"></ion-toast>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonToast } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonToast },
+    setup() {
+      const isOpenRef = ref(false);
+      const setOpen = (state: boolean) => (isOpenRef.value = state);
+
+      return { isOpenRef, setOpen };
+    },
+  });
+</script>
+```
+
+</TabItem>
+</Tabs>
+
+## Dismissing
+
+The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the toast options. If a button with a role of `"cancel"` is added, then that button will dismiss the toast. To dismiss the toast after creation, call the `dismiss()` method on the instance.
+
+The following example demonstrates how to use the `buttons` property to add a button that automatically dismisses the toast when clicked, as well as how to collect the `role` of the dismiss event.
+
+import ButtonsPlayground from '@site/static/usage/v6/toast/buttons/index.md';
+
+<ButtonsPlayground />
+
+## Icons
+
+An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.
+
+import IconPlayground from '@site/static/usage/v6/toast/icon/index.md';
+
+<IconPlayground />
+
+## Theming
+
+import ThemingPlayground from '@site/static/usage/v6/toast/theming/index.md';
+
+<ThemingPlayground />
+
+## Interfaces
+
+### ToastButton
+
+```typescript
+interface ToastButton {
+  text?: string;
+  icon?: string;
+  side?: 'start' | 'end';
+  role?: 'cancel' | string;
+  cssClass?: string | string[];
+  handler?: () => boolean | void | Promise<boolean | void>;
+}
+```
+
+### ToastOptions
+
+```typescript
+interface ToastOptions {
+  header?: string;
+  message?: string | IonicSafeString;
+  cssClass?: string | string[];
+  duration?: number;
+  buttons?: (ToastButton | string)[];
+  position?: 'top' | 'bottom' | 'middle';
+  translucent?: boolean;
+  animated?: boolean;
+  icon?: string;
+  htmlAttributes?: { [key: string]: any };
+
+  color?: Color;
+  mode?: Mode;
+  keyboardClose?: boolean;
+  id?: string;
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+}
+```
+
+## Accessibility
+
+### Focus Management
+
+Toasts are intended to be subtle notifications and are not intended to interrupt the user. User interaction should not be required to dismiss the toast. As a result, focus is not automatically moved to a toast when one is presented.
+
+### Screen Readers
+
+`ion-toast` has `aria-live="polite"` and `aria-atomic="true"` set by default.
+
+`aria-live` causes screen readers to announce the content of the toast when it is updated. However, since the attribute is set to `'polite'`, screen readers generally do not interrupt the current task. Developers can customize this behavior by using the `htmlAttributes` property to set `aria-live` to `'assertive'`. This will cause screen readers to immediately notify the user when a toast is updated, potentially interrupting any previous updates.
+
+`aria-atomic="true"` is set to ensure that the entire toast is announced as a single unit. This is useful when dynamically updating the content of the toast as it prevents screen readers from announcing only the content that has changed.
+
+### Tips
+
+While this is not a complete list, here are some guidelines to follow when using toasts.
+
+- Do not require user interaction to dismiss toasts. For example, having a "Dismiss" button in the toast is fine, but the toast should also automatically dismiss on its own after a timeout period. If you need user interaction for a notification, consider using [ion-alert](./alert) instead.
+
+- Avoid opening multiple toasts in quick succession. If `aria-live` is set to `'assertive'`, screen readers may interrupt the reading of the current task to announce the new toast, causing the context of the previous toast to be lost.
+
+- For toasts with long messages, consider adjusting the `duration` property to allow users enough time to read the content of the toast.
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/toggle.md b/versioned_docs/version-v6/api/toggle.md
new file mode 100644
index 00000000000..bb22c827d6f
--- /dev/null
+++ b/versioned_docs/version-v6/api/toggle.md
@@ -0,0 +1,108 @@
+---
+title: 'ion-toggle'
+---
+
+import Props from '@site/static/auto-generated/toggle/props.md';
+import Events from '@site/static/auto-generated/toggle/events.md';
+import Methods from '@site/static/auto-generated/toggle/methods.md';
+import Parts from '@site/static/auto-generated/toggle/parts.md';
+import CustomProps from '@site/static/auto-generated/toggle/custom-props.md';
+import Slots from '@site/static/auto-generated/toggle/slots.md';
+
+<head>
+  <title>Toggle | ion-toggle: Custom Toggle Button for Ionic Applications</title>
+  <meta
+    name="description"
+    content="Toggle changes the state of a single option. Use ion-toggle to create customizable toggle buttons that can be switched on or off for your applications."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Toggles are switches that change the state of a single option. They can be switched on or off by pressing or swiping them. Toggles can also be checked programmatically by setting the `checked` property.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/toggle/basic/index.md';
+
+<Basic />
+
+## On / Off Labels
+
+Toggles can enable on/off labels by setting the `enableOnOffLabels` property. This is important for accessibility as it makes it easier to differentiate between a checked and unchecked toggle.
+
+import OnOff from '@site/static/usage/v6/toggle/on-off/index.md';
+
+<OnOff />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/toggle/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+CSS custom properties can be combined with standard CSS to target different parts of a toggle. We can modify the `width` and `height` of the toggle directly to change the size of the track, while using the `--handle-width` and `--handle-height` custom properties to customize the handle size.
+
+import CSSProps from '@site/static/usage/v6/toggle/theming/css-properties/index.md';
+
+<CSSProps />
+
+### CSS Shadow Parts
+
+We can further customize toggle by targeting specific shadow parts that are exposed. Any CSS property on these parts can be styled and they can also be combined with CSS custom properties.
+
+import CSSParts from '@site/static/usage/v6/toggle/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+## Interfaces
+
+### ToggleChangeEventDetail
+
+```typescript
+interface ToggleChangeEventDetail<T = any> {
+  value: T;
+  checked: boolean;
+}
+```
+
+### ToggleCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface ToggleCustomEvent<T = any> extends CustomEvent {
+  detail: ToggleChangeEventDetail<T>;
+  target: HTMLIonToggleElement;
+}
+```
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/toolbar.md b/versioned_docs/version-v6/api/toolbar.md
new file mode 100644
index 00000000000..dbd61f85818
--- /dev/null
+++ b/versioned_docs/version-v6/api/toolbar.md
@@ -0,0 +1,110 @@
+---
+title: 'ion-toolbar'
+---
+
+import Props from '@site/static/auto-generated/toolbar/props.md';
+import Events from '@site/static/auto-generated/toolbar/events.md';
+import Methods from '@site/static/auto-generated/toolbar/methods.md';
+import Parts from '@site/static/auto-generated/toolbar/parts.md';
+import CustomProps from '@site/static/auto-generated/toolbar/custom-props.md';
+import Slots from '@site/static/auto-generated/toolbar/slots.md';
+
+<head>
+  <title>Toolbar | Customize App Menu Toolbar Buttons and Icons</title>
+  <meta
+    name="description"
+    content="Ion-toolbar component lets you customize toolbar buttons on your app menu. Add fixed toolbars above or below content or use full screen to scroll with content."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Toolbars are generally positioned above or below content and provide content and actions for the current screen. When placed within the [content](./content), toolbars will scroll with the content.
+
+Toolbars can contain several different components including titles, buttons, icons, back buttons, menu buttons, searchbars, segments, progress bars, and more.
+
+## Basic Usage
+
+It is recommended to put a toolbar inside of a [header](./header) or [footer](./footer) for proper positioning. When a toolbar is placed in a header it will appear fixed at the top of the content. When it is placed in a footer it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. A [title](./title) component can be used to display text inside of the toolbar.
+
+import Basic from '@site/static/usage/v6/toolbar/basic/index.md';
+
+<Basic />
+
+## Buttons in Toolbars
+
+Buttons placed in a toolbar should be placed inside of the [buttons](./buttons) component. The buttons component can be positioned inside of the toolbar using a named [slot](#slots). The `"primary"` and `"secondary"` slots behave differently in `ios` and `md` mode.
+
+The buttons component can wrap a standard [button](./button), [back button](./back-button), [menu button](./menu-button), or several of any of them. A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on back button and menu button in this example are for display purposes; see their respective documentation for proper usage.
+
+import Buttons from '@site/static/usage/v6/toolbar/buttons/index.md';
+
+<Buttons />
+
+## Searchbars in Toolbars
+
+A [searchbar](./searchbar) can be placed inside of a toolbar to search through the content. It should be the only child component of the toolbar, and will take up the full width and height.
+
+import Searchbars from '@site/static/usage/v6/toolbar/searchbars/index.md';
+
+<Searchbars />
+
+## Segments in Toolbars
+
+[Segments](./segment) are generally used in toolbars to toggle between two different content views on the same page. They can be placed in a toolbar with other components, such as buttons, but should not be placed alongside a title.
+
+import Segments from '@site/static/usage/v6/toolbar/segments/index.md';
+
+<Segments />
+
+## Progress Bars in Toolbars
+
+A [progress bar](./progress-bar) is used as a loading indicator to show an ongoing process in an app. Progress bars can be placed with any other components inside of a toolbar as they will align with the bottom of the toolbar.
+
+import ProgressBars from '@site/static/usage/v6/toolbar/progress-bars/index.md';
+
+<ProgressBars />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/toolbar/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/toolbar/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Borders
+
+In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and the `<ion-footer>` will receive a box-shadow on the top. In `ios` mode, the `<ion-header>` will receive a border on the bottom, and the `<ion-footer>` will receive a border on the top.
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v6/cli.md b/versioned_docs/version-v6/cli.md
new file mode 100644
index 00000000000..a75302d0937
--- /dev/null
+++ b/versioned_docs/version-v6/cli.md
@@ -0,0 +1,54 @@
+---
+title: Ionic CLI
+sidebar_label: Overview
+---
+
+<head>
+  <title>Ionic CLI Framework: Command-Line Interface to Develop Apps</title>
+  <meta
+    name="description"
+    content="The Ionic command-line interface (CLI) is the go-to tool for developing Ionic apps. Install our framework globally with npm."
+  />
+</head>
+
+The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) is the go-to tool for developing Ionic apps.
+
+## Installation
+
+The Ionic CLI can be installed globally with npm:
+
+```shell
+npm install -g @ionic/cli
+```
+
+## Help
+
+The Ionic CLI ships with command documentation that is accessible with the `--help` flag.
+
+```shell
+$ ionic --help
+$ ionic <command> --help
+$ ionic <command> <subcommand> --help
+```
+
+:::note
+Be sure to run `ionic <command> --help` in your project directory.
+
+For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular.
+:::
+
+<!-- TODO: image? -->
+
+## Architecture
+
+The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">GitHub repository</a>.
+
+## Troubleshooting
+
+To troubleshoot issues with the Ionic CLI, the following may be useful:
+
+- Make sure the latest version of the Ionic CLI is installed. Get the installed version by running `ionic --version`.
+- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment#node-npm) environment setup.
+- The `--verbose` flag prints debugging messages, which may narrow down the issue.
+- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying.
+- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables).
diff --git a/versioned_docs/version-v6/cli/commands/.gitignore b/versioned_docs/version-v6/cli/commands/.gitignore
new file mode 100644
index 00000000000..d6b7ef32c84
--- /dev/null
+++ b/versioned_docs/version-v6/cli/commands/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/versioned_docs/version-v6/cli/configuration.md b/versioned_docs/version-v6/cli/configuration.md
new file mode 100644
index 00000000000..9b3d7d31a95
--- /dev/null
+++ b/versioned_docs/version-v6/cli/configuration.md
@@ -0,0 +1,243 @@
+---
+title: Configuration
+---
+
+<head>
+  <title>Capacitor Configuration | Maintain a Global Configuration File</title>
+  <meta
+    name="description"
+    content="Set and print configuration values from project config files and the global CLI config file with Ionic CLI. Read to learn more about Capacitor configuration."
+  />
+</head>
+
+## Files
+
+Configuration values are stored in JSON files. The Ionic CLI maintains a global configuration file, usually located at `~/.ionic/config.json`, and project configuration files, usually at the project's root directory as `ionic.config.json`.
+
+The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See `ionic config --help` or see the documentation for usage of [`ionic config get`](commands/config-get.md) and [`ionic config set`](commands/config-set.md).
+
+### Project Configuration File
+
+Each Ionic project has a project configuration file, usually at the project's root directory. The following is an annotated `ionic.config.json` file.
+
+```json
+{
+  // The human-readable name of the app.
+  "name": "My App",
+
+  // The project type of the app. The CLI uses this value to determine which
+  // commands and command options are available, what to output for help
+  // documentation, and what to use for web asset builds and the dev server.
+  "type": "angular",
+
+  // The App ID for Appflow.
+  "id": "abc123",
+
+  // Configuration object for integrations such as Cordova and Capacitor.
+  "integrations": {
+    "cordova": {
+      ...
+    }
+  },
+
+  // Hook configuration--see the Hooks section below for details.
+  "hooks": {
+    ...
+  }
+}
+```
+
+## Environment Variables
+
+The CLI will look for the following environment variables:
+
+- `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`.
+- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md).
+- `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow).
+
+## Flags
+
+CLI flags are global options that alter the behavior of a CLI command.
+
+- `--help`: Instead of running the command, view its help page.
+- `--verbose`: Show all log messages for debugging purposes.
+- `--quiet`: Only show `WARN` and `ERROR` log messages.
+- `--no-interactive`: Turn off interactive prompts and fancy outputs. If CI or a non-TTY terminal is detected, the CLI is automatically non-interactive.
+- `--confirm`: Turn on auto-confirmation of confirmation prompts. Careful: the CLI prompts before doing something potentially harmful. Auto-confirming may have unintended results.
+
+## Hooks
+
+The CLI can run scripts during certain events, such as before and after builds. To hook into the CLI, the following [npm scripts](https://docs.npmjs.com/misc/scripts) can be used in `package.json`:
+
+- `ionic:serve:before`: executed before the dev server starts
+- `ionic:serve:after`: executed after the dev server is terminated
+- `ionic:build:before`: executed before a web asset build begins
+- `ionic:build:after`: executed after a web asset build finishes
+- `ionic:capacitor:run:before`: executed during `ionic capacitor run` before capacitor open is executed
+- `ionic:capacitor:build:before`: executed during `ionic capacitor build` before capacitor open is executed
+- `ionic:capacitor:sync:after`: executed during `ionic capacitor sync` after a sync
+
+When using a shell script for any of the hooks, hook context is defined in environment variables prefixed with `IONIC_CLI_HOOK_CTX_`.
+
+The following example shows the environment variables that are set for the `ionic:capacitor:build` hook.
+
+```shell
+IONIC_CLI_HOOK_CTX_NAME=capacitor:build:before
+IONIC_CLI_HOOK_CTX_BUILD_CORDOVA_ASSETS=true
+IONIC_CLI_HOOK_CTX_BUILD_ENGINE=browser
+IONIC_CLI_HOOK_CTX_BUILD_PROJECT=app
+IONIC_CLI_HOOK_CTX_BUILD_TYPE=angular
+IONIC_CLI_HOOK_CTX_BUILD_VERBOSE=false
+IONIC_CLI_HOOK_CTX_CAPACITOR_APP_ID=io.ionic.starter
+IONIC_CLI_HOOK_CTX_CAPACITOR_APP_NAME=ionic-starter-app
+IONIC_CLI_HOOK_CTX_CAPACITOR_VERBOSE=false
+```
+
+Hooks can also be defined in `ionic.config.json`. Define a `hooks` object within the project, where each key is the name of the hook (without the `ionic:` prefix), and the value is a path to a JavaScript file or an array of paths.
+
+In the following example, the file is imported and run during the `ionic:build:before` hook.
+
+```json
+"hooks": {
+  "build:before": "./scripts/build-before.js"
+},
+```
+
+JavaScript hook files should export a single function, which is passed a single argument (`ctx`) whenever the hook executes.
+
+The argument is the context given to the hook file, which differs from hook to hook and with different invocations.
+
+`./scripts/build-before.js`:
+
+```javascript
+module.exports = function (ctx) {
+  console.log(ctx);
+};
+```
+
+## Multi-app Projects
+
+<small>
+  <em>Available in CLI 6.2.0+</em>
+</small>
+
+The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo).
+
+:::note
+These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework.
+
+If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples.
+:::
+
+### Setup Steps
+
+1. Create a directory and initialize a monorepo (see [Project Structure](#project-structure) for full details).
+1. Initialize the monorepo as an Ionic multi-app project. This will create a multi-app `ionic.config.json` file. See [Config File](#config-file) for full details.
+
+   ```shell
+   $ ionic init --multi-app
+   ```
+
+1. Use `ionic start` to create Ionic apps or `ionic init` to initialize existing apps (see [Adding an App](#adding-an-app) for full details).
+
+### Project Structure
+
+In a multi-app project, project structure is flexible. The only requirement is a multi-app `ionic.config.json` file at the root of the repository.
+
+Below is an example setup, where apps in the `apps/` directory are separated from the shared code in the `lib/` directory. Notice the root `ionic.config.json` file and the monorepo's `package.json` file.
+
+```bash
+apps/
+├── myApp/
+└── myOtherApp/
+lib/
+ionic.config.json
+package.json
+```
+
+### Config File
+
+In a multi-app project, apps share a single `ionic.config.json` file at the root of the repository instead of each app having their own. The multi-app config file contains the configuration for each app by nesting configuration objects in a `projects` object. A default app can be specified using `defaultProject`.
+
+Below is an example file, which corresponds to the file structure above.
+
+```json
+{
+  "defaultProject": "myApp",
+  "projects": {
+    "myApp": {
+      "name": "My App",
+      "integrations": {},
+      "type": "angular",
+      "root": "apps/myApp"
+    },
+    "myOtherApp": {
+      "name": "My Other App",
+      "integrations": {},
+      "type": "angular",
+      "root": "apps/myOtherApp"
+    }
+  }
+}
+```
+
+When a multi-app project is detected, the Ionic CLI will operate under the context of an app configured in the root `ionic.config.json`. Project selection criteria is as follows:
+
+1. If the global CLI option `--project` is specified, the project is looked up by key in the `projects` object. For example, `--project=myApp` will select the `myApp` project.
+1. If the CLI detects it is being run within a project path, configured with the `root` key, it will select the matched project. For example, using the CLI within the `apps/myOtherApp/src` directory will select the `myOtherApp` project.
+1. If a `defaultProject` is specified in `ionic.config.json`, it will select the specified project when the above criteria is not met.
+
+### Adding an App
+
+Apps can be registered in a multi-app project either by using `ionic start` to create new apps or `ionic init` to initialize existing apps.
+
+#### Using `ionic start`
+
+If a multi-app project is detected during `ionic start`, the CLI will add the app configuration to the root `ionic.config.json` file instead of creating a project-specific one.
+
+Dependency installation can be skipped using `--no-deps` if dependencies are hoisted to the root of the monorepo.
+
+```shell
+$ cd apps/
+$ ionic start "My New App" --no-deps
+```
+
+#### Using `ionic init`
+
+If an app was created in a way other than `ionic start`, for example by using a prebuilt template, use `ionic init` to register the existing app with the multi-app project.
+
+:::note
+Make sure the app doesn't have an existing `ionic.config.json`.
+:::
+
+```shell
+$ cd apps/existing-app/
+$ ionic init
+```
+
+## Advanced Configuration
+
+### Overriding the Build
+
+Normally, the CLI runs a hard-coded set of commands based on the project type. For example, the standard web asset build for Angular projects is `ng run app:build`. The web asset build can be overridden and `ionic build` can continue to be used by utilizing the `ionic:build` [npm script](https://docs.npmjs.com/misc/scripts). Similarly, the dev server can be overridden by using the `ionic:serve` npm script.
+
+Pay close attention to the flags supplied to the script by the Ionic CLI. Irregularities may occur if options are not respected, especially for livereload on devices.
+
+### Command Options
+
+Command options can be expressed with environment variables. They are normally set with `--opt=value` syntax. The naming of these environment variables follows a pattern: start with `IONIC_CMDOPTS_`, add the command name (replacing any spaces with underscores), add the option name (replacing any hyphens with underscores), and then uppercase everything. Boolean flags (command-line options that don't take a value) can be set to `1` or `0`. Strip the `--no-` prefix in boolean flags, if it exists (`--no-open` in ionic serve can be expressed with `IONIC_CMDOPTS_SERVE_OPEN=0`, for example).
+
+For example, the command options in `ionic cordova run ios -lc --livereload-port=1234 --host=0.0.0.0` can also be expressed with this series of environment variables:
+
+```shell
+$ export IONIC_CMDOPTS_CORDOVA_RUN_LIVERELOAD=1
+$ export IONIC_CMDOPTS_CORDOVA_RUN_CONSOLELOGS=1
+$ export IONIC_CMDOPTS_CORDOVA_RUN_LIVERELOAD_PORT=1234
+$ export IONIC_CMDOPTS_CORDOVA_RUN_HOST=0.0.0.0
+```
+
+If these variables are set in the environment, `ionic cordova build ios` will use new defaults for its options.
+
+### Telemetry
+
+The CLI sends usage data to Ionic to create a better experience. To disable this functionality, run `ionic config set -g telemetry false`.
diff --git a/versioned_docs/version-v6/cli/livereload.md b/versioned_docs/version-v6/cli/livereload.md
new file mode 100644
index 00000000000..d43ea298b02
--- /dev/null
+++ b/versioned_docs/version-v6/cli/livereload.md
@@ -0,0 +1,66 @@
+# Live Reload
+
+One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.md) when changes in the app are detected. This is particularly useful for developing using hardware devices.
+
+## Terms
+
+Live Reload is a conflated term. With `ionic serve`, Live Reload just refers to reloading the browser when changes are made. Live Reload can also be used with Capacitor and Cordova to provide the same experience on virtual and hardware devices, which eliminates the need for re-deploying a native binary.
+
+## Usage
+
+Since live-reload requires the Web View to load your app from a URL hosted by your computer instead of just reading files on the device, setting up live-reload for hardware devices can be tricky.
+
+As with regular device deploys, you will need a cable to connect your device to your computer. The difference is the Ionic CLI configures the Web View to load your app from the dev server on your computer.
+
+### Capacitor
+
+Capacitor does not yet have a programmatic build for development (track [this issue](https://github.com/ionic-team/capacitor/issues/324) for progress), so the Ionic CLI does **not** automatically forward ports for iOS and Android.
+
+To use Live Reload with Capacitor, make sure you're either using a virtual device or a hardware device connected to the same Wi-Fi network as your computer. Then, you'll need to specify that you want to use an external address for the dev server using the `--external` flag.
+
+```shell
+$ ionic capacitor run ios -l --external
+$ ionic capacitor run android -l --external
+```
+
+:::note
+Remember, with the `--external` option, others on your Wi-Fi network will be able to access your app.
+:::
+
+### Cordova
+
+#### Android
+
+For Android devices, the Ionic CLI will automatically forward the dev server port. This means you can use a `localhost` address and it will refer to your computer when loaded in the Web View, not the device.
+
+The following all-in-one command will start a live-reload server on `localhost` and deploy the app to an Android device using Cordova:
+
+```shell
+ionic cordova run android -l
+```
+
+#### iOS
+
+For iOS devices, port forwarding is not yet an option. This means you'll need to connect your device to the same Wi-Fi network as your computer and use an external address for the dev server.
+
+:::note
+You can track [this issue](https://github.com/ionic-team/native-run/issues/20) for progress on iOS port forwarding with Ionic.
+:::
+
+In some cases, the Ionic CLI won't know the address with which to configure the Web View, so you may be prompted to select one. Be sure to select the address of your computer on your Wi-Fi network.
+
+The following all-in-one command will start a live-reload server on **all addresses** and deploy the app to an iOS device using Cordova:
+
+```shell
+ionic cordova run ios -l --external
+```
+
+:::note
+Remember, with the `--external` option, others on your Wi-Fi network will be able to access your app.
+:::
+
+## Tips
+
+- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.md).
+- You can separate the dev server process and the deploy process by using `ionic serve` and the `--livereload-url` option of `ionic cordova run` or `ionic capacitor run`.
+- For Android, it is possible to configure [adb](https://developer.android.com/studio/command-line/adb) to always forward ports while the adb server is running (see `adb reverse`). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable.
diff --git a/versioned_docs/version-v6/cli/using-a-proxy.md b/versioned_docs/version-v6/cli/using-a-proxy.md
new file mode 100644
index 00000000000..2bc33cfb579
--- /dev/null
+++ b/versioned_docs/version-v6/cli/using-a-proxy.md
@@ -0,0 +1,45 @@
+# Using a Proxy
+
+Proxy support is built-in to the Ionic CLI. Proxy settings can be configured via the config file or an environment variable.
+
+To configure proxy settings via the config file, run the following with the URL of the proxy server:
+
+```shell
+ionic config set -g proxy http://proxy.example.com:8888
+```
+
+To configure proxy settings via an environment variable, use one of the following:
+
+```shell
+$ export HTTP_PROXY="http://proxy.example.com:8888" # also used by npm
+$ export HTTPS_PROXY="https://proxy.example.com:8888" # also used by npm
+$ export IONIC_HTTP_PROXY="http://proxy.example.com:8888"
+```
+
+### Other CLIs
+
+Each CLI that you use must be configured separately to proxy network requests.
+
+#### npm
+
+```shell
+npm config set proxy http://proxy.company.com:8888
+```
+
+#### git
+
+```shell
+git config --global http.proxy http://proxy.example.com:8888
+```
+
+### SSL Configuration
+
+The Ionic CLI can be configured to use various SSL settings for HTTP requests.
+
+```shell
+$ ionic config set -g ssl.cafile /path/to/cafile # file path to your CA root certificate
+$ ionic config set -g ssl.certfile /path/to/certfile # file path to a client certificate
+$ ionic config set -g ssl.keyfile /path/to/keyfile # file path to a client key file
+```
+
+The `cafile`, `certfile`, and `keyfile` entries can be manually edited as arrays of strings in `~/.ionic/config.json` to include multiple files.
diff --git a/versioned_docs/version-v6/components.md b/versioned_docs/version-v6/components.md
new file mode 100644
index 00000000000..4e6a648d899
--- /dev/null
+++ b/versioned_docs/version-v6/components.md
@@ -0,0 +1,156 @@
+---
+title: UI Components
+hide_table_of_contents: true
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+<head>
+  <title>UI Components | User Interface Application Building Components</title>
+  <meta
+    name="description"
+    content="Ionic Framework comes stock with a number of high-level UI components, including cards, lists, and tabs to quickly and easily build your app's user interface."
+  />
+  <style>{`
+    :root {
+      --doc-item-container-width: 60rem;
+    }
+  `}</style>
+</head>
+
+Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component.
+
+<intro-end />
+
+<DocsCards>
+  <DocsCard header="Action Sheet" href="api/action-sheet" img="/icons/feature-component-actionsheet-icon.png">
+    <p>Action Sheets display a set of options with the ability to confirm or cancel an action.</p>
+  </DocsCard>
+
+<DocsCard header="Alert" href="api/alert" icon="/icons/component-alert-icon.png">
+  <p>Alerts are a great way to offer the user the ability to choose a specific action or list of actions.</p>
+</DocsCard>
+
+<DocsCard header="Badge" href="api/badge" icon="/icons/component-badge-icon.png">
+  <p>Badges are a small component that typically communicate a numerical value to the user.</p>
+</DocsCard>
+
+<DocsCard header="Button" href="api/button" icon="/icons/component-button-icon.png">
+  <p>Buttons let your users take action. They're an essential way to interact with and navigate through an app.</p>
+</DocsCard>
+
+<DocsCard header="Card" href="api/card" icon="/icons/component-card-icon.png">
+  <p>
+    Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.
+  </p>
+</DocsCard>
+
+<DocsCard header="Checkbox" href="api/checkbox" icon="/icons/component-checkbox-icon.png">
+  <p>Checkboxes can be used to let the user know they need to make a binary decision.</p>
+</DocsCard>
+
+<DocsCard header="Chip" href="api/chip" icon="/icons/component-chip-icon.png">
+  <p>Chips are a compact way to display data or actions.</p>
+</DocsCard>
+
+<DocsCard header="Content" href="api/content" icon="/icons/component-content-icon.png">
+  <p>Content is the quintessential way to interact with and navigate through an app.</p>
+</DocsCard>
+
+<DocsCard header="Date & Time Pickers" href="api/datetime" icon="/icons/component-datetimepicker-icon.png">
+  <p>Date & time pickers are used to present an interface that makes it easy for users to select dates and times.</p>
+</DocsCard>
+
+<DocsCard header="Floating Action Button" href="api/fab" icon="/icons/component-fab-icon.png">
+  <p>Floating action buttons are circular buttons that perform a primary action on a screen.</p>
+</DocsCard>
+
+<DocsCard header="Icons" href="https://ionic.io/ionicons" img="/icons/feature-component-icons-icon.png">
+  <p>Beautifully designed icons for use in web, iOS, Android, and desktop apps.</p>
+</DocsCard>
+
+<DocsCard header="Grid" href="api/grid" icon="/icons/component-grid-icon.png">
+  <p>The grid is a powerful mobile-first system for building custom layouts.</p>
+</DocsCard>
+
+<DocsCard header="Infinite Scroll" href="api/infinite-scroll" icon="/icons/component-infinitescroll-icon.png">
+  <p>Infinite scroll allows you to load new data as the user scrolls through your app.</p>
+</DocsCard>
+
+<DocsCard header="Input" href="api/input" icon="/icons/component-input-icon.png">
+  <p>Inputs provides a way for users to enter data in your app.</p>
+</DocsCard>
+
+<DocsCard header="Item" href="api/item" icon="/icons/component-item-icon.png">
+  <p>Items are an all-purpose UI container that can be used as part of a list.</p>
+</DocsCard>
+
+<DocsCard header="List" href="api/list" icon="/icons/component-lists-icon.png">
+  <p>Lists can display rows of information, such as a contact list, playlist, or menu.</p>
+</DocsCard>
+
+<DocsCard header="Navigation" href="api/nav" img="/icons/feature-component-navigation-icon.png">
+  <p>Navigation is how users move between different pages in your app.</p>
+</DocsCard>
+
+<DocsCard header="Menu" href="api/menu" icon="/icons/component-menu-icon.png">
+  <p>Menus are a common navigation pattern. They can be permanently on-screen, or revealed when needed.</p>
+</DocsCard>
+
+<DocsCard header="Modal" href="api/modal" icon="/icons/component-modal-icon.png">
+  <p>Modals slide in and off screen to display a temporary UI and are often used for login or sign-up pages.</p>
+</DocsCard>
+
+<DocsCard header="Popover" href="api/popover" icon="/icons/component-popover-icon.png">
+  <p>Popover provides an easy way to present information or options without changing contexts.</p>
+</DocsCard>
+
+<DocsCard header="Progress Indicators" href="api/progress-bar" icon="/icons/component-progress-icon.png">
+  <p>Progress indicators visualize the progression of an operation or activity.</p>
+</DocsCard>
+
+<DocsCard header="Radio" href="api/radio" icon="/icons/component-radio-icon.png">
+  <p>Radio inputs allow you to present a set of exclusive options.</p>
+</DocsCard>
+
+<DocsCard header="Refresher" href="api/refresher" icon="/icons/component-refresher-icon.png">
+  <p>Refresher provides pull-to-refresh functionality on a content component.</p>
+</DocsCard>
+
+<DocsCard header="Searchbar" href="api/searchbar" img="/icons/feature-component-search-icon.png">
+  <p>Searchbar is used to search or filter items, usually from a toolbar.</p>
+</DocsCard>
+
+<DocsCard header="Reorder" href="api/reorder" icon="/icons/component-reorder-icon.png">
+  <p>Reorder lets users drag and drop to reorder a list of items.</p>
+</DocsCard>
+
+<DocsCard header="Routing" href="api/router" icon="/icons/component-routing-icon.png">
+  <p>Routing allows navigation based on the current path.</p>
+</DocsCard>
+
+<DocsCard header="Segment" href="api/segment" icon="/icons/component-segment-icon.png">
+  <p>Segments provide a set of exclusive buttons that can be used as a filter or view switcher.</p>
+</DocsCard>
+
+<DocsCard header="Select" href="api/select" icon="/icons/component-select-icon.png">
+  <p>Select is similar to the native HTML select, with a few improvements to sorting and selecting.</p>
+</DocsCard>
+
+<DocsCard header="Tabs" href="api/tabs" img="/icons/feature-component-tabs-icon.png">
+  <p>Tabs enable tabbed navigation, a standard navigation pattern in modern apps.</p>
+</DocsCard>
+
+<DocsCard header="Toast" href="api/toast" icon="/icons/component-toast-icon.png">
+  <p>Toast is used to show a notification over the top of an app's content. It can be temporary or dismissable.</p>
+</DocsCard>
+
+<DocsCard header="Toggle" href="api/toggle" icon="/icons/component-toggle-icon.png">
+  <p>Toggles are an input for binary options, often used for options and switches.</p>
+</DocsCard>
+
+  <DocsCard header="Toolbar" href="api/toolbar" icon="/icons/component-toolbar-icon.png">
+    <p>Toolbars are used to house information and actions relating to your app.</p>
+  </DocsCard>
+</DocsCards>
diff --git a/versioned_docs/version-v6/contributing/coc.md b/versioned_docs/version-v6/contributing/coc.md
new file mode 100644
index 00000000000..5e9c1a94d20
--- /dev/null
+++ b/versioned_docs/version-v6/contributing/coc.md
@@ -0,0 +1,11 @@
+# Code of Conduct
+
+As contributors and maintainers of the Ionic project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities.
+
+Communication through any of Ionic's channels (GitHub, Slack, Forum, IRC, mailing lists, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
+
+We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the Ionic project to do the same.
+
+If any member of the community violates this code of conduct, the maintainers of the Ionic project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate.
+
+If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at <a href="mailto:hi@ionicframework.com">hi@ionicframework.com</a>.
diff --git a/versioned_docs/version-v6/contributing/how-to-contribute.md b/versioned_docs/version-v6/contributing/how-to-contribute.md
new file mode 100644
index 00000000000..df5f6efbd23
--- /dev/null
+++ b/versioned_docs/version-v6/contributing/how-to-contribute.md
@@ -0,0 +1,252 @@
+---
+sidebar_label: How to Contribute
+---
+
+# Contributing to Ionic
+
+Thanks for the interest in contributing to Ionic Framework!
+
+## Contributing Etiquette
+
+Please see the [Contributor Code of Conduct](coc.md) for information on the rules of conduct.
+
+## Creating an Issue
+
+- If you have a question about using the framework, please ask on the [Ionic Forum](http://forum.ionicframework.com/).
+
+- It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Although we would love to help our users as much as possible, diagnosing issues without clear reproduction steps is extremely time-consuming and simply not sustainable.
+
+- The issue list of the [Ionic](https://github.com/ionic-team/ionic) repository is exclusively for bug reports and feature requests. Non-conforming issues will be closed immediately.
+
+- Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs: reply" and receives no further replies from the author of the issue for more than 14 days, it will be closed.
+
+- If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/ionic-team/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
+
+- Next, [create a new issue](https://github.com/ionic-team/ionic/issues/new/choose) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
+
+## Creating a Good Code Reproduction
+
+### What is a Code Reproduction?
+
+A code reproduction is a small application that is built to demonstrate a particular issue. The code reproduction should contain the minimum amount of code needed to recreate the issue and should focus on a single issue.
+
+### Why Should You Create a Reproduction?
+
+A code reproduction of the issue you are experiencing helps us better isolate the cause of the problem. This is an important first step to getting any bug fixed!
+
+Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed. In other words, creating a code reproduction of the issue helps us help you.
+
+### How to Create a Reproduction
+
+- Create a new Ionic application using one of our starter templates. The `blank` starter application is a great choice for this. You can create one using the following Ionic CLI command: `ionic start myApp blank`
+- Add the minimum amount of code needed to recreate the issue you are experiencing. Do not include anything that is not required to reproduce the issue. This includes any 3rd party plugins you have installed.
+- Publish the application on GitHub and include a link to it when [creating an issue](#creating-an-issue).
+- Be sure to include steps to reproduce the issue. These steps should be clear and easy to follow.
+
+### Benefits of Creating a Reproduction
+
+- **Uses the latest version of Ionic:** By creating a new Ionic application, you are ensuring that you are testing against the latest version of the framework. Sometimes the issues you are experiencing have already been resolved in a newer version of the framework!
+- **Minimal surface area:** By removing code that is not needed in order to reproduce the issue, it makes it easier to identify the cause of the issue.
+- **No secret code needed:** Creating a minimal reproduction of the issue prevents you from having to publish any proprietary code used in your project.
+- **Get help fixing the issue:** If we can reliably reproduce an issue, there is a good chance we will be able to address it.
+
+## Creating a Pull Request
+
+- We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
+
+- Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
+
+### Setup
+
+1. [Download the installer](https://nodejs.org/) for the LTS version of Node.js. This is the best way to also [install npm](https://blog.npmjs.org/post/85484771375/how-to-install-npm#_=_).
+2. Fork the [Ionic](https://github.com/ionic-team/ionic) repository.
+3. Clone your fork.
+4. Create a new branch from master for your change.
+5. Navigate into the directory of the package you wish to modify (core, angular, etc.).
+6. Run `npm install` to install dependencies for this package.
+7. Follow the steps for the specific package below.
+
+### Core
+
+#### Modifying Components
+
+1. Locate the component(s) to modify inside `/core/src/components/`.
+2. Take a look at the [Stencil Documentation](https://stenciljs.com/docs/introduction/) and other components to understand the implementation of these components.
+3. Make your changes to the component. If the change is overly complex or out of the ordinary, add comments so we can understand the changes.
+4. [Preview your changes](#preview-changes) locally.
+5. [Modify the documentation](#modifying-documentation) if needed.
+6. [Run lint](#lint-changes) on the directory and make sure there are no errors.
+7. [Build the project](#building-changes).
+8. After the build is finished, commit the changes. Please follow the [commit message format](#commit-message-format) for every commit.
+9. [Submit a Pull Request](#submit-pull-request) of your changes.
+
+#### Preview Changes
+
+1. Run `npm start` from within the `core` directory.
+2. A browser should open at `http://localhost:3333/`.
+3. From here, navigate to one of the component's tests to preview your changes.
+4. If a test showing your change doesn't exist, [add a new test or update an existing one](#modifying-tests).
+5. To test in RTL mode, once you are in the desired component's test, add `?rtl=true` at the end of the url; for example: `http://localhost:3333/src/components/alert/test/basic?rtl=true`.
+
+#### Lint Changes
+
+1. Run `npm run lint` to lint the TypeScript and Sass.
+2. If there are lint errors, run `npm run lint.fix` to automatically fix any errors. Repeat step 1 to ensure the errors have been fixed, and manually fix them if not.
+3. To lint and fix only TypeScript errors, run `npm run lint.ts` and `npm run lint.ts.fix`, respectively.
+4. To lint and fix only Sass errors, run `npm run lint.sass` and `npm run lint.sass.fix`, respectively.
+
+#### Modifying Documentation
+
+1. Locate the `readme.md` file in the component's directory.
+2. Modify the documentation **above** the line that says `<!-- Auto Generated Below -->` in this file.
+3. To update any of the auto generated documentation below that line, make the relevant changes in the following places:
+
+- `Usage`: update the component's usage examples in the component's `usage/` directory
+- `Properties`, `Events`, or `Methods`: update the component's TypeScript file (`*.tsx`)
+- `CSS Custom Properties`: update the component's main Sass file (`*.scss`)
+
+#### Modifying Tests
+
+1. Locate the test to modify inside the `test/` folder in the component's directory.
+2. If a test exists, modify the test by adding an example to reproduce the problem fixed or feature added.
+3. If a new test is needed, the easiest way is to copy the `basic/` directory from the component's `test/` directory, rename it, and edit the content in both the `index.html` and `e2e.ts` file (see [Screenshot Tests](#screenshot-tests) for more information on this file).
+4. The `preview/` directory is used in the documentation as a demo. Only update this test if there is a bug in the test or if the API has a change that hasn't been updated in the test.
+
+##### Screenshot Tests
+
+1. If the test exists in screenshot, there will be a file named `e2e.ts` in the directory of the test.
+2. A screenshot test can be added by including this file and adding one or more `test()` calls that include a call to `page.compareScreenshot()`. See [Stencil end-to-end testing](https://stenciljs.com/docs/end-to-end-testing) and existing tests in `core/` for examples.
+3. **Important:** each `test()` should have only one screenshot (`page.compareScreenshot()`) call **or** it should check the expect at the end of each test. If there is a mismatch it will fail the test which will prevent the rest of the test from running, i.e. if the first screenshot fails the remaining screenshot calls would not be called _unless_ they are in a separate test or all of the expects are called at the end.
+4. To run screenshot locally, use the following command: `npm run test.screenshot`.
+   - To run screenshot for a specific test, pass the path to the test or a string to search for.
+   - For example, running all `alert` tests: `npm run test.screenshot alert`.
+   - Or, running the basic `alert` tests: `npm run test.screenshot src/components/alert/test/basic/e2e.ts`.
+
+#### Building Changes
+
+1. Once all changes have been made and the documentation has been updated, run `npm run build` inside of the `core` directory. This will add your changes to any auto-generated files, if necessary.
+2. Review the changes and, if everything looks correct, [commit](#commit-message-format) the changes.
+3. Make sure the build has finished before committing. If you made changes to the documentation, properties, methods, or anything else that requires an update to a generate file, this needs to be committed.
+4. After the changes have been pushed, publish the branch and [create a pull request](#creating-a-pull-request).
+
+### Submit Pull Request
+
+1. [Create a new pull request](https://github.com/ionic-team/ionic/compare) with the `master` branch as the `base`. You may need to click on `compare across forks` to find your changes.
+2. See the [Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/) GitHub help article for more information.
+3. Please fill out the provided Pull Request template to the best of your ability and include any issues that are related.
+
+## Commit Message Guidelines
+
+We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit).
+
+### Commit Message Format
+
+We follow the [Conventional Commits specification](https://www.conventionalcommits.org/). A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+### Revert
+
+If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
+
+### Type
+
+If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.
+
+Must be one of the following:
+
+- **feat**: A new feature
+- **fix**: A bug fix
+- **docs**: Documentation only changes
+- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+- **refactor**: A code change that neither fixes a bug nor adds a feature
+- **perf**: A code change that improves performance
+- **test**: Adding missing tests
+- **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation
+
+### Scope
+
+The scope can be anything specifying place of the commit change. Usually it will refer to a component but it can also refer to a utility. For example `action-sheet`, `button`, `css`, `menu`, `nav`, etc. If you make multiple commits for the same component, please keep the naming of this component consistent. For example, if you make a change to navigation and the first commit is `fix(nav)`, you should continue to use `nav` for any more commits related to navigation. As a general rule, if you're modifying a component use the name of the folder.
+
+### Subject
+
+The subject contains succinct description of the change:
+
+- use the imperative, present tense: "change" not "changed" nor "changes"
+- do not capitalize first letter
+- do not place a period `.` at the end
+- entire length of the commit message must not go over 50 characters
+- describe what the commit does, not what issue it relates to or fixes
+- **be brief, yet descriptive** - we should have a good understanding of what the commit does by reading the subject
+
+### Body
+
+Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
+The body should include the motivation for the change and contrast this with previous behavior.
+
+### Footer
+
+The footer should contain any information about **Breaking Changes** and is also the place to
+reference GitHub issues that this commit **Closes**.
+
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
+
+### Examples
+
+Does not appear in the generated changelog:
+
+```
+docs(changelog): update steps to update
+```
+
+Appears under "Features" header, toast subheader:
+
+```
+feat(toast): add 'buttons' property
+```
+
+Appears under "Bug Fixes" header, skeleton-text subheader, with a link to issue #28:
+
+```
+fix(skeleton-text): use proper color when animated
+
+closes #28
+```
+
+Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:
+
+```
+perf(css): remove all css utility attributes
+
+BREAKING CHANGE: The CSS utility attributes have been removed. Use CSS classes instead.
+```
+
+Appears under "Breaking Changes" with the breaking change explanation:
+
+```
+refactor(animations): update to new animation system
+
+BREAKING CHANGE:
+
+Removes the old animation system to use the new Ionic animations.
+```
+
+The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.
+
+```
+revert: feat(skeleton-text): add animated property
+
+This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
+```
+
+## License
+
+By contributing your code to the ionic-team/ionic GitHub Repository, you agree to license your contribution under the MIT license.
diff --git a/versioned_docs/version-v6/core-concepts/cross-platform.md b/versioned_docs/version-v6/core-concepts/cross-platform.md
new file mode 100644
index 00000000000..9d2e39248b9
--- /dev/null
+++ b/versioned_docs/version-v6/core-concepts/cross-platform.md
@@ -0,0 +1,180 @@
+---
+disableHtmlPreviews: true
+---
+
+# Cross Platform
+
+Ionic is built from the ground up to make development easy, no matter what platform you are building for. Ionic apps are truly cross-platform: able to run as an Android, iOS, Electron, and Progressive Web App (PWA), all from a single codebase. There are some points to keep in mind when optimizing an app to work across these platforms.
+
+## Hardware APIs
+
+In a native application, it's common to make API calls to communicate with the device, such as opening the camera or accessing geolocation. These API calls won’t work when called in a web environment because there’s no native bridge. There are a few ways Ionic handles this.
+
+### Ionic Native
+
+[Ionic Native](../native.md) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality.
+
+### Platform Detection
+
+In an app’s logic, whenever it is needed to make a native API call, it is recommended to always check the status of the native environment first. For example:
+
+```tsx
+this.platform.ready().then(() => {
+  // 'hybrid' detects both Cordova and Capacitor
+  if (this.platform.is('hybrid')) {
+    // make your native API calls
+  } else {
+    // fallback to browser APIs
+  }
+});
+```
+
+This bit of code can be incredibly helpful when targeting environments where access to the native APIs is uncertain.
+
+### Browser Fallbacks
+
+Many native APIs that people use (for example, the File API), are not available in the browser. The APIs are always improving and catching up to native, so it is recommended to research them. Taking the first two points into consideration, it's fairly easy to create a nice experience that will adapt for the platform the app is running on.
+
+## Desktop
+
+When planning to deploy an app to desktop, either using <a href="https://electronjs.org" target="_blank">Electron</a> or as a <strong>Progressive Web App</strong>, it is important to ensure the app works smoothly on larger devices.
+
+### Layout
+
+Many people rarely notice the layout of an app, but it can have a massive impact on experience and usability. Consider this common UI pattern:
+
+```html
+<ion-content>
+  <ion-item>
+    <ion-label>Item 1</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Item 2</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Item 3</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Item 4</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Item 5</ion-label>
+  </ion-item>
+</ion-content>
+```
+
+This will render 5 items with a width of 100% each. This may look great on a mobile device, as seen below, but viewing this on a desktop browser is a different story. The items become stretched to fill the entire screen because of the wide screen width, leaving screen space unused.
+
+<img src={require('@site/static/img/building/cross-platform-items.png').default} />
+
+To improve this experience, we can wrap the items in a [Grid](../api/grid.md) component. The view can be easily rewritten into something more usable on larger screens:
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Item 1</ion-label>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+      <ion-item>
+        <ion-label>Item 2</ion-label>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+      <ion-item>
+        <ion-label>Item 3</ion-label>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+      <ion-item>
+        <ion-label>Item 4</ion-label>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+      <ion-item>
+        <ion-label>Item 5</ion-label>
+      </ion-item>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+By wrapping the items in an `ion-grid` element, the Ionic grid system is added to our layout. Wrapping each item in a column makes the items take up equal-width inside of the grid, along the same row.
+
+<img src={require('@site/static/img/building/cross-platform-grid.png').default} />
+
+We can take this even further by adding the `fixed` attribute to the `<ion-grid>` element. This tells the grid to have a fixed width based on the screen size. This is perfect for larger screens when items will begin to stretch again without a width on the grid.
+
+<img src={require('@site/static/img/building/cross-platform-grid-fixed.png').default} />
+
+The grid can be further customized to change the sizes of columns with the addition of the `ion-col` properties.
+
+```html
+<ion-grid fixed>
+  <ion-row>
+    <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
+      <ion-item>
+        <ion-label>Item 1</ion-label>
+      </ion-item>
+    </ion-col>
+    <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
+      <ion-item>
+        <ion-label>Item 2</ion-label>
+      </ion-item>
+    </ion-col>
+    <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
+      <ion-item>
+        <ion-label>Item 3</ion-label>
+      </ion-item>
+    </ion-col>
+    <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
+      <ion-item>
+        <ion-label>Item 4</ion-label>
+      </ion-item>
+    </ion-col>
+    <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
+      <ion-item>
+        <ion-label>Item 5</ion-label>
+      </ion-item>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+There’s a lot going on in the example above. These are the key points:
+
+- The `ion-col` gets its width from the `size` attribute added to it, where the value of size is the number of columns to take up out of the total available columns. The default number of available columns is 12.
+
+- The `size` attribute can have a breakpoint added to it, `size-{breakpoint}`. This value sets the size for the specified breakpoint and above.
+
+For more information on customizing with grid, see the [Grid](../api/grid.md) documentation.
+
+## Storage
+
+Most apps at some point will need to store some sort of data locally. Whether it’s storing some JSON from an XHR request, or saving an auth token, there are many different storage options available. On top of this, if the app is running in a native environment, it is possible to create a full SQLite database and store data there. All of these different storage mechanisms have their own advantages and disadvantages, but Ionic developers should not have to worry about that.
+
+### Ionic Storage
+
+In this case, <a href="https://github.com/ionic-team/ionic-storage" target="_blank">Ionic’s Storage library</a> is a perfect candidate for the multi-environment use case. Built on top of the well tested LocalForage library, Ionic’s storage class provides an adaptable storage mechanism that will pick the best storage solution for the current run time.
+
+Currently this means it will run through SQLite for native, IndexedDB (if available), WebSql, or Local Storage. By handling all of this, it allows writing to storage using a stable API.
+
+```tsx
+class MyClass {
+  constructor(public storage: Storage) {}
+
+  async setData(key, value) {
+    const res = await this.storage.set(key, value);
+    console.log(res);
+  }
+
+  async getData(key) {
+    const keyVal = await this.storage.get(key);
+    console.log('Key is', keyVal);
+  }
+}
+```
+
+There are other storage solutions out there as well, such as PouchDB, which provide a similar, adaptable storage mechanism.
diff --git a/versioned_docs/version-v6/core-concepts/fundamentals.md b/versioned_docs/version-v6/core-concepts/fundamentals.md
new file mode 100644
index 00000000000..97a09499934
--- /dev/null
+++ b/versioned_docs/version-v6/core-concepts/fundamentals.md
@@ -0,0 +1,47 @@
+---
+title: Core Concepts
+sidebar_label: Fundamentals
+---
+
+<head>
+  <title>App Development Core Concepts and Tools - Ionic Framework API</title>
+  <meta
+    name="description"
+    content="For those new to Ionic app development, a high-level understanding of the core concepts and tools behind the project helps. Read to learn more about Ionic API."
+  />
+</head>
+
+For those completely new to Ionic app development, it can be helpful to get a high-level understanding of the core philosophy, concepts, and tools behind the project. Before diving into complex topics, we'll cover the basics of what Ionic Framework is, and how it works.
+
+## UI Components
+
+Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.md#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see [Theming](../theming/basics.md).
+
+## Adaptive Styling
+
+Adaptive Styling is a built-in feature of Ionic Framework which allows app developers to use the same code base for multiple platforms. Every Ionic component adapts its look to the platform on which the app is running on. For example, Apple devices, such as the iPhone and iPad, use Apple's own <a href="https://www.apple.com/ios" target="_blank">iOS design language</a>. Similarly, Android devices use Google's design language called <a href="https://material.io/guidelines/" target="_blank">Material Design</a>.
+
+By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.md).
+
+## Navigation
+
+Traditional web apps use a linear history, meaning that the user navigates forward to a page and can hit the back button to navigate back.
+An example of this is clicking around Wikipedia where the user is going forward and backward on the browser's linear history stack.
+
+In contrast, mobile apps often utilize parallel, "non-linear" navigation. For example, a tabbed interface can have separate navigation stacks for each tab, making sure the user never loses their place as they navigate and switch between tabs.
+
+Ionic apps embrace this mobile navigation approach, supporting parallel navigation histories that can also be nested, all while maintaining the familiar browser-style navigation concepts web developers are familiar with.
+
+For apps that are built with Angular and `@ionic/angular`, we recommend using the <a href="https://angular.io/guide/router" target="_blank">Angular Router</a> which comes out of the box for every new Ionic 4 Angular app.
+
+## Native Access
+
+An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms.
+
+One of the most common use cases for Ionic is to build an app which can be downloaded from both the <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> and <a href="https://play.google.com/" target="_blank">Play Store</a>. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.
+
+Projects such as <a href="https://capacitorjs.com/" target="_blank">Capacitor</a> and <a href="https://cordova.apache.org/" target="_blank">Cordova</a> are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.
+
+## Theming
+
+At the core, Ionic Framework is built using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a> which allows us to take advantage of the flexibility that <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS properties (variables)</a> provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.md).
diff --git a/versioned_docs/version-v6/core-concepts/webview.md b/versioned_docs/version-v6/core-concepts/webview.md
new file mode 100644
index 00000000000..a314d09f566
--- /dev/null
+++ b/versioned_docs/version-v6/core-concepts/webview.md
@@ -0,0 +1,50 @@
+---
+title: Web View
+---
+
+<head>
+  <title>Capacitor Web View for iOS and Android Apps - Ionic Framework</title>
+  <meta
+    name="description"
+    content="What is a Web View? Web Views are a full screen and full-powered web browser. Read to learn more about Capacitor Web View on Ionic Framework apps."
+  />
+</head>
+
+Web Views power web apps on native devices.
+
+The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#capacitor).
+
+For [Cordova](../reference/glossary.md#cordova), Ionic maintains a <a href="https://github.com/ionic-team/cordova-plugin-ionic-webview" target="_blank">Web View plugin</a>. The plugin is provided by default when using the Ionic CLI.
+
+## What is a Web View?
+
+Ionic apps are built using [web technologies](../reference/glossary.md#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser.
+
+Modern Web Views offer many built-in <a href="https://whatwebcando.today" target="_blank">HTML5 APIs</a> for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.
+
+![webview architecture](/img/building/webview-architecture.png)
+
+The Ionic Web View plugin is specialized for modern JavaScript apps. For both iOS and Android, app files are always hosted using the `http://` protocol with an optimized HTTP server that runs on the local device.
+
+### CORS
+
+Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.md) for information on dealing with CORS in Ionic apps.
+
+### File Protocol
+
+Capacitor and Cordova apps are hosted on a local HTTP server and are served with the `http://` protocol. Some plugins, however, attempt to access device files via the `file://` protocol. To avoid difficulties between `http://` and `file://`, paths to device files must be rewritten to use the local HTTP server. For example, `file:///path/to/device/file` must be rewritten as `http://<host>:<port>/<prefix>/path/to/device/file` before being rendered in the app.
+
+For Capacitor apps, convert file URIs like so:
+
+```javascript
+import { Capacitor } from '@capacitor/core';
+
+Capacitor.convertFileSrc(filePath);
+```
+
+For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md).
+
+### Implementations
+
+- **iOS**: <a href="https://developer.apple.com/documentation/webkit/wkwebview" target="_blank">WKWebView</a>
+- **Android**: <a href="https://developer.chrome.com/multidevice/webview/overview" target="_blank">Web View for Android</a>
diff --git a/versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.md
new file mode 100644
index 00000000000..fe7e769ee68
--- /dev/null
+++ b/versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.md
@@ -0,0 +1,68 @@
+---
+sidebar_label: What are PWAs?
+title: Progressive Web Apps
+---
+
+<head>
+  <title>Progressive Web Applications: What is a PWA - Ionic Documentation</title>
+  <meta
+    name="description"
+    content="What is a PWA? A Progressive Web Application uses modern web capabilities to deliver an app-like experience. Read our core concept documentation to learn more."
+  />
+</head>
+
+<!-- TOC goes here -->
+
+### The web...but better
+
+A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users.
+These apps meet certain requirements (see below), are deployed to servers, accessible through URLs, and indexed by search engines.
+
+This can work in conjunction with [Capacitor](https://capacitorjs.com) to provide a multiple deploy targets for all your users.
+You can deploy your app as a PWA as well as Native app and take advantage of both channels.
+
+Ionic allows you to ship your app to not only the app store, but also deploy to the mobile web as a PWA.
+
+### What is required
+
+To be considered a Progressive Web App, your app must be:
+
+- Progressive - Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.
+
+- Responsive - Fit any form factor, desktop, mobile, tablet, or whatever is next.
+
+- Connectivity independent - Enhanced with service workers to work offline or on low quality networks.
+
+- App-like - Use the app-shell model to provide app-style navigation and interactions.
+
+- Fresh - Always up-to-date thanks to the service worker update process.
+
+- Safe - Served via HTTPS to prevent snooping and ensure content has not been tampered with.
+
+- Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
+
+- Re-engageable - Make re-engagement easy through features like push notifications.
+
+- Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
+
+- Linkable - Easily share via URL and not require complex installation.
+
+<em>
+  <a href="https://addyosmani.com/blog/getting-started-with-progressive-web-apps/" target="_blank">
+    Addy Osmani: Progressive web apps
+  </a>
+</em>
+
+There is a lot here, but it boils down to a few points for Ionic apps.
+
+#### Offline Support
+
+Apps should be able to work offline. Whether that be displaying a proper "offline" message or caching app data for display purpose.
+
+#### <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest" target="_blank">Web App Manifest</a>
+
+An app manifest file should describe the resources your app will need. This includes your app's displayed name, icons, as well as splash screen. If you link to the manifest file in your index.html, browsers will detect that and load the resources for you.
+
+#### <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank">Service Worker</a>
+
+Service worker could be mentioned in Offline Support, but it really deserves its own section. Service worker provides a programmatic way to cache app resources. Be it JavaScript files or JSON data from a HTTP request. The programmatic API allows developers to decide how to handle caching and provides a much more flexible experience than other options.
diff --git a/versioned_docs/version-v6/deployment/app-store.md b/versioned_docs/version-v6/deployment/app-store.md
new file mode 100644
index 00000000000..e82e5b4e515
--- /dev/null
+++ b/versioned_docs/version-v6/deployment/app-store.md
@@ -0,0 +1,74 @@
+---
+title: iOS App Store Deployment
+sidebar_label: iOS App Store
+---
+
+<head>
+  <title>Publish to iOS App Store: Apple App Store Deployment for Ionic</title>
+  <meta
+    name="description"
+    content="Review the requirements to publish an Ionic app to the Apple iOS App Store. Learn to generate a release build and other necessary steps for deployment."
+  />
+</head>
+
+## Requirements
+
+Submitting an App to the iOS App store requires a few things:
+
+- Xcode
+- A Paid Apple Developers account
+- A valid provisioning profile
+- App Development and Distribution certificates
+
+To enroll in the Apple Developer Program, follow the instructions [listed here](https://developer.apple.com/programs/).
+
+## Generating a release build
+
+If the iOS platform is not already added, be sure to add it:
+
+```shell
+ionic cordova platform add ios
+```
+
+With the platform added, run the build command with the `--prod` flag:
+
+```shell
+ionic cordova build ios --prod
+```
+
+This will generate the minified code for the web portion of an app and copy it over the iOS code base.
+
+From here, open the `.xcworkspace` file in `./platforms/ios/` to start Xcode.
+
+## Generating Signing Certs
+
+Generating certificates for iOS is a bit of an involved process, so be sure to check [Apple's official documentation](https://help.apple.com/xcode/mac/current/#/dev3a05256b8) on what certificates are and how to generate them.
+
+To create the certificates and profiles needed, visit [Apple's member center](https://developer.apple.com/membercenter) and follow the links described in Apple's documentation.
+
+There are two types of certificates that matter here, Development, and Distribution. Development Certificates are just that, meant for development time. They are meant to sign an app and deploy it to devices that the certificate has access to.
+
+Distribution certs are meant for distributing an app to the store. When an app is signed with a Distribution cert, it can be installed on any device.
+
+## Signing the App in Xcode.
+
+After generating the correct certificates, there are options to either have Xcode automatically manage certificates or manually manage them. It's suggested to let Xcode automatically manage certificates. This will make sure that the correct Development and Distribution certs are used, based on the build type selected.
+
+With this option selected, select `Archive` from the `Product > Archive` menu. This will build a version of the app that is ready for distribution in the app stores. After archive has been created, Xcode Organizer is opened.
+
+Xcode Organizer displays a list with builds of the current app. Pick the last build and click 'Upload to App Store'.
+There should be a place to select the team followed by some more information on the app and a "Upload" button to click.
+
+If the upload successfully, the app should be listed on [iTunes Connect](https://itunesconnect.apple.com) and listed in 'Activities'.
+From there, TestFlight can be enabled for beta testing, or the App can be sent for approval from Apple.
+
+## Updating an app
+
+As an app grows, it will need to be updated with new features and fixes.
+An app can be updated by either submitting a new version to Apple, or by using a live update service like Appflow's <a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">live update feature</a>.
+
+With <strong>Live Updates</strong>, app changes can be pushed in realtime directly to users from the Appflow dashboard, without waiting for App Store approvals.
+
+:::note
+In order for the iOS App Store to accept the updated build, the config.xml file will need to be edited to increment the version value, then rebuild the app for release following the same instructions above.
+:::
diff --git a/versioned_docs/version-v6/deployment/desktop-app.md b/versioned_docs/version-v6/deployment/desktop-app.md
new file mode 100644
index 00000000000..517b16d4c15
--- /dev/null
+++ b/versioned_docs/version-v6/deployment/desktop-app.md
@@ -0,0 +1,48 @@
+---
+title: Deploying a Desktop App
+sidebar_label: Electron Desktop App
+---
+
+<head>
+  <title>Building a Desktop Application for Windows and macOS App Stores</title>
+  <meta
+    name="description"
+    content="Building an Ionic desktop application for Windows and macOS app stores lets you reuse 100% of your code. Learn more about deploying a desktop app with Ionic."
+  />
+</head>
+
+Building a desktop app with Ionic allows developers to reuse 100% of their code and ship a traditional desktop app while still having access to all the native device features, like push notifications. This guide assumes familiarity with Electron, and does not go into "how" to build an electron app. For that, check out the official <a href="https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app" target="_blank">Electron guide</a>.
+
+## macOS App
+
+### Requirements
+
+There are two hard requirements for publishing an app on the macOS app store
+
+- Latest version of [Xcode](https://itunes.apple.com/us/app/xcode/id497799835?mt=12)
+- An active developer account ($100 through Apple's developer portal)
+
+### Publishing
+
+The Electron team has a detailed guide on how to publish an app for macOS. Please review [the docs here.](https://electronjs.org/docs/tutorial/mac-app-store-submission-guide)
+
+## Windows App
+
+### Requirements
+
+There are two hard requirements for publishing an app on the Windows app store
+
+- Windows 10 with Anniversary Update (released August 2nd, 2016)
+- The Windows 10 SDK, [download here](https://developer.microsoft.com/en-us/windows/downloads/windows-10-sdk)
+- Node
+- electron-windows-store CLI
+
+`electron-windows-store` can be installed via npm:
+
+```shell
+npm install -g electron-windows-store
+```
+
+### Publishing
+
+Like macOS, Electron has a detailed guide on how to publish an app for Windows. Please review [the docs here](https://electronjs.org/docs/tutorial/windows-store-guide)
diff --git a/versioned_docs/version-v6/deployment/play-store.mdx b/versioned_docs/version-v6/deployment/play-store.mdx
new file mode 100644
index 00000000000..4a68ada3389
--- /dev/null
+++ b/versioned_docs/version-v6/deployment/play-store.mdx
@@ -0,0 +1,167 @@
+---
+title: Android Play Store Deployment
+sidebar_label: Android Play Store
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>Android Play Store Deployment: Publish Your Ionic Apps</title>
+  <meta
+    name="description"
+    content="Ionic documentation for Android Play Store app deployment. Read about how to generate a release build and publish your Ionic apps to the Google Play Store."
+  />
+</head>
+
+If you are using Capacitor, you can additionally refer to the Capacitor documentation for [Deploying to Google Play](https://capacitorjs.com/docs/android/deploying-to-google-play).
+
+## Generating a release build of an app
+
+<Tabs groupId="runtime">
+<TabItem value="capacitor" label="Capacitor" default>
+To generate a release build for Android, build your web app and then run the following cli command:
+
+```shell
+npx cap copy && npx cap sync
+```
+
+This will copy all web assets and sync any plugin changes.
+
+Next, open Android studio:
+
+```shell
+npx cap open android
+```
+
+</TabItem>
+<TabItem value="cordova" label="Cordova">
+To generate a release build for Android, run the following cli command:
+
+```shell
+ionic cordova build android --prod --release
+```
+
+This will generate a release build based on the settings in the `config.xml` in the `platforms/android/app/build/outputs/apk` directory of an app.
+An Ionic app will have preset default values in this file but this can be changed to customize builds.
+
+</TabItem>
+</Tabs>
+
+## Signing an APK
+
+<Tabs groupId="runtime">
+<TabItem value="capacitor" label="Capacitor" default>
+To create an AAB binary locally using Android Studio:
+
+- Open the Build menu
+- Choose **Generate Signed Bundle / APK**
+- Follow the prompts to sign the AAB with your keystore file
+
+For complete details, [view the Android documentation](https://developer.android.com/studio/publish/app-signing).
+
+### Google Play Signing
+
+If you haven't made the switch to Android app bundles yet, you will need to opt into Play App Signing in the Google Play Console to be able to publish them.
+
+#### New Apps
+
+First, create a new app in the Google Play Console. In order to enable app signing, you'll need to navigate to the new release screen, on one of the Production, Open testing, closed testing, or internal testing pages.
+Select the Create new release button as seen below (it doesn't matter which release type, since you don't have to actually go through with creating a new release right now):
+
+![Select create new release in Google Play Console's Production tab](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-release-1024x561.png)
+
+Under the App integrity section, click the **Change app signing key** button:
+
+![Select change app signing key in Google Play Console's Production tab](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-signingkey.png)
+
+Next, select the **Export and upload a key from Java Keystore** option. This is the only way in which you can retain the key and have Google Play use it for signing. If you're using Appflow to build Android apps in the cloud, this is also the required option so you can upload the keystore file to Appflow.
+
+![Uploading a keystore file to Google Play Console](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-export-1024x564.png)
+
+Follow the instructions on the screen to generate the Keystore and you can use the same Keystore file to sign your app in the Appflow dashboard as well. If you need any help generating the Keystore file, you can refer to our docs [here](https://ionic.io/docs/appflow/package/credentials#android-certificates).
+Once the generated zip file has been uploaded, you're all set! Build an AAB binary signed with the keystore file then upload it to Google Play.
+
+#### Existing Apps
+
+As of now, existing apps aren't required to use the AAB format, but you can still enroll them using Play App signing.
+
+To opt into app signing, you'll need to upload the app signing key used to sign previous releases of the app. Navigate to Setup -> App integrity, then choose one of the two methods seen in the screenshot below. Once the key has been uploaded, you can enroll in Play App Signing.
+
+![App integrity setup in Google Play Console](https://blog.ionicframework.com/wp-content/uploads/2021/12/existingapps-optin.png)
+
+:::tip
+With smaller app sizes, improved performance, and enhanced security, the AAB binary format is a win for app developers and users alike. If you have an existing Android app using the APK format, consider migrating to AAB to take advantage of all the great features it provides.
+:::
+
+</TabItem>
+<TabItem value="cordova" label="Cordova">
+First, the unsigned APK must be signed. If a signing key has already been generated, skip these steps and use that one instead.
+Generate a private key using the keytool command that comes with the Android SDK:
+
+```shell
+keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
+```
+
+Once that command has been ran and its prompts have been answered a file called `my-release-key.keystore` will be created in the current directory.
+
+:::caution
+Save this file and keep it somewhere safe. If it is lost the Google Play Store will not accept updates for this app!
+:::
+
+To sign the unsigned APK, run the jarsigner tool which is also included in the Android SDK:
+
+```shell
+jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
+```
+
+Finally, the zip align tool must be ran to optimize the APK.
+The `zipalign` tool can be found in `/path/to/Android/sdk/build-tools/VERSION/zipalign`.
+For example, on macOS with Android Studio installed, `zipalign` is in `~/Library/Android/sdk/build-tools/VERSION/zipalign`:
+
+```shell
+zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
+```
+
+This generates a final release binary called HelloWorld.apk that can be accepted into the Google Play Store.
+
+</TabItem>
+</Tabs>
+
+## Submitting an app to the Google Play Store
+
+Now that a release AAB/APK has been generated, a Play Store listing can be written and the AAB/APK can be uploaded.
+
+To start, visit the [Google Play Store Developer Console](https://play.google.com/apps/publish) and create a new developer account.
+
+:::note
+Making a developer account with Google Play costs $25 USD.
+:::
+
+Once a developer account has been created, go ahead and click the `Create an Application`
+
+![Create an App button](/img/publishing/newAppGPlay.png)
+
+Be sure to fill out the description for the app along with providing screenshots and additional info.
+When ready, upload the signed release AAB/APK that was generated and publish the app.
+
+## Updating an app
+
+As an app evolves, it will need to be updated with new features and fixes. An app can be updated by either submitting a new version to the Google Play Store, or by using a live update service like Appflow's Live Update feature. Using Live Updates, changes can be pushed directly to users from the Appflow dashboard, without submitting changes to the Play Store. Learn more about Live Updates <a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">here</a>.
+
+<Tabs groupId="runtime">
+<TabItem value="capacitor" label="Capacitor" default>
+
+:::note
+In order for the Google Play Store to accept updated AAB/APK, the `android/app/build.gradle` file will need to be edited to increment the `versionCode` value, then rebuild the app for release following the instructions above.
+:::
+
+</TabItem>
+<TabItem value="cordova" label="Cordova">
+
+:::note
+In order for the Google Play Store to accept updated AAB/APK, the config.xml file will need to be edited to increment the version value, then rebuild the app for release following the instructions above.
+:::
+
+</TabItem>
+</Tabs>
diff --git a/versioned_docs/version-v6/deployment/progressive-web-app.md b/versioned_docs/version-v6/deployment/progressive-web-app.md
new file mode 100644
index 00000000000..6fc348f877b
--- /dev/null
+++ b/versioned_docs/version-v6/deployment/progressive-web-app.md
@@ -0,0 +1,25 @@
+---
+title: Deploying a Progressive Web App
+sidebar_label: Progressive Web App (PWA)
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+<head>
+  <title>Deploying A Progressive Web Application (PWA) | PWA Deployment</title>
+  <meta
+    name="description"
+    content="Ionic Applications are built with web technologies that run just as well as a Progressive Web App as they do a native app. Learn how to deploy a PWA with Ionic."
+  />
+</head>
+
+Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) page for more info.
+
+For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular and React.
+
+<DocsCards>
+  <DocsCard header="Angular" href="../angular/pwa" img="/img/frameworks/angular.svg"></DocsCard>
+  <DocsCard header="React" href="../react/pwa" img="/img/frameworks/react.svg"></DocsCard>
+  <DocsCard header="Vue" href="../vue/pwa" img="/img/frameworks/vue.svg"></DocsCard>
+</DocsCards>
diff --git a/versioned_docs/version-v6/developer-resources/books.md b/versioned_docs/version-v6/developer-resources/books.md
new file mode 100644
index 00000000000..01218e277f4
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/books.md
@@ -0,0 +1,53 @@
+# Books
+
+### [Learn Ionic 4 From Scratch](https://leanpub.com/learnionic4fromscratch)
+
+Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to create awesome applications with Ionic, thanks to the new Stencil compiler. This book is aimed at beginners that are looking to create amazing web, mobile and desktop applications using Ionic with examples across all of the popular frameworks.
+
+by [Paul Halliday](https:://developer.school)
+
+### [Creating Ionic Applications with StencilJS](https://www.joshmorony.com/creating-ionic-applications-with-stencil-js/) - [Free Preview](https://cdn2.hubspot.net/hubfs/3776657/PREVIEW-Creating-Ionic-Apps-with-StencilJS.pdf)
+
+As well as being a powerful tool for generating reuseable web components, StencilJS provides the tools needed to build an entire application out of web components. Combined with the Ionic web components, StencilJS gives us everything we need to build high-quality production mobile applications - no framework required.
+
+by [Joshua Morony](https://www.joshmorony.com/blog)
+
+### [Mobile App Development with Ionic: Cross-Platform Apps with Ionic 2, Angular 2, and Cordova](https://www.amazon.com/Mobile-App-Development-Ionic-Cross-Platform/dp/1491937785/ref=sr_1_2?ie=UTF8&qid=1464183332&sr=8-2&keywords=ionic+2)
+
+by Chris Griffith
+
+### [Building Mobile Apps with Ionic & Angular](https://www.joshmorony.com/building-mobile-apps-with-ionic-2/)
+
+by [Joshua Morony](https://www.joshmorony.com/blog)
+
+Building Mobile Apps with Ionic & Angular is an all-in-one resource for learning the latest and greatest version of Ionic. It is targeted at beginners and works its way through the basics of Ionic, to example applications of varying complexity, and then to the steps required to build and publish your application (on the app stores or as a PWA). It has been updated for every major release, so you can rest easy knowing that you're not learning outdated tech.
+
+### [Ionic 2 From Zero to App Store](https://devdactic.com/zero-to-app)
+
+by Simon Reimler
+
+### [Ionic Framework By Example](https://www.packtpub.com/application-development/ionic-framework-example)
+
+by Sani Yusuf
+
+### [Building Firestore Powered Ionic Apps](https://javebratt.com/ionic-firebase-book/)
+
+by Jorge Vergara
+
+This book will help you go from not knowing what Firebase is to be able to use the different APIs for your Ionic Applications. It will take you from “_What’s Firebase?_” to building scalable, production-ready apps and it’s always up-to-date with latest Ionic and Firebase versions.
+
+### [Ionic 2 Cookbook - Second Edition](https://www.amazon.com/Ionic-Cookbook-Second-Hoc-Phan-ebook/dp/B01C4D9VWS?ie=UTF8&keywords=ionic%202&qid=1464183332&ref_=sr_1_3&sr=8-3)
+
+by Hoc Phan
+
+### [Mastering Ionic 2](https://www.leanpub.com/masteringionic2)
+
+by James Griffiths
+
+### [Learning Ionic](https://www.packtpub.com/in/application-development/learning-ionic) (Ionic 1)
+
+by Arvind Ravulavaru
+
+### [Learning Ionic - Second Edition](https://www.packtpub.com/in/web-development/learning-ionic-second-edition) (Ionic 2/3)
+
+by Arvind Ravulavaru
diff --git a/versioned_docs/version-v6/developer-resources/courses.md b/versioned_docs/version-v6/developer-resources/courses.md
new file mode 100644
index 00000000000..46038f4ffb1
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/courses.md
@@ -0,0 +1,83 @@
+# Courses
+
+### [Elite Ionic](https://www.joshmorony.com/elite/)
+
+by Josh Morony
+
+Elite Ionic is an online course for Ionic developers who want to move past the basics, and build complex, well tested, high performing, beautiful, and useable mobile applications. It is recommended that you already have a reasonably solid understanding of the basics of Ionic before starting this course.
+
+### [Ionic Academy](https://ionicacademy.com/)
+
+by Simon Grimm
+
+Learn Ionic with step-by-step video courses & quick wins from one of the Ionic community leaders. Covers beginner, intermediate and advanced topics. Get access to a community of developers just like you.
+
+### [Ionic Framework: Tips, Tricks & Techniques](https://www.packtpub.com/mobile/ionic-framework-tips-tricks-and-techniques-video)
+
+by Charles Muzonzini
+
+In this course, you will master tips and best practices for Ionic 4 & Ionic 5 that you can immediately implement to build high quality apps. This course covers a wide variety of topics from increasing app performance, to building custom native plugins, to securing your apps. It's a practical, hands-on course that will take your app building skills to the next level.
+
+### [Building Deskop Apps with Ionic and Electron](https://pluralsight.pxf.io/VeMXO)
+
+by Michael Callaghan at Pluralsight
+
+Desktop development has historically required dramatically different skills than those required for web
+development. The two disciplines don't mesh well. In this course, Building Desktop Apps with Ionic and Electron,
+you will gain the ability to apply your hard-earned web development skills to build amazing desktop
+applications. First, you will learn how to build a functional and attractive UI with Ionic and Angular. Next,
+you will discover how to wrap that UI into an Electron application shell. Finally, you will explore how to
+package your app and make it ready for distribution. When you are finished with this course, you will have the
+skills and knowledge of Ionic and Electron development needed to deploy and distribute a beautiful app to both
+Windows and macOS users.
+
+### [Building Progressive Web Apps with Ionic](https://pluralsight.pxf.io/Ly2EY)
+
+by Michael Callaghan at Pluralsight
+
+Everything changed when Google created the concept of Progressive Web Applications or PWA. A PWA is a pure web
+application that you can install on devices, that can function with limited network functionality, through its
+use of intelligent caching. Build a Progressive Web App that will run anywhere. In this course, Building
+Progressive Web Apps with Ionic, you will learn foundational knowledge and gain the ability to create a web
+application that will run anywhere: the browser, desktop, or mobile clients. First, you will learn what a
+Progressive Web App (or PWA) is. Next, you will discover how to use the Ionic Framework, Angular, and Firebase
+to create, deploy, and optimize a basic web application into a full-blown PWA. Finally, you will explore how to
+configure the application to make it installable and runnable on Androids and iPhones. When you’re finished with
+this course, you will have the skills and knowledge of Ionic and PWAs needed to create and deploy your own
+Progressive Web Application anywhere you desire.
+
+### [Ionic CLI](https://pluralsight.pxf.io/ionic-cli)
+
+by Michael Callaghan at Pluralsight
+
+Since its inception, the Ionic Framework has included a rudimentary command line interface. Though only a few
+years old, it has matured into a powerful tool that should be part of every developer’s toolbox. This course,
+Ionic CLI, will start at the top and explore the Ionic CLI. First, you'll see how to create projects and
+components. Next, you will learn how to build and serve apps. Finally, you'll discover how to share projects
+with others, and even integrate with other build tools. Whether you’re just starting to explore Ionic, or have
+been using it since its pre-beta days, there is something here for you. By the end of the course, you’ll have
+the confidence to use the Ionic CLI as part of your everyday Ionic development.
+
+### [Wordpress Rest API and Ionic 4 (Angular) App With Auth](https://www.udemy.com/course/wordpress-rest-api-and-ionic-3-crud/)
+
+by Baljeet Singh at Udemy
+
+### [Building Mobile Apps with Ionic 2, Angular 2, and TypeScript](https://app.pluralsight.com/library/courses/ionic2-angular2-typescript-mobile-apps/table-of-contents)
+
+by Pluralsight
+
+### [Introducing Ionic 2](http://shop.oreilly.com/product/0636920050353.do)
+
+by Mathieu Chauvinc
+
+### [Ionic 2 Master Course](https://www.udemy.com/ionic-2-tutorial/)
+
+by Udemy
+
+### [Introducing Ionic 2](https://www.udemy.com/introducing-ionic-2/)
+
+by Udemy
+
+### [Ionic 2 Solutions](https://www.packtpub.com/web-development/ionic-2-solutions-video)
+
+by Hoc Phan
diff --git a/versioned_docs/version-v6/developer-resources/guides.md b/versioned_docs/version-v6/developer-resources/guides.md
new file mode 100644
index 00000000000..dbe6d9477b8
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/guides.md
@@ -0,0 +1,9 @@
+# Guides
+
+### [Your First Ionic App - v3](guides/first-app-v3/intro.md)
+
+Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow.
+
+### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.md)
+
+Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova.
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
new file mode 100644
index 00000000000..7887f03a320
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
@@ -0,0 +1,195 @@
+# Creating a Photo Gallery with Device Storage
+
+Last time, we successfully added the Camera plugin to the About page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this in [the part 2 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part2) on GitHub.
+
+## Creating a Dedicated Photo Service
+
+From a terminal window, navigate to your Ionic project and run:
+
+```shell
+ionic g provider PhotoProvider
+```
+
+This creates a PhotoProvider class in a dedicated providers/photo folder:
+
+```Javascript
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+/*
+  Generated class for the PhotoProvider provider.
+
+  See https://angular.io/guide/dependency-injection for more info on providers
+  and Angular DI.
+*/
+@Injectable()
+export class PhotoProvider {
+
+  constructor(public http: HttpClient) {
+    console.log('Hello PhotoProvider Provider');
+  }
+}
+```
+
+Within this class, add a Photo class. The “data” property represents the base64 image data of a captured photo:
+
+```Javascript
+class Photo {
+  data: any;
+}
+```
+
+Then, create a Photos array to represent our photo gallery:
+
+```Javascript
+export class PhotoProvider {
+
+  public photos: Photo[] = [];
+
+  constructor() { }
+}
+```
+
+Back in `about.ts`, import PhotoProvider:
+
+```Javascript
+import { PhotoProvider } from '../../providers/photo/photo';
+```
+
+Add it to the Constructor:
+
+```Javascript
+constructor(private camera: Camera, public photoService: PhotoProvider) {  }
+```
+
+Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera import, and the About page constructor. Also, remove references to HttpClient - we won’t be making any HTTP calls.
+
+Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array:
+
+```Javascript
+this.camera.getPicture(options).then((imageData) => {
+    // Add new photo to gallery
+    this.photos.unshift({
+        data: 'data:image/jpeg;base64,' + imageData
+    }); }, (err) => {
+    // Handle error
+    console.log("Camera issue: " + err);
+});
+```
+
+In `about.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService:
+
+```Javascript
+export class AboutPage {
+  constructor(public navCtrl: NavController, public photoService: PhotoProvider) {  }
+}
+```
+
+Next, in `about.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row.
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col col-6 *ngFor="let photo of photoService.photos">
+      <img [src]="photo.data" />
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (“col-6”), only 2 photos are displayed per row.
+
+Last, update the Fab button to call the PhotoProvider’s `takePicture` method:
+
+```Html
+<button ion-fab (click)="photoService.takePicture()">
+```
+
+Excellent! We now have a basic photo gallery working.
+
+## Saving photos to the device
+
+Having a working photo gallery is pretty cool, but you’ll likely notice that when the app is closed, the photos are lost forever. That’s no good, so let’s add the Ionic Storage plugin, as easy way to store key/value pairs and JSON objects. When running in a native app context, Storage will prioritize using SQLite, one of the most stable and widely used file-based databases. When running on the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order.
+
+The Storage plugin works perfectly for our base64 image data. To begin, add the SQLite plugin for native:
+
+```shell
+ionic cordova plugin add cordova-sqlite-storage
+```
+
+Next, add the JavaScript library for the web:
+
+```shell
+npm install --save @ionic/storage
+```
+
+Last, import the Storage module and add it to the imports list in `app.module.ts`:
+
+```Javascript
+import { IonicStorageModule } from '@ionic/storage';
+
+imports: [
+    BrowserModule,
+    IonicModule.forRoot(MyApp),
+    IonicStorageModule.forRoot()
+  ],
+```
+
+It’s now ready to be used in our PhotoProvider class. Import it:
+
+```Javascript
+import { Storage } from '@ionic/storage-angular';
+```
+
+Then inject it via the constructor:
+
+```Javascript
+constructor(private camera: Camera, private storage: Storage) { }
+```
+
+To add the capability to save photos, there’s only a couple steps left. Update the `takePicture()` method to save the entire photos array after each photo is taken using the storage.set method:
+
+```Javascript
+this.camera.getPicture(options).then((imageData) => {
+      // Add new photo to gallery
+      this.photos.unshift({
+        data: 'data:image/jpeg;base64,' + imageData
+      });
+
+      // Save all photos for later viewing
+      this.storage.set('photos', this.photos);
+    }, (err) => {
+     // Handle error
+     console.log("Camera issue: " + err);
+    });
+```
+
+We still need to load the saved photos when the app is first opened. This is simple enough - retrieve the “photos” key then assign its value to the photos array:
+
+```Javascript
+loadSaved() {
+    this.storage.get('photos').then((photos) => {
+      this.photos = photos || [];
+    });
+  }
+```
+
+Over in the About page, call the loadSaved method once it begins loading:
+
+```Javascript
+ngOnInit() {
+    this.photoService.loadSaved();
+}
+```
+
+Sweet! Photos are now saved to your device. To demonstrate that they are indeed being saved, force close DevApp, reopen it, and open the About page. Or, shake your device to have the Control Menu pop up, then tap “Exit preview.” Afterwards, reload this app to view the photos.
+
+Finally, back up your changes to Appflow:
+
+```shell
+git add .
+git commit -m “implemented photo gallery”
+git push ionic master
+```
+
+Next up, we’ll look at how to apply a custom theme to an Ionic app.
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md
new file mode 100644
index 00000000000..844aef86a7e
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md
@@ -0,0 +1,117 @@
+# Your First Ionic App - Framework v3
+
+The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:
+
+![Before and after going through this tutorial](/img/guides/first-app-v3/gallery-combined.png)
+
+It’s easy to get started. Reference code for this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/).
+
+## Install Node.js
+
+If you don’t have Node.js installed already, [download the LTS version](https://nodejs.org/en/).
+
+## Install Ionic
+
+Run the following in the command line (you may need to prepend “sudo” on a Mac):
+
+```shell
+npm install -g @ionic/cli
+```
+
+## Create an App
+
+Next, create an Ionic app using our “Tabs” app template:
+
+```shell
+ionic start photo-gallery tabs
+```
+
+This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
+
+<strong>“Would you like to integrate your new app with Cordova to target native iOS and Android?”</strong>
+
+Type “y” and press Enter. Project setup may take a few moments.
+
+<strong>“Install the free Appflow SDK and connect your app?”</strong>
+
+Type “y” and press Enter. [Appflow](https://ionicframework.com/pro) is a powerful set of services and features built on top of the flagship Ionic Framework. This includes updating your app instantly (skipping the app store review process!), packaging apps in the cloud, and error monitoring.
+
+<strong>Log into your Ionic Account</strong>
+
+Sign in now to easily access awesome features like Live Deploys later in this tutorial.
+
+<strong>What would you like to do?</strong>
+
+Choose “Create a new app on Appflow.”
+
+<strong>Which git host would you like to use?</strong>
+
+Choose “Appflow.”
+
+<strong>“How would you like to connect to Appflow?”</strong>
+
+- Choose “Automatically setup a new SSH key pair for Appflow” if you haven’t used SSH before.
+- Choose “Use an existing SSH key pair” if you’ve used SSH before.
+
+Next, change into the app folder, then push your code to Appflow:
+
+```shell
+$ cd photo-gallery
+$ git push ionic master
+```
+
+That’s it! Now for the fun part - let’s see it in action.
+
+## Run the App
+
+Run this command next:
+
+```shell
+ionic serve
+```
+
+And voilà! Your Ionic app is now running in a web browser. Most of your app can be built right in the browser, greatly increasing development speed.
+
+## Photo Gallery!!!
+
+There are three tabs: “Home”, “About”, and “Contact.” Click on the About tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform the About page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!
+
+![Before and after going through this tutorial](/img/guides/first-app-v3/email-photogallery.gif)
+
+Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/pages/about/about.html`. We see:
+
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>About</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding"></ion-content>
+```
+
+`ion-header` represents the top navigation and toolbar, with “About” as the title. We put our app code into `ion-content`. In this case, it’s where we’ll add a button that opens the device’s camera and shows the image captured by the camera. But first, let’s start with something obvious: renaming the About page:
+
+```html
+<ion-title>Photo Gallery</ion-title>
+```
+
+Next, open `src/pages/tabs/tabs.html`. Change the tabTitle to “Gallery” and the tabIcon to “images”:
+
+```html
+<ion-tabs>
+  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
+  <ion-tab [root]="tab2Root" tabTitle="Gallery" tabIcon="images"></ion-tab>
+  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
+</ion-tabs>
+```
+
+Now, back up your changes to Appflow:
+
+```shell
+$ git add .
+$ git commit -m “converting about page to photo gallery”
+$ git push ionic master
+```
+
+That’s just the start of all the cool things we can do with Ionic. Up next, we’ll deploy the app to iOS and Android, then continue building the photo gallery.
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md
new file mode 100644
index 00000000000..ff861040e51
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md
@@ -0,0 +1,156 @@
+# Android, iOS, and the Camera - Oh My!
+
+Previously, we got an Ionic app up and running locally in a web browser. Now, let’s get it onto your iOS or Android device, then start building the photo gallery feature. Fortunately, Ionic provides a way to skip the frustration of dealing with native SDK installations: Ionic DevApp!
+
+The Ionic DevApp is a free app that makes it easy to run your Ionic app directly on your iOS or Android device. Download it here, then open on your device:
+
+<a href="https://itunes.apple.com/us/app/ionic-devapp/id1233447133?ls=1&mt=8">
+  <img src={require('@site/static/img/guides/first-app-v3/appstore.png').default} />
+</a>
+<a href="https://play.google.com/store/apps/details?id=io.ionic.devapp&hl=en">
+  <img src={require('@site/static/img/guides/first-app-v3/playstore.png').default} />
+</a>
+
+Afterwards, open a terminal and navigate to your Ionic project. Execute the following:
+
+```shell
+ionic serve -c
+```
+
+In DevApp, you should now see the app appear. If it doesn't, or you have any issues throughout creating this app, [see here](https://ionicframework.com/docs/pro/devapp/).
+
+Much better! Now we can add the camera functionality. By the way, you can find reference code for this in [the “part 1” folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part1) on GitHub.
+
+Back in `about.html`, add the following:
+
+```html
+<ion-content>
+  <img />
+
+  <ion-fab center bottom>
+    <button ion-fab>
+      <ion-icon name="camera"></ion-icon>
+    </button>
+  </ion-fab>
+</ion-content>
+```
+
+Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next.
+
+## Add the Camera Dependencies via the CLI
+
+In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code:
+
+```shell
+npm install --save @awesome-cordova-plugins/camera
+```
+
+In `package.json`, you’ll notice a new JavaScript dependency has been added:
+
+`"@awesome-cordova-plugins/camera": "^4.12.0"`
+
+Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device:
+
+```shell
+ionic cordova plugin add cordova-plugin-camera
+```
+
+In `config.xml`, a new plugin entry is created:
+
+```xml
+<plugin name="cordova-plugin-camera" spec="^4.0.3" />
+```
+
+The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this to the bottom of `config.xml`:
+
+```xml
+<!-- Required for iOS 10: Camera permission prompt -->
+<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
+    <string>Used to take pictures</string>
+</edit-config>
+```
+
+## Add Camera plugin to Angular App Module
+
+There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module:
+
+```Javascript
+import { Camera } from '@awesome-cordova-plugins/camera';
+```
+
+Then, add it as a Provider:
+
+```Javascript
+providers: [
+    StatusBar,
+    SplashScreen,
+    Camera,
+    {provide: ErrorHandler, useClass: IonicErrorHandler}
+  ],
+```
+
+It can now be used on any of our App pages.
+
+## Add the Camera to the About page
+
+Our camera button doesn’t do anything yet. Over in `about.html`, add a click handler to the button:
+
+```html
+<button ion-fab (click)="takePicture()"></button>
+```
+
+Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user.
+
+```html
+<img [src]="currentImage" *ngIf="currentImage" />
+```
+
+Open `about.ts` next and import the Camera library:
+
+```Javascript
+import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera';
+```
+
+Next, define the “currentImage” variable and inject the Camera into this class via the constructor:
+
+```Javascript
+export class AboutPage {
+  currentImage: any;
+
+  constructor(public navCtrl: NavController, private camera: Camera) {
+}
+```
+
+Finally, add the “takePicture” method, already wired up to execute once the camera button has been tapped:
+
+```Javascript
+takePicture() {
+    const options: CameraOptions = {
+      quality: 100,
+      destinationType: this.camera.DestinationType.DATA_URL,
+      encodingType: this.camera.EncodingType.JPEG,
+      mediaType: this.camera.MediaType.PICTURE
+    }
+
+    this.camera.getPicture(options).then((imageData) => {
+      this.currentImage = 'data:image/jpeg;base64,' + imageData;
+    }, (err) => {
+     // Handle error
+     console.log("Camera issue:" + err);
+    });
+  }
+```
+
+Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere `:)`
+
+Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page.
+
+Finally, back up your changes to Appflow:
+
+```shell
+git add .
+git commit -m “added camera functionality”
+git push ionic master
+```
+
+Next, we’ll look at how to transform the app into a photo gallery, as well as how to save the photos to your device!
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
new file mode 100644
index 00000000000..b33fb66ea8a
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
@@ -0,0 +1,193 @@
+# Realtime App Updates with Appflow Live Updates
+
+As you’ve seen so far, building web and mobile apps is quick and easy with the Ionic Framework. However, nothing disrupts rapid iteration faster than App Store delays. Fortunately, with Appflow’s Deploy feature, you can send live code changes directly to your users. Paired with seamless background updates, they are always upgraded to the latest version.
+
+Setting it up is quick and easy. For reference, continue to refer to [the part 3 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub. First, install the Appflow JavaScript library:
+
+```shell
+npm install @ionic/pro@latest --save
+```
+
+Then, add the Appflow plugin. Here’s the command to install it:
+
+```shell
+$ ionic cordova plugin add cordova-plugin-ionic@latest --save
+--variable APP_ID=YOUR_APP_ID --variable CHANNEL_NAME=YOUR_CHANNEL_NAME
+```
+
+There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard:
+
+![app id location](/img/guides/first-app-v3/app-id-location.png)
+
+And we’ll just use “Master” as the channel name. Putting this together looks like:
+
+```shell
+$ ionic cordova plugin add cordova-plugin-ionic@latest --save
+--variable APP_ID=381533B9 --variable CHANNEL_NAME=Master
+```
+
+After this plugin has been added, you’ll notice that `config.xml` and `package.json` have been updated with your app’s details:
+
+```xml
+<plugin name="cordova-plugin-ionic" spec="^5.0.6">
+    <variable name="APP_ID" value="381533B9" />
+    <variable name="CHANNEL_NAME" value="Master" />
+    <variable name="WARN_DEBUG" value="true" />
+    <variable name="UPDATE_API" value="https://api.ionicjs.com" />
+    <variable name="UPDATE_METHOD" value="background" />
+    <variable name="MAX_STORE" value="2" />
+    <variable name="MIN_BACKGROUND_DURATION" value="30" />
+</plugin>
+```
+
+Next, modify `src/app/app.module.ts` to include the initialization of Appflow on app startup:
+
+```javascript
+import { Pro } from '@ionic/pro';
+
+Pro.init('YOUR_APP_ID', {
+  appVersion: 'APP_VERSION',
+});
+```
+
+As an example, this would look like:
+
+```javascript
+Pro.init('381533B9', {
+  appVersion: '0.0.1',
+});
+```
+
+Next, push the code up to Appflow:
+
+```shell
+git add .
+git commit -m “adding Appflow”
+git push ionic master
+```
+
+Next, create a local, native build of the app.
+
+## Android Builds
+
+Follow the [Android Setup instructions](../../../developing/android.md), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
+
+```shell
+ionic cordova build android --prod
+```
+
+This will generate a unsigned debug build (meaning the app can run on any Android device).
+
+## iOS Builds
+
+iOS is [a bit trickier to set up](../../../developing/ios.md) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
+
+```shell
+ionic cordova build ios --prod
+```
+
+Then, continue to [follow the instructions here](../../../deployment/app-store.md) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
+
+## Add the Native App to Your Local Device
+
+Now comes the fun part: testing out the native app on your device! For iOS, the easiest way (that works for both PC and Mac) involves using iTunes. Connect your iOS device, locate your IPA file, then drag and drop the IPA file from the file system onto your device in iTunes. The app will install immediately and be ready for use:
+
+<div class="wistia_responsive_padding" style={{ padding: '62.5% 0 0 0', position: 'relative' }}>
+  <div
+    class="wistia_responsive_wrapper"
+    style={{ height: '100%', left: 0, position: 'absolute', top: 0, width: '100%' }}
+  >
+    <iframe
+      src="https://fast.wistia.net/embed/iframe/s5v4fujv7w?videoFoam=true"
+      title="Wistia video player"
+      allowtransparency="true"
+      frameborder="0"
+      scrolling="no"
+      class="wistia_embed"
+      name="wistia_embed"
+      allowfullscreen
+      mozallowfullscreen
+      webkitallowfullscreen
+      oallowfullscreen
+      msallowfullscreen
+      width="100%"
+      height="100%"
+    ></iframe>
+  </div>
+</div>
+<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>
+
+For Android testing, the easiest way across all OS platforms is to use [Android Studio](https://developer.android.com/studio/), Google’s official Android IDE. After downloading it, connect your Android device to your computer. On the Studio startup screen, select “Profile or debug APK”, then select the recently built APK file.
+
+In the upper right hand corner, click the Play button. Select your connected device, then click OK:
+
+<div class="wistia_responsive_padding" style={{ padding: '62.5% 0 0 0', position: 'relative' }}>
+  <div
+    class="wistia_responsive_wrapper"
+    style={{ height: '100%', left: 0, position: 'absolute', top: 0, width: '100%' }}
+  >
+    <iframe
+      src="https://fast.wistia.net/embed/iframe/b2ys5v4sno?videoFoam=true"
+      title="Wistia video player"
+      allowtransparency="true"
+      frameborder="0"
+      scrolling="no"
+      class="wistia_embed"
+      name="wistia_embed"
+      allowfullscreen
+      mozallowfullscreen
+      webkitallowfullscreen
+      oallowfullscreen
+      msallowfullscreen
+      width="100%"
+      height="100%"
+    ></iframe>
+  </div>
+</div>
+<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>
+
+## Deploying Changes
+
+With Appflow Deploy, any JavaScript, HTML, or CSS changes can be pushed automatically to app users. Open the Photo Gallery app in your favorite code editor, then update the title of the Gallery page:
+
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Photo Viewer</ion-title>
+  </ion-toolbar>
+</ion-header>
+```
+
+Next, push the code up to Appflow:
+
+```shell
+$ git add .
+$ git commit -m “change name to Photo Viewer”
+$ git push ionic master
+```
+
+Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. You’ll see this newest commit begin to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users:
+
+![deploy channel](/img/guides/first-app-v3/deploy-channel.png)
+
+A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like.
+
+Each time a user launches our Photo Gallery app, it will poll for updates from Appflow. If new code is available, the update is downloaded in the background. There are [a handful of ways](https://ionic.io/docs/appflow/deploy/api#update_method) to control how updates are performed, but by default they will be applied the next time the user closes then opens the app.
+
+When the latest Build has been successful, close your local copy of Photo Gallery app or put it in the background for 30 seconds (the [MIN_BACKGROUND_DURATION default](https://ionic.io/docs/appflow/deploy/api#min_background_duration)), then reopen it. The title of the Photo Gallery page should change from “Photo Gallery” to “Photo Viewer.”
+
+What if you deploy a change, then realize that there is a bug? Or perhaps you’re just not happy with the name “Photo Viewer?” No problem: Appflow Deploy makes it easy to roll back changes as well!
+
+On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored.
+
+![deploy channel](/img/guides/first-app-v3/deploy-revertChange.png)
+
+This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group.
+
+## Stuck on creating local native builds?
+
+Building native app binaries for Android and iOS can be painful. The tooling isn’t great, new OS versions often result in challenging upgrades, and creating consistent builds across your dev team can be frustrating. Fortunately, Appflow’s Package feature makes this easy: simply upload your iOS certificate and Android keystore files, then we take care of the rest!
+
+[Start packaging your app in the cloud](https://dashboard.ionicframework.com/settings/billing) along with 10,000 Ionic Deploys per month.
+
+Up next, we look at Appflow Monitoring - track your app errors in realtime.
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md
new file mode 100644
index 00000000000..19ef3364069
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md
@@ -0,0 +1,47 @@
+# Make It Your Own! Ionic Theming
+
+Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. You can find the code for this in [the “part 3” folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub.
+
+Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components:
+
+![v3-theming](/img/guides/first-app-v3/v3-theming.png)
+
+You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles:
+
+![v3-theming-colors](/img/guides/first-app-v3/v3-themeColors.png)
+
+You can find these colors defined in `src/theme/variables.scss`.
+
+By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple:
+
+```Css
+$colors: (
+  primary:    #7044ff,
+)
+```
+
+But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
+
+![ios and android comparison](/img/guides/first-app-v3/ion-lab-comparison.png)
+
+In our app, this is clearly visible in how the header and the icons are styled.
+
+If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property:
+
+```Javascript
+imports: [
+    BrowserModule,
+    IonicModule.forRoot(MyApp, {
+      mode: "md"
+    }, null),
+    IonicStorageModule.forRoot()
+  ],
+```
+
+Now, the iOS version of our app has a Material Design skin!
+
+![ios and android comparison](/img/guides/first-app-v3/ion-lab-md-styling.png)
+
+Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps!
+
+If you're interested in taking your Ionic apps to the next level, continue on with our exploration of Appflow next.
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
new file mode 100644
index 00000000000..c4fac8c2871
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
@@ -0,0 +1,92 @@
+# Track Bugs in Realtime with Ionic Monitoring
+
+Bugs happen, and can be hard to track down - especially with hundreds of possible combinations of mobile devices and operating systems. Appflow Monitoring allows you to track errors in your app on users’ phones and it sends them directly to you instantly, even if your code is minified!
+
+Reducing customer frustration by fixing major issues quickly in your production apps are a substantial part of providing a high quality app experience. Combined with Appflow Deploy, new updates can be rolled out quickly to address problems in real-time.
+
+To begin, let’s add a global error handler that will catch and report all unhandled exceptions that occur in the app. Open `src/app/app.module.ts`, then add two import statements:
+
+```javascript
+import { ErrorHandler, Injectable, Injector } from '@angular/core';
+import { IonicErrorHandler } from 'ionic-angular';
+```
+
+Next, create an error handler class calls the Monitoring service’s API whenever any errors have been encountered:
+
+```javascript
+@Injectable()
+export class MyErrorHandler implements ErrorHandler {
+  ionicErrorHandler: IonicErrorHandler;
+
+  constructor(injector: Injector) {
+    try {
+      this.ionicErrorHandler = injector.get(IonicErrorHandler);
+    } catch (e) {
+      // Unable to get the IonicErrorHandler provider, ensure
+      // IonicErrorHandler has been added to the providers list below
+    }
+  }
+
+  handleError(err: any): void {
+    Pro.monitoring.handleNewError(err);
+
+    this.ionicErrorHandler && this.ionicErrorHandler.handleError(err);
+  }
+}
+```
+
+Then, within the providers array, update IonicErrorHandler to MyErrorHandler:
+
+```javascript
+{provide: ErrorHandler, useClass: MyErrorHandler},
+```
+
+It should then look like:
+
+```javascript
+providers: [
+  // ...
+  IonicErrorHandler,
+  [{ provide: ErrorHandler, useClass: MyErrorHandler }],
+];
+```
+
+Next, let’s intentionally create a bug so we can demonstrate the power of Ionic Monitoring. Open `about.html` and rename the takePicture method to something that doesn’t exist, such as “takePhoto”:
+
+```html
+<button ion-fab (click)="photoService.takePhoto()"></button>
+```
+
+With this change in place, anytime a user taps on the Camera button, an exception will be thrown and sent to Ionic’s Monitoring service.
+
+Last, we need to need to create a Source Map for your app. This file makes it easy for Monitoring to pinpoint problems by providing stack traces that map back to the original, unminified TypeScript code.
+
+Sync the current version of the app by running the following:
+
+```shell
+ionic monitoring syncmaps
+```
+
+With our intentional error in place, let’s try it out to see what happens. Run your app locally:
+
+```shell
+ionic serve
+```
+
+Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear:
+
+![event monitoring](/img/guides/first-app-v3/monitoring-event.png)
+
+Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, we see that the error occurred three times on Mac OS X in the Chrome web browser.
+
+![event details](/img/guides/first-app-v3/monitoring-details.png)
+
+Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly.
+
+This is a TypeScript bug, meaning a fix can be released using Live Updates. Give it a try!
+
+- Revert the method back to “takePicture.”
+- Push the fix using Git. Remember, “git push ionic master.”
+- Roll out the fix using Live Updates from the Ionic dashboard.
+
+Supporting hundreds of mobile device types is so much easier with Appflow Monitoring. [Upgrade to the Appflow Developer plan today](https://dashboard.ionicframework.com/settings/billing) to get instant notification when bugs occur, save error history for sixty days (instead of seven), and unlock 10,000 live Deploy updates per month!
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
new file mode 100644
index 00000000000..5e1d62fed1b
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
@@ -0,0 +1,202 @@
+import DocsButton from '@components/page/native/DocsButton';
+
+# Creating a Photo Gallery with Device Storage
+
+Last time, we successfully added the Camera plugin to the Tab2 page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4).
+
+## Creating a Dedicated Photo Service
+
+From a terminal window, navigate to your Ionic project and run:
+
+```shell
+ionic g service services/Photo
+```
+
+This creates a PhotoService class in a dedicated "services" folder:
+
+```Javascript
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PhotoService {
+  constructor() { }
+}
+```
+
+Within this file, add a Photo class. The “data” property represents the base64 image data of a captured photo:
+
+```Javascript
+class Photo {
+  data: any;
+}
+```
+
+Then, create a Photos array to represent our photo gallery:
+
+```Javascript
+export class PhotoService {
+
+  public photos: Photo[] = [];
+
+  constructor() { }
+}
+```
+
+Back in `tab2.page.ts`, import PhotoService:
+
+```Javascript
+import { PhotoService } from '../services/photo.service';
+```
+
+Add it to the Constructor:
+
+```Javascript
+constructor(private camera: Camera, public photoService: PhotoService) {  }
+```
+
+Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera and CameraOptions imports, and the Tab2Page page constructor.
+
+Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array:
+
+```Javascript
+this.camera.getPicture(options).then((imageData) => {
+    // Add new photo to gallery
+    this.photos.unshift({
+        data: 'data:image/jpeg;base64,' + imageData
+    }); }, (err) => {
+    // Handle error
+    console.log("Camera issue: " + err);
+});
+```
+
+In `tab2.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService:
+
+```Javascript
+export class Tab2Page {
+  constructor(public photoService: PhotoService) {  }
+}
+```
+
+Next, in `tab2.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row.
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="6" *ngFor="let photo of photoService.photos">
+      <img [src]="photo.data" />
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (`size="6"`), only 2 photos are displayed per row.
+
+Last, update the Fab button to call the PhotoService’s `takePicture` method:
+
+```Html
+<ion-fab-button (click)="photoService.takePicture()">
+  <ion-icon name="camera"></ion-icon>
+</ion-fab-button>
+```
+
+Excellent! We now have a basic photo gallery working.
+
+## Saving photos to the device
+
+Having a working photo gallery is pretty cool, but you’ll likely notice that when the app is closed, the photos are lost forever. That’s no good, so let’s add the [Ionic Storage plugin](https://ionicframework.com/docs/storage/), as easy way to store key/value pairs and JSON objects. When running in a native app context, Storage will prioritize using SQLite, one of the most stable and widely used file-based databases. When running on the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order.
+
+The Storage plugin works perfectly for our base64 image data. To begin, add the SQLite plugin for native:
+
+```shell
+ionic cordova plugin add cordova-sqlite-storage
+```
+
+Next, add the JavaScript library for the web:
+
+```shell
+npm install --save @ionic/storage
+```
+
+Last, import the Storage module and add it to the imports list in `app.module.ts`:
+
+```Javascript
+import { IonicStorageModule } from '@ionic/storage';
+
+@NgModule({
+  declarations: [AppComponent],
+  entryComponents: [],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
+    IonicStorageModule.forRoot()
+  ],
+  providers: [
+    StatusBar,
+    SplashScreen,
+    Camera,
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+
+It’s now ready to be used in our PhotoService class. Import it:
+
+```Javascript
+import { Storage } from '@ionic/storage-angular';
+```
+
+Then inject it via the constructor:
+
+```Javascript
+constructor(private camera: Camera, private storage: Storage) { }
+```
+
+To add the capability to save photos, there’s only a couple steps left. Update the `takePicture()` method to save the entire photos array after each photo is taken using the storage.set method:
+
+```Javascript
+this.camera.getPicture(options).then((imageData) => {
+  // Add new photo to gallery
+  this.photos.unshift({
+    data: 'data:image/jpeg;base64,' + imageData
+  });
+
+  // Save all photos for later viewing
+  this.storage.set('photos', this.photos);
+}, (err) => {
+  // Handle error
+  console.log("Camera issue: " + err);
+});
+```
+
+We still need to load the saved photos when the app is first opened. This is simple enough - retrieve the “photos” key then assign its value to the photos array:
+
+```Javascript
+loadSaved() {
+  this.storage.get('photos').then((photos) => {
+    this.photos = photos || [];
+  });
+}
+```
+
+Over in the Tab2 page, call the loadSaved method once it begins loading:
+
+```Javascript
+ngOnInit() {
+  this.photoService.loadSaved();
+}
+```
+
+Sweet! Photos are now saved to your device. To demonstrate that they are indeed being saved, force close DevApp, reopen it, and open the Tab2 page. Or, shake your device to have the Control Menu pop up, then tap “Exit preview.” Afterwards, reload this app to view the photos.
+
+Next up, we’ll look at how to apply a custom theme to an Ionic app.
+
+<div style={{ textAlign: 'right' }}>
+  <DocsButton href="theming">
+    Continue{' '}
+    <svg viewBox="0 0 512 512">
+      <path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"></path>
+    </svg>
+  </DocsButton>
+</div>
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md
new file mode 100644
index 00000000000..bffc7ea9c28
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md
@@ -0,0 +1,97 @@
+# Your First Ionic App: Angular
+
+The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:
+
+![Before and after going through this tutorial](/img/guides/first-app-v3/gallery-combined.png)
+
+It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/).
+
+## Required Tools
+
+Download/install these right away to ensure an optimal Ionic development experience:
+
+- [Git](https://git-scm.com/downloads) for version control.
+- <strong>SSH client</strong>, such as [PuTTy](https://www.putty.org/), for secure login to Appflow.
+- <strong>Node.js</strong> for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
+- <strong>A code editor</strong> for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
+- <strong>Command-line terminal (CLI)</strong>: FYI <strong>Windows</strong> users, for the best Ionic experience, we
+  recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For <strong>
+    Mac/Linux
+  </strong> users, virtually any terminal will work.
+
+## Install Ionic and Cordova
+
+Run the following in the command line:
+
+```shell
+npm install -g @ionic/cli cordova
+```
+
+:::note
+The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
+
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.md#resolving-permission-errors) for more information.
+:::
+
+## Create an App
+
+Next, create an Ionic Angular app using our “Tabs” app template:
+
+```shell
+ionic start photo-gallery tabs
+```
+
+This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
+
+Next, change into the app folder:
+
+```shell
+cd photo-gallery
+```
+
+That’s it! Now for the fun part - let’s see the app in action.
+
+## Run the App
+
+Run this command next:
+
+```shell
+ionic serve
+```
+
+And voilà! Your Ionic app is now running in a web browser. Most of your app can be built right in the browser, greatly increasing development speed.
+
+## Photo Gallery!!!
+
+There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!
+
+![Before and after going through this tutorial](/img/guides/first-app-v3/email-photogallery.gif)
+
+Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
+
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab Two</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding"></ion-content>
+```
+
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title. We put our app code into `ion-content`. In this case, it’s where we’ll add a button that opens the device’s camera and shows the image captured by the camera. But first, let’s start with something obvious: renaming the Tab Two page:
+
+```html
+<ion-title>Photo Gallery</ion-title>
+```
+
+Next, open `src/app/tabs/tabs.page.html`. Change the label to “Gallery” and the icon name to “images”:
+
+```html
+<ion-tab-button tab="tab2">
+  <ion-icon name="images"></ion-icon>
+  <ion-label>Gallery</ion-label>
+</ion-tab-button>
+```
+
+That’s just the start of all the cool things we can do with Ionic. Up next, we’ll deploy the app to your iOS or Android device, then continue building the photo gallery.
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
new file mode 100644
index 00000000000..8908090edec
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
@@ -0,0 +1,154 @@
+# Android, iOS, and the Camera - Oh My!
+
+Previously, we got an Ionic app up and running locally in a web browser. Now, let’s get it onto your iOS or Android device, then start building the photo gallery feature.
+
+## Add Cordova iOS and Android Platforms
+
+Ionic leverages the open source [Cordova project](https://cordova.apache.org/docs/en/latest/guide/overview/) to provide native hardware support. We begin by adding the iOS and Android _platforms_ then will add specific _plugins_ like the Camera afterwards:
+
+```shell
+$ ionic cordova platform add ios
+$ ionic cordova platform add android
+```
+
+These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary.
+
+There are more steps to configure [iOS](../../../developing/ios.md) and [Android](../../../developing/android.md) native tooling.
+
+Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4).
+
+Back in `tab2.page.html`, add the following:
+
+```html
+<ion-content>
+  <img />
+
+  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="camera"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+</ion-content>
+```
+
+Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next.
+
+## Add the Camera Dependencies via the CLI
+
+In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code:
+
+```shell
+npm install @awesome-cordova-plugins/camera
+```
+
+In `package.json`, you’ll notice a new JavaScript dependency has been added, with a version number similar to the following:
+
+`"@awesome-cordova-plugins/camera": "^5.4.0"`
+
+Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device. For more info on how this works, read up on [Cordova](https://cordova.apache.org/docs/en/latest/guide/overview/) and [Ionic Native](https://ionicframework.com/docs/native).
+
+```shell
+ionic cordova plugin add cordova-plugin-camera
+```
+
+The `config.xml` file is now updated with an entry similar to the following for the native camera code:
+
+```xml
+<plugin name="cordova-plugin-camera" spec="^4.0.3" />
+```
+
+The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this inside the ios platform section (<platform name="ios"></platform>) of `config.xml`:
+
+```xml
+<!-- Required for iOS 10: Camera permission prompt -->
+<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
+    <string>Used to take pictures</string>
+</edit-config>
+```
+
+## Add Camera plugin to Angular App Module
+
+There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module:
+
+```Javascript
+import { Camera } from '@awesome-cordova-plugins/camera/ngx';
+```
+
+Then, add it as a Provider:
+
+```Javascript
+providers: [
+    StatusBar,
+    SplashScreen,
+    Camera,
+    {provide: ErrorHandler, useClass: IonicErrorHandler}
+  ],
+```
+
+It can now be used on any of our App pages.
+
+## Add the Camera to the Gallery page
+
+Our camera button doesn’t do anything yet. Over in `tab2.page.html`, add a click handler to the button:
+
+```html
+<ion-fab vertical="bottom" horizontal="center" slot="fixed">
+  <ion-fab-button (click)="takePicture()">
+    <ion-icon name="camera"></ion-icon>
+  </ion-fab-button>
+</ion-fab>
+```
+
+Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user.
+
+```html
+<img [src]="currentImage" *ngIf="currentImage" />
+```
+
+Open `tab2.page.ts` next and import the Camera library:
+
+```Javascript
+import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx';
+```
+
+Next, define the “currentImage” variable and inject the Camera into this class via the constructor:
+
+```Javascript
+export class Tab2Page {
+  currentImage: any;
+
+  constructor(private camera: Camera) { }
+}
+```
+
+Finally, add the “takePicture” method in `tab2.page.ts`. It is already wired up to execute once the camera button has been tapped:
+
+```Javascript
+export class Tab2Page {
+  currentImage: any;
+
+  constructor(private camera: Camera) { }
+
+  takePicture() {
+    const options: CameraOptions = {
+      quality: 100,
+      destinationType: this.camera.DestinationType.DATA_URL,
+      encodingType: this.camera.EncodingType.JPEG,
+      mediaType: this.camera.MediaType.PICTURE
+    };
+
+    this.camera.getPicture(options).then((imageData) => {
+      this.currentImage = 'data:image/jpeg;base64,' + imageData;
+    }, (err) => {
+      // Handle error
+      console.log("Camera issue:" + err);
+    });
+  }
+}
+```
+
+Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere. 😀
+
+Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page.
+
+Next, we’ll look at how to transform the app into a photo gallery, as well as how to save the photos to your device!
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md
new file mode 100644
index 00000000000..6170b2d673a
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md
@@ -0,0 +1,56 @@
+# Make It Your Own! Ionic Theming
+
+Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box.
+
+Ionic has nine default colors, defined as CSS variables, that can be used to change the color of its UI components:
+
+![v4-theming-defaults](/img/guides/first-app-v4/theming-defaults.png)
+
+You can customize each color further by supplying a base, contrast, shade, and tint properties. These provide flexible control over your styles:
+
+![v4-theming-properties](/img/guides/first-app-v4/theming-properties.png)
+
+You can find these colors defined in `src/theme/variables.scss`.
+
+By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple:
+
+```css
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #b36bff;
+  --ion-color-primary-rgb: 179, 107, 255;
+  --ion-color-primary-contrast: #000000;
+  --ion-color-primary-contrast-rgb: 0, 0, 0;
+  --ion-color-primary-shade: #9e5ee0;
+  --ion-color-primary-tint: #bb7aff;
+}
+```
+
+The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.md). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project.
+
+But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
+
+![ios and android comparison](/img/guides/first-app-v3/ion-lab-comparison.png)
+
+In our app, this is clearly visible in how the header and the icons are styled.
+
+If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property:
+
+```Javascript
+imports: [
+    BrowserModule,
+    IonicModule.forRoot({
+      mode: "md"
+    }),
+    IonicStorageModule.forRoot()
+  ],
+```
+
+Now, the iOS version of our app has a Material Design skin!
+
+![ios and android comparison](/img/guides/first-app-v3/ion-lab-md-styling.png)
+
+Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic.
+
+Go forth and build great apps!
diff --git a/versioned_docs/version-v6/developer-resources/posts.md b/versioned_docs/version-v6/developer-resources/posts.md
new file mode 100644
index 00000000000..a8c5b3f861c
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/posts.md
@@ -0,0 +1,77 @@
+---
+sidebar_label: Posts
+---
+
+# Community Posts
+
+### [What's new in Ionic 5 - Migration and Free Starter](https://ionicthemes.com/tutorials/about/ionic5-tutorial-migration-and-starter)
+
+Take advantage of the new benefits from Ionic 5. In this guide we describe the main changes and show you how to migrate your applications from Ionic 4 to Ionic 5. For this post we created an Ionic 5 CRUD Contacts app that you can download for free to learn how to start using Ionic 5.
+
+### [Ionic Navigation and Angular Routing](https://ionicthemes.com/tutorials/about/ionic-navigation-and-routing-ultimate-guide)
+
+Learn how to master Routing and Navigation in Ionic Angular Apps as well as some usability tricks you can add to your apps to improve the user experience!
+
+### [Firebase Authentication Tutorial For Ionic Apps](https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps)
+
+Learn how to add Firebase Authentication to your Ionic 5 App. This tutorial explains step by step how to configure both the Firebase and the Ionic Apps to enable authentication with social providers such as Google, Facebook and Twitter and also with Email and Password.
+
+### [Native Cross Platform Web Apps with Ionic Capacitor](https://ionicthemes.com/tutorials/about/native-cross-platform-web-apps-with-ionic-capacitor)
+
+Ionic Capacitor introduction guide for beginners: history, motivation, usage and how to migrate your existing Cordova apps to Capacitor.
+
+### [Ionic Skeleton Loading Screens](https://ionicthemes.com/tutorials/about/improved-ux-for-ionic-apps-with-skeleton-loading-screens)
+
+UI Skeletons, Ghost Elements, Shell Elements? They are all the same! Think of them as cool content placeholders that are shown where the content will eventually be once it becomes available. In this guide you will learn the importance of adopting the App Shell pattern in your ionic apps and discuss how to implement it using Ionic and Angular. Also, we explain some advanced CSS techniques to take the UX to the next level.
+
+### [The Complete Guide To Progressive Web Apps with Ionic](https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4)
+
+Learn what Progressive Web Apps are, why you should consider them for your next project, and how easy is to build a complete and production ready PWA with Ionic.
+
+### [Mastering Web Components in Ionic](https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4)
+
+Understanding the new component architecture in Ionic, including web components, shadow DOM, CSS 4 variables and Stencil.
+
+### [Forms and Validations in Ionic 5](https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic)
+
+Learn everything about Ionic Forms and input validations in Ionic Angular apps.
+
+### [Building a Ionic Firebase App step by step](https://ionicthemes.com/tutorials/about/building-a-ionic-firebase-app-step-by-step)
+
+Learn how to make a CRUD application using Ionic Framework, Cloud Firestore for the database, and Cloud Storage for image storage.
+
+### [Ionic and WordPress Integration using the WordPress REST API](https://ionicthemes.com/tutorials/about/ionic-wordpress-integration)
+
+Learn how to connect your Ionic app with your WordPress site using the WordPress REST API.
+
+### [Understanding Ionic 2: Imports](http://mcgivery.com/understanding-ionic-2-imports/)
+
+ES6/TS introduce a new way to bring in external code. Learn about Imports.
+
+### [Ionic 2 / Angular 2 Concepts](https://www.joshmorony.com/ionic-2-first-look-series-new-angular-2-concepts-syntax/)
+
+Familiarize yourself with some of the new concepts in Ionic 2 and Angular 2.
+
+### [Ionic, PouchDB, &amp; SQLite For Storage](http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-ionic-2/)
+
+Simplify storage using PouchDB and Sqlite.
+
+### [Advanced Google Maps](https://www.joshmorony.com/creating-an-advanced-google-maps-component-in-ionic-2/)
+
+Go beyond adding a simple map to handling offline conditions and complex maps.
+
+### [Background Geolocation](https://www.joshmorony.com/adding-background-geolocation-to-an-ionic-2-application/)
+
+Learn how to add geolocation that can run in the background of your app.
+
+### [Taking Advantage of Observables](https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html)
+
+Learn how to use observables in your Ionic 2 app.
+
+### [Using the Angular Router in ionic/angular 4](https://www.joshmorony.com/using-angular-routing-with-ionic-4/)
+
+Learn how to use the Angular Router in your `@ionic/angular` 4 app.
+
+### [Ionic 4 examples using Angular, Vue and React](https://ionicworkshop.com/posts/introduction-to-ionic-framework-angular-vue-react/)
+
+Learn how to use Ionic 4 with Angular, React and Vue.
diff --git a/versioned_docs/version-v6/developer-resources/tools.md b/versioned_docs/version-v6/developer-resources/tools.md
new file mode 100644
index 00000000000..0cd5ac7d7f3
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/tools.md
@@ -0,0 +1,21 @@
+# Tools
+
+### [Angular CLI](https://github.com/angular/angular-cli)
+
+Learn more about the power of the Angular CLI
+
+### [StackBlitz](https://stackblitz.com/)
+
+Quickly get started with a new Ionic app entirely in the browser!
+
+### [TypeScript](https://www.typescriptlang.org/)
+
+Check out the features that make working with TypeScript amazing.
+
+### [Glossary](../reference/glossary.md)
+
+A list of common terms you'll see while developing in Ionic.
+
+### [Starter Apps](https://ionicthemes.com)
+
+Ionic Starter Apps to speed up and improve your app development.
diff --git a/versioned_docs/version-v6/developer-resources/videos.md b/versioned_docs/version-v6/developer-resources/videos.md
new file mode 100644
index 00000000000..bdc0a784d25
--- /dev/null
+++ b/versioned_docs/version-v6/developer-resources/videos.md
@@ -0,0 +1,21 @@
+# Videos
+
+### [Ionic 2 Crash Course](https://www.youtube.com/watch?v=O2WiI9QrS5s&feature=youtu.be)
+
+A quick introduction to Ionic 2 and how to build your first app.
+
+### [Ionic &amp; Async](https://blog.ionicframework.com/screencast-ionic-async/)
+
+Learn how to coordinate multiple events in a timely manner.
+
+### [Building a TODO app in Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/)
+
+Learn how to build out an entire Ionic 2 app.
+
+### [Angular Connect: Ionic 2](https://www.youtube.com/watch?v=bAlydPwFONY)
+
+Dive into some of the ideas and goals behind Ionic 2.
+
+### [Ionic &amp; Typings](https://blog.ionicframework.com/ionic-and-typings/)
+
+Learn how to add typings for libraries you are using in your Ionic 2 app.
diff --git a/versioned_docs/version-v6/developing/android.md b/versioned_docs/version-v6/developing/android.md
new file mode 100644
index 00000000000..d27d9ae62f2
--- /dev/null
+++ b/versioned_docs/version-v6/developing/android.md
@@ -0,0 +1,222 @@
+---
+title: Android Development
+sidebar_label: Developing for Android
+---
+
+<head>
+  <title>Android App Development Guide: Build Ionic Apps in Android Studio</title>
+  <meta
+    name="description"
+    content="This development guide covers how to run and debug Ionic apps on Android emulators and devices. Learn how to install Android Studio to get started building."
+  />
+</head>
+
+This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). Android apps can be developed on Windows, macOS, and Linux.
+
+## Android Studio
+
+[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.md#android-sdk), which will need to be configured for use in the command line.
+
+Android Studio is also used to [create Android virtual devices](android.md#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.md#set-up-an-android-device).
+
+:::note
+We don't recommend using Android Studio for _developing_ Ionic apps. Instead, it should only really be used to build and run your apps for the native Android platform and to manage the Android SDK and virtual devices.
+:::
+
+### Installing Android Studio
+
+Download Android Studio from the <a href="https://developer.android.com/studio/" target="_blank">Android website</a>. More detailed installation instructions can be found in the <a href="https://developer.android.com/studio/install" target="_blank">User Guide</a>.
+
+### Installing the Android SDK
+
+Once installed, open Android Studio. The IDE should detect that the Android SDK needs to be installed. In the **SDK Components Setup** screen, finish installing the SDK. Keep note of the **Android SDK Location**.
+
+![Android Studio SDK Setup](/img/installation/android-studio-sdk-setup.png)
+
+By default, the latest stable SDK Platform is installed, which includes a collection of packages required to target that version of Android.
+
+To install system images and other minor SDK platform packages, you may need to ensure **Show Package Details** is checked at the bottom of the SDK Manager.
+![Android Studio SDK Manager](/img/installation/android-studio-sdk.png)
+
+For future reference, the Android SDK can be managed with Android Studio in the **Configure** &raquo; **SDK Manager** menu of the Android Studio welcome screen or **Tools** &raquo; **SDK Manager** inside Android projects.
+
+### Configuring Command Line Tools
+
+The Android SDK ships with <a href="https://developer.android.com/studio/command-line/" target="_blank">useful command-line tools</a>. Before they can be used, some environment variables must be set. The following instructions are for macOS and Linux. For Windows, check the documentation on setting and persisting environment variables in terminal sessions.
+
+In `~/.bashrc`, `~/.bash_profile`, or similar shell startup scripts, make the following modifications:
+
+1. Set the `ANDROID_SDK_ROOT` environment variable. This path should be the **Android SDK Location** used in the previous section.
+
+   For Mac:
+
+   ```shell
+   $ export ANDROID_SDK_ROOT=$HOME/Android/sdk
+   ```
+
+   For Linux/Windows:
+
+   ```shell
+   $ export ANDROID_SDK_ROOT=$HOME/Android/Sdk
+   ```
+
+2. Add the Android SDK command-line directories to `PATH`. Each directory corresponds to the category of <a href="https://developer.android.com/studio/command-line/" target="_blank">command-line tool</a>.
+
+   ```shell-session
+   $ # avdmanager, sdkmanager
+   $ export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
+   $ # adb, logcat
+   $ export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
+   $ # emulator
+   $ export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
+   ```
+
+   :::note
+   For `apksigner` and `zipalign`, `$ANDROID_SDK_ROOT/build-tools&lt;version>` must also be added to `PATH`.
+   :::
+
+### Creating an Android Virtual Device
+
+Android Virtual Devices (AVDs) are blueprints that the Android emulator uses to run the Android OS. The following documentation is a quick way to get the Android emulator set up. For more detailed instructions and information, see <a href="https://developer.android.com/studio/run/managing-avds" target="_blank">the Android documentation</a>.
+
+AVDs are managed with the AVD Manager. In the Android Studio welcome screen, click **Configure** &raquo; **AVD Manager**. The AVD Manager can also be opened inside Android projects in the **Tools** &raquo; **AVD Manager** menu.
+
+![AVD Setup](/img/installation/android-studio-avd-setup.png)
+
+Click **Create Virtual Device** and select a suitable device definition. If unsure, choose **Pixel 2**. Then, select a suitable system image. If unsure, choose **Pie** (API 28) with Google Play services. See <a href="https://en.wikipedia.org/wiki/Android_version_history" target="_blank">Android version history</a> for information on Android versions.
+
+Once the AVD is created, launch the AVD into the Android emulator. Keeping the emulator running is the best way to ensure detection while developing Ionic apps for Android.
+
+<figure className="device">
+  <img alt="Android Emulator Booting" src="/docs/img/installation/android-emulator-booting.png" />
+</figure>
+
+### Set up an Android Device
+
+Actual Android hardware can also be used for Ionic app development. But first, the device must be set up for development. The following documentation is a quick way to set up Android devices for development. For more detailed instructions and information, see <a href="https://developer.android.com/studio/run/device" target="_blank">the Android documentation</a>.
+
+1. Enable USB debugging on the device. Open **Settings**, navigate to **Developer options**, and enable **USB debugging**. The **Developer options** menu may need to be enabled first. See <a href="https://developer.android.com/studio/debug/dev-options" target="_blank">the Android documentation</a> for instructions.
+1. Ensure the device has permission to connect to the computer. For macOS, no additional setup is required. For Windows, <a href="https://developer.android.com/studio/run/oem-usb" target="_blank">install the OEM USB drivers</a>.
+
+Verify the connection works by connecting the device to the computer with a USB cable and using the following command:
+
+```shell
+adb devices
+```
+
+The device should be listed. See the full <a href="https://developer.android.com/studio/command-line/adb" target="_blank">`adb` documentation</a> for troubleshooting and detailed information.
+
+## Cordova Setup
+
+Additional setup is required for Cordova to support programmatic builds. This section is not necessary for Capacitor.
+
+### Java
+
+Native Android apps are compiled with the <a href="https://java.com/en/" target="_blank">Java</a> programming language. Download JDK8 from the <a href="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">download page</a>.
+
+:::note
+Unfortunately, Cordova is not compatible with the latest version of Java.
+:::
+
+### Gradle
+
+<a href="https://gradle.org/" target="_blank">
+  Gradle
+</a> is the build tool used in Android apps and must be installed separately. See the <a
+  href="https://gradle.org/install/"
+  target="_blank"
+>
+  install page
+</a> for details.
+
+## Project Setup
+
+Before apps can be deployed to Android simulators and devices, the native project must be configured.
+
+1. **Generate the native project, if it does not already exist.**
+
+   For Capacitor, run the following:
+
+   ```shell
+   $ ionic capacitor add android
+   ```
+
+   For Cordova, run the following:
+
+   ```shell
+   $ ionic cordova prepare android
+   ```
+
+2. **Set the [Package ID](../reference/glossary.md#package-id).**
+
+   For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
+
+   For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, `<widget>`. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information.
+
+## Running with Capacitor
+
+Capacitor uses Android Studio to build and run apps to simulators and devices.
+
+1. **Develop the Ionic app and sync it to the native project.**
+
+   With each meaningful change, Ionic apps must be built into web assets before the change can appear on Android simulators and devices. The web assets then must be copied into the native project. Luckily, this process is made easy with a single Ionic CLI command.
+
+   ```shell
+   $ ionic capacitor copy android
+   ```
+
+2. **In Android Studio, click the Run button and then select the target simulator or device.**
+
+![Android Studio Run Button Area](/img/running/android-studio-run-button-area.png)
+
+### Live reload
+
+To start a live-reload server run the following command.
+
+```shell
+ionic capacitor run android -l --external
+```
+
+When running on a device make sure the device and your development machine are connected to the same network.
+
+## Running with Cordova
+
+The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality.
+
+Run the following to start a long-running CLI process that boots up a live-reload server:
+
+```shell
+ionic cordova run android -l
+```
+
+Now, when changes are made to the app's source files, web assets are rebuilt and the changes are reflected on the simulator or device without having to deploy again.
+
+## Debugging Android Apps
+
+Once an app is running on an Android device or emulator, it can be debugged with Chrome DevTools.
+
+### Using Chrome DevTools
+
+Chrome has web developer tool support for Android simulators and devices. Go to `chrome://inspect` in Chrome while the simulator is running or a device is connected to the computer and **Inspect** the app that needs to be debugged.
+
+:::note
+Make sure your application is running on the device or simulator, or it will not show up in the list.
+:::
+
+![Android Chrome DevTools](/img/running/android-chrome-devtools.png)
+
+### Viewing Native Logs
+
+If running with Android Studio, native logs can be found in **Logcat**.
+
+:::note
+If the **Logcat** window is hidden, you can enable it in **View** &raquo; **Tool Windows** &raquo; **Logcat**.
+:::
+
+![Android Studio Logcat](/img/running/android-studio-logcat.png)
+
+You can also access **Logcat** with [ADB](https://developer.android.com/studio/command-line/adb).
+
+```shell
+adb logcat
+```
diff --git a/versioned_docs/version-v6/developing/hardware-back-button.md b/versioned_docs/version-v6/developing/hardware-back-button.md
new file mode 100644
index 00000000000..ff50b2f7f1b
--- /dev/null
+++ b/versioned_docs/version-v6/developing/hardware-back-button.md
@@ -0,0 +1,345 @@
+---
+title: Hardware Back Button
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>Hardware Back Button for Capacitor & Cordova on Android Devices</title>
+  <meta
+    name="description"
+    content="The hardware back button is found on most Android devices. Read to learn more about hardware back button use in Capacitor and Cordova on Ionic applications."
+  />
+</head>
+
+The hardware back button is found on most Android devices. In native applications it can be used to close modals, navigate to the previous view, exit an app, and more. By default in Ionic, when the back button is pressed, the current view will be popped off the navigation stack, and the previous view will be displayed. If no previous view exists in the navigation stack, nothing will happen. This guide will show how to customize the behavior of the hardware back button.
+
+:::note
+The hardware back button refers to the physical back button on an Android device and should not be confused with either the browser back button or `ion-back-button`. The information in this guide only applies to Android devices.
+:::
+
+## Hardware Back Button in Capacitor and Cordova
+
+:::note
+The `@capacitor/app` package must be installed in Capacitor apps to use the hardware back button.
+:::
+
+When running in a Capacitor or Cordova application, Ionic Framework will emit an `ionBackButton` event when a user presses the hardware back button.
+
+When listening for the `ionBackButton` event, you can register a handler to be fired. This handler can perform actions such as quitting the app or opening a confirmation dialog. Each handler must be assigned a priority. By default, only one handler is fired per hardware back button press. The priority value is used to determine which callback should be called. This is useful because if you have a modal open, you likely would not want the modal to close _and_ the app to navigate backwards when pressing the hardware back button. Only running one handler at a time allows the modal to close but still requires another press of the hardware back button to navigate backwards.
+
+There are situations where you might want to have multiple handlers fired. Each handler callback passes in a function as a parameter that can be used to tell the framework to call the next handler.
+
+## Hardware Back Button in a Browser
+
+When running your app in a mobile browser or as a PWA, hardware back button customization will be limited. This is because Capacitor and Cordova expose additional features that are not exposed in a normal web browser. For example, closing overlays and menus via the hardware back button are functionalities that are currently not supported when running your app in a mobile browser. These are known limitations and do not currently have straightforward solutions.
+
+For complete hardware back button support, we recommend using Capacitor or Cordova.
+
+:::note
+The `ionBackButton` event will not be emitted when running an app in a browser or as a PWA.
+:::
+
+## Basic Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+document.addEventListener('ionBackButton', (ev) => {
+  ev.detail.register(10, () => {
+    console.log('Handler was called!');
+  });
+});
+
+```
+</TabItem>
+<TabItem value="angular">
+
+```tsx
+import { Platform } from '@ionic/angular';
+
+...
+
+constructor(private platform: Platform) {
+  this.platform.backButton.subscribeWithPriority(10, () => {
+    console.log('Handler was called!');
+  });
+}
+
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+document.addEventListener('ionBackButton', (ev) => {
+  ev.detail.register(10, () => {
+    console.log('Handler was called!');
+  });
+});
+```
+</TabItem>
+<TabItem value="vue">
+
+```tsx
+import { useBackButton } from '@ionic/vue';
+
+...
+
+export default {
+  setup() {
+    useBackButton(10, () => {
+      console.log('Handler was called!');
+    });
+  }
+}
+```
+</TabItem>
+</Tabs>
+````
+
+In this example, we are registering a handler to be called when the hardware back button is pressed. We have set the priority to be 10, and we have not indicated to the framework that we want the next handler to be called. As a result, any handlers with a priority less than 10 will not be called. A handler that has a priority greater than 10 will be called first.
+
+In the event that there are handlers with the same priority value, the handler that was registered _last_ will be called. See [Handlers with the Same Priorities](#handlers-with-the-same-priorities) for more information.
+
+## Calling Multiple Handlers
+
+Each hardware back button callback has a `processNextHandler` parameter. Calling this function allows you to continue calling hardware back button handlers.
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+document.addEventListener('ionBackButton', (ev) => {
+  ev.detail.register(5, () => {
+    console.log('Another handler was called!');
+  });
+
+  ev.detail.register(10, (processNextHandler) => {
+    console.log('Handler was called!');
+
+    processNextHandler();
+  });
+});
+
+```
+</TabItem>
+<TabItem value="angular">
+
+```tsx
+import { Platform } from '@ionic/angular';
+
+...
+
+constructor(private platform: Platform) {
+  this.platform.backButton.subscribeWithPriority(5, () => {
+    console.log('Another handler was called!');
+  });
+
+  this.platform.backButton.subscribeWithPriority(10, (processNextHandler) => {
+    console.log('Handler was called!');
+
+    processNextHandler();
+  });
+}
+
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+document.addEventListener('ionBackButton', (ev) => {
+  ev.detail.register(5, () => {
+    console.log('Another handler was called!');
+  });
+
+  ev.detail.register(10, (processNextHandler) => {
+    console.log('Handler was called!');
+
+    processNextHandler();
+  });
+});
+```
+</TabItem>
+<TabItem value="vue">
+
+```tsx
+import { useBackButton } from '@ionic/vue';
+
+...
+
+export default {
+  setup() {
+    useBackButton(5, () => {
+      console.log('Another handler was called!');
+    });
+
+    useBackButton(10, (processNextHandler) => {
+      console.log('Handler was called!');
+
+      processNextHandler();
+    });
+  }
+}
+```
+</TabItem>
+</Tabs>
+````
+
+This example shows how to indicate to Ionic Framework that you want the next handler to be fired. All callbacks are provided with a `processNextHandler` function as a parameter. Calling this will cause the next handler, if any exists, to be fired.
+
+## Handlers with the Same Priorities
+
+Internally, Ionic Framework uses something similar to a priority queue to manage hardware back button handlers. The handler with the largest priority value will be called first. In the event that there are multiple handlers with the same priority value, the _last_ handler of the same priority added to this queue will be the first handler to be called.
+
+```javascript
+document.addEventListener('ionBackButton', (ev) => {
+  // Handler A
+  ev.detail.register(10, (processNextHandler) => {
+    console.log('Handler A was called!');
+
+    processNextHandler();
+  });
+
+  // Handler B
+  ev.detail.register(10, (processNextHandler) => {
+    console.log('Handler B was called!');
+
+    processNextHandler();
+  });
+});
+```
+
+In the example above, both handlers A and B have a priority of 10. Since handler B was registered last, Ionic Framework will call handler B before it calls handler A.
+
+## Exiting the App
+
+In some scenarios, it may be desirable to quit the app when pressing the hardware back button. This can be achieved through the use of the `ionBackButton` event combined with methods that Capacitor/Cordova provide.
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```tsx
+import { BackButtonEvent } from '@ionic/core';
+import { App } from '@capacitor/app';
+
+...
+
+const routerEl = document.querySelector('ion-router');
+document.addEventListener('ionBackButton', (ev: BackButtonEvent) => {
+  ev.detail.register(-1, () => {
+    const path = window.location.pathname;
+    if (path === routerEl.root) {
+      App.exitApp();
+    }
+  });
+});
+```
+</TabItem>
+<TabItem value="angular">
+
+```tsx
+import { Optional } from '@angular/core';
+import { IonRouterOutlet, Platform } from '@ionic/angular';
+import { App } from '@capacitor/app';
+
+...
+
+constructor(
+  private platform: Platform,
+  @Optional() private routerOutlet?: IonRouterOutlet
+) {
+  this.platform.backButton.subscribeWithPriority(-1, () => {
+    if (!this.routerOutlet.canGoBack()) {
+      App.exitApp();
+    }
+  });
+}
+
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+import { useIonRouter } from '@ionic/react';
+import { App } from '@capacitor/app';
+
+...
+
+const ionRouter = useIonRouter();
+document.addEventListener('ionBackButton', (ev) => {
+  ev.detail.register(-1, () => {
+    if (!ionRouter.canGoBack()) {
+      App.exitApp();
+    }
+  });
+});
+```
+</TabItem>
+<TabItem value="vue">
+
+```tsx
+import { useBackButton, useIonRouter } from '@ionic/vue';
+import { App } from '@capacitor/app';
+
+...
+
+export default {
+  setup() {
+    const ionRouter = useIonRouter();
+    useBackButton(-1, () => {
+      if (!ionRouter.canGoBack()) {
+        App.exitApp();
+      }
+    });
+  }
+}
+```
+</TabItem>
+</Tabs>
+````
+
+This example shows the application exiting when the user presses the hardware back button and there is nothing left in the navigation stack. It is also possible to display a confirmation dialog before quitting the app.
+
+It is recommended to check whether or not the user is on the root page prior to exiting the application. Developers can use the `canGoBack` method on `IonRouterOutlet` in Ionic Angular and `IonRouter` in Ionic React and Ionic Vue.
+
+## Internal Framework Handlers
+
+The table below lists all of the internal hardware back button event handlers that Ionic Framework uses. The `Propagates` column notes whether or not that particular handler tells Ionic Framework to call the next back button handler.
+
+| Handler    | Priority | Propagates | Description                                                                                                                              |
+| ---------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Overlays   | 100      | No         | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, `ion-picker`, and `ion-toast`. |
+| Menu       | 99       | No         | Applies to `ion-menu`.                                                                                                                   |
+| Navigation | 0        | Yes        | Applies to routing navigation (i.e. Angular Routing).                                                                                    |
diff --git a/versioned_docs/version-v6/developing/ios.md b/versioned_docs/version-v6/developing/ios.md
new file mode 100644
index 00000000000..553c3580655
--- /dev/null
+++ b/versioned_docs/version-v6/developing/ios.md
@@ -0,0 +1,184 @@
+---
+title: iOS Development
+sidebar_label: Developing for iOS
+skipIntros: true
+---
+
+<head>
+  <title>iOS App Development Guide: Xcode Setup to Build and Run iOS Apps</title>
+  <meta
+    name="description"
+    content="Ionic's iOS development guide covers how to build and run Ionic apps on iOS simulators and devices. iOS apps can only be developed on macOS with Xcode setup."
+  />
+</head>
+
+This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). iOS apps can only be developed on macOS with Xcode installed.
+
+There are two workflows for running Ionic apps on iOS:
+
+- [Running with Xcode](#running-with-xcode)
+- [Running with the Ionic CLI](#running-with-the-ionic-cli)
+
+The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.md#livereload) functionality.
+
+## Xcode Setup
+
+[Xcode](https://developer.apple.com/xcode/) is the IDE for creating native iOS apps. It includes the iOS SDK and Xcode command-line tools. Xcode can be [downloaded for free](https://developer.apple.com/download/) with an Apple account or it can be installed through the App Store.
+
+Once Xcode is installed, make sure the command-line tools are selected for use:
+
+```shell
+xcode-select --install
+```
+
+### Setting up a Development Team
+
+All iOS apps must be code signed, even for development. Luckily, Xcode makes this easy with automatic code signing. The only prerequisite is an Apple ID.
+
+Open Xcode and navigate to **Xcode** &raquo; **Preferences** &raquo; **Accounts**. Add an Apple ID if none are listed. Once logged in, a Personal Team will appear in the team list of the Apple ID.
+
+![Xcode Accounts](/img/installation/ios-xcode-accounts.png)
+
+### Creating an iOS Simulator
+
+The iOS simulator emulates iOS devices on Macs. The following documentation is a quick way to get the iOS simulator set up. For more information, see [Apple's documentation](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/simulator_help_topics/Chapter/Chapter.html).
+
+Open Xcode and navigate to **Window** &raquo; **Devices and Simulators**. Create an **iPhone 11** simulator if one does not already exist.
+
+![iOS Simulators](/img/installation/ios-xcode-simulators-setup.png)
+
+## Cordova Setup
+
+Additional setup is required for Cordova to support programmatic builds. This section is not necessary for Capacitor.
+
+### ios-sim & ios-deploy
+
+The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.md#npm).
+
+```shell
+$ npm install -g ios-sim
+$ brew install ios-deploy
+```
+
+## Project Setup
+
+Before apps can be deployed to iOS simulators and devices, the native project must be configured.
+
+1. **Generate the native project, if it does not already exist.**
+
+   For Capacitor, run the following:
+
+   ```shell
+   $ ionic capacitor add ios
+   ```
+
+   For Cordova, run the following:
+
+   ```shell
+   $ ionic cordova prepare ios
+   ```
+
+1. **Set the [Package ID](/reference/glossary.md#package-id).**
+
+   For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
+
+   For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, `<widget>`. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information.
+
+1. **Open the project in <b>Xcode</b>.**
+
+   For Capacitor, run the following to open the app in Xcode:
+
+   ```shell
+   $ ionic capacitor open ios
+   ```
+
+   For Cordova, open Xcode. Use **File** &raquo; **Open** and locate the app. Open the app's `platforms/ios` directory.
+
+1. **In <b>Project navigator</b>, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier.**
+
+   ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
+
+1. **In the same project editor, under the <b>Signing</b> section, ensure <b>Automatically manage signing</b> is enabled.** Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.
+
+   ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
+
+## Running with Xcode
+
+In this workflow, Xcode can automatically fix common compilation and signing issues that can occur.
+
+1. **Develop the Ionic app and sync it to the native project.**
+
+   With each meaningful change, Ionic apps must be built into web assets before the change can appear on iOS simulators and devices. The web assets then must be copied into the native project. Luckily, this process is made easy with a single Ionic CLI command.
+
+   For Capacitor, run the following:
+
+   ```shell
+   $ ionic capacitor copy ios
+   $ ionic capacitor update
+   ```
+
+   For Cordova, run the following:
+
+   ```shell
+   $ ionic cordova prepare ios
+   ```
+
+1. **In Xcode, select a target simulator or device and click the play button.**
+
+   ![Xcode Play Button Area](/img/running/ios-xcode-play-button-area.png)
+
+## Running with the Ionic CLI
+
+The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality.
+
+With live-reload, changes made to the app's source files trigger a rebuild of web assets and the changes are reflected on the simulator or device without having to deploy again.
+
+:::caution
+For iOS devices, the device and the computer need to be on the same Wi-Fi network. An external URL for the dev server is also required so the device can connect to it. Use `--external` (or `--host=0.0.0.0`) to bind to external addresses.
+:::
+
+### Live-reload with Capacitor
+
+Capacitor does not yet have a way to build native projects. It relies on Xcode to build and deploy app binaries. However, the Ionic CLI can boot up a live-reload server and configure Capacitor to use it with a single command.
+
+Run the following, then select a target simulator or device and click the play button in Xcode:
+
+```shell
+ionic capacitor run ios -l --external
+```
+
+### Live-reload with Cordova
+
+Cordova can build and deploy native projects programmatically.
+
+To boot up a live-reload server, build, and deploy the app, run the following:
+
+```shell
+ionic cordova run ios -l --external
+```
+
+## Debugging iOS Apps
+
+Once an app is running on an iOS device or simulator, it can be debugged in Safari.
+
+### Using Safari Web Inspector
+
+Safari has Web Inspector support for iOS simulators and devices. Open the **Develop** menu and select the simulator or device, then select the Ionic App to open Web Inspector.
+
+:::note
+If the **Develop** menu is hidden, enable it in **Safari** &raquo; **Preferences** &raquo; **Advanced** &raquo; **Show Develop menu in menu bar**.
+
+If the app isn't listed, the Web Inspector may need to be enabled on the device in **Settings** &raquo; **Safari** &raquo; **Advanced** &raquo; **Web Inspector**.
+:::
+
+![Safari Web Inspector](/img/running/ios-safari-web-inspector-timelines.png)
+
+### Viewing Native Logs
+
+If running with Xcode, native logs can be found in the Xcode **Console**.
+
+:::note
+If the **Console** is hidden, enable it in **View** &raquo; **Debug Area** &raquo; **Activate Console**.
+:::
+
+![Xcode Console](/img/running/ios-xcode-console.png)
diff --git a/versioned_docs/version-v6/developing/keyboard.md b/versioned_docs/version-v6/developing/keyboard.md
new file mode 100644
index 00000000000..6c166c9b11a
--- /dev/null
+++ b/versioned_docs/version-v6/developing/keyboard.md
@@ -0,0 +1,272 @@
+---
+title: Keyboard
+---
+
+import Codepen from '@components/global/Codepen';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>Keyboard Guide: Tools to Manage an On-Screen Mobile App Keyboard</title>
+  <meta
+    name="description"
+    content="Accounting for an on-screen keyboard is a common developer roadblock. This guide introduces the tools available for managing on-screen keyboards in mobile apps."
+  />
+</head>
+
+Customizing and accounting for the presence of an on-screen keyboard are two common roadblocks developers face when building mobile apps and PWAs. This guide will provide an introduction to the various tools available for managing the on-screen keyboard in your application.
+
+## inputmode
+
+The `inputmode` attribute allows developers to specify what type of data might be entered into an input. This will prompt the browser to show a keyboard that includes buttons relevant to what the user may enter. For example, `inputmode="email"` will display a keyboard with the `@` key as well as other optimizations for entering emails.
+
+Since `inputmode` is a global attribute, it can be used on Ionic components such as `ion-input` and `ion-textarea` in addition to regular input elements.
+
+Inputs that _require_ a certain data type should use the `type` attribute instead. For example, inputs that require an email should use `type="email"` rather than specifying an `inputmode.` This is because the data that will be entered is always going to be in the form of an email. On the other hand, if the input accepts an email or a username, using `inputmode=”email”` is appropriate because the data being entered is not always going to be an email address.
+
+For a list of accepted values, see the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode" target="_blank" rel="noreferrer">inputmode Documentation</a>.
+
+### Usage
+
+````mdx-code-block
+<Tabs
+  defaultValue="javascript"
+  groupId="framework"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```html
+<ion-item>
+  <ion-label>Username or Email</ion-label>
+  <ion-input inputmode="email"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label>Enter a number</ion-label>
+  <ion-textarea inputmode="numeric"></ion-textarea>
+</ion-item>
+```
+</TabItem>
+<TabItem value="angular">
+
+```html
+<ion-item>
+  <ion-label>Username or Email</ion-label>
+  <ion-input inputmode="email"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label>Enter a number</ion-label>
+  <ion-textarea inputmode="numeric"></ion-textarea>
+</ion-item>
+```
+</TabItem>
+<TabItem value="react">
+
+```html
+<IonItem>
+  <IonLabel>Username or Email</IonLabel>
+  <IonInput inputmode="email"></IonInput>
+</IonItem>
+
+<IonItem>
+  <IonLabel>Enter a number</IonLabel>
+  <IonTextarea inputmode="numeric"></IonTextarea>
+</IonItem>
+```
+</TabItem>
+<TabItem value="vue">
+
+```html
+<ion-item>
+  <ion-label>Username or Email</ion-label>
+  <ion-input inputmode="email"></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label>Enter a number</ion-label>
+  <ion-textarea inputmode="numeric"></ion-textarea>
+</ion-item>
+```
+</TabItem>
+</Tabs>
+````
+
+<Codepen user="ionic" slug="abvJVVv" height="400" />
+
+:::note
+The `inputmode` attribute is supported on devices running Chrome 66+ and iOS Safari 12.2+: https://caniuse.com/#search=inputmode
+:::
+
+## enterkeyhint
+
+The `enterkeyhint` attribute allows developers to specify what type of action label or icon should be shown for the "Enter" key. Using `enterkeyhint` lets the user know what will happen when they tap the “Enter” key. The value that should be specified here depends on the context of what the user is doing. For example, if the user is typing into a searchbox, developers should ensure that the input has `enterkeyhint="search"`.
+
+Since `enterkeyhint` is a global attribute, it can be used on Ionic components such as `ion-input` and `ion-textarea` in addition to regular input elements.
+
+For a list of accepted values, see the <a href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute" target="_blank" rel="noreferrer">enterkeyhint Standard</a>.
+
+### Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```html
+<ion-item>
+  <ion-label>Enter search query</ion-label>
+  <ion-input enterkeyhint="search" type="search"></ion-input>
+</ion-item>
+```
+</TabItem>
+<TabItem value="angular">
+
+```html
+<ion-item>
+  <ion-label>Enter search query</ion-label>
+  <ion-input enterkeyhint="search" type="search"></ion-input>
+</ion-item>
+```
+</TabItem>
+<TabItem value="react">
+
+```html
+<IonItem>
+  <IonLabel>Enter search query</IonLabel>
+  <IonInput enterkeyhint="search" type="search"></IonInput>
+</IonItem>
+```
+</TabItem>
+<TabItem value="vue">
+
+```html
+<ion-item>
+  <ion-label>Enter search query</ion-label>
+  <ion-input enterkeyhint="search" type="search"></ion-input>
+</ion-item>
+```
+</TabItem>
+</Tabs>
+````
+
+<Codepen user="ionic" slug="GRpWyRB" height="350" />
+
+:::note
+The `enterkeyhint` attribute is supported on devices running Chrome 77+ and iOS Safari 13.4+.
+:::
+
+## Dark Mode
+
+By default the keyboard theme is determined by the OS. For example, if dark mode is enabled on iOS, the keyboard in your app will appear with a dark theme even if your application does not have a dark theme in its CSS.
+
+When running an app in a mobile web browser or as a PWA there is no way to force the keyboard to appear with a certain theme.
+
+When running an app in Capacitor or Cordova, it is possible to force the keyboard to appear with a certain theme. For more information regarding this configuration, see the <a href="https://capacitorjs.com/docs/apis/keyboard#keyboard-configuration-ios-only-" target="_blank">Capacitor Keyboard Documentation</a>.
+
+## Hiding the Accessory Bar
+
+When running any kind of web based application, iOS will show an accessory bar above the keyboard. This allows users to move to the next or previous inputs as well as close the keyboard.
+
+When running an app in a mobile web browser or as a PWA there is no way to hide the accessory bar.
+
+When running an app in Capacitor or Cordova, it is possible to hide the accessory bar. For more information regarding this configuration, see the <a href="https://capacitorjs.com/docs/apis/keyboard#keyboard-configuration-ios-only-" target="_blank">Capacitor Keyboard Documentation</a>.
+
+## Keyboard Lifecycle Events
+
+Detecting the presence of an on-screen keyboard is useful for adjusting the positioning of an input that would otherwise be hidden by the keyboard. For Capacitor and Cordova apps, developers typically rely on native keyboard plugins to listen for the keyboard lifecycle events. For apps running in a mobile browser or as a PWA, developers can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API" rel="noreferrer" target="_blank">Visual Viewport API</a> where supported. Ionic Framework wraps both of these approaches and emits `ionKeyboardDidShow` and `ionKeyboardDidHide` events on the `window`. The event payload for `ionKeyboardDidShow` contains an approximation of the keyboard height in pixels.
+
+### Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+window.addEventListener('ionKeyboardDidShow', ev => {
+  const { keyboardHeight } = ev;
+  // Do something with the keyboard height such as translating an input above the keyboard.
+});
+
+window.addEventListener('ionKeyboardDidHide', () => {
+  // Move input back to original location
+});
+```
+</TabItem>
+<TabItem value="angular">
+
+```tsx
+import { Platform } from '@ionic/angular';
+
+...
+
+constructor(private platform: Platform) {
+  this.platform.keyboardDidShow.subscribe(ev => {
+    const { keyboardHeight } = ev;
+    // Do something with the keyboard height such as translating an input above the keyboard.
+  });
+
+  this.platform.keyboardDidHide.subscribe(() => {
+    // Move input back to original location
+  });
+}
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+import { useKeyboardState } from '@ionic/react-hooks/keyboard';
+
+...
+
+const { isOpen, keyboardHeight } = useKeyboardState();
+
+// Do something with the keyboard height such as translating an input above the keyboard
+```
+</TabItem>
+<TabItem value="vue">
+
+```tsx
+import { useKeyboard } from '@ionic/vue';
+import { watch } from 'vue';
+
+...
+
+const { isOpen, keyboardHeight } = useKeyboard();
+
+watch(keyboardHeight, () => {
+  console.log(`Is Keyboard Open: ${isOpen.value}, Keyboard Height: ${keyboardHeight.value}`);
+});
+
+
+```
+</TabItem>
+</Tabs>
+````
+
+:::note
+For apps running in a mobile web browser or as a PWA, Keyboard Lifecycle Events are only supported on Chrome 62+ and iOS Safari 13.0+.
+:::
diff --git a/versioned_docs/version-v6/developing/previewing.md b/versioned_docs/version-v6/developing/previewing.md
new file mode 100644
index 00000000000..6c558d2d5de
--- /dev/null
+++ b/versioned_docs/version-v6/developing/previewing.md
@@ -0,0 +1,82 @@
+---
+title: Previewing
+---
+
+<head>
+  <title>Previewing: To Run Ionic Apps Locally in A Web Browser</title>
+  <meta
+    name="description"
+    content="Previewing provides many different options to test native functionality based on needs. Use this feature to easily run your Ionic app locally in a web browser."
+  />
+</head>
+
+There are many different options to test native functionality depending on your target platforms and needs.
+
+- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.md) for native functionality)
+- [Deploy to iOS](ios.md)
+- [Deploy to Android](android.md)
+
+## Run Locally in a Web Browser
+
+One of the most powerful features of Ionic is that the majority of your app development can happen right in a browser on your desktop. With full access to traditional web development tools (Chrome/Safari/Firefox dev tools), you can write code then test/debug it quickly without having to recompile or deploy to a simulator or device.
+
+To do so, run `ionic serve` from the command line in the project's directory:
+
+```shell-session
+$ ionic serve
+> ng run app:serve --host=0.0.0.0 --port=8100
+
+[INFO] Development server running!
+
+       Local: http://localhost:8100
+       External: http://192.168.1.169:8100
+
+       Use Ctrl+C to quit this process
+
+[INFO] Browser window opened to http://localhost:8100!
+```
+
+With `ionic serve` running, continue developing your app. As you save changes, the app reloads with those changes applied.
+
+When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md).
+When you're ready to test on a real device, see here for [iOS](ios.md) and [Android](android.md).
+
+## Simulating a Mobile Viewport
+
+Each major browser vendor includes developer tools for mobile emulation. These tools offer the ability to change the emulated device type.
+
+### Chrome
+
+Open your application at the local or remote address that it is being served from. For example, `http://localhost:4200`. Then, open the Chrome developer tools by pressing `Ctrl+Shift+I` on Windows/Linux or `Cmd+Opt+I` on Mac.
+
+<img src="/docs/img/developing/previewing/chrome-dev-tools.png" alt="Chrome Dev Tools" />
+
+From here you can select different device types from the dropdown, change the orientation of the device and throttle the network speed.
+
+For additional features and information visit: https://developer.chrome.com/docs/devtools/device-mode/.
+
+### Safari
+
+:::note
+
+Prerequisites: Show Develop menu in menu bar option must be enabled in Safari Advanced options.
+
+:::
+
+Open your application at the local or remote address that it is being served from. For example, `http://localhost:4200`. Select the **Develop** menu in Safari and select **Enter Responsive Design Mode** . Alternatively you can use the keyboard shortcut `Cmd+Opt+R`.
+
+<img src="/docs/img/developing/previewing/safari-responsive-design-mode.png" alt="Safari Responsive Design Mode" />
+
+From here you can select different device types to emulate as well as change the orientation of the device.
+
+For additional features and information visit: https://developer.apple.com/safari/tools/.
+
+### Firefox
+
+Open your application at the local or remote address that it is being served from. For example, `http://localhost:4200`. Then, open the Firefox developer tools by pressing `Ctrl+Shift+M` on Windows/Linux or `Cmd+Opt+M` on Mac.
+
+<img src="/docs/img/developing/previewing/firefox-responsive-design-mode.png" alt="Firefox Responsive Design Mode" />
+
+From here you can select different device types from the dropdown, change the orientation of the device and throttle the network speed.
+
+For additional features and information visit: https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/.
diff --git a/versioned_docs/version-v6/developing/scaffolding.md b/versioned_docs/version-v6/developing/scaffolding.md
new file mode 100644
index 00000000000..5b51485a5a7
--- /dev/null
+++ b/versioned_docs/version-v6/developing/scaffolding.md
@@ -0,0 +1,91 @@
+---
+title: Scaffolding
+---
+
+<head>
+  <title>App Scaffolding | Create Scaffolding for Ionic Web Apps</title>
+  <meta
+    name="description"
+    content="Once an app is created by the Ionic CLI, the next step is to start building out features and components. Learn how to create scaffolding for Ionic web apps."
+  />
+</head>
+
+Once an app is created by the Ionic CLI, the next step is to start building out features and components. The majority of the app will be developed in the `src/app/` directory.
+
+## Project Structure
+
+```bash
+src/
+├── app/
+├── assets/
+├── environments/
+├── theme/
+├── global.scss
+├── index.html
+├── main.ts
+├── polyfills.ts
+├── test.ts
+└── zone-flags.ts
+```
+
+The `src/` directory has items such as the `index.html` file, configuration files for tests, an asset folder for images, and the main `app/` directory for the app's code.
+
+```bash
+src/
+└── app/
+    ├── app-routing.module.ts
+    ├── app.component.html
+    ├── app.component.spec.ts
+    ├── app.component.ts
+    └── app.module.ts
+```
+
+The `src/app/` directory contains the root app component and module as well as additional directories that contain app features such as pages, components, services, etc.
+
+## Generating New Features
+
+The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.md) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated.
+
+```shell-session
+$ ionic generate
+? What would you like to generate?
+❯ page
+  component
+  service
+  module
+  class
+  directive
+  guard
+```
+
+After a selection is made, the Ionic CLI will prompt for a name. The name can be a path, allowing easy generation of features within an organized project structure.
+
+:::note
+Any level of nesting is allowed, such as `portfolio/intro`. You can easily scope components to pages by using `ionic g component "portfolio/intro/About Me"`, for example.
+:::
+
+```shell-session
+$ ionic generate
+? What would you like to generate? page
+? Name/path of page: portfolio █
+```
+
+Alternatively, the `type` and `name` of the generated feature can be entered on the command line:
+
+```shell-session
+$ ionic g page "User Detail"
+> ng generate page "User Detail"
+CREATE src/app/user-detail/user-detail.module.ts (564 bytes)
+CREATE src/app/user-detail/user-detail.page.scss (0 bytes)
+CREATE src/app/user-detail/user-detail.page.html (138 bytes)
+CREATE src/app/user-detail/user-detail.page.spec.ts (720 bytes)
+CREATE src/app/user-detail/user-detail.page.ts (280 bytes)
+UPDATE src/app/app-routing.module.ts (475 bytes)
+[OK] Generated page!
+```
+
+The Ionic CLI uses the underlying framework tooling to stay close to best practices. For `@ionic/angular`, the Angular CLI is used under the hood.
+
+After creating the files and directories for the new page, the CLI will also update the router configuration to include the new page. This reduces the amount of manual work needed to keep the development lifecycle moving.
+
+For more details, run `ionic g --help` from the command line or see [the documentation](../cli/commands/generate.md) for `ionic generate`.
diff --git a/versioned_docs/version-v6/developing/starting.md b/versioned_docs/version-v6/developing/starting.md
new file mode 100644
index 00000000000..304f903e791
--- /dev/null
+++ b/versioned_docs/version-v6/developing/starting.md
@@ -0,0 +1,48 @@
+---
+title: Starting an App
+sidebar_label: Starting
+---
+
+<head>
+  <title>Starting an App: How to Guide | Ionic Documentation</title>
+  <meta
+    name="description"
+    content="Starting a new Ionic app is incredibly simple. Learn how to run the ionic start command from the command line and let the CLI handle the rest."
+  />
+</head>
+
+Starting a new Ionic app is incredibly simple. From the command line, run the `ionic start` command and the CLI will handle the rest.
+
+```shell-session
+$ ionic start
+
+Every great app needs a name! 😍
+
+Please enter the full name of your app. You can change this at any time.
+To bypass this prompt next time, supply name,
+the first argument to ionic start.
+
+? Project name: █
+```
+
+The Ionic CLI will display prompts asking for the new project's name and which template to use. These details can be provided as command arguments:
+
+```shell-session
+$ ionic start myApp tabs
+```
+
+Here, `myApp` is the name of the project, `tabs` is the starter template, and the project type is `angular`.
+
+`tabs` is not the only project template available. Between all project types, there are three templates available:
+
+- `tabs`: A tabs based layout
+- `sidemenu`: A sidemenu based layout
+- `blank`: An empty project with a single page
+
+See all available templates with the following command:
+
+```shell-session
+$ ionic start --list
+```
+
+These templates provide a great starting point for any app and include all the best practices for making a code base scale.
diff --git a/versioned_docs/version-v6/developing/tips.md b/versioned_docs/version-v6/developing/tips.md
new file mode 100644
index 00000000000..1b115a3644a
--- /dev/null
+++ b/versioned_docs/version-v6/developing/tips.md
@@ -0,0 +1,152 @@
+---
+title: Development Tips
+---
+
+<head>
+  <title>App Development Tips: How to Resolve Permission Errors and Issues</title>
+  <meta
+    name="description"
+    content="If errors occur, npm may need to be set up to operate without elevated permissions. Read our Ionic app Development Tips for more on resolving permission issues."
+  />
+</head>
+
+## Resolving Permission Errors
+
+`EACCES` permission errors can occur when packages are installed globally. If this is the case, npm may need to be set up to operate without elevated permissions.
+
+:::note
+Using `sudo` with npm is **not recommended** because it can lead to further complications.
+:::
+
+This guide offers two options for resolving permission issues. See the [npm docs](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) for full documentation and additional options.
+
+### Option 1
+
+The best way to avoid permission issues is to reinstall NodeJS and npm using a node version manager.
+
+This guide will document [nvm](https://github.com/nvm-sh/nvm) installation and usage. See the [nvm docs](https://github.com/nvm-sh/nvm#installation-and-update) for full documentation. See the [npm docs](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-version-manager-to-install-nodejs-and-npm) for additional options and instructions for Windows.
+
+1. Install nvm.
+
+   ```shell
+   $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
+   ```
+
+1. New terminals will now use nvm. To verify, open a new terminal and run the following. If something prints, the installation was successful.
+
+   ```shell
+   $ command -v nvm
+   ```
+
+1. To download and install the latest LTS release of NodeJS, run:
+
+   ```shell
+   $ nvm install --lts
+   ```
+
+1. Set the newly installed NodeJS as the default environment:
+
+   ```shell
+   $ nvm alias default lts/*
+   ```
+
+1. New terminals will now use the nvm-controlled NodeJS. To verify:
+
+   ```shell
+   $ node -v  # will print the version installed above
+   $ which npm  # will print a path somewhere within the ~/.nvm folder
+   ```
+
+Global packages will now be installed in the `~/.nvm` directory, so permission errors should no longer occur as long as `npm` is used _without_ `sudo`.
+
+### Option 2
+
+<small>
+  <em>Does not apply to Windows</em>
+</small>
+
+Change the owner of npm's directories to the current user:
+
+```shell
+$ sudo chown -R $(whoami) /usr/local/{lib/node_modules,bin,share}
+$ sudo chown -R $(whoami) ~/.npm ~/.npmrc
+```
+
+Since these global directories are no longer owned by `root`, packages can be installed globally _without_ `sudo`.
+
+## Updating Dependencies
+
+To update an [npm](https://www.npmjs.com/) dependency, run the following, where `<package-name>` is the package to update:
+
+```shell
+npm install <package-name>@<version|latest> --save
+```
+
+For example, to update the `@ionic/angular` package to the release tagged `latest`, run:
+
+```shell
+npm install @ionic/angular@latest --save
+```
+
+It is recommended that packages get updated through the CLI since npm will now read package versions from the `package-lock.json` first.
+
+## Code Editors
+
+There are a lot of code editors to choose from. Here are some of our favorites:
+
+- [Visual Studio Code](https://code.visualstudio.com): a popular and free text editor made by Microsoft
+- [Atom](https://atom.io): a hackable text editor made by GitHub
+- [WebStorm](https://www.jetbrains.com/webstorm/): a powerful non-free editor by JetBrains
+
+## Using a Debugger
+
+The `debugger` keyword can be used to debug an app. When most browsers encounters a `debugger` statement, running of JavaScript is stopped, and the browser will load its debugger. This can be used to set "breakpoints" in the app.
+
+For example, if a function is not returning the correct value, the debugger can be used to step through the code and inspect variables.
+
+```javascript
+function myBrokenFunction() {
+  debugger;
+  // do other stuff
+}
+```
+
+When an app runs, it will pause at this function. From there, the developer tools can be used to run pieces of JavaScript, line by line, and inspect where exactly the function breaks.
+
+## Changing Mode
+
+By default, when an app is viewed in the browser, Ionic will apply the `md` mode. However, since Ionic components adapt according to their platform, it is helpful to be able to view what the app will look like on iOS. To do this, add `?ionic:mode=ios` to the URL where the app is being served. For example, if the app is served on port `8100`, the url would be: `http://localhost:8100/?ionic:mode=ios`.
+
+:::note
+This will not change which platform the browser sees being used. The platform is determined by device detection and inspecting the user-agent. To change the platform, the user-agent must be changed. To do this, open up Chrome DevTools with <kbd>Ctrl+Shift+I</kbd>(<kbd>Cmd+Option+I</kbd> on Mac), and then toggle device mode on with <kbd>Ctrl+Shift+M</kbd>(<kbd>Cmd+Option+M</kbd> on Mac).
+:::
+
+![app with a different mode](/img/faq/tips/change-device-platform.png)
+
+Selecting devices from the device dropdown will change the user-agent, as well as the dimensions of the viewport.
+
+## Using the iOS Simulator
+
+The iOS simulator enables testing and debugging of an app before it reaches an actual device.
+
+Before it can be used, [Xcode](https://developer.apple.com/xcode/download/), Apple's IDE, must be installed.
+
+The [Ionic CLI](../cli.md) can then be used to run the app in the current directory on the simulator:
+
+```shell
+ionic cordova emulate ios -lc
+```
+
+Passing in the `-lc` flag will enable livereload and log console output to a terminal.
+
+Xcode can also be used to launch the emulator and debug an app.
+
+Open up Xcode and open `../path-to-app/platforms/ios/myApp.xcodeproj`.
+
+After the app loads, console output and device logs will be printed inside of Xcode's output window.
+
+## Using the Genymotion Android Emulator
+
+While the Android SDK comes with a stock emulator, it can be slow and unresponsive at times.
+
+[Genymotion](https://www.genymotion.com) is an alternate emulator that is faster, and still allows access to native functionality like GPS and camera.
diff --git a/versioned_docs/version-v6/index.md b/versioned_docs/version-v6/index.md
new file mode 100644
index 00000000000..5a5909b1b3e
--- /dev/null
+++ b/versioned_docs/version-v6/index.md
@@ -0,0 +1,159 @@
+---
+title: Introduction to Ionic
+sidebar_label: Overview
+slug: /
+hide_table_of_contents: true
+demoUrl: https://docs-demo.ionic.io/
+demoSourceUrl: https://github.com/ionic-team/docs-demo
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+<head>
+  <title>Open-Source UI Toolkit to Create Your Own Mobile Apps</title>
+  <meta
+    name="description"
+    content="Ionic Framework is an open-source UI toolkit to create your own mobile apps using web technologies with integrations for popular frameworks."
+  />
+  <link rel="canonical" href="https://ionicframework.com/docs" />
+  <link rel="alternate" href="https://ionicframework.com/docs" hreflang="x-default" />
+  <link rel="alternate" href="https://ionicframework.com/docs" hreflang="en" />
+  <meta property="og:url" content="https://ionicframework.com/docs" />
+</head>
+
+Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md).
+
+Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts.
+
+<intro-end />
+
+<DocsCards>
+  <DocsCard header="Installation Guide" href="/intro/cli" icon="/icons/guide-installation-icon.svg" hoverIcon="/icons/guide-installation-icon-hover.svg">
+    <p>Step-by-step guides to setting up your system and installing the framework.</p>
+  </DocsCard>
+
+<DocsCard
+  header="UI Components"
+  href="/components"
+  icon="/icons/guide-components-icon.svg"
+  hoverIcon="/icons/guide-components-icon-hover.svg"
+>
+  <p>Dive into Ionic beautifully designed UI component library.</p>
+</DocsCard>
+
+<DocsCard
+  header="Native Functionality"
+  href="/native"
+  icon="/icons/guide-native-icon.svg"
+  hoverIcon="/icons/guide-native-icon-hover.svg"
+>
+  <p>Integrate native device plugins, like Bluetooth, Maps, HealthKit, and more.</p>
+</DocsCard>
+
+  <DocsCard header="Theming" href="/theming/basics" icon="/icons/guide-theming-icon.svg" hoverIcon="/icons/guide-theming-icon-hover.svg">
+    <p>Learn to easily customize and modify your Ionic app's visual design to fit your brand.</p>
+  </DocsCard>
+</DocsCards>
+
+## Overview
+
+Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we <a href="https://youtu.be/p3AN3igqiRc" target="_blank">created a video</a> to walk you through the basics.
+
+### One codebase, running everywhere
+
+Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.md), Ionic apps look and feel at home on every device.
+
+### A focus on performance
+
+Ionic is built to perform and behave great on the latest mobile devices with best practices like efficient hardware accelerated transitions, and touch-optimized gestures.
+
+### Clean, simple, and functional design
+
+Ionic is designed to work and display beautifully on all current mobile devices and platforms. With ready-made components, typography, and a gorgeous (yet extensible) base theme that adapts to each platform, you'll be building in style.
+
+### Native and Web optimized
+
+Ionic emulates native app UI guidelines and uses native SDKs, bringing the UI standards and device features of native apps together with the full power and flexibility of the open web. Ionic uses Capacitor (or Cordova) to deploy natively, or runs in the browser as a Progressive Web App.
+
+## Goals
+
+### Cross-platform
+
+Build and deploy apps that work across multiple platforms, such as native iOS, Android, and the web as a Progressive Web App - all with one code base. Write once, run anywhere.
+
+### Web Standards-based
+
+Ionic is built on top of reliable, [standardized web technologies](reference/glossary.md#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.
+
+### Beautiful Design
+
+Clean, simple, and functional. Ionic is designed to work and display beautifully out-of-the-box across all platforms.
+Start with pre-designed components, typography, interactive paradigms, and a gorgeous (yet extensible) base theme.
+
+### Simplicity
+
+Ionic is built with simplicity in mind, so that creating apps is enjoyable, easy to learn, and accessible to just about anyone with web development skills.
+
+## Framework Compatibility
+
+While past releases of Ionic were tightly coupled to Angular, version 4.x of the framework was re-engineered to work as a standalone <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Component</a> library, with integrations for the latest JavaScript frameworks, like Angular. Ionic can be used in most frontend frameworks with success, including React and Vue, though some frameworks need a shim for full Web Component support.
+
+### JavaScript
+
+One of the main goals with moving Ionic to <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Components</a> was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag. While working with frameworks can be great for larger teams and larger apps, it is now possible to use Ionic as a standalone library in a single page even in a context like WordPress.
+
+### Angular
+
+Angular has always been at the center of what makes Ionic great. While the core components have been written to work as a standalone Web Component library, the `@ionic/angular` package makes integration with the Angular ecosystem a breeze. `@ionic/angular` includes all the functionality that Angular developers would expect coming from Ionic 2/3, and integrates with core Angular libraries, like the Angular router.
+
+### React
+
+Ionic now has official support for the popular React library. Ionic React lets React developers use their existing web skills to build apps that target iOS, Android, and the web. With `@ionic/react`, you can use all the core Ionic components, but in a way that feels like using native React components.
+
+### Vue
+
+Ionic now has official support for the popular Vue 3 library. Ionic Vue lets Vue developers use their existing web skills to build apps that target iOS, Android, and the web. With `@ionic/vue`, you can use all the core Ionic components, but in a way that feels like using native Vue components.
+
+### Future Support
+
+Support for other frameworks will be considered in future releases.
+
+## Ionic CLI
+
+The official [Ionic CLI](cli.md), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account.
+
+## Appflow
+
+To help build, deploy, and manage Ionic apps throughout their lifecycle, we offer a commercial service for production apps called <a href="https://ionic.io/appflow" target="_blank">Appflow</a>, which is <strong>separate from the open source Framework.</strong>
+
+Appflow helps developers and teams compile native app builds and deploy live code updates to Ionic apps from a centralized dashboard. Optional paid upgrades are available for more advanced capabilities like publishing directly to app stores, workflow automation, single sign-on (SSO) and access to connected services and integrations.
+
+Appflow requires an <a href="https://dashboard.ionicframework.com/signup" target="_blank">Ionic Account</a> and comes with a free “Hobby” plan for those interested in playing around with some of its features.
+
+## Ecosystem
+
+Ionic is actively developed and maintained full-time by a core team, and its ecosystem is guided by an international community of developers and contributors fueling its growth and adoption. Developers and companies small and large use Ionic to build and ship amazing apps that run everywhere.
+
+### Join the Community
+
+There are millions of Ionic developers in over 200 countries worldwide. Here are some ways to join:
+
+- <a href="https://forum.ionicframework.com/" target="_blank">
+    Forum:
+  </a> A great place for asking questions and sharing ideas.
+- <a href="https://twitter.com/ionicframework" target="_blank">
+    Twitter:
+  </a> Where we post updates and share content from the Ionic community.
+- <a href="https://github.com/ionic-team/ionic" target="_blank">
+    GitHub:
+  </a> For reporting bugs or requesting new features, create an issue here. PRs welcome!
+- <a href="https://ionicframework.com/contributors" target="_blank">
+    Content authoring:
+  </a> Write a technical blog or share your story with the Ionic community.
+
+## License
+
+The Ionic UI Toolkit is a free and open source project, released under the permissible <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a>. This means it can be used in personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails.
+
+This documentation content (found in the <a href="https://github.com/ionic-team/ionic-docs" target="_blank">ionic-docs</a> repo) is licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache 2 license</a>.
diff --git a/versioned_docs/version-v6/intro/cdn.md b/versioned_docs/version-v6/intro/cdn.md
new file mode 100644
index 00000000000..a90c4a6b250
--- /dev/null
+++ b/versioned_docs/version-v6/intro/cdn.md
@@ -0,0 +1,166 @@
+---
+title: Ionic Packages
+sidebar_label: Packages & CDN
+---
+
+<head>
+  <title>Ionic Framework Packages: CDN, Angular, Vue, and React</title>
+  <meta
+    name="description"
+    content="View our different packages that can be used to quickly start using Ionic Framework or Ionicons CDN in a test environment, Angular, Vue, React, or none at all."
+  />
+</head>
+
+Ionic provides different packages that can be used to quickly get started using Ionic Framework or Ionicons in a test environment, Angular, any other framework, or none at all.
+
+## Ionic Framework CDN
+
+Ionic Framework can be included from a CDN for quick testing in a [Plunker](https://plnkr.co/), [Codepen](https://codepen.io), or any other online code editor!
+
+It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Framework from a CDN. To get the latest version, add the following inside the `<head>` element in an HTML file, or where external assets are included in the online code editor:
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
+<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
+```
+
+With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets).
+
+:::note
+This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework.
+:::
+
+## Ionic + Angular
+
+When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.md#npm). This comes with all of the Ionic Framework components and Angular specific services and features.
+
+```shell
+npm install @ionic/angular@latest --save
+```
+
+Each time there is a new Ionic Framework release, this [version](../reference/versioning.md) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.md#updating-dependencies), as well.
+
+For adding Ionic to an already existing Angular project, use the Angular CLI's `ng add` feature.
+
+```shell
+ng add @ionic/angular
+```
+
+This will add the necessary imports to the `@ionic/angular` package as well as add the styles needed.
+
+## Ionic + React
+
+To add Ionic Framework to an already existing React project, install the `@ionic/react` and `@ionic/react-router` package.
+
+```shell
+$ npm install @ionic/react
+$ npm install @ionic/react-router
+```
+
+### CSS
+
+To include the necessary CSS in a React project, add the following to the root App component.
+
+```javascript
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+```
+
+## Ionic + Vue
+
+To add Ionic Framework to an existing Vue project, install the `@ionic/vue` and `@ionic/vue-router` packages.
+
+```shell
+npm install @ionic/vue @ionic/vue-router
+```
+
+After that, you will need to install the `IonicVue` plugin in your Vue app.
+
+**main.js**
+
+```javascript
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App).use(IonicVue).use(router);
+
+router.isReady().then(() => {
+  app.mount('#app');
+});
+```
+
+Be sure to mount your app once `router.isReady()` has resolved.
+
+### Routing
+
+When setting up routing in your Vue app, you will need to import your dependencies from `@ionic/vue-router` instead of `vue-router`.
+
+**router/index.js**
+
+```javascript
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+
+const routes = [
+  // routes go here
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;
+```
+
+### CSS
+
+To include the necessary CSS in a Vue project, add the following to your `main.js` file.
+
+```javascript
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+```
+
+From here, you can learn about how to develop with Ionic Framework in our [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart).
+
+## Ionicons CDN
+
+Ionicons is packaged by default with the Ionic Framework, so no installation is necessary if you're using Ionic. To use Ionicons without Ionic Framework, place the following `<script>` near the end of your page, right before the closing `</body>` tag.
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.js"></script>
+```
+
+:::note
+See [Ionicons usage](https://ionic.io/ionicons/usage) for more information on using Ionicons.
+:::
diff --git a/versioned_docs/version-v6/intro/cli.md b/versioned_docs/version-v6/intro/cli.md
new file mode 100644
index 00000000000..0ddf23169d3
--- /dev/null
+++ b/versioned_docs/version-v6/intro/cli.md
@@ -0,0 +1,64 @@
+---
+title: Installing Ionic
+sidebar_label: CLI Installation
+---
+
+import AppWizard from '@components/page/intro/AppWizard';
+
+<head>
+  <title>How to Install The Ionic Framework CLI to Build Mobile Apps</title>
+  <meta
+    name="description"
+    content="The Ionic CLI is the preferred method of installation—offering a wide range of dev tools and help options. Learn how to install Ionic and begin building apps."
+  />
+</head>
+
+Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.md#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow.
+
+<AppWizard />
+
+## Install the Ionic CLI
+
+Before proceeding, make sure your computer has [Node.js](../reference/glossary.md#node) installed. See [these instructions](environment.md) to set up an environment for Ionic.
+
+Install the Ionic CLI with npm:
+
+```shell
+npm install -g @ionic/cli
+```
+
+If there was a previous installation of the Ionic CLI, it will need to be uninstalled due to a change in package name.
+
+```shell
+$ npm uninstall -g ionic
+$ npm install -g @ionic/cli
+
+```
+
+:::note
+The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+:::
+
+## Start an App
+
+Create an Ionic app using one of the pre-made app templates, or a blank one to start fresh. The three most common starters are the `blank` starter, `tabs` starter, and `sidemenu` starter. Get started with the `ionic start` command:
+
+```shell
+ionic start
+```
+
+![start app thumbnails](/img/installation/start-app-thumbnails.png)
+
+To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.md).
+
+## Run the App
+
+The majority of Ionic app development can be spent right in the browser using the `ionic serve` command:
+
+```shell
+$ cd myApp
+$ ionic serve
+```
+
+There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, see the [Running an App Guide](../developing/previewing.md).
diff --git a/versioned_docs/version-v6/intro/environment.md b/versioned_docs/version-v6/intro/environment.md
new file mode 100644
index 00000000000..476dda2acf1
--- /dev/null
+++ b/versioned_docs/version-v6/intro/environment.md
@@ -0,0 +1,67 @@
+---
+title: Environment Setup
+---
+
+<head>
+  <title>Environment Setup | Node & NPM Environment for Ionic App Setup</title>
+  <meta
+    name="description"
+    content="To get started with Ionic Framework, the only requirement is a Node & npm environment. Learn what environment setup is required for your Ionic apps."
+  />
+</head>
+
+To get started with Ionic Framework, the only requirement is a [Node & npm](#node--npm) environment.
+
+Of course, a code editor is also required. [Visual Studio Code](https://code.visualstudio.com/) is recommended. Visual Studio Code is a free, batteries-included text editor made by Microsoft.
+
+## Terminal
+
+:::note
+Much of Ionic development requires familiarity with the command line. If you're new to the command line, see [this Blog Post](https://ionicframework.com/blog/new-to-the-command-line/) for a quick introduction.
+:::
+
+In general, we recommend using the built-in terminals. Many third-party terminals work well with Ionic, but may not be supported.
+
+- For Windows, **Command Prompt** and **PowerShell** are supported. <a href="https://docs.microsoft.com/en-us/windows/wsl/faq" target="_blank">WSL</a> is known to work with Ionic, but may not be supported.
+- For macOS, the built-in **Terminal** app is supported.
+
+Git Bash (from <a href="https://git-scm.com" target="_blank">git-scm.com</a>) does not support TTY interactivity and is **not supported** by Ionic.
+
+## Node & npm
+
+Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.md#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.
+
+Node is bundled with [npm](../reference/glossary.md#npm), the package manager for JavaScript.
+
+To verify the installation, open a new terminal window and run:
+
+```shell
+$ node --version
+$ npm --version
+```
+
+:::note
+Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, see [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors).
+:::
+
+## Git
+
+Although not required, the version control system [Git](../reference/glossary.md#git) is highly recommended.
+
+Git is often accompanied by a Git Host, such as [GitHub](https://github.com/), in which case additional setup is required. Follow the tutorial from the Git Host's documentation to set up Git:
+
+- GitHub: [Set up Git](https://help.github.com/en/articles/set-up-git)
+- GitLab: [Installing Git](https://docs.gitlab.com/ee/topics/git/how_to_install_git)
+- Bitbucket: [Install Git](https://www.atlassian.com/git/tutorials/install-git)
+
+Otherwise, follow the [official installation instructions](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git). The command-line utility can be downloaded from the [download page](https://git-scm.com/downloads).
+
+To verify the installation, open a new terminal window and run:
+
+```shell
+git --version
+```
+
+### Git GUI
+
+Git is a command-line utility, but there are many [GUI clients](https://git-scm.com/downloads/guis/) available. [GitHub Desktop](https://desktop.github.com/) is recommended, and works well with GitHub.
diff --git a/versioned_docs/version-v6/intro/first-app.md b/versioned_docs/version-v6/intro/first-app.md
new file mode 100644
index 00000000000..3fc9be2b1fd
--- /dev/null
+++ b/versioned_docs/version-v6/intro/first-app.md
@@ -0,0 +1,24 @@
+---
+hide_table_of_contents: true
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+# Build Your First App Tutorial
+
+Pick the JavaScript framework you plan to use while building your Ionic app:
+
+<DocsCards>
+  <DocsCard header="Start with Angular" href="../angular/your-first-app" icon="/icons/logo-angular-icon.png">
+    <p>A complete guide to get you up to speed with the basics of building Ionic apps with Angular.</p>
+  </DocsCard>
+
+<DocsCard header="Start with React" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
+  <p>A complete guide to get you up to speed with the basics of building Ionic apps with React.</p>
+</DocsCard>
+
+  <DocsCard class="disabled" header="Start with Vue (soon)" href="" icon="/icons/logo-vue-icon.png">
+    <p>A complete guide to get you up to speed with the basics of building Ionic apps with Vue.</p>
+  </DocsCard>
+</DocsCards>
diff --git a/versioned_docs/version-v6/intro/next.md b/versioned_docs/version-v6/intro/next.md
new file mode 100644
index 00000000000..e63809f7654
--- /dev/null
+++ b/versioned_docs/version-v6/intro/next.md
@@ -0,0 +1,32 @@
+---
+title: Next Steps
+---
+
+<head>
+  <title>Next Steps for Starting an App: Choose Your JavaScript Framework</title>
+  <meta
+    name="description"
+    content="In order to build an Ionic app, you first need to choose the JavaScript framework you plan to use. Learn more about next steps for starting an app with Ionic."
+  />
+</head>
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+## Build Your First App
+
+Pick the JavaScript framework you plan to use while building your Ionic app:
+
+<DocsCards>
+  <DocsCard header="Start with Angular" href="../angular/your-first-app" icon="/icons/logo-angular-icon.png">
+    <p>A complete guide to get you up to speed with the basics of building Ionic apps with Angular.</p>
+  </DocsCard>
+
+<DocsCard header="Start with React" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
+  <p>A complete guide to get you up to speed with the basics of building Ionic apps with React.</p>
+</DocsCard>
+
+  <DocsCard header="Start with Vue" href="../vue/your-first-app" icon="/icons/logo-vue-icon.png">
+    <p>A complete guide to get you up to speed with the basics of building Ionic apps with Vue.</p>
+  </DocsCard>
+</DocsCards>
diff --git a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
new file mode 100644
index 00000000000..95b39f2350d
--- /dev/null
+++ b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
@@ -0,0 +1,461 @@
+# Upgrading to Ionic 6
+
+Follow this guide to upgrade your Ionic 5 apps to Ionic 6.
+
+## Getting Started
+
+### Angular
+
+1. Ionic 6 supports Angular 12+. Update to the latest version of Angular by following the [Angular Update Guide](https://update.angular.io/).
+2. Update to the latest version of Ionic 6:
+
+```shell
+npm install @ionic/angular@6
+```
+
+If you are using Ionic Angular Server, be sure to update that as well:
+
+```shell
+npm install @ionic/angular@6 @ionic/angular-server@6
+```
+
+3. Remove any usage of `Config.set()`. Instead, set your config in `IonicModule.forRoot()`. See the [Angular Config Documentation](../angular/config) for more examples.
+4. Remove any usage of the `setupConfig` function previously exported from `@ionic/angular`. Set your config in `IonicModule.forRoot()` instead.
+
+### React
+
+1. Ionic 6 supports React 17+. Update to the latest version of React:
+
+```shell
+npm install react@latest react-dom@latest
+```
+
+2. Update to the latest version of Ionic 6:
+
+```shell
+npm install @ionic/react@6 @ionic/react-router@6
+```
+
+3. Update the `test` field in the `scripts` object of your `package.json` to include `transformIgnorePatterns`:
+
+```json
+"scripts": {
+  "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
+  ...
+}
+```
+
+4. Import and call `setupIonicReact` in your `App` component file. If you are also using `setupConfig`, pass your config to `setupIonicReact` instead:
+
+**Before**
+```tsx title="App.tsx"
+import { setupConfig } from '@ionic/react';
+
+...
+
+setupConfig({
+  mode: 'md'
+});
+```
+
+**After**
+```tsx title="App.tsx"
+import { setupIonicReact } from '@ionic/react';
+
+...
+
+setupIonicReact({
+  mode: 'md'
+});
+```
+
+:::note
+Developers must import and call `setupIonicReact` even if they are not setting custom config.
+:::
+
+See the [React Config Documentation](../react/config) for more examples.
+
+5. Update all controller imports from `@ionic/core` to `@ionic/core/components`. As an example, here is a migration for `menuController`:
+
+**Before**
+```tsx
+import { menuController } from '@ionic/core';
+```
+
+**After**
+```tsx
+import { menuController } from '@ionic/core/components';
+```
+
+### Vue
+
+1. Ionic 6 supports Vue 3.0.6+. Update to the latest version of Vue:
+
+```shell
+npm install vue@3 vue-router@4
+```
+
+2. For apps that use the Vue CLI, install Vue CLI 5:
+
+```shell
+npm install -g @vue/cli@next
+```
+
+Then, upgrade all Vue CLI plugins:
+
+```shell
+vue upgrade --next
+```
+
+3. Update to the latest version of Ionic 6:
+
+```shell
+npm install @ionic/vue@6 @ionic/vue-router@6
+```
+
+4. Add the following `transformIgnorePatterns` to either `jest.config.js` or the `jest` field in `package.json`:
+
+```js title="jest.config.js"
+module.exports = {
+  ...
+  transformIgnorePatterns: ['/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)']
+}
+```
+
+```json title="package.json"
+  {
+    ...
+    "jest": {
+      "transformIgnorePatterns": ["/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)"]
+    }
+  }
+```
+
+See the [Testing section below](#testing) for more information.
+
+5. Remove any usage of the `setupConfig` function previously exported from `@ionic/vue`. Set your config when installing the `IonicVue` plugin instead. See the [Vue Config Documentation](../vue/config) for more examples.
+
+6. Rename the `IonRouter` type for `useIonRouter` to `UseIonRouterResult`.
+
+7. Rename the `IonKeyboardRef` type for `useKeyboard` to `UseKeyboardResult`.
+
+8. Rename any overlay event listeners to use the new format:
+
+**Before**
+```html
+<ion-modal
+  :is-open="modalOpenRef"
+  @onWillPresent="onModalWillPresentHandler"
+  @onDidPresent="onModalDidPresentHandler"
+  @onWillDismiss="onModalWillDismissHandler"
+  @onDidDismiss="onModalDidDismissHandler"
+>
+  ...
+</ion-modal>
+```
+
+**After**
+```html
+<ion-modal
+  :is-open="modalOpenRef"
+  @willPresent="onModalWillPresentHandler"
+  @didPresent="onModalDidPresentHandler"
+  @willDismiss="onModalWillDismissHandler"
+  @didDismiss="onModalDidDismissHandler"
+>
+  ...
+</ion-modal>
+```
+
+:::note
+This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-picker`, `ion-popover`, and `ion-toast`.
+:::
+
+9. Pass in an `ion-router-outlet` into any `ion-tabs` that are being used:
+
+**Before**
+```html
+<ion-tabs>
+  <ion-tab-bar slot="bottom">
+    ...
+  </ion-tab-bar>
+</ion-tabs>
+
+<script>
+  import { IonTabs, IonTabBar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  
+  export default defineComponent({
+    components: { IonTabs, IonTabBar }
+  });
+</script>
+```
+
+**After**
+```html
+<ion-tabs>
+  <ion-router-outlet></ion-router-outlet>
+  <ion-tab-bar slot="bottom">
+    ...
+  </ion-tab-bar>
+</ion-tabs>
+
+<script>
+  import { IonTabs, IonTabBar, IonRouterOutlet } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  
+  export default defineComponent({
+    components: { IonTabs, IonTabBar, IonRouterOutlet }
+  });
+</script>
+```
+
+10. Additional routes inside of tabs should be re-written as sibling routes instead of child routes:
+
+**Before**
+```ts
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/tabs/tab1'
+  },
+  {
+    path: '/tabs/',
+    component: Tabs,
+    children: [
+      {
+        path: '',
+        redirect: 'tab1'
+      },
+      {
+        path: 'tab1',
+        component: () => import('@/views/Tab1.vue'),
+        children: {
+          {
+            path: 'view',
+            component: () => import('@/views/Tab1View.vue')
+          }
+        }
+      },
+      {
+        path: 'tab2',
+        component: () => import('@/views/Tab2.vue')
+      },
+      {
+        path: 'tab3',
+        component: () => import('@/views/Tab3.vue')
+      }
+    ]
+  }
+]
+```
+
+**After**
+```ts
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/tabs/tab1'
+  },
+  {
+    path: '/tabs/',
+    component: Tabs,
+    children: [
+      {
+        path: '',
+        redirect: 'tab1'
+      },
+      {
+        path: 'tab1',
+        component: () => import('@/views/Tab1.vue')
+      },
+      {
+        path: 'tab1/view',
+        component: () => import('@/views/Tab1View.vue')
+      },
+      {
+        path: 'tab2',
+        component: () => import('@/views/Tab2.vue')
+      },
+      {
+        path: 'tab3',
+        component: () => import('@/views/Tab3.vue')
+      }
+    ]
+  }
+]
+```
+
+### Core
+
+1. Update to the latest version of Ionic 6:
+
+```shell
+npm install @ionic/core@6
+```
+
+## Updating Your Code
+
+### Datetime
+
+1. Remove any usages of the `placeholder`, `pickerOptions`, `pickerFormat`, `monthNames`, `monthShortNames`, `dayNames`, and `dayShortNames` properties. `ion-datetime` now automatically formats the month names, day names, and time displayed inside of the component according to the language and region set on the device. See the [ion-datetime Localization Documentation](../api/datetime#localization) for more information.
+
+2. Remove any usages of the `text` and `placeholder` CSS Shadow Parts.
+
+3. Remove any usages of the `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, and `--placeholder-color` CSS Variables. To customize the padding on `ion-datetime`, you can use any of the `padding` CSS properties.
+
+4. Remove any usage of the `open` method. To present the datetime in an overlay, place it inside of an `ion-modal` or an `ion-popover` component. See the [ion-datetime Usage Examples](../api/datetime#usage) for more information.
+
+5. Remove any usage of the `displayFormat` or `displayTimezone` properties. To parse the UTC string provided in the payload of the `ionChange` event, we recommend using [date-fns](https://date-fns.org/). See the [ion-datetime Parsing Dates Documentation](../api/datetime#parsing-dates) for examples.
+
+:::note
+See the [Datetime Migration Sample Application](https://github.com/ionic-team/datetime-migration-samples) for more migration examples.
+:::
+
+### Icon
+
+Ionic 6 now ships with Ionicons 6. Review the [Ionicons 6 Breaking Changes Guide](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) and make any necessary changes.
+
+### Input
+
+Ensure `null` is not passed in as a value to the `placeholder` property. We recommend using `undefined` instead.
+
+### Modal
+
+`ion-modal` now uses the Shadow DOM. Update any styles targeting the internals of `ion-modal` to use either the [ion-modal CSS Variables](../api/modal#css-custom-properties) or the [ion-modal CSS Shadow Parts](../api/modal#css-shadow-parts):
+
+**Before**
+```css
+ion-modal .modal-wrapper {
+  ...
+}
+
+ion-modal ion-backdrop {
+  ...
+}
+```
+
+**After**
+```css
+ion-modal::part(content) {
+  ...
+}
+
+ion-modal::part(backdrop) {
+  ...
+}
+```
+
+### Popover
+
+`ion-popover` now uses the Shadow DOM. Update any styles targeting the internals of `ion-popover` to use either [ion-popover CSS Variables](../api/popover#css-custom-properties) or the [ion-popover CSS Shadow Parts](../api/popover#css-shadow-parts):
+
+
+**Before**
+```css
+ion-popover .popover-arrow {
+  ...
+}
+
+ion-popover ion-backdrop {
+  ...
+}
+
+ion-popover .popover-content {
+  ...
+}
+```
+
+**After**
+```css
+ion-popover::part(arrow) {
+  ...
+}
+
+ion-popover::part(backdrop) {
+  ...
+}
+
+ion-popover::part(content) {
+  ...
+}
+```
+
+### Radio
+
+Remove any usage of the `RadioChangeEventDetail` interface.
+
+### Select
+
+Ensure `null` is not passed in as a value to the `placeholder` property. We recommend using `undefined` instead.
+
+### Textarea
+
+Ensure `null` is not passed in as a value to the `placeholder` property. We recommend using `undefined` instead.
+
+### Browser Support
+
+The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support) to ensure you are deploying apps to supported browsers.
+
+If you have a `browserslist` or `.browserslistrc` file, update it with the following content:
+
+```
+Chrome >=60
+Firefox >=63
+Edge >=79
+Safari >=13
+iOS >=13
+```
+
+
+### Testing
+
+Ionic 6 now ships as ES Modules. ES Modules are supported in all major browsers and bring developer experience and code maintenance improvements. Developers testing with Jest will need to update their Jest configuration as Jest does not have full support for ES Modules as of Jest 27.
+
+This update involves using Babel to compile Ionic's ES Modules down to the CommonJS (CJS) format, a format that Jest can understand. Once Jest ships support for ES Modules, this change will no longer be necessary. See https://github.com/facebook/jest/issues/9430 for updates on ES Modules support in Jest.
+
+If you are starting fresh with a new Ionic app, this configuration is done for you in our starter applications. For those with existing Ionic apps, follow the steps below to get Jest working with Ionic 6:
+
+1. Add a `transformIgnorePatterns` field to your Jest config that includes the relevant Ionic packages. This is typically found in `jest.config.js` or the `jest` field in `package.json`:
+
+```js title="jest.config.js"
+module.exports = {
+  ...
+  transformIgnorePatterns: ['/node_modules/(?!@ionic/core|@stencil/core|ionicons)']
+}
+```
+
+```json title="package.json"
+  {
+    ...
+    "jest": {
+      "transformIgnorePatterns": ["/node_modules/(?!@ionic/core|@stencil/core|ionicons)"]
+    }
+  }
+```
+
+:::note
+If you are using Ionic React or Ionic Vue, be sure to add the appropriate packages to the `transformIgnorePatterns` array. For Ionic React this includes `@ionic/react` and `@ionic/react-router`. For Ionic Vue this includes `@ionic/vue` and `@ionic/vue-router`.
+:::
+
+For developers using Create React App (CRA), there is currently no way to update the `transformIgnorePatterns` in a Jest config file. This is a CRA restriction and not something Ionic has control over. We can, however, pass the `transformIgnorePatterns` directly into the `react-scripts test` command:
+
+```json title="package.json"
+"scripts": {
+  "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
+  ...
+}
+```
+
+If you are still running into issues, here are a couple things to try:
+
+1. Verify that `@babel/preset-env` is included in your [project-wide configuration](https://babeljs.io/docs/en/config-files#project-wide-configuration) instead of your [file-relative configuration](https://babeljs.io/docs/en/config-files#file-relative-configuration). This typically means defining the Babel configuration in `<project-root>/babel.config.json`.
+
+2. If you have a `browserslist/test` field in `package.json` file, make sure it is set to `current node`.
+
+## Need Help Upgrading?
+
+Be sure to look at the [Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md). There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that required user action are listed on this page.
+
+If you need help upgrading, please post a thread on the [Ionic Forum](https://forum.ionicframework.com/).
+
diff --git a/versioned_docs/version-v6/intro/vscode-extension.md b/versioned_docs/version-v6/intro/vscode-extension.md
new file mode 100644
index 00000000000..4c4a58e9791
--- /dev/null
+++ b/versioned_docs/version-v6/intro/vscode-extension.md
@@ -0,0 +1,39 @@
+---
+title: Ionic VS Code Extension
+---
+
+<head>
+  <title>Using the Ionic Visual Studio Code Extension</title>
+  <meta
+    name="description"
+    content="The Ionic Visual Studio Code extension helps you perform various functions that are common to developing an Ionic app"
+  />
+</head>
+
+The Ionic Visual Studio Code extension helps you perform various functions that are common to developing an Ionic app, all without leaving your VS Code window. You can install the [extension on the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ionic.ionic). Once you have the extension installed, you'll see the Ionic logo in the activity bar.
+
+## Create a New Project
+
+From an empty directory, you can create a new Angular, React, or Vue project by clicking one of the template options and providing an app name.
+
+<img
+  src="https://user-images.githubusercontent.com/84595830/159510276-6766a5b8-132d-4284-a3fa-cd6374d64891.gif"
+  alt="Video of creating a project"
+/>
+
+With the new project created, the extension will provide access to all of the common tasks in your `package.json`.
+
+## Adding Capacitor
+
+You can also add [Capacitor](https://capacitorjs.com/) to your application by choosing "Integrate Capacitor".
+
+<img
+  src="https://user-images.githubusercontent.com/84595830/159510570-b5a151bb-2e17-42c8-8cab-bffbaa849576.gif"
+  alt="Video of adding Capacitor"
+/>
+
+With Capacitor integrated, you can now run your app on web, Android, and iOS with the "Run On Web", "Run On Android", and "Run On iOS" options.
+
+## Doing More
+
+There is so much the Ionic VS Code extension can help with, including migrations, debugging, monorepo support, and more. For the full list of all of the extension's capabilities, checkout the [extension overview on the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ionic.ionic).
diff --git a/versioned_docs/version-v6/layout/css-utilities.md b/versioned_docs/version-v6/layout/css-utilities.md
new file mode 100644
index 00000000000..e19ad5e04b4
--- /dev/null
+++ b/versioned_docs/version-v6/layout/css-utilities.md
@@ -0,0 +1,534 @@
+---
+title: CSS Utilities
+initialTab: 'preview'
+inlineHtmlPreviews: true
+---
+
+<head>
+  <title>CSS Utilities: Classes for Text/Element Alignment or Modification</title>
+  <meta
+    name="description"
+    content="Ionic CSS utility classes can be used on any element for text modification/alignment, element placement, or to adjust padding and margin. Read to learn more."
+  />
+</head>
+
+Ionic Framework provides a set of CSS utility classes that can be used on any element in order to modify the text, element placement or adjust the padding and margin.
+
+:::note
+If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.md#optional) will need to be included in order for these styles to work.
+:::
+
+## Text Modification
+
+### Text Alignment
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <div class="ion-text-start">
+        <h3>text-start</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
+      </div>
+    </ion-col>
+    <ion-col>
+      <div class="ion-text-end">
+        <h3>text-end</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
+      </div>
+    </ion-col>
+    <ion-col>
+      <div class="ion-text-center">
+        <h3>text-center</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
+      </div>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <div class="ion-text-justify">
+        <h3>text-justify</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
+      </div>
+    </ion-col>
+    <ion-col>
+      <div class="ion-text-wrap">
+        <h3>text-wrap</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
+      </div>
+    </ion-col>
+    <ion-col>
+      <div class="ion-text-nowrap">
+        <h3>text-nowrap</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+| Class               | Style Rule            | Description                                                                                                                                                         |
+| ------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.ion-text-left`    | `text-align: left`    | The inline contents are aligned to the left edge of the line box.                                                                                                   |
+| `.ion-text-right`   | `text-align: right`   | The inline contents are aligned to the right edge of the line box.                                                                                                  |
+| `.ion-text-start`   | `text-align: start`   | The same as `text-left` if direction is left-to-right and `text-right` if direction is right-to-left.                                                               |
+| `.ion-text-end`     | `text-align: end`     | The same as `text-right` if direction is left-to-right and `text-left` if direction is right-to-left.                                                               |
+| `.ion-text-center`  | `text-align: center`  | The inline contents are centered within the line box.                                                                                                               |
+| `.ion-text-justify` | `text-align: justify` | The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line. |
+| `.ion-text-wrap`    | `white-space: normal` | Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.              |
+| `.ion-text-nowrap`  | `white-space: nowrap` | Collapses whitespace as for `normal`, but suppresses line breaks (text wrapping) within text.                                                                       |
+
+### Text Transformation
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <div class="ion-text-uppercase">
+        <h3>text-uppercase</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
+      </div>
+    </ion-col>
+    <ion-col>
+      <div class="ion-text-lowercase">
+        <h3>text-lowercase</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
+      </div>
+    </ion-col>
+    <ion-col>
+      <div class="ion-text-capitalize">
+        <h3>text-capitalize</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
+      </div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+| Class                  | Style Rule                   | Description                                                        |
+| ---------------------- | ---------------------------- | ------------------------------------------------------------------ |
+| `.ion-text-uppercase`  | `text-transform: uppercase`  | Forces all characters to be converted to uppercase.                |
+| `.ion-text-lowercase`  | `text-transform: lowercase`  | Forces all characters to be converted to lowercase.                |
+| `.ion-text-capitalize` | `text-transform: capitalize` | Forces the first letter of each word to be converted to uppercase. |
+
+### Responsive Text Classes
+
+All of the text classes listed above have additional classes to modify the text based on the screen size. Instead of `text-` in each class, use `text-{breakpoint}-` to only use the class on specific screen sizes, where `{breakpoint}` is one of the breakpoint names listed in [Ionic Breakpoints](#ionic-breakpoints).
+
+The table below shows the default behavior, where `{modifier}` is any of the following: `left`, `right`, `start`, `end`, `center`, `justify`, `wrap`, `nowrap`, `uppercase`, `lowercase`, or `capitalize`, as they are described above.
+
+| Class                     | Description                                                   |
+| ------------------------- | ------------------------------------------------------------- |
+| `.ion-text-{modifier}`    | Applies the modifier to the element on all screen sizes.      |
+| `.ion-text-sm-{modifier}` | Applies the modifier to the element when `min-width: 576px`.  |
+| `.ion-text-md-{modifier}` | Applies the modifier to the element when `min-width: 768px`.  |
+| `.ion-text-lg-{modifier}` | Applies the modifier to the element when `min-width: 992px`.  |
+| `.ion-text-xl-{modifier}` | Applies the modifier to the element when `min-width: 1200px`. |
+
+## Element Placement
+
+### Float Elements
+
+The float CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it. This way, the element is taken from the normal flow of the web page, though still remaining a part of the flow, contrary to absolute positioning.
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col class="ion-float-left">
+      <div>
+        <h3>float-left</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
+      </div>
+    </ion-col>
+    <ion-col class="ion-float-right">
+      <div>
+        <h3>float-right</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
+      </div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+| Class              | Style Rule                     | Description                                                                                             |
+| ------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------- |
+| `.ion-float-left`  | `float: left`                  | The element will float on the left side of its containing block.                                        |
+| `.ion-float-right` | `float: right`                 | The element will float on the right side of its containing block.                                       |
+| `.ion-float-start` | `float: left` / `float: right` | The same as `float-left` if direction is left-to-right and `float-right` if direction is right-to-left. |
+| `.ion-float-end`   | `float: left` / `float: right` | The same as `float-right` if direction is left-to-right and `float-left` if direction is right-to-left. |
+
+### Responsive Float Classes
+
+All of the float classes listed above have additional classes to modify the float based on the screen size. Instead of `float-` in each class, use `float-{breakpoint}-` to only use the class on specific screen sizes, where `{breakpoint}` is one of the breakpoint names listed in [Ionic Breakpoints](#ionic-breakpoints).
+
+The table below shows the default behavior, where `{modifier}` is any of the following: `left`, `right`, `start`, or `end`, as they are described above.
+
+| Class                      | Description                                                   |
+| -------------------------- | ------------------------------------------------------------- |
+| `.ion-float-{modifier}`    | Applies the modifier to the element on all screen sizes.      |
+| `.ion-float-sm-{modifier}` | Applies the modifier to the element when `min-width: 576px`.  |
+| `.ion-float-md-{modifier}` | Applies the modifier to the element when `min-width: 768px`.  |
+| `.ion-float-lg-{modifier}` | Applies the modifier to the element when `min-width: 992px`.  |
+| `.ion-float-xl-{modifier}` | Applies the modifier to the element when `min-width: 1200px`. |
+
+## Element Display
+
+The display CSS property determines if an element should be visible or not. The element will still be in the DOM, but not rendered, if it is hidden.
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col class="ion-hide">
+      <div>
+        <h3>hidden</h3>
+        You can't see me.
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        <h3>not-hidden</h3>
+        You can see me!
+      </div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+| Class       | Style Rule      | Description                 |
+| ----------- | --------------- | --------------------------- |
+| `.ion-hide` | `display: none` | The element will be hidden. |
+
+### Responsive Display Attributes
+
+There are also additional classes to modify the visibility based on the screen size. Instead of just `.ion-hide` for all screen sizes, use `.ion-hide-{breakpoint}-{dir}` to only use the class on specific screen sizes, where `{breakpoint}` is one of the breakpoint names listed in [Ionic Breakpoints](#ionic-breakpoints), and `{dir}` is whether the element should be hidden on all screen sizes above (`up`) or below (`down`) the specified breakpoint.
+
+| Class                | Description                                                                                          |
+| -------------------- | ---------------------------------------------------------------------------------------------------- |
+| `.ion-hide-sm-{dir}` | Applies the modifier to the element when `min-width: 576px` (`up`) or `max-width: 576px` (`down`).   |
+| `.ion-hide-md-{dir}` | Applies the modifier to the element when `min-width: 768px` (`up`) or `max-width: 768px` (`down`).   |
+| `.ion-hide-lg-{dir}` | Applies the modifier to the element when `min-width: 992px` (`up`) or `max-width: 992px` (`down`).   |
+| `.ion-hide-xl-{dir}` | Applies the modifier to the element when `min-width: 1200px` (`up`) or `max-width: 1200px` (`down`). |
+
+## Content Space
+
+### Element Padding
+
+The padding class sets the padding area of an element. The padding area is the space between the content of the element and its border.
+
+The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. See the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values.
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col class="ion-padding">
+      <div>padding</div>
+    </ion-col>
+    <ion-col class="ion-padding-top">
+      <div>padding-top</div>
+    </ion-col>
+    <ion-col class="ion-padding-start">
+      <div>padding-start</div>
+    </ion-col>
+    <ion-col class="ion-padding-end">
+      <div>padding-end</div>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col class="ion-padding-bottom">
+      <div>padding-bottom</div>
+    </ion-col>
+    <ion-col class="ion-padding-vertical">
+      <div>padding-vertical</div>
+    </ion-col>
+    <ion-col class="ion-padding-horizontal">
+      <div>padding-horizontal</div>
+    </ion-col>
+    <ion-col class="ion-no-padding">
+      <div>no-padding</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+| Class                     | Style Rule             | Description                            |
+| ------------------------- | ---------------------- | -------------------------------------- |
+| `.ion-padding`            | `padding: 16px`        | Applies padding to all sides.          |
+| `.ion-padding-top`        | `padding-top: 16px`    | Applies padding to the top.            |
+| `.ion-padding-start`      | `padding-start: 16px`  | Applies padding to the start.          |
+| `.ion-padding-end`        | `padding-end: 16px`    | Applies padding to the end.            |
+| `.ion-padding-bottom`     | `padding-bottom: 16px` | Applies padding to the bottom.         |
+| `.ion-padding-vertical`   | `padding: 16px 0`      | Applies padding to the top and bottom. |
+| `.ion-padding-horizontal` | `padding: 0 16px`      | Applies padding to the left and right. |
+| `.ion-no-padding`         | `padding: 0`           | Applies no padding to all sides.       |
+
+### Element Margin
+
+The margin area extends the border area with an empty area used to separate the element from its neighbors.
+
+The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. See the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values.
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col class="ion-margin">
+      <div>margin</div>
+    </ion-col>
+    <ion-col class="ion-margin-top">
+      <div>margin-top</div>
+    </ion-col>
+    <ion-col class="ion-margin-start">
+      <div>margin-start</div>
+    </ion-col>
+    <ion-col class="ion-margin-end">
+      <div>margin-end</div>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col class="ion-margin-bottom">
+      <div>margin-bottom</div>
+    </ion-col>
+    <ion-col class="ion-margin-vertical">
+      <div>margin-vertical</div>
+    </ion-col>
+    <ion-col class="ion-margin-horizontal">
+      <div>margin-horizontal</div>
+    </ion-col>
+    <ion-col class="ion-no-margin">
+      <div>no-margin</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+| Class                    | Style Rule            | Description                           |
+| ------------------------ | --------------------- | ------------------------------------- |
+| `.ion-margin`            | `margin: 16px`        | Applies margin to all sides.          |
+| `.ion-margin-top`        | `margin-top: 16px`    | Applies margin to the top.            |
+| `.ion-margin-start`      | `margin-start: 16px`  | Applies margin to the left.           |
+| `.ion-margin-end`        | `margin-end: 16px`    | Applies margin to the right.          |
+| `.ion-margin-bottom`     | `margin-bottom: 16px` | Applies margin to the bottom.         |
+| `.ion-margin-vertical`   | `margin: 16px 0`      | Applies margin to the top and bottom. |
+| `.ion-margin-horizontal` | `margin: 0 16px`      | Applies margin to the left and right. |
+| `.ion-no-margin`         | `margin: 0`           | Applies no margin to all sides.       |
+
+## Flex Properties
+
+<img src={require('@site/static/img/layout/diagram-flex-attributes.png').default} />
+
+### Flex Container Properties
+
+```html
+<ion-grid>
+  <ion-row class="ion-justify-content-start">
+    <ion-col size="3">
+      <div>1 of 2</div>
+    </ion-col>
+    <ion-col size="3">
+      <div>2 of 2</div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row class="ion-justify-content-center">
+    <ion-col size="3">
+      <div>1 of 2</div>
+    </ion-col>
+    <ion-col size="3">
+      <div>2 of 2</div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row class="ion-justify-content-end">
+    <ion-col size="3">
+      <div>1 of 2</div>
+    </ion-col>
+    <ion-col size="3">
+      <div>2 of 2</div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row class="ion-justify-content-around">
+    <ion-col size="3">
+      <div>1 of 2</div>
+    </ion-col>
+    <ion-col size="3">
+      <div>2 of 2</div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row class="ion-justify-content-between">
+    <ion-col size="3">
+      <div>1 of 2</div>
+    </ion-col>
+    <ion-col size="3">
+      <div>2 of 2</div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row class="ion-justify-content-evenly">
+    <ion-col size="3">
+      <div>1 of 2</div>
+    </ion-col>
+    <ion-col size="3">
+      <div>2 of 2</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<ion-grid>
+  <ion-row class="ion-align-items-start">
+    <ion-col>
+      <div>1 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>2 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>3 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>4 of 4 # # #</div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row class="ion-align-items-end">
+    <ion-col>
+      <div>1 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>2 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>3 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>4 of 4 # # #</div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row class="ion-align-items-center">
+    <ion-col>
+      <div>1 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>2 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>3 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>4 of 4 # # #</div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row class="ion-align-items-baseline">
+    <ion-col>
+      <div>1 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>2 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>3 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>4 of 4 # # #</div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row class="ion-align-items-stretch">
+    <ion-col>
+      <div>1 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>2 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>3 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>4 of 4 # # #</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+| Class                          | Style Rule                       | Description                                                                 |
+| ------------------------------ | -------------------------------- | --------------------------------------------------------------------------- |
+| `.ion-justify-content-start`   | `justify-content: flex-start`    | Items are packed toward the start on the main axis.                         |
+| `.ion-justify-content-end`     | `justify-content: flex-end`      | Items are packed toward the end on the main axis.                           |
+| `.ion-justify-content-center`  | `justify-content: center`        | Items are centered along the main axis.                                     |
+| `.ion-justify-content-around`  | `justify-content: space-around`  | Items are evenly distributed on the main axis with equal space around them. |
+| `.ion-justify-content-between` | `justify-content: space-between` | Items are evenly distributed on the main axis.                              |
+| `.ion-justify-content-evenly`  | `justify-content: space-evenly`  | Items are distributed so that the spacing between any two items is equal.   |
+| `.ion-align-items-start`       | `align-items: flex-start`        | Items are packed toward the start on the cross axis.                        |
+| `.ion-align-items-end`         | `align-items: flex-end`          | Items are packed toward the end on the cross axis.                          |
+| `.ion-align-items-center`      | `align-items: center`            | Items are centered along the cross axis.                                    |
+| `.ion-align-items-baseline`    | `align-items: baseline`          | Items are aligned so that their baselines align.                            |
+| `.ion-align-items-stretch`     | `align-items: stretch`           | Items are stretched to fill the container.                                  |
+| `.ion-nowrap`                  | `flex-wrap: nowrap`              | Items will all be on one line.                                              |
+| `.ion-wrap`                    | `flex-wrap: wrap`                | Items will wrap onto multiple lines, from top to bottom.                    |
+| `.ion-wrap-reverse`            | `flex-wrap: wrap-reverse`        | Items will wrap onto multiple lines, from bottom to top.                    |
+
+### Flex Item Properties
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col class="ion-align-self-start">
+      <div>1 of 4</div>
+    </ion-col>
+    <ion-col class="ion-align-self-center">
+      <div>2 of 4</div>
+    </ion-col>
+    <ion-col class="ion-align-self-end">
+      <div>3 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>4 of 4 # # #</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+| Class                      | Style Rule               | Description                                                            |
+| -------------------------- | ------------------------ | ---------------------------------------------------------------------- |
+| `.ion-align-self-start`    | `align-self: flex-start` | Item is packed toward the start on the cross axis.                     |
+| `.ion-align-self-end`      | `align-self: flex-end`   | Item is packed toward the end on the cross axis.                       |
+| `.ion-align-self-center`   | `align-self: center`     | Item is centered along the cross axis.                                 |
+| `.ion-align-self-baseline` | `align-self: baseline`   | Item is aligned so that its baseline aligns with other item baselines. |
+| `.ion-align-self-stretch`  | `align-self: stretch`    | Item is stretched to fill the container.                               |
+| `.ion-align-self-auto`     | `align-self: auto`       | Item is positioned according to the parent's `align-items` value.      |
+
+## Border Display
+
+The border display CSS property determines if the border should be visible or not. The property can be applied to the ion-header and the ion-footer.
+
+```html
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-title>Header - No Border</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-footer class="ion-no-border">
+  <ion-toolbar>
+    <ion-title>Footer - No Border</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
+
+| Class            | Description                      |
+| ---------------- | -------------------------------- |
+| `.ion-no-border` | The element will have no border. |
+
+## Ionic Breakpoints
+
+Ionic uses breakpoints in media queries in order to style an application differently based on the screen size. The following breakpoint names are used in the utility classes listed above, where the class will apply when the width is met.
+
+| Breakpoint Name | Width    |
+| --------------- | -------- |
+| `xs`            | `0`      |
+| `sm`            | `576px`  |
+| `md`            | `768px`  |
+| `lg`            | `992px`  |
+| `xl`            | `1200px` |
diff --git a/versioned_docs/version-v6/layout/global-stylesheets.md b/versioned_docs/version-v6/layout/global-stylesheets.md
new file mode 100644
index 00000000000..0078859a52b
--- /dev/null
+++ b/versioned_docs/version-v6/layout/global-stylesheets.md
@@ -0,0 +1,73 @@
+---
+title: Global Stylesheets
+initialTab: 'preview'
+inlineHtmlPreviews: true
+---
+
+<head>
+  <title>Global Stylesheet: Styled CSS Component Options for Ionic Apps</title>
+  <meta
+    name="description"
+    content="While Ionic component styles are self-contained, there are several global stylesheets and CSS options to include to utilize all features. Read to learn more."
+  />
+</head>
+
+While Ionic Framework component styles are self-contained, there are several global stylesheets that should be included in order to use all of Ionic's features. Some of the stylesheets are required in order for an Ionic Framework app to look and behave properly, and others include optional utilities to quickly style your app.
+
+## Available
+
+### Required
+
+The following CSS file must be included in order for Ionic Framework to work properly.
+
+#### core.css
+
+This file is the only stylesheet that is required in order for Ionic components to work properly. It includes app specific styles, and allows the `color` property to work across components. If this file is not included the colors will not show up and some elements may not appear properly.
+
+### Recommended
+
+The following CSS files are recommended to be included in an Ionic Framework app. If they are not included, some elements may have undesired styles. If Ionic Framework components are being used outside of an app, these files may not be necessary.
+
+#### structure.css
+
+Applies styles to `<html>` and defaults `box-sizing` to `border-box`. It ensures scrolling behaves like native in mobile devices.
+
+#### typography.css
+
+Typography changes the font-family of the entire document and modifies the font styles for heading elements. It also applies positioning styles to some native text elements.
+
+#### normalize.css
+
+Makes browsers render all elements more consistently and in line with modern standards. It is based on [Normalize.css](https://necolas.github.io/normalize.css/).
+
+### Optional
+
+The following set of CSS files are optional and can safely be commented out or removed if the application is not using any of the features.
+
+#### padding.css
+
+Adds utility classes to modify the padding or margin on any element, see [CSS Utilities](css-utilities.md#content-space) for usage information.
+
+#### float-elements.css
+
+Adds utility classes to float an element based on the breakpoint and side, see [CSS Utilities](css-utilities.md#element-placement) for usage information.
+
+#### text-alignment.css
+
+Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.md#text-alignment) for usage information.
+
+#### text-transformation.css
+
+Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.md#text-transformation) for usage information.
+
+#### flex-utils.css
+
+Adds utility classes to align flex containers and items, see [CSS Utilities](css-utilities.md#flex-properties) for usage information.
+
+#### display.css
+
+Adds utility classes to hide any element based on the breakpoint, see [CSS Utilities](css-utilities.md#element-display) for usage information.
+
+## Usage
+
+Refer to [Ionic Packages](../intro/cdn.md) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.md) for how to use the optional utilities.
diff --git a/versioned_docs/version-v6/layout/structure.md b/versioned_docs/version-v6/layout/structure.md
new file mode 100644
index 00000000000..9444db48480
--- /dev/null
+++ b/versioned_docs/version-v6/layout/structure.md
@@ -0,0 +1,236 @@
+---
+title: Structure
+initialTab: 'preview'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+<head>
+  <title>Structure Layout | Structures for Content Layout on Ionic Apps</title>
+  <meta
+    name="description"
+    content="Ionic provides several different layouts that can be used to structure an app and its content—from single page layouts, to split pane views and modals."
+  />
+</head>
+
+Ionic Framework provides several different layouts that can be used to structure an app. From single page layouts, to split pane views and modals.
+
+## Header and Footer Layout
+
+### Header
+
+<aside>
+  <DocsCard href="../api/header" header="Learn More" icon="/icons/component-header-icon.png">
+    <code>ion-header</code> API docs
+  </DocsCard>
+</aside>
+
+The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content.
+
+```html
+<ion-app>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content class="ion-padding">
+    <h1>Main Content</h1>
+  </ion-content>
+</ion-app>
+```
+
+### Footer
+
+<aside>
+  <DocsCard href="../api/footer" header="Learn More" icon="/icons/component-footer-icon.png">
+    <code>ion-footer</code> API docs
+  </DocsCard>
+</aside>
+
+As you can see, a toolbar in a header appears above the content. Sometimes an app needs to have a toolbar below the content, which is when a footer is used.
+
+```html
+<ion-app>
+  <ion-content class="ion-padding">
+    <h1>Main Content</h1>
+  </ion-content>
+
+  <ion-footer>
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</ion-app>
+```
+
+### Header and Footer
+
+These can also be combined on one page to have a toolbar above _and_ below the content.
+
+```html
+<ion-app>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content class="ion-padding">
+    <h1>Main Content</h1>
+  </ion-content>
+
+  <ion-footer>
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</ion-app>
+```
+
+### Live examples
+
+You can view a live example of this setup in Angular [here](https://stackblitz.com/edit/ionic-ng-header-footer) and in React [here](https://stackblitz.com/edit/ionic-react-head-foot).
+
+## Tabs Layout
+
+A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using an `ion-router-outlet` or `ion-nav`.
+
+```html
+<ion-app>
+  <ion-tabs>
+    <ion-tab tab="home">
+      <h1>Home Content</h1>
+    </ion-tab>
+    <ion-tab tab="settings">
+      <h1>Settings Content</h1>
+    </ion-tab>
+
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="home">
+        <ion-label>Home</ion-label>
+        <ion-icon name="home"></ion-icon>
+      </ion-tab-button>
+      <ion-tab-button tab="settings">
+        <ion-label>Settings</ion-label>
+        <ion-icon name="settings"></ion-icon>
+      </ion-tab-button>
+    </ion-tab-bar>
+  </ion-tabs>
+</ion-app>
+```
+
+### Live examples
+
+You can view a live example of this setup in Angular [here](https://stackblitz.com/edit/ionic-ng-tabs) and in React [here](https://stackblitz.com/edit/ionic-react-tab-layout).
+
+## Menu Layout
+
+A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
+
+```html
+<ion-app>
+  <ion-menu content-id="main-content">
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-list-header> Navigate </ion-list-header>
+        <ion-menu-toggle auto-hide="false">
+          <ion-item button>
+            <ion-icon slot="start" name="home"></ion-icon>
+            <ion-label> Home </ion-label>
+          </ion-item>
+        </ion-menu-toggle>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
+  <ion-page class="ion-page" id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-toggle>
+            <ion-button>
+              <ion-icon slot="icon-only" name="menu"></ion-icon>
+            </ion-button>
+          </ion-menu-toggle>
+        </ion-buttons>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Main Content</h1>
+      <p>Click the icon in the top left to toggle the menu.</p>
+    </ion-content>
+  </ion-page>
+</ion-app>
+
+<ion-menu-controller></ion-menu-controller>
+```
+
+### Live examples
+
+You can view a live example of this setup in Angular [here](https://stackblitz.com/edit/ionic-ng-menu-layout) and in React [here](https://stackblitz.com/edit/ionic-react-menu).
+
+## Split Pane Layout
+
+A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
+
+By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `sm` screens and up, or when the viewport is larger than `576px`. By resizing the browser horizontally so that the app is smaller than this, the split pane view will disappear.
+
+```html
+<ion-app>
+  <ion-split-pane when="sm" content-id="main-content">
+    <ion-menu content-id="main-content">
+      <ion-header>
+        <ion-toolbar color="primary">
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-list-header> Navigate </ion-list-header>
+          <ion-menu-toggle auto-hide="false">
+            <ion-item button>
+              <ion-icon slot="start" name="home"></ion-icon>
+              <ion-label> Home </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+
+    <div class="ion-page" id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-toggle>
+              <ion-button>
+                <ion-icon slot="icon-only" name="menu"></ion-icon>
+              </ion-button>
+            </ion-menu-toggle>
+          </ion-buttons>
+          <ion-title>Header</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Main Content</h1>
+      </ion-content>
+    </div>
+  </ion-split-pane>
+</ion-app>
+```
+
+It's important to note that the element with the `id` matching the `content-id` specified by the split pane will be the main content that is always visible. This can be any element, including an [ion-nav](../api/nav.md), [ion-router-outlet](../api/router-outlet.md), or an [ion-tabs](../api/tabs.md).
+
+### Live examples
+
+You can view a live example of this setup in Angular [here](https://stackblitz.com/edit/ionic-ng-split-pane) and in React [here](https://stackblitz.com/edit/ionic-react-split-pane).
diff --git a/versioned_docs/version-v6/native-community.md b/versioned_docs/version-v6/native-community.md
new file mode 100644
index 00000000000..0bd759f18e8
--- /dev/null
+++ b/versioned_docs/version-v6/native-community.md
@@ -0,0 +1,200 @@
+---
+title: Cordova Community Plugins
+sidebar_label: Setup
+hide_table_of_contents: true
+slug: /native/community
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>Cordova Plugins | Cordova Community Core Plugins for Ionic Apps</title>
+  <meta
+    name="description"
+    content="For the Cordova user community, our collection of TypeScript wrappers for open source Cordova core plugins easily add native functionality to any Ionic app."
+  />
+</head>
+
+[Apache Cordova](https://cordova.apache.org/) is an open source native runtime that allows developers to build native mobile apps with HTML, CSS, and JavaScript. Similar to [Capacitor](https://capacitorjs.com/), Ionic’s own native runtime, Cordova allows developers to access native device features, such as camera, keyboard, and geolocation, using a system of plugins. A plugin is a small amount of add-on code that provides JavaScript interface to native components. They allow your app to use native device capabilities beyond what is available to pure web apps.
+
+For developers using Ionic with Cordova, our team has developed a collection of TypeScript wrappers for open source Cordova plugins that make it easy to add native functionality to any Ionic app. See [Ionic Native](https://github.com/ionic-team/ionic-native).
+
+These plugins are submitted and maintained by the Ionic community. While community members are generally quick to find and fix issues, certain plugins may not function properly.
+
+For professional developers and teams that require dedicated native plugin support & SLAs, ongoing maintenance, and security patches, please explore our [premium options](https://ionicframework.com/native), including plugin support and pre-built solutions for common native use cases.
+
+<intro-end />
+
+:::note
+These docs are for apps built with Ionic Framework 4.0.0 and greater. For older Ionic v3 projects, please [see here](https://ionicframework.com/docs/v3/native).
+:::
+
+## Capacitor Support
+
+In addition to Cordova, Ionic Native also works with [Capacitor](https://capacitorjs.com), Ionic's official native runtime. Basic usage below. For complete details, [see the Capacitor documentation](https://capacitorjs.com/docs/cordova/using-cordova-plugins).
+
+## Usage
+
+All plugins have two components - the native code (Cordova) and the TypeScript code (Ionic Native).
+Cordova plugins are also wrapped in a `Promise` or `Observable` in order to provide a common plugin interface and modernized development approach.
+
+Using the [Camera plugin](native/camera.md) as an example, first install it:
+
+````mdx-code-block
+<Tabs
+  groupId="runtime"
+  defaultValue="cordova"
+  values={[
+    { value: 'cordova', label: 'Cordova' },
+    { value: 'capacitor', label: 'Capacitor' },
+  ]
+}>
+<TabItem value="cordova">
+
+```shell
+// Install Cordova plugin
+$ ionic cordova plugin add cordova-plugin-camera
+
+// Install Ionic Native TypeScript wrapper
+$ npm install @awesome-cordova-plugins/camera
+
+// Install Ionic Native core library (once per project)
+$ npm install @awesome-cordova-plugins/core
+```
+
+</TabItem>
+<TabItem value="capacitor">
+
+For complete details, [see the Capacitor documentation](https://capacitorjs.com/docs/cordova/using-cordova-plugins).
+
+```shell
+// Install Ionic Native TypeScript wrapper
+$ npm install @awesome-cordova-plugins/camera
+
+// Install Cordova plugin
+$ npm install cordova-plugin-camera
+
+// Update native platform project(s) to include newly added plugin
+$ ionic cap sync
+```
+
+</TabItem>
+</Tabs>
+````
+
+Next, begin using the plugin, following the various framework usage options below. For FAQ, see [here](native-faq.md).
+
+## Angular
+
+Angular apps can use either Cordova or Capacitor to build native mobile apps. Import the plugin in a `@NgModule` and add it to the list of Providers. For Angular, the import path should end with `/ngx`. Angular's change detection is automatically handled.
+
+```tsx
+// app.module.ts
+import { Camera } from '@awesome-cordova-plugins/camera/ngx';
+
+...
+
+@NgModule({
+  ...
+
+  providers: [
+    ...
+    Camera
+    ...
+  ]
+  ...
+})
+export class AppModule { }
+```
+
+After the plugin has been declared, it can be imported and injected like any other service:
+
+```tsx
+// camera.service.ts
+import { Injectable } from '@angular/core';
+import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PhotoService {
+  constructor(private camera: Camera) {}
+
+  takePicture() {
+    const options: CameraOptions = {
+      quality: 100,
+      destinationType: this.camera.DestinationType.DATA_URL,
+      encodingType: this.camera.EncodingType.JPEG,
+      mediaType: this.camera.MediaType.PICTURE,
+    };
+
+    this.camera.getPicture(options).then(
+      (imageData) => {
+        // Do something with the new photo
+      },
+      (err) => {
+        // Handle error
+        console.log('Camera issue: ' + err);
+      }
+    );
+  }
+}
+```
+
+## React
+
+React apps must use Capacitor to build native mobile apps. However, Ionic Native (and therefore, Cordova plugins) can still be used.
+
+```shell-session
+// Install Core library (once per project)
+$ npm install @awesome-cordova-plugins/core
+
+// Install Ionic Native TypeScript wrapper
+$ npm install @awesome-cordova-plugins/barcode-scanner
+
+// Install Cordova plugin
+$ npm install phonegap-plugin-barcodescanner
+
+// Update native platform project(s) to include newly added plugin
+$ ionic cap sync
+```
+
+Import the plugin object then use its static methods:
+
+```tsx
+import { BarcodeScanner } from '@awesome-cordova-plugins/barcode-scanner';
+
+const Tab1: React.FC = () => {
+  const openScanner = async () => {
+    const data = await BarcodeScanner.scan();
+    console.log(`Barcode data: ${data.text}`);
+  };
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Tab 1</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonButton onClick={openScanner}>Scan barcode</IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
+```
+
+## Vanilla JavaScript
+
+Vanilla JavaScript apps, targeting ES2015+ and/or TypeScript, can use either Cordova or Capacitor to build native mobile apps. To use any plugin, import the class from the appropriate package and use its static methods:
+
+```js
+import { Camera } from '@awesome-cordova-plugins/camera';
+
+document.addEventListener('deviceready', () => {
+  Camera.getPicture()
+    .then((data) => console.log('Took a picture!', data))
+    .catch((e) => console.log('Error occurred while taking a picture', e));
+});
+```
diff --git a/versioned_docs/version-v6/native-faq.md b/versioned_docs/version-v6/native-faq.md
new file mode 100644
index 00000000000..80cb5b1ae89
--- /dev/null
+++ b/versioned_docs/version-v6/native-faq.md
@@ -0,0 +1,85 @@
+---
+sidebar_label: FAQ
+slug: /native/faq
+---
+
+# Ionic Native FAQ
+
+## Cordova Management Tips
+
+**1) Use the [Ionic CLI](cli.md) to add/update/delete plugins.**
+
+Instead of directly editing `config.xml` and `package.json`. Use `ionic` in front of Cordova commands for a better experience and additional functionality (`ionic cordova build ios` instead of `cordova build ios`).
+
+**2) Upgrade plugins by removing, then re-adding them.**
+
+```shell
+$ ionic cordova plugin remove cordova-plugin-camera
+$ ionic cordova plugin add cordova-plugin-camera
+```
+
+**3) Install explicit versions.**
+
+To ensure that the same version of a plugin is always installed via `npm install`, specify the version number:
+
+```shell
+ionic cordova plugin add cordova-plugin-camera@4.3.2
+```
+
+**4) Restore Cordova in an existing Ionic project**
+
+Useful when adding new developers to a project. `ionic cordova prepare` restores platforms and plugins from `package.json` and `config.xml`. The version to be installed is taken from `package.json` or `config.xml`, if found in those files. In case of conflicts, `package.json` is given precedence over `config.xml`.
+
+**5) Troubleshoot Cordova issues with Ionic CLI commands**
+
+- `ionic doctor list`: Detects [common issues](cli/commands/doctor-list.md) and suggests steps to fix them
+- `ionic repair`: Remove, then [regenerate](cli/commands/repair.md) all dependencies
+
+## Understanding Version Numbers
+
+For any given Ionic Native plugin, the Ionic Native (TypeScript code) and Cordova (native code) version numbers will not match. The Ionic Native version number is found in `package.json`:
+
+```json
+"@awesome-cordova-plugins/camera": "^5.3.0",
+```
+
+The Cordova plugin version number is found in both `package.json` and `config.xml`:
+
+```json
+"cordova-plugin-camera": "4.0.3",
+```
+
+```xml
+<plugin name="cordova-plugin-camera" spec="4.0.3" />
+```
+
+When checking for new native functionality or bug fixes, look for new versions on the Cordova plugin GitHub page itself (here's the [Camera one](https://github.com/apache/cordova-plugin-camera), for example).
+
+To check for new Ionic Native releases (may include exposing methods recently added by the Cordova plugin, etc.), see [here](https://github.com/ionic-team/ionic-native/releases).
+
+## Troubleshooting Failed Builds
+
+Research the build error(s) by checking out these resources:
+
+- Google & [StackOverflow](https://stackoverflow.com): Many issues are documented online
+- Ask the [Ionic Community Ionic Forum](https://forum.ionicframework.com) (see the Ionic Native category)
+- See the Ionic Customer Success [Knowledge Base](https://ionic.zendesk.com)
+
+### Cordova Plugin Conflicts
+
+Plugins can conflict with each other when they share the same underlying native dependencies or when more than one plugin tries to access the same native code at once. For example, common libraries like the Google Play Services version (Google Maps is using GPS v24.2 but Firebase wants GPS v27.1). Keeping these plugins updated regularly can help with this.
+
+Another tip is to ensure that your app uses only one plugin per specific feature/functionality (example: Push Notifications).
+
+## Recommended Upgrade Strategy
+
+The most Ionic stable apps are routinely updated, especially at the native layer. Keeping native plugins up to date ensures your project has the latest security fixes, new features, and improved performance.
+
+Update your project's plugins one at a time, ideally in separate code branches. This reduces the surface area that issues can arise from - if you update everything in your project at once, it's sometimes hard to tell where the problem stems from.
+
+### When should I update?
+
+- When a new feature/bug is released: Run `npm outdated` to see a list of available updates.
+- When new major versions are released: Official blogs, such as the [Cordova blog](https://cordova.apache.org/blog/) and [Ionic blog](https://ionicframework.com/blog/), will publish announcements and news.
+- Evaluate the nature of the update: is it a shiny new feature or critical security fix?
+- Timing: Where does it fit in against your team's project goals?
diff --git a/versioned_docs/version-v6/native.md b/versioned_docs/version-v6/native.md
new file mode 100644
index 00000000000..1c5efecb489
--- /dev/null
+++ b/versioned_docs/version-v6/native.md
@@ -0,0 +1,53 @@
+---
+title: Native APIs
+hide_table_of_contents: true
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard';
+
+<head>
+  <title>Native APIs: Open-Source Native Device Plugins and Integrations</title>
+  <meta
+    name="description"
+    content="Build native-powered app experiences with Native APIs. Ionic's open-source plugins and integrations make it easy to add native device functionality to any app."
+  />
+  <style>{`
+    :root {
+      --doc-item-container-width: 60rem;
+    }
+  `}</style>
+</head>
+
+Build native-powered app experiences with a collection of open source and premium plugins and integrations that make it easy to add native device functionality to any Ionic app with Capacitor or Cordova.
+
+<intro-end />
+
+:::note
+
+[Read about the changes](https://ionicframework.com/blog/a-new-chapter-for-ionic-native/) coming to the Ionic Native project.
+
+:::
+
+<DocsCards>
+  <DocsCard header="Capacitor plugins" img="/img/native/capacitor@2x.png" href="https://capacitorjs.com/docs/plugins">
+    <p>
+      A modern, open source native runtime built and maintained by the Ionic team and the Capacitor community. Our
+      recommended native solution.
+    </p>
+  </DocsCard>
+  <DocsCard header="Cordova plugins" img="/img/native/cordova@2x.png" href="/native/community">
+    <p>
+      A collection of free Cordova plugins, built and maintained by the community, with TypeScript wrappers and a
+      consistent API and naming convention.
+    </p>
+  </DocsCard>
+</DocsCards>
+
+<NativeEnterpriseCard />
+
+:::note
+These docs are for apps built with Ionic Framework 4.0.0 and greater. For older Ionic v3 projects, please [see here](https://ionicframework.com/docs/v3/native/).
+:::
diff --git a/versioned_docs/version-v6/native/.gitignore b/versioned_docs/version-v6/native/.gitignore
new file mode 100644
index 00000000000..d6b7ef32c84
--- /dev/null
+++ b/versioned_docs/version-v6/native/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/versioned_docs/version-v6/react.md b/versioned_docs/version-v6/react.md
new file mode 100644
index 00000000000..01dfbeddfd8
--- /dev/null
+++ b/versioned_docs/version-v6/react.md
@@ -0,0 +1,147 @@
+---
+title: Ionic React
+sidebar_label: Overview
+hide_title: true
+hide_table_of_contents: true
+---
+
+import PageStyles from '@components/page/react/PageStyles';
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+<head>
+  <title>Create an Ionic React App: Framework and Documentation</title>
+  <meta
+    name="description"
+    content="One codebase, any platform, just React. View our documentation for creating apps with Ionic React—the native React version of Ionic Framework's open-source SDK."
+  />
+</head>
+
+<PageStyles>
+
+<div class='flex main-flex'>
+  <div class="pull-left">
+  <h1>One Codebase <br/> Any Platform <br/> <strong>Just React</strong></h1>
+
+- ✓ 100+ mobile optimized React UI components
+- ✓ Standard React tooling with react-dom
+- ✓ iOS / Android / Electron / PWA
+
+[Get Started](#installation)
+
+  </div>
+
+  <div class="pull-right">
+  <img src={require('@site/static/img/frameworks/react-logo.png').default} />
+  </div>
+</div>
+
+### Build awesome apps across mobile, desktop, and web, with the React you know and love.
+
+Ionic React is native React version of Ionic Framework, the free, open source SDK powering millions of mission-critical apps all over the world.
+
+It's everything you need to ship award-winning apps for any platform, with React.
+
+<div class="flex" >
+
+<div class="pull-left">
+
+## Amazing Design
+
+Choose from over 100 beautiful, mobile-ready UI components, animations, and gestures, lightweight and customized to fit your brand.
+
+[Explore UI components](/docs/components)
+
+</div>
+
+<div class="pull-right">
+  <img src="/docs/icons/feature-guide-components-icon.png" />
+</div>
+
+</div>
+
+<div class="flex reverse" >
+
+<div class="pull-left">
+
+## Familiar tooling
+
+Ionic React projects are just like React projects, leveraging [react-dom](https://reactjs.org/docs/react-dom.html) and with setup normally found in a [Create React App (CRA)](https://github.com/facebook/create-react-app) app. For [routing and navigation](/docs/react/navigation), React Router is used under the hood.
+Compatible with React version 16.8 and above.
+
+</div>
+
+<div class="pull-right">
+  <img src={require('@site/static/img/frameworks/react-cli.png').default} class="cli" />
+</div>
+
+</div>
+
+<div class="flex">
+
+<div class="pull-left">
+
+## More than mobile
+
+Deploy your Ionic React projects to native iOS, Android, Electron, and the web as a Progressive Web App, using [Capacitor](https://capacitorjs.com), a modern native runtime. All with one shared codebase.
+
+</div>
+
+<div class="pull-right">
+  <img src={require('@site/static/img/native-platforms/group-shot.png').default} />
+</div>
+
+</div>
+
+<div class="flex reverse">
+
+  <div class="pull-left">
+
+## Just React
+
+At the end of the day, it's just React. Ionic React uses open web standards and built-in browser capabilities, so it's compatible with any of the millions of web libraries out there.
+
+  </div>
+
+<div class="pull-right">
+  <img src={require('@site/static/img/frameworks/react.svg').default} />
+</div>
+
+</div>
+
+## Installation
+
+```shell-session
+$ npm install -g @ionic/cli
+$ ionic start myApp tabs --type react
+
+$ ionic serve █
+```
+
+## Resources
+
+<DocsCards>
+  <DocsCard header="Getting Started" href="react/your-first-app" icon="/icons/feature-component-actionsheet-icon.png">
+    <p>Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.</p>
+  </DocsCard>
+
+<DocsCard
+  header="Add Ionic to Existing React App"
+  href="https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib"
+  icon="/icons/logo-react-icon.png"
+>
+  <p>Use individual components or the complete app experience.</p>
+</DocsCard>
+
+<DocsCard header="Navigation" href="react/navigation" icon="/icons/feature-component-navigation-icon.png">
+  <p>Learn the basics of navigation inside your app with Ionic and React Router</p>
+</DocsCard>
+
+<DocsCard header="Lifecycle" href="react/lifecycle" icon="/icons/feature-guide-components-icon.png">
+  <p>Learn about using Ionic lifecycle events in class components and with hooks</p>
+</DocsCard>
+
+</DocsCards>
+
+</PageStyles>
diff --git a/versioned_docs/version-v6/react/config.md b/versioned_docs/version-v6/react/config.md
new file mode 100644
index 00000000000..6df438834cb
--- /dev/null
+++ b/versioned_docs/version-v6/react/config.md
@@ -0,0 +1,116 @@
+# Config
+
+Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more.
+
+## Global Config
+
+To override the initial Ionic config for the app, import the `setupIonicReact` function from `@ionic/react`, and call it before you render any Ionic components (including `IonApp`).
+
+```tsx
+setupIonicReact({
+  rippleEffect: false,
+  mode: 'md',
+});
+```
+
+In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design.
+
+## Per-Platform Config
+
+Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.
+
+In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
+The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values.
+
+```tsx
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+setupIonicReact({
+  animated: !isPlatform('mobileweb'),
+});
+```
+
+The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
+
+```tsx
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      backButtonText: 'Previous',
+      tabButtonLayout: 'label-hide',
+    };
+  }
+
+  return {
+    menuIcon: 'ellipsis-vertical',
+  };
+};
+
+setupIonicReact(getConfig());
+```
+
+Finally, this example allows you to accumulate a config object based upon different platform requirements:
+
+```tsx
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+const getConfig = () => {
+  let config = {
+    animated: false,
+  };
+
+  if (isPlatform('iphone')) {
+    config = {
+      ...config,
+      backButtonText: 'Previous',
+    };
+  }
+
+  return config;
+};
+setupIonicReact(getConfig());
+```
+
+## Interfaces
+
+### IonicConfig
+
+Below are the config options that Ionic uses.
+
+| Config                   | Type                                                                            | Description                                                                                              |
+| ------------------------ | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `actionSheetEnter`       | `AnimationBuilder`                                                              | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation".        |
+| `actionSheetLeave`       | `AnimationBuilder`                                                              | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation".        |
+| `alertEnter`             | `AnimationBuilder`                                                              | Provides a custom enter animation for all `ion-alert`, overriding the default "animation".               |
+| `alertLeave`             | `AnimationBuilder`                                                              | Provides a custom leave animation for all `ion-alert`, overriding the default "animation".               |
+| `animated`               | `boolean`                                                                       | If `true`, Ionic will enable all animations and transitions across the app.                              |
+| `backButtonDefaultHref`  | `string`                                                                        | Overrides the default value for the `defaultHref` property in all `<ion-back-button>` components.        |
+| `backButtonIcon`         | `string`                                                                        | Overrides the default icon in all `<ion-back-button>` components.                                        |
+| `backButtonText`         | `string`                                                                        | Overrides the default text in all `<ion-back-button>` components.                                        |
+| `hardwareBackButton`     | `boolean`                                                                       | If `true`, Ionic will respond to the hardware back button in an Android device.                          |
+| `infiniteLoadingSpinner` | `SpinnerTypes`                                                                  | Overrides the default spinner type in all `<ion-infinite-scroll-content>` components.                    |
+| `loadingEnter`           | `AnimationBuilder`                                                              | Provides a custom enter animation for all `ion-loading`, overriding the default "animation".             |
+| `loadingLeave`           | `AnimationBuilder`                                                              | Provides a custom leave animation for all `ion-loading`, overriding the default "animation".             |
+| `loadingSpinner`         | `SpinnerTypes`                                                                  | Overrides the default spinner for all `ion-loading` overlays.                                            |
+| `menuIcon`               | `string`                                                                        | Overrides the default icon in all `<ion-menu-button>` components.                                        |
+| `menuType`               | `string`                                                                        | Overrides the default menu type for all `<ion-menu>` components.                                         |
+| `modalEnter`             | `AnimationBuilder`                                                              | Provides a custom enter animation for all `ion-modal`, overriding the default "animation".               |
+| `modalLeave`             | `AnimationBuilder`                                                              | Provides a custom leave animation for all `ion-modal`, overriding the default "animation".               |
+| `mode`                   | `Mode`                                                                          | The mode determines which platform styles to use for the whole application.                              |
+| `navAnimation`           | `AnimationBuilder`                                                              | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. |
+| `pickerEnter`            | `AnimationBuilder`                                                              | Provides a custom enter animation for all `ion-picker`, overriding the default "animation".              |
+| `pickerLeave`            | `AnimationBuilder`                                                              | Provides a custom leave animation for all `ion-picker`, overriding the default "animation".              |
+| `platform`               | [`PlatformConfig`](/docs/react/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods.                                                        |
+| `popoverEnter`           | `AnimationBuilder`                                                              | Provides a custom enter animation for all `ion-popover`, overriding the default "animation".             |
+| `popoverLeave`           | `AnimationBuilder`                                                              | Provides a custom leave animation for all `ion-popover`, overriding the default "animation".             |
+| `refreshingIcon`         | `string`                                                                        | Overrides the default icon in all `<ion-refresh-content>` components.                                    |
+| `refreshingSpinner`      | `SpinnerTypes`                                                                  | Overrides the default spinner type in all `<ion-refresh-content>` components.                            |
+| `sanitizerEnabled`       | `boolean`                                                                       | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML.      |
+| `spinner`                | `SpinnerTypes`                                                                  | Overrides the default spinner in all `<ion-spinner>` components.                                         |
+| `statusTap`              | `boolean`                                                                       | If `true`, clicking or tapping the status bar will cause the content to scroll to the top.               |
+| `swipeBackEnabled`       | `boolean`                                                                       | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application.                      |
+| `tabButtonLayout`        | `TabButtonLayout`                                                               | Overrides the default "layout" of all `ion-bar-button` across the whole application.                     |
+| `toastEnter`             | `AnimationBuilder`                                                              | Provides a custom enter animation for all `ion-toast`, overriding the default "animation".               |
+| `toastLeave`             | `AnimationBuilder`                                                              | Provides a custom leave animation for all `ion-toast`, overriding the default "animation".               |
diff --git a/versioned_docs/version-v6/react/lifecycle.md b/versioned_docs/version-v6/react/lifecycle.md
new file mode 100644
index 00000000000..13458ad97ba
--- /dev/null
+++ b/versioned_docs/version-v6/react/lifecycle.md
@@ -0,0 +1,145 @@
+---
+title: React Lifecycle
+sidebar_label: Lifecycle
+---
+
+<head>
+  <title>React Lifecycle: A Guide to Ionic React App Component Lifecycles</title>
+  <meta
+    name="description"
+    content="The React Lifecycle guide discusses how to use the Ionic Lifecycle events in an Ionic React application. Read to learn more about React component lifecycles."
+  />
+</head>
+
+This guide discusses how to use the Ionic Lifecycle events in an Ionic React application.
+
+## Ionic Lifecycle Methods
+
+Ionic provides a few lifecycle methods that you can use in your apps:
+
+| Event Name         | Description                                                        |
+| ------------------ | ------------------------------------------------------------------ |
+| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. |
+| `ionViewDidEnter`  | Fired when the component routing to has finished animating.        |
+| `ionViewWillLeave` | Fired when the component routing from is about to animate.         |
+| `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
+
+The way you access these methods varies based on if you are using class-based components or functional components. We cover both methods below.
+
+## Lifecycle Methods in Class-Based Components
+
+to use the Ionic Lifecycle methods in a class-based component, you must wrap your component with the `withIonLifeCycle` higher order component (HOC) like so:
+
+```tsx
+export default withIonLifeCycle(HomePage);
+```
+
+:::note
+`withIonLifeCycle` is imported from `@ionic/react`
+:::
+
+You can then create the appropriate lifecycle method on your class component, and the HOC calls that method when the event happens. Below is the entire component with each of the lifecycle methods implemented:
+
+```tsx
+import React from 'react';
+import { IonHeader, IonPage, IonToolbar, IonTitle, IonContent, withIonLifeCycle } from '@ionic/react';
+
+class HomePage extends React.Component {
+  ionViewWillEnter() {
+    console.log('ionViewWillEnter event fired');
+  }
+
+  ionViewWillLeave() {
+    console.log('ionViewWillLeave event fired');
+  }
+
+  ionViewDidEnter() {
+    console.log('ionViewDidEnter event fired');
+  }
+
+  ionViewDidLeave() {
+    console.log('ionViewDidLeave event fired');
+  }
+
+  render() {
+    return (
+      <IonPage>
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Home</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent></IonContent>
+      </IonPage>
+    );
+  }
+}
+
+export default withIonLifeCycle(HomePage);
+```
+
+## Lifecycle Methods in Functional Components
+
+Ionic React exports hooks for each of the lifecycle methods that you can use in your functional components. Each of the hooks takes the method you want called when the event fires.
+
+```tsx
+import {
+  IonContent,
+  IonHeader,
+  IonTitle,
+  IonToolbar,
+  useIonViewDidEnter,
+  useIonViewDidLeave,
+  useIonViewWillEnter,
+  useIonViewWillLeave,
+} from '@ionic/react';
+import React from 'react';
+
+const HomePage: React.FC = () => {
+  useIonViewDidEnter(() => {
+    console.log('ionViewDidEnter event fired');
+  });
+
+  useIonViewDidLeave(() => {
+    console.log('ionViewDidLeave event fired');
+  });
+
+  useIonViewWillEnter(() => {
+    console.log('ionViewWillEnter event fired');
+  });
+
+  useIonViewWillLeave(() => {
+    console.log('ionViewWillLeave event fired');
+  });
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Home</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent></IonContent>
+    </IonPage>
+  );
+};
+
+export default HomePage;
+```
+
+:::note
+Functional components don't need to be wrapped with the `withIonLifeCycle` HOC as class components do.
+:::
+
+## React LifeCycle Methods
+
+All the lifecycle methods in React (`componentDidMount`, `componentWillUnmount`, etc..) are available for you to use as well. However, since Ionic React manages the lifetime of a page, certain events might not fire when you expect them to. For instance, `componentDidMount` fires the first time a page is displayed, but if you navigate away from the page Ionic might keep the page around in the DOM, and a subsequent visit to the page might not call `componentDidMount` again. This scenario is the main reason the Ionic lifecycle methods exist, to still give you a way to call logic when views enter and exit when the native framework's events might not fire.
+
+## Guidance for Each LifeCycle Method
+
+Below are some tips on use cases for each of the life cycle events.
+
+- `ionViewWillEnter` - Since `ionViewWillEnter` is called every time the view is navigated to (regardless if initialized or not), it's a good method to load data from services.
+- `ionViewDidEnter` - If you see performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible to the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete.
+- `ionViewWillLeave` - Can be used for cleanup, like unsubscribing from data sources. Since `componentWillUnmount` might not fire when you navigate from the current page, put your cleanup code here if you don't want it active while the screen is not in view.
+- `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here.
diff --git a/versioned_docs/version-v6/react/navigation.md b/versioned_docs/version-v6/react/navigation.md
new file mode 100644
index 00000000000..234ff8e27b2
--- /dev/null
+++ b/versioned_docs/version-v6/react/navigation.md
@@ -0,0 +1,600 @@
+---
+title: React Navigation
+sidebar_label: Navigation/Routing
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+<head>
+  <title>React Navigation: Router Link Redirect to Navigate to Another Page</title>
+  <meta
+    name="description"
+    content="The React Navigation guide covers routing in an app built with Ionic and React. Learn to define a redirect path for router links to navigate to another page."
+  />
+</head>
+
+This guide covers how routing works in an app built with Ionic and React.
+
+`IonReactRouter` uses the popular [React Router](https://github.com/ReactTraining/react-router) library under the hood. With Ionic and React Router, you can create multi-page apps with rich page transitions.
+
+Everything you know about routing using React Router carries over into Ionic React. Let's take a look at the basics of an Ionic React app and how routing works with it.
+
+## Routing in Ionic React
+
+Here is a sample `App` component that defines a single route to the "/dashboard" URL. When you visit "/dashboard", the route renders the `DashboardPage` component.
+
+**App.tsx**
+
+```tsx
+const App: React.FC = () => (
+  <IonApp>
+    <IonReactRouter>
+      <IonRouterOutlet>
+        <Route path="/dashboard" component={DashboardPage} />
+        <Redirect exact from="/" to="/dashboard" />
+      </IonRouterOutlet>
+    </IonReactRouter>
+  </IonApp>
+);
+```
+
+Directly after the `Route`, we define our default `Redirect`, which, when a user visits the root URL of the app ("/"), it redirects them to the "/dashboard" URL.
+
+The redirect also has the `exact` prop set, which means the URL has to match the `from` prop (or the `path` prop if `exact` was used on a `Route`) precisely for this route to be a match. Without it, this redirect would render for every route, since every route begins with "/".
+
+You can also programmatically redirect from a Route's render method based on a condition, like checking if a user is authed or not:
+
+```tsx
+<Route
+  exact
+  path="/dashboard"
+  render={(props) => {
+    return isAuthed ? <DashboardPage {...props} /> : <LoginPage />;
+  }}
+/>
+```
+
+## IonReactRouter
+
+The `IonReactRouter` component wraps the traditional [`BrowserRouter`](https://reacttraining.com/react-router/web/api/BrowserRouter) component from React Router, and sets the app up for routing. Therefore, use `IonReactRouter` in place of `BrowserRouter`. You can pass in any props to `IonReactRouter` and they will be passed down to the underlying `BrowserRouter`.
+
+## Nested Routes
+
+Inside the Dashboard page, we define more routes related to this specific section of the app:
+
+**DashboardPage.tsx**
+
+```tsx
+const DashboardPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonRouterOutlet>
+        <Route exact path="/dashboard" component={UsersListPage} />
+        <Route path="/dashboard/users/:id" component={UserDetailPage} />
+      </IonRouterOutlet>
+    </IonPage>
+  );
+};
+```
+
+Here, there are a couple more routes defined to point to pages from within the dashboard portion of the app. Note, that we need to define the whole route in the path, and we can't leave off "/dashboard" even though we arrived to this page from that URL. React Router requires full paths, and relative paths are not supported.
+
+However, we can use the [`match`](https://reacttraining.com/react-router/web/api/match) objects `url` property to provide the URL that was matched to render a component, which helps when working with nested routes:
+
+```tsx
+const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
+  return (
+    <IonPage>
+      <IonRouterOutlet>
+        <Route exact path={match.url} component={UsersListPage} />
+        <Route path={`${match.url}/users/:id`} component={UserDetailPage} />
+      </IonRouterOutlet>
+    </IonPage>
+  );
+};
+```
+
+Here, `match.url` contains the value of "/dashboard", since that was the URL used to render the `DashboardPage`.
+
+These routes are grouped in an `IonRouterOutlet`, let's discuss that next.
+
+## IonRouterOutlet
+
+The `IonRouterOutlet` component provides a container for Routes that render Ionic "pages". When a page is in an `IonRouterOutlet`, the container controls the transition animation between the pages as well as controls when a page is created and destroyed, which helps maintain the state between the views when switching back and forth between them.
+
+The `DashboardPage` above shows a users list page and a details page. When navigating between the two pages, the `IonRouterOutlet` provides the appropriate platform page transition and keeps the state of the previous page intact so that when a user navigates back to the list page, it appears in the same state as when it left.
+
+An `IonRouterOutlet` should only contain `Route`s or `Redirect`s. Any other component should be rendered either as a result of a `Route` or outside of the `IonRouterOutlet`.
+
+## Fallback Route
+
+A common routing use case is to provide a "fallback" route to be rendered in the event the location navigated to does not match any of the routes defined.
+
+We can define a fallback route by placing a `Route` component without a `path` property as the last route defined within an `IonRouterOutlet`.
+
+**DashboardPage.tsx**
+
+```tsx
+const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
+  return (
+    <IonRouterOutlet>
+      <Route exact path={match.url} component={UsersListPage} />
+      <Route path={`${match.url}/users/:id`} component={UserDetailPage} />
+      <Route render={() => <Redirect to={match.url} />} />
+    </IonRouterOutlet>
+  );
+};
+```
+
+Here, we see that in the event a location does not match the first two `Route`s the `IonRouterOutlet` will redirect the Ionic React app to the `match.url` path.
+
+You can alternatively supply a component to render instead of providing a redirect.
+
+```tsx
+const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
+  return (
+    <IonRouterOutlet>
+      <Route exact path={match.url} component={UsersListPage} />
+      <Route path={`${match.url}/users/:id`} component={UserDetailPage} />
+      <Route component={NotFoundPage} />
+    </IonRouterOutlet>
+  );
+};
+```
+
+## IonPage
+
+The `IonPage` component wraps each view in an Ionic React app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
+
+```tsx
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import React from 'react';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Home</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">Hello World</IonContent>
+    </IonPage>
+  );
+};
+export default Home;
+```
+
+## Navigation
+
+There are several options available when routing to different views in an Ionic React app. Here, the `UsersListPage` uses `IonItem`'s `routerLink` prop to specify the route to go to when the item is tapped/clicked:
+
+**UsersListPage.tsx**
+
+```tsx
+const UsersListPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Users</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonList>
+          <IonItem routerLink="/dashboard/users/1">
+            <IonLabel>User 1</IonLabel>
+          </IonItem>
+          <IonItem routerLink="/dashboard/users/2">
+            <IonLabel>User 2</IonLabel>
+          </IonItem>
+        </IonList>
+      </IonContent>
+    </IonPage>
+  );
+};
+```
+
+Other components that have the `routerLink` prop are `IonButton`, `IonCard`, `IonRouterLink`, `IonFabButton`, and `IonItemOption`.
+
+Each of these components also have a `routerDirection` prop to explicitly set the type of page transition to use ("back", "forward", or "none").
+
+Outside of these components that have the `routerLink` prop, you can also use React Routers [`Link`](https://reacttraining.com/react-router/web/api/Link) component to navigate between views:
+
+```html
+<Link to="/dashboard/users/1">User 1</Link>
+```
+
+We recommend using one of the above methods whenever possible for routing. The advantage to these approaches is that they both render an anchor (`<a>`)tag, which is suitable for overall app accessibility.
+
+A programmatic option for navigation is using the [`history`](https://reacttraining.com/react-router/web/api/history) prop that React Router provides to the components it renders via routes.
+
+```tsx
+<IonButton
+  onClick={(e) => {
+    e.preventDefault();
+    history.push('/dashboard/users/1');
+  }}
+>
+  Go to User 1
+</IonButton>
+```
+
+:::note
+`history` is a prop.
+:::
+
+### Navigating using `history.go`
+
+React Router uses the `history` package which has a [history.go](https://github.com/remix-run/history/blob/dev/docs/api-reference.md#history.go) method that allows developers to move forward or backward through the application history. Let's take a look at an example.
+
+Say you have the following application history:
+
+`/pageA` --> `/pageB` --> `/pageC`
+
+If you were to call `router.go(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `router.go(2)`, you would be brought to `/pageC`.
+
+Using `history.go()` in Ionic React is not supported at the moment. Interested in seeing support for this get added to Ionic React? [Let us know on GitHub](https://github.com/ionic-team/ionic-framework/issues/23775)!
+
+## URL Parameters
+
+The second route defined in the Dashboard Page has a URL parameter defined (the ":id" portion in the path). URL parameters are dynamic portions of the `path`, and when the user navigates to a URL such as "/dashboard/users/1", the "1" is saved to a parameter named "id", which can be accessed in the component the route renders. Let's see how that's done.
+
+**UserDetailPage.tsx**
+
+```tsx
+interface UserDetailPageProps
+  extends RouteComponentProps<{
+    id: string;
+  }> {}
+
+const UserDetailPage: React.FC<UserDetailPageProps> = ({ match }) => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>User Detail</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>User {match.params.id}</IonContent>
+    </IonPage>
+  );
+};
+```
+
+The [`match`](https://reacttraining.com/react-router/web/api/match) prop contains information about the matched route, including the URL params. We obtain the `id` param here and display it on the screen.
+
+Note how we use a TypeScript interface to strongly type the props object. The interface gives us type safety and code completion inside of the component.
+
+## Linear Routing versus Non-Linear Routing
+
+### Linear Routing
+
+If you have built a web app that uses routing, you likely have used linear routing before. Linear routing means that you can move forward or backward through the application history by pushing and popping pages.
+
+The following is an example of linear routing in a mobile app:
+
+<video
+  style={{
+    'margin': '40px auto',
+    'display': 'flex'
+  }}
+  width="400"
+  src={useBaseUrl('video/linear-routing-demo.mp4')} 
+  controls
+></video>
+
+The application history in this example has the following path:
+
+`Accessibility` --> `VoiceOver` --> `Speech`
+
+When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors.
+
+The downside of linear routing is that it does not allow for complex user experiences such as tab views. This is where non-linear routing comes into play.
+
+### Non-Linear Routing
+
+Non-linear routing is a concept that may be new to many web developers learning to build mobile apps with Ionic.
+
+Non-linear routing means that the view that the user should go back to is not necessarily the previous view that was displayed on the screen.
+
+The following is an example of non-linear routing:
+
+<video
+  style={{
+    'margin': '40px auto',
+    'display': 'flex'
+  }}
+  width="400"
+  src={useBaseUrl('video/non-linear-routing-demo.mp4')} 
+  controls
+></video>
+
+In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab.
+
+From here, we switch to the `Search` tab. Then, we tap the `Originals` tab again and are brought back to the `Ted Lasso` view. At this point, we have started using non-linear routing.
+
+Why is this non-linear routing? The previous view we were on was the `Search` view. However, pressing the back button on the `Ted Lasso` view should bring us back to the root `Originals` view. This happens because each tab in a mobile app is treated as its own stack. The [Working with Tabs](#working-with-tabs) sections goes over this in more detail.
+
+If tapping the back button simply called `history.go(-1)` from the `Ted Lasso` view, we would be brought back to the `Search` view which is not correct.
+
+Non-linear routing allows for sophisticated user flows that linear routing cannot handle. However, certain linear routing APIs such as `history.go()` cannot be used in this non-linear environment. This means that `history.go()` should not be used when using tabs or nested outlets.
+
+### Which one should I choose?
+
+We recommend keeping your application as simple as possible until you need to add non-linear routing. Non-linear routing is very powerful, but it also adds a considerable amount of complexity to mobile applications.
+
+The two most common uses of non-linear routing is with tabs and nested `IonRouterOutlets`. We recommend only using non-linear routing if your application meets the tabs or nested router outlet use cases.
+
+For more on tabs, please see [Working with Tabs](#working-with-tabs).
+
+For more on nested router outlets, please see [Nested Routes](#nested-routes).
+
+## Shared URLs versus Nested Routes
+
+A common point of confusion when setting up routing is deciding between shared URLs or nested routes. This part of the guide will explain both and help you decide which one to use.
+
+### Shared URLs
+
+Shared URLs is a route configuration where routes have pieces of the URL in common. The following is an example of a shared URL configuration:
+
+```tsx
+const App: React.FC = () => {
+  <IonApp>
+    <IonReactRouter>
+      <IonRouterOutlet>
+        <Route path="/dashboard" exact={true}>
+          <DashboardMainPage />
+        </Route>
+        <Route path="/dashboard/stats" exact={true}>
+          <DashboardStatsPage />
+        </Route>
+      </IonRouterOutlet>
+    </IonReactRouter>
+  </IonApp>
+}
+```
+
+The above routes are considered "shared" because they reuse the `dashboard` piece of the URL.
+
+### Nested Routes
+
+Nested Routes is a route configuration where routes are listed as children of other routes. The following is an example of a nested route configuration:
+
+```tsx
+const App: React.FC = () => (
+  <IonApp>
+    <IonReactRouter>
+      <IonRouterOutlet>
+        <Route path="/dashboard/:id">
+          <DashboardRouterOutlet />
+        </Route>
+      </IonRouterOutlet>
+    </IonReactRouter>
+  </IonApp>
+)
+
+const DashboardRouterOutlet: React.FC = () => (
+  <IonRouterOutlet>
+    <Route path="/dashboard" exact={true}>
+      <DashboardMainPage />
+    </Route>
+    <Route path="/dashboard/stats" exact={true}>
+      <DashboardStatsPage />
+    </Route>
+  </IonRouterOutlet>
+)
+```
+
+The above routes are nested because they are in the `children` array of the parent route. Notice that the parent route renders the `DashboardRouterOutlet` component. When you nest routes, you need to render another instance of `IonRouterOutlet`.
+
+### Which one should I choose?
+
+Shared URLs are great when you want to transition from page A to page B while preserving the relationship between the two pages in the URL. In our previous example, a button on the `/dashboard` page could transition to the `/dashboard/stats` page. The relationship between the two pages is preserved because of a) the page transition and b) the url.
+
+Nested routes should be used when you want to render content in outlet A while also rendering sub-content inside of a nested outlet B. The most common use case you will run into is tabs. When you load up a tabs Ionic starter application, you will see `IonTabBar` and `IonTabs` components rendered in the first `IonRouterOutlet`. The `IonTabs` component renders another `IonRouterOutlet` which is responsible for rendering the contents of each tab.
+
+There are very few use cases in which nested routes make sense in mobile applications. When in doubt, use the shared URL route configuration. We strongly caution against using nested routing in contexts other than tabs as it can quickly make navigating your app confusing.
+
+## Working with Tabs
+
+When working with tabs, Ionic needs a way to know which view belongs to which tab. The `IonTabs` component comes in handy here, but let's look at what the routing setup for this looks like:
+
+```tsx
+<IonApp>
+  <IonReactRouter>
+      <IonRouterOutlet>
+        <Route path="/tabs" render={() => <Tabs />} />
+        <Route exact path="/">
+          <Redirect to="/tabs" />
+        </Route>
+      </IonRouterOutlet>
+    </IonSplitPane>
+  </IonReactRouter>
+</IonApp>
+```
+
+Here, our `tabs` path loads a `Tabs` component. We provide each tab as a route object inside of this component. In this example, we call the path `tabs`, but this can be customized.
+
+Let's start by taking a look at our `Tabs` component:
+
+```tsx
+import { Redirect, Route } from 'react-router-dom';
+import {
+  IonContent,
+  IonIcon,
+  IonLabel,
+  IonRouterOutlet,
+  IonTabBar,
+  IonTabButton,
+  IonTabs
+} from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import { ellipse, square, triangle } from 'ionicons/icons';
+import Tab1 from './pages/Tab1';
+import Tab2 from './pages/Tab2';
+import Tab3 from './pages/Tab3';
+
+const Tabs: React.FC = () => (
+  <IonContent>
+    <IonTabs>
+      <IonRouterOutlet>
+        <Redirect exact path="/tabs" to="/tabs/tab1" />
+        <Route exact path="/tabs/tab1">
+          <Tab1 />
+        </Route>
+        <Route exact path="/tabs/tab2">
+          <Tab2 />
+        </Route>
+        <Route path="/tabs/tab3">
+          <Tab3 />
+        </Route>
+        <Route exact path="/tabs">
+          <Redirect to="/tabs/tab1" />
+        </Route>
+      </IonRouterOutlet>
+      <IonTabBar slot="bottom">
+        <IonTabButton tab="tab1" href="/tabs/tab1">
+          <IonIcon icon={triangle} />
+          <IonLabel>Tab 1</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="tab2" href="/tabs/tab2">
+          <IonIcon icon={ellipse} />
+          <IonLabel>Tab 2</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="tab3" href="/tabs/tab3">
+          <IonIcon icon={square} />
+          <IonLabel>Tab 3</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  </IonContent>
+);
+
+export default Tabs;
+```
+
+If you have worked with Ionic Framework before, this should feel familiar. We create an `IonTabs` component and provide an `IonTabBar`. The `IonTabBar` provides `IonTabButton` components, each with a `tab` property that is associated with its corresponding tab in the router config. We also provide an `IonRouterOutlet` to give `IonTabs` an outlet to render the different tab views in.
+
+### How Tabs in Ionic Work
+
+Each tab in Ionic is treated as an individual navigation stack. This means if you have three tabs in your application, each tab has its own navigation stack. Within each stack you can navigate forwards (push a view) and backwards (pop a view).
+
+This behavior is important to note as it is different than most tab implementations that are found in other web based UI libraries. Other libraries typically manage tabs as one single history stack.
+ 
+Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations you have seen in other UI libraries. Read on to learn more about some of these differences.
+
+### Child Routes within Tabs
+
+When adding additional routes to tabs you should write them as sibling routes with the parent tab as the path prefix. The example below defines the `/tabs/tab1/view` route as a sibling of the `/tabs/tab1` route. Since this new route has the `tab1` prefix, it will be rendered inside of the `Tabs` component, and Tab 1 will still be selected in the `IonTabBar`.
+
+```tsx
+<IonTabs>
+  <IonRouterOutlet>
+    <Redirect exact path="/tabs" to="/tabs/tab1" />
+    <Route exact path="/tabs/tab1">
+      <Tab1 />
+    </Route>
+    <Route exact path="/tabs/tab1/view">
+      <Tab1View />
+    </Route>
+    <Route exact path="/tabs/tab2">
+      <Tab2 />
+    </Route>
+    <Route path="/tabs/tab3">
+      <Tab3 />
+    </Route>
+    <Route exact path="/tabs">
+      <Redirect to="/tabs/tab1" />
+    </Route>
+  </IonRouterOutlet>
+  <IonTabBar slot="bottom">
+    <IonTabButton tab="tab1" href="/tabs/tab1">
+      <IonIcon icon={triangle} />
+      <IonLabel>Tab 1</IonLabel>
+    </IonTabButton>
+    <IonTabButton tab="tab2" href="/tabs/tab2">
+      <IonIcon icon={ellipse} />
+      <IonLabel>Tab 2</IonLabel>
+    </IonTabButton>
+    <IonTabButton tab="tab3" href="/tabs/tab3">
+      <IonIcon icon={square} />
+      <IonLabel>Tab 3</IonLabel>
+    </IonTabButton>
+  </IonTabBar>
+</IonTabs>
+```
+
+### Switching Between Tabs
+
+Since each tab is its own navigation stack, it is important to note that these navigation stacks should never interact. This means that there should never be a button in Tab 1 that routes a user to Tab 2. In other words, tabs should only be changed by the user tapping a tab button in the tab bar.
+
+A good example of this in practice is the iOS App Store and Google Play Store mobile applications. These apps both provide tabbed interfaces, but neither one ever routes the user across tabs. For example, the "Games" tab in the iOS App Store app never directs users to the "Search" tab and vice versa.
+
+Let's take a look at a couple common mistakes that are made with tabs.
+
+**A Settings Tab That Multiple Tabs Reference**
+
+A common practice is to create a Settings view as its own tab. This is great if developers need to present several nested settings menus. However, other tabs should never try to route to the Settings tab. As we mentioned above, the only way that the Settings tab should be activated is by a user tapping the appropriate tab button.
+
+If you find that your tabs need to reference the Settings tab, we recommend making the Settings view a modal by using `ion-modal`. This is a practice found in the iOS App Store app. With this approach, any tab can present the modal without breaking the mobile tabs pattern of each tab being its own stack.
+
+The example below shows how the iOS App Store app handles presenting an "Account" view from multiple tabs. By presenting the "Account" view in a modal, the app can work within the mobile tabs best practices to show the same view across multiple tabs.
+
+<video
+  style={{
+    'margin': '40px auto',
+    'display': 'flex'
+  }}
+  width="400"
+  src={useBaseUrl('video/tabs-account-demo.mp4')} 
+  controls
+></video>
+
+**Reusing Views Across Tabs**
+
+Another common practice is to present the same view in multiple tabs. Developers often try to do this by having the view contained in a single tab, with other tabs routing to that tab. As we mentioned above, this breaks the mobile tabs pattern and should be avoided.
+
+Instead, we recommend having routes in each tab that reference the same component. This is a practice done in popular apps like Spotify. For example, you can access an album or podcast from the "Home", "Search", and "Your Library" tabs. When accessing the album or podcast, users stay within that tab. The app does this by creating routes per tab and sharing a common component in the codebase.
+
+The example below shows how the Spotify app reuses the same album component to show content in multiple tabs. Notice that each screenshot shows the same album but from a different tab.
+
+| Home Tab | Search Tab |
+| :------: | :--------: |
+| <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |
+
+## Live Example
+
+If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-react-routing?file=src/index.tsx) of the topics above on StackBlitz.
+
+### IonRouterOutlet in a Tabs View
+
+When working in a tabs view, Ionic React needs a way to determine what views belong to which tabs. We accomplish this by taking advantage of the fact that the paths provided to a `Route` are regular expressions.
+
+While the syntax looks a bit strange, it is reasonably straightforward once you understand it.
+
+For example, the routes for a view with two tabs (sessions and speakers) can be set up as such:
+
+```tsx
+<IonRouterOutlet>
+  <Route path="/:tab(sessions)" component={SessionsPage} exact={true} />
+  <Route path="/:tab(sessions)/:id" component={SessionDetail} />
+  <Route path="/:tab(speakers)" component={SpeakerList} exact={true} />
+</IonRouterOutlet>
+```
+
+If the navigated URL were "/sessions", it would match the first route and add a URL parameter named "tab" with the value of "sessions" to the resulting `match` object passed into `SessionsPage`.
+
+When a user navigates to a session detail page ("/sessions/1" for instance), the second route adds a URL parameter named "tab" with a value of "sessions". When `IonRouterOutlet` sees that both pages are in the same "sessions" tab, it provides an animated page transition to the new view. If a user navigates to a new tab ("speakers" in this case), `IonRouterOutlet` knows not to provide the animation.
+
+### Switches in IonRouterOutlet
+
+Since `IonRouterOutlet` takes over the job in determining which routes get rendered, using a `Switch` from React Router has no effect when used inside of an `IonRouterOutlet`. Switches still function as expected when used outside an `IonRouterOutlet`.
+
+## More Information
+
+For more info on routing in React using React Router, check out their docs at [https://reacttraining.com/react-router/web](https://reacttraining.com/react-router/web).
+
+## From the Community
+
+[Ionic 4 and React: Navigation](https://alligator.io/ionic/ionic-4-react-navigation) - Paul Halliday
diff --git a/versioned_docs/version-v6/react/overlays.md b/versioned_docs/version-v6/react/overlays.md
new file mode 100644
index 00000000000..d7285f1e7d9
--- /dev/null
+++ b/versioned_docs/version-v6/react/overlays.md
@@ -0,0 +1,91 @@
+---
+sidebar_label: Overlays
+---
+
+# Using Overlay Components in React
+
+For Ionic React, there are two techniques you can use to display overlay components like modals, alerts, action sheets, etc. In this guide, we will go over both of them.
+
+## Overlay Hooks
+
+Starting in Ionic React 5.6, we introduced new React hooks you can use to control displaying and dismissing overlays. These hooks provide a programmatic way of controlling the overlays, as well as a way to use overlays outside of your Ionic Page without the need of a state management system.
+
+To use one of the overlay hooks, you import the hook for the overlay you want to use from `@ionic/react`. For example, if we want to use the Alert overlay, we import `useIonAlert`:
+
+```tsx
+import { useIonAlert } from '@ionic/react';
+```
+
+The hooks return an array, where the first item in the array is the method to present the hook, and the second is the method to dismiss the hook:
+
+```tsx
+const [showAlert, hideAlert] = useIonAlert();
+```
+
+:::note
+Overlays often dismiss themselves when the user is done interacting with them, so you might not need to use dismiss/hide method.
+:::
+
+To display the overlay, you use the present method, which we destructured to the name `showAlert`. The method takes in a set of parameters that vary depending on each overlay, but generally, they can either take in a simple set of common parameters or an object to specify additional options.
+
+```tsx
+showAlert('Hello!', [{ text: 'Ok' }]);
+```
+
+For `useIonAlert`, the first parameter is the message to display, and the second is an array of `AlertButtons` to customize the buttons the alert will show.
+
+Alternatively, you can pass in an AlertOptions config object to provide additional parameters, such as a CSS class to add to the markup, a header for the alert, and a callback that gets called when the alert is dismissed:
+
+```tsx
+showAlert({
+  cssClass: 'my-css',
+  header: 'Alert',
+  message: 'Hello!',
+  buttons: ['Cancel', { text: 'Ok', handler: (d) => console.log('ok pressed') }],
+  onDidDismiss: (e) => console.log('alert dismiss'),
+});
+```
+
+Overlay hooks that display additional custom components as part of their markup, such as [modals](https://ionicframework.com/docs/api/modal) and [popovers](https://ionicframework.com/docs/api/popover), take in a couple of additional parameters when initializing their hooks. The first parameter is the component you want your overlay to display, and the second is an object of additional props you want to pass into the component when it gets constructed:
+
+```tsx
+const [present, dismiss] = useIonModal(({ name }) => <div>Hello {name}.</div>, {
+  name: 'Dave',
+});
+```
+
+## Overlay Components
+
+Overlays can also be displayed by using components from `@ionic/react`. The components take a `isOpen` prop that you provide to control if the overlay is currently being displayed or not. When `isOpen` switches from true to false (and vise versa), Ionic will open/close the overlay with the appropriate animation. You can also supply any other additional config options as props to the overlay:
+
+```tsx
+<IonAlert isOpen={showAlert} message="Hello!" buttons={[{ text: 'Ok' }]} onDidDismiss={() => setShowAlert(false)} />
+```
+
+Above, the `showAlert` boolean is a piece of state provided from your application.
+
+When the overlay is dismissed, it is important to tie into the `onDidDismiss` callback and set your state variable to indicate that the overlay is no longer presenting. Ionic React looks for changes to the `isOpen` prop to determine if the overlay should be displayed or not.
+
+For overlays that display custom components, such as [modals](https://ionicframework.com/docs/api/modal) and [popovers](https://ionicframework.com/docs/api/popover), you provide the component as a child to the overlay component:
+
+```tsx
+<IonModal isOpen={showModal}>
+  <div>Hello!</div>
+</IonModal>
+```
+
+:::note
+The Overlay Components are still a valid way of displaying overlays and are in no way a deprecated method. Use whichever method best fits your application.
+:::
+
+## Docs for Overlays in Ionic
+
+For full docs and to see usage examples for both the hook and component approach, visit the docs page for each of the overlays in Ionic:
+
+- [Action Sheet](https://ionicframework.com/docs/api/action-sheet)
+- [Alert](https://ionicframework.com/docs/api/alert)
+- [Loading](https://ionicframework.com/docs/api/loading)
+- [Modal](https://ionicframework.com/docs/api/modal)
+- [Picker](https://ionicframework.com/docs/api/picker)
+- [Popover](https://ionicframework.com/docs/api/popover)
+- [Toast](https://ionicframework.com/docs/api/toast)
diff --git a/versioned_docs/version-v6/react/overview.md b/versioned_docs/version-v6/react/overview.md
new file mode 100644
index 00000000000..142018460bf
--- /dev/null
+++ b/versioned_docs/version-v6/react/overview.md
@@ -0,0 +1,45 @@
+# Ionic React Overview
+
+`@ionic/react` combines the core Ionic experience with the tooling and APIs that are tailored to React Developers.
+
+:::note
+The first official version of Ionic React is v4.11.
+:::
+
+First, install the Ionic CLI:
+
+```shell
+npm install -g @ionic/cli
+```
+
+then run:
+
+```shell
+ionic start myAppName
+```
+
+The CLI will guide you through the setup process by asking a couple of questions, including the framework to use (React, of course!) and the starter code template.
+
+After the app has been created, launch the app:
+
+```shell
+ionic serve
+```
+
+Now, start building out the app using some of the [Ionic UI components](../components.md).
+
+## React Version Support
+
+Compatible with React version 16.8 and above.
+
+## React Tooling
+
+Ionic React projects are just like React projects, leveraging [react-dom](https://reactjs.org/docs/react-dom.html) and with setup normally found in a [Create React App (CRA)](https://github.com/facebook/create-react-app) app. For [routing and navigation](navigation.md), React Router is used under the hood.
+
+One difference is the usage of [TypeScript](http://www.typescriptlang.org/), which provides a more productive experience. To use plain JavaScript, rename files to use a `.js` extension then remove any of the type annotations with each file.
+
+## Native Tooling
+
+[Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic React` web app run natively on iOS, Android, Electron, and the web.
+
+While there are no known technical limitations to using `Ionic React` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic React` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova).
diff --git a/versioned_docs/version-v6/react/performance.md b/versioned_docs/version-v6/react/performance.md
new file mode 100644
index 00000000000..ab4b90e2648
--- /dev/null
+++ b/versioned_docs/version-v6/react/performance.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: Performance
+title: React Performance
+---
+
+<head>
+  <title>React Performance Testing - Using Loops with Ionic App Components</title>
+  <meta
+    name="description"
+    content="React performance testing for Ionic apps. When using loops with Ionic components, we recommend using React's key attribute. Read to learn more."
+  />
+</head>
+
+## Loops with Ionic Components
+
+When using loops with Ionic components, we recommend using React's `key` attribute. This allows React to re-render loop elements in an efficient way by only updating the content inside of the component rather than re-creating the component altogether.
+
+By using `key` you can provide a stable identity for each loop element so React can track insertions and deletions within the iterator. Below is an example of how to use `key`:
+
+**MyComponent.tsx**
+
+```tsx
+import React, { useState } from 'react';
+import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/react';
+
+export const MyComponent: React.FC = () => {
+  const [items, setItems] = useState([{ id: 0, value: 'Item 0' }, { id: 1, value: 'Item 1' }, ...]);
+
+  return (
+    <IonPage>
+      <IonContent>
+        {items.map(item => {
+          return (
+            <IonItem key={item.id}>
+              <IonLabel>{item.value}</IonLabel>
+            </IonItem>
+          )
+        })}
+      </IonContent>
+    </IonPage>
+  )
+}
+```
+
+In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using the `key` attribute, we pass the `item.id` for each object. This `id` is used to provide a stable identity for each loop element.
+
+For more information on how React renders lists using `key` see: https://reactjs.org/docs/lists-and-keys.html
diff --git a/versioned_docs/version-v6/react/platform.md b/versioned_docs/version-v6/react/platform.md
new file mode 100644
index 00000000000..a58735d8609
--- /dev/null
+++ b/versioned_docs/version-v6/react/platform.md
@@ -0,0 +1,83 @@
+# Platform
+
+## isPlatform
+
+The `isPlatform` method can be used to test if your app is running on a certain platform:
+
+```tsx
+import { isPlatform } from '@ionic/react';
+
+isPlatform('ios'); // returns true when running on a iOS device
+```
+
+Depending on the platform the user is on, isPlatform(platformName) will return true or false. Note that the same app can return true for more than one platform name. For example, an app running from an iPad would return true for the platform names: mobile, ios, ipad, and tablet. Additionally, if the app was running from Cordova then cordova would be true.
+
+## getPlatforms
+
+The `getPlatforms` method can be used to determine which platforms your app is currently running on.
+
+```tsx
+import { getPlatforms } from '@ionic/react';
+
+getPlatforms(); // returns ["iphone", "ios", "mobile", "mobileweb"] from an iPhone
+```
+
+Depending on what device you are on, `getPlatforms` can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return mobile, ios, and iphone.
+
+## Platforms
+
+Below is a table listing all the possible platform values along with corresponding descriptions.
+
+| Platform Name | Description                              |
+| ------------- | ---------------------------------------- |
+| android       | a device running Android                 |
+| capacitor     | a device running Capacitor               |
+| cordova       | a device running Cordova                 |
+| desktop       | a desktop device                         |
+| electron      | a desktop device running Electron        |
+| hybrid        | a device running Capacitor or Cordova    |
+| ios           | a device running iOS                     |
+| ipad          | an iPad device                           |
+| iphone        | an iPhone device                         |
+| mobile        | a mobile device                          |
+| mobileweb     | a web browser running in a mobile device |
+| phablet       | a phablet device                         |
+| pwa           | a PWA app                                |
+| tablet        | a tablet device                          |
+
+## Customizing Platform Detection Functions
+
+The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](./config). Each function takes `window` as a parameter and returns a boolean.
+
+```tsx
+setupIonicReact({
+  platform: {
+    /** The default `desktop` function returns false for devices with a touchscreen.
+     * This is not always wanted, so this function tests the User Agent instead.
+     **/
+    desktop: (win) => {
+      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent);
+      return !isMobile;
+    },
+  },
+});
+```
+
+```ts
+type PlatformConfig = {
+  android?: ((win: Window) => boolean) | undefined;
+  capacitor?: ((win: Window) => boolean) | undefined;
+  cordova?: ((win: Window) => boolean) | undefined;
+  desktop?: ((win: Window) => boolean) | undefined;
+  electron?: ((win: Window) => boolean) | undefined;
+  hybrid?: ((win: Window) => boolean) | undefined;
+  ios?: ((win: Window) => boolean) | undefined;
+  ipad?: ((win: Window) => boolean) | undefined;
+  iphone?: ((win: Window) => boolean) | undefined;
+  mobile?: ((win: Window) => boolean) | undefined;
+  mobileweb?: ((win: Window) => boolean) | undefined;
+  phablet?: ((win: Window) => boolean) | undefined;
+  pwa?: ((win: Window) => boolean) | undefined;
+  tablet?: ((win: Window) => boolean) | undefined;
+};
+```
diff --git a/versioned_docs/version-v6/react/pwa.md b/versioned_docs/version-v6/react/pwa.md
new file mode 100644
index 00000000000..24611d1c5ad
--- /dev/null
+++ b/versioned_docs/version-v6/react/pwa.md
@@ -0,0 +1,125 @@
+---
+title: Progressive Web Apps in React
+sidebar_label: Progressive Web Apps
+---
+
+<head>
+  <title>Create Progressive Web Apps (PWA) in React - Ionic Framework</title>
+  <meta
+    name="description"
+    content="Create progressive web apps in React with Ionic. Read our React PWA documentation for information on how to make React PWAs using the Ionic CLI."
+  />
+</head>
+
+## Making your React app a PWA
+
+The two main requirements of a PWA are a <a href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank">Service Worker</a> and a <a href="https://developers.google.com/web/fundamentals/web-app-manifest/" target="_blank">Web Manifest</a>. While it's possible to add both of these to an app manually, a base project from Create React App (CRA) and the Ionic CLI provides this already.
+
+In the `index.ts` for your app, there is a call to a `serviceWorker.unregister()` function. The base that CRA provides has service workers as an opt-in feature, so it must be enabled. To enable, call `serviceWorker.register()`.
+
+```ts
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+// serviceWorker.unregister();
+serviceWorker.register();
+```
+
+Once this package has been added, run `ionic build` and the `build` directory will be ready to deploy as a PWA.
+
+:::note
+By default, react apps package comes with the Ionic logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons.
+:::
+
+:::note
+Features like Service Workers and many JavaScript APIs (such as geolocation) require the app to be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.
+:::
+
+## Service Worker configuration
+
+By default, CRA/React Scripts come with a preconfigured Service Worker setup based on [Workbox's Webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin). This utilises a cache-first strategy, meaning that your app will load from a cache, even if the network returns a newer version of the app.
+
+Because of the nature of CRA/React Scripts, the configuration for this is internal to React Scripts, meaning that it cannot be customized without ejecting from React Scripts. Currently, the Ionic CLI does not support an ejected React App, so if this action is taken, you'll need to use npm/yarn scripts instead of the Ionic CLI.
+
+## Deploying
+
+### Firebase
+
+Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html).
+
+First, if not already available, [create the project](https://console.firebase.google.com) in Firebase.
+
+Next, in a Terminal, install the Firebase CLI:
+
+```shell
+npm install -g firebase-tools
+```
+
+With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts:
+
+**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure and deploy Firebase Hosting sites."
+
+**"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website.
+
+**"What do you want to use as your public directory?"** Enter "build".
+
+:::note
+Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:
+:::
+
+**Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes".
+
+**"File build/index.html already exists. Overwrite?"** Enter "No".
+
+A `firebase.json` config file is generated, configuring the app for deployment.
+
+The last thing needed is to make sure caching headers are being set correctly. To do this, add a `headers` snippet to the `firebase.json` file. The complete `firebase.json` looks like:
+
+```json
+{
+  "hosting": {
+    "public": "build",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ],
+    "headers": [
+      {
+        "source": "/**",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "public, max-age=31536000"
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+For more information about the `firebase.json` properties, see the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json).
+
+Next, build an optimized version of the app by running:
+
+```shell
+ionic build --prod
+```
+
+Last, deploy the app by running:
+
+```shell
+firebase deploy
+```
+
+After this completes, the app will be live.
diff --git a/versioned_docs/version-v6/react/quickstart.md b/versioned_docs/version-v6/react/quickstart.md
new file mode 100644
index 00000000000..a4338661e06
--- /dev/null
+++ b/versioned_docs/version-v6/react/quickstart.md
@@ -0,0 +1,452 @@
+---
+title: Intro Ionic React Quickstart
+sidebar_label: Quickstart
+---
+
+<head>
+  <title>Intro to React Native Quickstart Using Ionic CLI: React Basics</title>
+  <meta
+    name="description"
+    content="Intro to React Native Quickstart covers the basics of React and Ionic, including any Ionic-specific features. Learn how to build React apps using the Ionic CLI."
+  />
+</head>
+
+## What is Ionic Framework?
+
+First off, if you're new here, welcome! Ionic is a free and open source component library for building apps that run on iOS, Android, Electron, and the Web. You write your app once using familiar technologies (HTML, CSS, JavaScript) and deploy to any platform.
+
+Along with the UI components, Ionic also provides a command line tool for creating new apps, as well as deploying to the various platforms we support.
+
+In this guide, we'll go over the basics of both React and Ionic, including any Ionic specific features. If you're familiar with React, enjoy the guide and learn something new about Ionic. If you're not familiar with either, no worries! This guide will cover the basics and provide enough information to get an app up and running.
+
+## Creating a project with the Ionic CLI
+
+To begin, let's install the latest version of the Ionic CLI.
+
+```shell
+npm install -g @ionic/cli
+```
+
+From here, the global command `ionic` will allow for the creation of a React project with Ionic and any other dependencies. To create a new project, run the following command:
+
+```shell
+ionic start myApp blank --type=react
+cd myApp
+```
+
+From here, we run `ionic serve` and have our project running in the browser.
+
+## A look at a React Component
+
+The base of our app will be in the `src` directory, and the main entry point will be our `index.tsx`. If we open our project in a code editor and open `src/index.tsx`, we should see the following:
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+So what's going on here? Well, the first three lines are pulling in some dependencies. The first being React itself. This allows us to write components in an HTML-like syntax called JSX. We'll talk about JSX a bit later on.
+
+The second import is for ReactDOM. The `ReactDOM.render` method is the browser/DOM specific way of taking our components and rendering it to a specified DOM node.
+
+The last import is the root component for our app, simply named `App`. This is our first React component and will be used in the bootstrapping process for our React app.
+
+If we open `App.tsx`, we should see the following.
+
+```tsx
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { IonApp, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import Home from './pages/Home';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+const App: React.FC = () => (
+  <IonApp>
+    <IonReactRouter>
+      <IonRouterOutlet>
+        <Route path="/home" component={Home} exact={true} />
+        <Route exact path="/" render={() => <Redirect to="/home" />} />
+      </IonRouterOutlet>
+    </IonReactRouter>
+  </IonApp>
+);
+```
+
+At first glance, it may look like a lot is going on, so let's break it down, starting with the first group of imports.
+
+```tsx
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { IonApp, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import Home from './pages/Home';
+```
+
+Similar to `index.tsx`, we first must import React to use JSX.
+
+The next import is from `react-router-dom`. We're importing Route, which is how we’ll match the app’s URL with the components we want to render
+
+Following ReactRouter, we next have our first imports for Ionic. To use a component in React, you must first import it. So for Ionic, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our App component, we're only using `IonApp`, `IonRouterOutlet`, and `IonReactRouter`.
+
+`IonReactRouter` is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have a deeper guide that goes over these differences in our [React Navigation Docs](navigation.md).
+
+The last important import is the `Home` component import. This is a component that we will be able to navigate to in our app. We'll look at the navigation part a bit later.
+
+The CSS import is pulling in the utility styles from Ionic for things like padding, typography, etc.
+
+After reviewing all of the imports, we now get to our first look at a React Component:
+
+```tsx
+const App: React.FC = () => (
+  <IonApp>
+    <IonReactRouter>
+      <IonRouterOutlet>
+        <Route path="/home" component={Home} exact={true} />
+        <Route exact path="/" render={() => <Redirect to="/home" />} />
+      </IonRouterOutlet>
+    </IonReactRouter>
+  </IonApp>
+);
+```
+
+This React component sets up the initial routing for our app, as well as include some core Ionic components for animations and layout (IonRouterOutlet and IonApp). One thing that stands out is that in React, to do data-binding, the value is passed in curly braces (`{}`). So in the `Route` component, we can set the value of `component` to the `Home` component from earlier. This is how React will know that that value is not a string, but a reference to a component.
+
+:::note
+What's important to note here is that these are all standard React DOM libraries, meaning there's no custom integration layer or transpilation step.
+:::
+
+## A component with style
+
+Now the `App` does not really have a lot to modify here. It's a basic example of a container component. With the Router logic set, all it's responsible for is to render a component that matches the given URL route. Since we already have one component/router setup, let's go ahead and modify our `Home` component.
+
+Currently, the `Home` component looks like so:
+
+![React home component](/img/guides/react/first-app/home-route.png)
+
+```tsx
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import React from 'react';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Ionic Blank</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        The world is your oyster.
+        <p>
+          If you get lost, the{' '}
+          <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">
+            docs
+          </a>{' '}
+          will be your guide.
+        </p>
+      </IonContent>
+    </IonPage>
+  );
+};
+```
+
+Much like the `App` component we started with, we have some imports for specific Ionic components, an import for React, and then our React component itself.
+
+`IonPage` is the base component for all pages (a component with a route/URL), and includes some common building blocks of a full-screen component, like header, title, and content components.
+
+:::note
+When creating your own pages, don't forget to have `IonPage` be the root component for them. Having `IonPage` be the root component is important because it helps ensure transitions work properly as well as provides the base CSS the Ionic components rely on.
+:::
+
+`IonHeader` is a bit self explanatory. It's a component that is meant to exist at the top of the page. `IonHeader` itself doesn't do much by itself, aside from handling some flexbox-based layout. It's meant to hold other components, like `IonToolbar` or `IonSearchbar`.
+
+`IonContent` is, as its name suggests, the main content area for our page. It's responsible for providing the scrollable content that users will interact with, plus any scroll events that could be used in an app.
+
+Our current content is relatively simple but does not contain anything that could be used in a real app, so let's change that.
+
+:::note
+For brevity, we're excluding repeating part of our component, like the function declaration or import statements for other components.
+:::
+
+```tsx
+<IonPage>
+  ...
+  <IonContent>
+    <IonList>
+      <IonItem>
+        <IonCheckbox slot="start" />
+        <IonLabel>
+          <h1>Create Idea</h1>
+          <IonNote>Run Idea by Brandy</IonNote>
+        </IonLabel>
+        <IonBadge color="success" slot="end">
+          5 Days
+        </IonBadge>
+      </IonItem>
+    </IonList>
+  </IonContent>
+</IonPage>
+```
+
+Here in our `IonContent`, we're adding an `IonList` and a much more involved `IonItem` component. Let's look at `IonItem`, as it's the centerpiece here.
+
+```tsx
+<IonItem>
+  <IonCheckbox slot="start" />
+  <IonLabel>
+    <h1>Create Idea</h1>
+    <IonNote>Run Idea by Brandy</IonNote>
+  </IonLabel>
+  <IonBadge color="success" slot="end">
+    5 Days
+  </IonBadge>
+</IonItem>
+```
+
+Item is important as it clearly shows the mix of React concepts and Web Component concepts. The first clear example of a React concept is self-closing tags for React Components in `IonCheckbox`. This is just a simpler way of writing components that do not contain any child content.
+
+From the Web Components side, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a React API, but a web standards API.
+
+Let's look at another component from Ionic, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we'll need three components: a FAB, a FAB Button, and an Icon.
+
+```tsx
+import { add } from ‘ionicons/icons’;
+…
+
+<IonContent>
+  <IonList>
+  ...
+  </IonList>
+
+  <IonFab vertical="bottom" horizontal="end" slot="fixed">
+    <IonFabButton>
+      <IonIcon icon={add} />
+    </IonFabButton>
+  </IonFab>
+
+</IonContent>
+```
+
+On our main `IonFab`, we're setting its positioning with the vertical and horizontal attributes. We're also setting the render location to "fixed" with the slot attribute. This will tell `IonFab` to render outside of the scrollable content in `IonContent`.
+
+Now let's wire up a click handler to this. What we want to do is when we click the button, we'll navigate to a new page (which we'll create in a moment). To do this, we'll need to get access to React Router's navigation API. Thankfully since this is rendered in a Router/Route context, we have access to React Routers APIs via Props passed to our Home component.
+
+```tsx
+import { add } from 'ionicons/icons';
+...
+const Home: React.FC<RouteComponentProps> = (props) => {
+  return (
+    <IonPage>
+      <IonHeader>...</IonHeader>
+      <IonContent>
+        <IonList>...</IonList>
+        <IonFab vertical="bottom" horizontal="end" slot="fixed">
+          <IonFabButton onClick={() => props.history.push('/new')}>
+            <IonIcon icon={add} />
+          </IonFabButton>
+        </IonFab>
+      </IonContent>
+    </IonPage>
+  );
+}
+export default Home;
+```
+
+In our component declaration, we're passing in `props` which is of type `RouteComponentProps` (imported from `react-router`). This `props` object gives us access to the history API from React Router, allowing us to push a new route onto the navigation stack. On our `IonFabButton`, we can add a click handler, and just call `props.history.push` and pass in the new route. In this case, we'll navigate to `new`.
+
+```tsx
+<IonFabButton onClick={() => props.history.push('/new')} >
+```
+
+## Creating a new Route
+
+Now that we have the pieces in place to navigate in our app, we need to create a new component and add the new route to our router declaration. Let's open our `App.tsx` file and add the new route.
+
+```tsx
+...
+import Home from './pages/Home';
+
+import NewItem from './pages/NewItem';
+...
+const App: React.FC = () => {
+  const isAuthed = true;
+  return (
+    <IonApp>
+      <IonReactRouter>
+        <IonRouterOutlet>
+          <Route path="/home" component={Home} />
+          <Route path="/new" component={NewItem} />
+          <Redirect exact from="/" to="/home" />
+        </IonRouterOutlet>
+      </IonReactRouter>
+    </IonApp>
+  );
+}
+export default App;
+```
+
+With our router now having an entry for the route `/new`, we'll create the component needed, `NewItem`. This will exist in `src/pages/NewItem.tsx`
+
+Let's fill the `NewItem.tsx` with some placeholder content for the moment.
+
+```tsx
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import React from 'react';
+
+const NewItem: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>New Item</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent></IonContent>
+    </IonPage>
+  );
+};
+export default NewItem;
+```
+
+:::note
+Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information.
+:::
+
+The content here is pretty straight forward and should look similar to the `Home` component. What is new is the `IonBackButton` component. This is used to navigate back to the previous route. Pretty straight forward? Ok, but what if we reload the page?
+
+Well, in this case, the in-memory history is lost, so the back button disappears. To address this, we can set the `defaultHref` attribute value to the URL we want to navigate to if there is no history.
+
+```tsx
+return (
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton defaultHref="/home" />
+        </IonButtons>
+        <IonTitle>New Item</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent />
+  </IonPage>
+);
+```
+
+Here, when we reload, if there is no app history present, we'll be able to navigate back to our home route.
+
+## Adding Icons
+
+Ionic React comes with (https://ionic.io/ionicons/) pre-installed. All you need to do is import the icon of your choice from the `ionicons` package, and pass it to an `IonIcon` component through the `icon` prop:
+
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonIcon } from '@ionic/react';
+import { camera } from 'ionicons/icons';
+
+export const IconExample: React.FC = () => {
+  <IonContent>
+    <IonButton>
+      <IonIcon icon={camera} />
+      Take Picture
+    </IonButton>
+  </IonContent>;
+};
+```
+
+Note that for React, we are passing the imported SVG reference, **not** the icon name as a string.
+
+Developers also have the option of setting different icons based upon the mode:
+
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonIcon } from '@ionic/react';
+import { logoAndroid, logoApple } from 'ionicons/icons';
+
+export const IconExample: React.FC = () => {
+  <IonContent>
+    <IonButton>
+      <IonIcon ios={logoApple} md={logoAndroid} />
+    </IonButton>
+  </IonContent>;
+};
+```
+
+## Build a Native App
+
+We now have the basics of an Ionic React app down, including some UI components and navigation. The great thing about Ionic’s components is that they work anywhere, including iOS, Android, and PWAs. To deploy to mobile, desktop, and beyond, we use Ionic’s cross-platform app runtime [Capacitor](https://capacitorjs.com). It provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible while accessing rich native device features on platforms that support them.
+
+Adding native functionality is easy. First, add Capacitor to your project:
+
+```shell
+ionic integrations enable capacitor
+```
+
+Next, build the project, then add your platform of choice:
+
+```shell
+ionic build
+ionic cap add ios
+ionic cap add android
+```
+
+We use the standard native IDEs (Xcode and Android Studio) to open, build, and run the iOS and Android projects:
+
+```shell
+ionic cap open ios
+ionic cap open android
+```
+
+Additional details can be found [here](https://capacitorjs.com/docs/getting-started/with-ionic).
+
+Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are available. There’s some great stuff, including the [Camera API](https://capacitorjs.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
+
+```tsx
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
+import React, { useState } from 'react';
+import { Plugins, CameraResultType } from '@capacitor/core';
+
+const Home: React.FC = () => {
+  const { Camera } = Plugins;
+  const [photo, setPhoto] = useState();
+  const takePhoto = async () => {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri,
+    });
+    setPhoto(image.webPath);
+  };
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Ionic Blank</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <img src={photo} />
+        <IonButton onClick={takePhoto}>Take Photo</IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;
+```
+
+## Where to go from here
+
+This guide covered the basics of creating an Ionic React app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic apps with React and Capacitor, follow our [First App guide](your-first-app.md).
+
+For a more detailed look at Ionic’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on React, review the [React Docs](https://reactjs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/).
+
+Happy app building! 🎉
diff --git a/versioned_docs/version-v6/react/slides.md b/versioned_docs/version-v6/react/slides.md
new file mode 100644
index 00000000000..a04d37459c8
--- /dev/null
+++ b/versioned_docs/version-v6/react/slides.md
@@ -0,0 +1,583 @@
+---
+title: Slides
+---
+
+<head>
+  <title>Set Up Swiper.js for React Slides [Example] | Ionic</title>
+  <meta
+    name="description"
+    content="We recommend Swiper.js if you need a modern touch slider component. Get Swiper for React set up in your application and learn how to migrate from IonSlides."
+  />
+</head>
+
+:::caution Looking for `IonSlides`?
+
+`IonSlides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
+
+:::
+
+We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration.
+
+## Getting Started
+
+First, update to the latest version of Ionic:
+
+```shell
+npm install @ionic/react@latest @ionic/react-router@latest
+```
+
+Once that is done, install the Swiper dependency in your project:
+
+```shell
+npm install swiper
+```
+
+:::note
+Create React App does not support pure ESM packages yet. Developers can still use Swiper, but they will need to use Swiper 7.2.0+ and use direct file imports. This guide assumes you are using Create React App and will show you how to use these direct imports.
+:::
+
+## Swiping with Style
+
+Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `ion-slides`.
+
+We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
+
+```javascript
+import React from 'react';
+import { IonContent, IonPage } from '@ionic/react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/swiper.min.css';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    ...
+  );
+};
+export default Home;
+```
+
+:::note
+
+Not using Create React App? You can import the Swiper CSS from `swiper/css` instead.
+
+:::
+
+### Updating Selectors
+
+Previously, we were able to target `ion-slides` and `ion-slide` to apply any custom styling. The contents of those style blocks remain the same, but we need to update the selectors. Below is a list of selector changes when going from `ion-slides` to Swiper React:
+
+| ion-slides Selector | Swiper Selector |
+| ------------------- | --------------- |
+| `ion-slides`        | `.swiper`       |
+| `ion-slide`         | `.swiper-slide` |
+
+### Pre-processors (optional)
+
+For developers using SCSS or Less styles, Swiper also provides imports for those files.
+
+For Less styles, replace `css` with `less` in the Swiper import path:
+
+```javascript
+import React from 'react';
+import { IonContent, IonPage } from '@ionic/react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/swiper.less';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    ...
+  );
+};
+export default Home;
+```
+
+For SCSS styles replace `css` with `scss` in the Swiper import path:
+
+```javascript
+import React from 'react';
+import { IonContent, IonPage } from '@ionic/react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/swiper.scss';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    ...
+  );
+};
+export default Home;
+```
+
+## Using Components
+
+Swiper exports two components: `Swiper` and `SwiperSlide`. The `Swiper` component is the equivalent of `IonSlides`, and `SwiperSlide` is the equivalent of `IonSlide`.
+
+These components are imported from `swiper/react/swiper-react.js`:
+
+```tsx
+import React from 'react';
+import { IonContent, IonPage } from '@ionic/react';
+import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+
+import 'swiper/swiper.min.css';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent>
+        <Swiper>
+          <SwiperSlide>Slide 1</SwiperSlide>
+          <SwiperSlide>Slide 2</SwiperSlide>
+          <SwiperSlide>Slide 3</SwiperSlide>
+        </Swiper>
+      </IonContent>
+    </IonPage>
+  );
+};
+export default Home;
+```
+
+:::note
+
+Not using Create React App? You can import the Swiper components from `swiper/react` instead.
+
+:::
+
+## Using Modules
+
+By default, Swiper for React does not import any additional modules. To use modules such as Navigation or Pagination, you need to import them first.
+
+`ion-slides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
+
+To begin, we need to import the modules and their corresponding CSS files from the `swiper` package:
+
+```tsx
+import React from 'react';
+import { IonContent, IonPage } from '@ionic/react';
+import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+
+import 'swiper/swiper.min.css';
+import 'swiper/modules/autoplay/autoplay.min.css';
+import 'swiper/modules/keyboard/keyboard.min.css';
+import 'swiper/modules/pagination/pagination.min.css';
+import 'swiper/modules/scrollbar/scrollbar.min.css';
+import 'swiper/modules/zoom/zoom.min.css';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent>
+        <Swiper>
+          <SwiperSlide>Slide 1</SwiperSlide>
+          <SwiperSlide>Slide 2</SwiperSlide>
+          <SwiperSlide>Slide 3</SwiperSlide>
+        </Swiper>
+      </IonContent>
+    </IonPage>
+  );
+};
+export default Home;
+```
+
+:::note
+
+Not using Create React App? You can import these modules from `swiper/css/[MODULE NAME]` instead (i.e. `swiper/css/autoplay`).
+
+:::
+
+From here, we need to provide these modules to Swiper by using the `modules` property on the `Swiper` component:
+
+```tsx
+import React from 'react';
+import { IonContent, IonPage } from '@ionic/react';
+import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+
+import 'swiper/swiper.min.css';
+import 'swiper/modules/autoplay/autoplay.min.css';
+import 'swiper/modules/keyboard/keyboard.min.css';
+import 'swiper/modules/pagination/pagination.min.css';
+import 'swiper/modules/scrollbar/scrollbar.min.css';
+import 'swiper/modules/zoom/zoom.min.css';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent>
+        <Swiper modules={[Autoplay, Keyboard, Pagination, Scrollbar, Zoom]}>
+          <SwiperSlide>Slide 1</SwiperSlide>
+          <SwiperSlide>Slide 2</SwiperSlide>
+          <SwiperSlide>Slide 3</SwiperSlide>
+        </Swiper>
+      </IonContent>
+    </IonPage>
+  );
+};
+export default Home;
+```
+
+Finally, we can turn these features on by using the appropriate properties:
+
+```tsx
+import React from 'react';
+import { IonContent, IonPage } from '@ionic/react';
+import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+
+import 'swiper/swiper.min.css';
+import 'swiper/modules/autoplay/autoplay.min.css';
+import 'swiper/modules/keyboard/keyboard.min.css';
+import 'swiper/modules/pagination/pagination.min.css';
+import 'swiper/modules/scrollbar/scrollbar.min.css';
+import 'swiper/modules/zoom/zoom.min.css';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent>
+        <Swiper
+          modules={[Autoplay, Keyboard, Pagination, Scrollbar, Zoom]}
+          autoplay={true}
+          keyboard={true}
+          pagination={true}
+          scrollbar={true}
+          zoom={true}
+        >
+          <SwiperSlide>Slide 1</SwiperSlide>
+          <SwiperSlide>Slide 2</SwiperSlide>
+          <SwiperSlide>Slide 3</SwiperSlide>
+        </Swiper>
+      </IonContent>
+    </IonPage>
+  );
+};
+export default Home;
+```
+
+:::note
+See <a href="https://swiperjs.com/react#usage" target="_blank" rel="noopener noreferrer">https://swiperjs.com/react#usage</a> for a full list of modules.
+:::
+
+## The IonicSlides Module
+
+With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly.
+
+We can install the `IonicSlides` module by importing it from `@ionic/react` and passing it in as the last item in the `modules` array:
+
+```tsx
+import React from 'react';
+import { IonContent, IonPage, IonicSlides } from '@ionic/react';
+import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+
+import 'swiper/swiper.min.css';
+import 'swiper/modules/autoplay/autoplay.min.css';
+import 'swiper/modules/keyboard/keyboard.min.css';
+import 'swiper/modules/pagination/pagination.min.css';
+import 'swiper/modules/scrollbar/scrollbar.min.css';
+import 'swiper/modules/zoom/zoom.min.css';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent>
+        <Swiper
+          modules={[Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides]}
+          autoplay={true}
+          keyboard={true}
+          pagination={true}
+          scrollbar={true}
+          zoom={true}
+        >
+          <SwiperSlide>Slide 1</SwiperSlide>
+          <SwiperSlide>Slide 2</SwiperSlide>
+          <SwiperSlide>Slide 3</SwiperSlide>
+        </Swiper>
+      </IonContent>
+    </IonPage>
+  );
+};
+export default Home;
+```
+
+:::note
+The `IonicSlides` module must be the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more.
+:::
+
+## Properties
+
+Swiper options are provided as props directly on the `<Swiper>` component rather than via the `options` object in `IonSlides`.
+
+Let's say in an app with `IonSlides` we had the `slidesPerView` and `loop` options set:
+
+```tsx
+const MyComponent: React.FC = () => {
+  return (
+    <IonSlides
+      options={{
+        slidesPerView: 3,
+        loop: true,
+      }}
+    >
+      <IonSlide>Slide 1</IonSlide>
+      <IonSlide>Slide 2</IonSlide>
+      <IonSlide>Slide 3</IonSlide>
+    </IonSlides>
+  );
+};
+```
+
+To migrate, we would move these options out of the `options` object and onto the `<Swiper>` component directly as properties:
+
+```tsx
+const MyComponent: React.FC = () => {
+  return (
+    <Swiper slidesPerView={3} loop={true}>
+      <SwiperSlide>Slide 1</SwiperSlide>
+      <SwiperSlide>Slide 2</SwiperSlide>
+      <SwiperSlide>Slide 3</SwiperSlide>
+    </Swiper>
+  );
+};
+```
+
+Below is a full list of property changes when going from `IonSlides` to Swiper React:
+
+| Name      | Notes                                                                                                                 |
+| --------- | --------------------------------------------------------------------------------------------------------------------- |
+| options   | Set each option as a property directly on the `<Swiper>` component.                                                   |
+| mode      | For different styles based upon the mode, you can target the slides with `.ios .swiper` or `.md .swiper` in your CSS. |
+| pager     | Use the `pagination` property instead. Requires installation of the Pagination module.                                |
+| scrollbar | You can continue to use the `scrollbar` property, just be sure to install the Scrollbar module first.                 |
+
+:::note
+All properties available in Swiper React can be found at <a href="https://swiperjs.com/react#swiper-props" target="_blank" rel="noopener noreferrer">https://swiperjs.com/react#swiper-props</a>.
+:::
+
+## Events
+
+Since the `Swiper` component is not provided by Ionic Framework, event names will not have an `onIonSlide` prefix to them.
+
+Let's say in an app with `IonSlides` we used the `onIonSlideDidChange` event:
+
+```tsx
+const MyComponent: React.FC = () => {
+  return (
+    <IonSlides onIonSlideDidChange={() => onSlideChange()}>
+      <IonSlide>Slide 1</IonSlide>
+      <IonSlide>Slide 2</IonSlide>
+      <IonSlide>Slide 3</IonSlide>
+    </IonSlides>
+  );
+};
+```
+
+To migrate, we would change the name of the event to `onSlideChange`:
+
+```tsx
+const MyComponent: React.FC = () => {
+  return (
+    <Swiper onSlideChange={() => onSlideChange()}>
+      <SwiperSlide>Slide 1</SwiperSlide>
+      <SwiperSlide>Slide 2</SwiperSlide>
+      <SwiperSlide>Slide 3</SwiperSlide>
+    </Swiper>
+  );
+};
+```
+
+Below is a full list of event name changes when going from `IonSlides` to Swiper React:
+
+| IonSlides Event           | Swiper Event                 |
+| ------------------------- | ---------------------------- |
+| onIonSlideWillChange      | onSlideChangeTransitionStart |
+| onIonSlideDidChange       | onSlideChangeTransitionEnd   |
+| onIonSlideDoubleTap       | onDoubleTap                  |
+| onIonSlideDrag            | onSliderMove                 |
+| onIonSlideNextStart       | onSlideNextTransitionStart   |
+| onIonSlideNextEnd         | onSlideNextTransitionEnd     |
+| onIonSlidePrevStart       | onSlidePrevTransitionStart   |
+| onIonSlidePrevEnd         | onSlidePrevTransitionEnd     |
+| onIonSlideReachStart      | onReachBeginning             |
+| onIonSlideReachEnd        | onReachEnd                   |
+| onIonSlideTap             | onTap                        |
+| onIonSlideTouchStart      | onTouchStart                 |
+| onIonSlideTouchEnd        | onTouchEnd                   |
+| onIonSlideTransitionStart | onTransitionStart            |
+| onIonSlideTransitionEnd   | onTransitionEnd              |
+| onIonSlidesDidLoad        | onInit                       |
+
+:::note
+All events available in Swiper React can be found at <a href="https://swiperjs.com/react#swiper-events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/react#swiper-events</a>.
+:::
+
+## Methods
+
+Most methods have been removed in favor of accessing the `Swiper` props directly.
+
+Accessing these properties can be tricky as you want to access the properties on the Swiper instance itself, not your React component. To do this, we recommend getting a reference to the `Swiper` instance via `onSwiper`:
+
+```tsx
+import React, { useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Swiper as SwiperInterface } from 'swiper';
+...
+const Home: React.FC = () => {
+  const [swiperInstance, setSwiperInstance] = useState<SwiperInterface>();
+  return (
+    ...
+    <Swiper
+      onSwiper={(swiper) => setSwiperInstance(swiper)}
+    >
+      ...
+    </Swiper>
+  )
+};
+export default Home;
+```
+
+From here, if you wanted to access a property on the Swiper instance you would access `swiperInstance`. For example, if you wanted to check the `isBeginning` property, you could do: `swiperInstance.isBeginning`. Make sure `swiperInstance` is defined first though!
+
+Below is a full list of method changes when going from `IonSlides` to Swiper React:
+
+| ion-slides Method  | Notes                                                                                |
+| ------------------ | ------------------------------------------------------------------------------------ |
+| getActiveIndex()   | Use the `activeIndex` property instead.                                              |
+| getPreviousIndex() | Use the `previousIndex` property instead.                                            |
+| getSwiper()        | Get a reference to the Swiper instance using `onSwiper`. See example above.          |
+| isBeginning()      | Use the `isBeginning` property instead.                                              |
+| isEnd()            | Use the `isEnd` property instead.                                                    |
+| length()           | Use the `slides` property instead. (i.e swiperRef.slides.length)                     |
+| lockSwipeToNext()  | Use the `allowSlidesNext` property instead.                                          |
+| lockSwipeToPrev()  | Use the `allowSlidePrev` property instead.                                           |
+| lockSwipes()       | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. |
+| startAutoplay()    | Use the `autoplay` property instead.                                                 |
+| stopAutoplay()     | Use the `autoplay` property instead.                                                 |
+
+## Effects
+
+If you are using effects such as Cube or Fade, you can install them just like we did with the other modules. In this example, we will use the fade effect. To start, we will import `EffectFade` from `swiper` and provide it in the `modules` array:
+
+```tsx
+import React from 'react';
+import { IonContent, IonPage, IonicSlides } from '@ionic/react';
+import { EffectFade } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+
+import 'swiper/swiper.min.css';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent>
+        <Swiper modules={[EffectFact, IonicSlides]}>
+          <SwiperSlide>Slide 1</SwiperSlide>
+          <SwiperSlide>Slide 2</SwiperSlide>
+          <SwiperSlide>Slide 3</SwiperSlide>
+        </Swiper>
+      </IonContent>
+    </IonPage>
+  );
+};
+export default Home;
+```
+
+Next, we need to import the stylesheet associated with the effect:
+
+```tsx
+import React from 'react';
+import { IonContent, IonPage, IonicSlides } from '@ionic/react';
+import { EffectFade } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+
+import 'swiper/swiper.min.css';
+import 'swiper/modules/effect-fade/effect-fade.min.css';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent>
+        <Swiper modules={[EffectFact, IonicSlides]}>
+          <SwiperSlide>Slide 1</SwiperSlide>
+          <SwiperSlide>Slide 2</SwiperSlide>
+          <SwiperSlide>Slide 3</SwiperSlide>
+        </Swiper>
+      </IonContent>
+    </IonPage>
+  );
+};
+export default Home;
+```
+
+:::note
+
+Not using Create React App? You can import these effects from `swiper/css/[EFFECT NAME]` instead (i.e. `swiper/css/effect-fade`).
+
+:::
+
+After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`:
+
+```tsx
+import React from 'react';
+import { IonContent, IonPage, IonicSlides } from '@ionic/react';
+import { EffectFade } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+
+import 'swiper/swiper.min.css';
+import 'swiper/modules/effect-fade/effect-fade.min.css';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent>
+        <Swiper modules={[EffectFact, IonicSlides]} swiper="fade">
+          <SwiperSlide>Slide 1</SwiperSlide>
+          <SwiperSlide>Slide 2</SwiperSlide>
+          <SwiperSlide>Slide 3</SwiperSlide>
+        </Swiper>
+      </IonContent>
+    </IonPage>
+  );
+};
+export default Home;
+```
+
+:::note
+For more information on effects in Swiper, please see <a href="https://swiperjs.com/react#effects" target="_blank" rel="noopener noreferrer">https://swiperjs.com/react#effects</a>.
+:::
+
+## Wrap Up
+
+Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the <a href="https://swiperjs.com/react" target="_blank" rel="noopener noreferrer">Swiper React Introduction</a> and then referencing <a href="https://swiperjs.com/swiper-api" target="_blank" rel="noopener noreferrer">the Swiper API docs</a>.
+
+## FAQ
+
+### Where can I find an example of this migration?
+
+You can find a sample app with `ion-slides` and the equivalent Swiper usage at https://github.com/ionic-team/slides-migration-samples.
+
+### Where can I get help with this migration?
+
+If you are running into issues with the migration, please create a post on the [Ionic Forum](https://forum.ionicframework.com/).
+
+### Where do I file bug reports?
+
+Before opening an issue, please consider creating a post on the <a href="https://github.com/nolimits4web/swiper/discussions" target="_blank" rel="noopener noreferrer">Swiper Discussion Board</a> or the <a href="https://forum.ionicframework.com" target="_blank">Ionic Forum</a> to see if your issue can be resolved by the community.
+
+If you are running into problems with the Swiper library, new bugs should be filed on the Swiper repo: <a href="https://github.com/nolimits4web/swiper/issues" target="_blank" rel="noopener noreferrer">https://github.com/nolimits4web/swiper/issues</a>
+
+If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework repo: <a href="https://github.com/ionic-team/ionic-framework/issues" target="_blank" rel="noopener noreferrer">https://github.com/ionic-team/ionic-framework/issues</a>
diff --git a/versioned_docs/version-v6/react/storage.md b/versioned_docs/version-v6/react/storage.md
new file mode 100644
index 00000000000..ea044c7ccc6
--- /dev/null
+++ b/versioned_docs/version-v6/react/storage.md
@@ -0,0 +1,25 @@
+---
+sidebar_label: Storage
+---
+
+# Data Storage
+
+There are variety of options available for storing data within an Ionic app.
+
+Here are two official Ionic options:
+
+## Ionic Secure Storage
+
+For teams building mission-critical apps or requiring encryption support, [Ionic Secure Storage](https://ionic.io/docs/secure-storage) is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android.
+
+It makes it easy to build high performance, offline-ready Ionic apps across iOS, Android, and the web.
+
+[Learn more](https://ionic.io/products/secure-storage)
+
+## @ionic/storage
+
+For developers not requiring encryption nor relational data support, [@ionic/storage](https://github.com/ionic-team/ionic-storage) is an open source key/value API for building apps that work across storage engines on multiple platforms.
+
+Additionally, Ionic Secure Storage has a driver that works with the key/value API in `@ionic/storage` while providing encryption and SQLite support.
+
+Learn more about [@ionic/storage](https://github.com/ionic-team/ionic-storage)
diff --git a/versioned_docs/version-v6/react/testing.md b/versioned_docs/version-v6/react/testing.md
new file mode 100644
index 00000000000..dd1f2d7d308
--- /dev/null
+++ b/versioned_docs/version-v6/react/testing.md
@@ -0,0 +1,7 @@
+---
+sidebar_label: Testing
+---
+
+# Testing Ionic React
+
+When an `@ionic/react` application is generated using the Ionic CLI, it is automatically set up for unit testing and integration testing with [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro). The combo provides a great way to test your React components in isolation as well integrated together. For more information on how to get started testing an Ionic React app, see our article [Testing Ionic React Apps with Jest and React Testing Library](https://ionicframework.com/blog/testing-ionic-react-apps-with-jest-and-react-testing-library/).
diff --git a/versioned_docs/version-v6/react/virtual-scroll.md b/versioned_docs/version-v6/react/virtual-scroll.md
new file mode 100644
index 00000000000..b77bf341b69
--- /dev/null
+++ b/versioned_docs/version-v6/react/virtual-scroll.md
@@ -0,0 +1,76 @@
+# Virtual Scroll
+
+:::caution Looking for `ion-virtual-scroll`?
+
+`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Virtuoso package detailed below.
+
+:::
+
+One virtual scrolling solution to consider for your Ionic React app is [Virtuoso](https://virtuoso.dev/). This guide will go over how to install `Virtuoso` into your Ionic React application and use it with other Ionic components.
+
+## Installation
+
+To setup the virtual scroller, first install `react-virtuoso`:
+
+```shell
+npm install react-virtuoso
+```
+
+## Usage
+
+There are a few components that Virtuoso includes, but this example will use the `Virtuoso` component. This component should be added inside of your `IonContent` component:
+
+```tsx
+import React from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/react';
+const Home: React.FC = () => (
+  <IonPage>
+    <IonContent>
+      <Virtuoso
+        style={{ height: '100%' }}
+        totalCount={100}
+        itemContent={(index) => {
+          return (
+            <div style={{ height: '56px' }}>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <img src="https://picsum.photos/seed/picsum/40/40" />
+                </IonAvatar>
+                <IonLabel>{index}</IonLabel>
+              </IonItem>
+            </div>
+          );
+        }}
+      />
+    </IonContent>
+  </IonPage>
+);
+export default Home;
+```
+
+After adding the `Virtuoso` component to our page, we need to define the size of the virtual scroll container. In this case, we want the container to take up the full height of the screen which we can do by adding `style={{ height: '100%' }}`.
+
+Next, we want to define the total number of items to render via the `totalCount` property.
+
+From there, we can use the `itemContent` property to pass a function that will be called to render each item in our virtual scroll content.
+
+An important thing to note here is the `div` that wraps our `IonItem` component. When lazy loading Ionic components, there may be a few frames where the component is loaded but the styles have not loaded in. When this happens, the component's dimension will be `0`, and Virtuoso may throw an error. This is because Virtuoso needs distinct positions for each item it renders, and it cannot determine that when a component's dimension is `0`.
+
+## Usage with Ionic Components
+
+Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport.
+
+For example:
+
+```tsx
+<IonPage>
+  <IonContent scrollY={false}>
+    <Virtuoso className="ion-content-scroll-host">{/* Your existing content and configurations */}</Virtuoso>
+  </IonContent>
+</IonPage>
+```
+
+## Further Reading
+
+This guide only covers a small portion of what `Virtuoso` is capable of. For more details, please see the [Virtuoso documentation](https://virtuoso.dev/).
diff --git a/versioned_docs/version-v6/react/your-first-app.md b/versioned_docs/version-v6/react/your-first-app.md
new file mode 100644
index 00000000000..188be71df6b
--- /dev/null
+++ b/versioned_docs/version-v6/react/your-first-app.md
@@ -0,0 +1,204 @@
+---
+title: 'Your First Ionic App: React'
+sidebar_label: Build Your First App
+---
+
+<head>
+  <title>React Apps | Build Your First Ionic Framework React Application</title>
+  <meta
+    name="description"
+    content="Build your first Ionic React App. With one codebase, you can build an Ionic Framework application for any platform using just HTML, CSS, and JavaScript."
+  />
+</head>
+
+The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
+
+Here’s the finished app running on all 3 platforms:
+
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+></iframe>
+
+## What We'll Build
+
+We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device.
+
+Highlights include:
+
+- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
+- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
+
+Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-react).
+
+## Download Required Tools
+
+Download and install these right away to ensure an optimal Ionic development experience:
+
+- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
+- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
+- **Command-line interface/terminal (CLI)**:
+  - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell
+    CLI, running in Administrator mode.
+  - **Mac/Linux** users, virtually any terminal will work.
+
+## Install Ionic Tooling
+
+Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens:
+
+:::note
+To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
+:::
+
+```shell
+npm install -g @ionic/cli native-run cordova-res
+```
+
+:::note
+The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
+
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+:::
+
+## Create an App
+
+Next, create an Ionic React app that uses the “Tabs” starter template and adds Capacitor for native functionality:
+
+```shell
+ionic start photo-gallery tabs --type=react --capacitor
+```
+
+This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
+
+Next, change into the app folder:
+
+```shell
+cd photo-gallery
+```
+
+Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
+
+```shell
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
+```
+
+### PWA Elements
+
+Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
+
+It's a separate dependency, so install it next:
+
+```shell
+npm install @ionic/pwa-elements
+```
+
+After installation, open up the project in your code editor of choice.
+
+Next, import `@ionic/pwa-elements` by editing `src/index.tsx`.
+
+```tsx
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
+
+// Call the element loader after the platform has been bootstrapped
+defineCustomElements(window);
+```
+
+That’s it! Now for the fun part - let’s see the app in action.
+
+## Run the App
+
+Run this command in your shell:
+
+```shell
+ionic serve
+```
+
+And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.
+
+## Photo Gallery!!!
+
+There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
+
+![Before and after going through this tutorial](/img/guides/react/first-app/live-reload.gif)
+
+Open `/src/pages/Tab2.tsx`. We see:
+
+```tsx
+<IonPage>
+  <IonHeader>
+    <IonToolbar>
+      <IonTitle>Tab 2</IonTitle>
+    </IonToolbar>
+  </IonHeader>
+  <IonContent>
+  <!-- some filler -->
+  </IonContent>
+</IonPage>
+```
+
+`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:
+
+```tsx
+<IonTitle>Photo Gallery</IonTitle>
+```
+
+We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports at the top of the page to include the Camera icon as well as some of the Ionic components we'll use shortly:
+
+```tsx
+import { camera, trash, close } from 'ionicons/icons';
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  IonFab,
+  IonFabButton,
+  IonIcon,
+  IonGrid,
+  IonRow,
+  IonCol,
+  IonImg,
+  IonActionSheet,
+} from '@ionic/react';
+```
+
+Then, add the FAB to the bottom of the page. Use the camera image as the icon, and call the `takePhoto()` function when this button is clicked (to be implemented soon):
+
+```tsx
+<IonContent>
+  <IonFab vertical="bottom" horizontal="center" slot="fixed">
+    <IonFabButton onClick={() => takePhoto()}>
+      <IonIcon icon={camera}></IonIcon>
+    </IonFabButton>
+  </IonFab>
+</IonContent>
+```
+
+We’ll be creating the `takePhoto` method and the logic to use the Camera and other native features in a moment.
+
+Next, open `src/App.tsx`, remove the `ellipse` icon from the import and import the `images` icon instead:
+
+```tsx
+import { images, square, triangle } from 'ionicons/icons';
+```
+
+Within the tab bar (`<IonTabBar>`), change the label to “Photos” and the `ellipse` icon to `images` for the middle tab button:
+
+```tsx
+<IonTabButton tab="tab2" href="/tab2">
+  <IonIcon icon={images} />
+  <IonLabel>Photos</IonLabel>
+</IonTabButton>
+```
+
+:::note
+In Ionic React, icons are imported individually from `ionicons/icons` and set to the icon prop.
+:::
+
+That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.
diff --git a/versioned_docs/version-v6/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/react/your-first-app/2-taking-photos.md
new file mode 100644
index 00000000000..90c527521bd
--- /dev/null
+++ b/versioned_docs/version-v6/react/your-first-app/2-taking-photos.md
@@ -0,0 +1,146 @@
+---
+title: Taking Photos with the Camera
+sidebar_label: Taking Photos
+---
+
+<head>
+  <title>Take Photos From The Camera on React Apps - Ionic Documentation</title>
+  <meta
+    name="description"
+    content="To take photos from the device's camera on a React app, begin by building it for the web, then make some small tweaks for mobile use on iOS and Android devices."
+  />
+</head>
+
+Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
+
+To do so, we will create our own custom React hook that will manage the photos for the gallery.
+
+:::note
+If you are not familiar with React Hooks, [Introducing React Hooks](https://reactjs.org/docs/hooks-intro.html) from the official React docs is a good resource to start with.
+:::
+
+Create a new file at `src/hooks/usePhotoGallery.ts` and open it up.
+
+A custom hook is just a function that uses other React hooks. And that's what we will be doing! We will start by importing the various hooks and utilities we will be using from React core, the Ionic React Hooks project, and Capacitor:
+
+```tsx
+import { useState, useEffect } from 'react';
+import { isPlatform } from '@ionic/react';
+
+import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
+import { Filesystem, Directory } from '@capacitor/filesystem';
+import { Preferences } from '@capacitor/preferences';
+import { Capacitor } from '@capacitor/core';
+```
+
+Next, create a function named usePhotoGallery:
+
+```tsx
+export function usePhotoGallery() {
+  const takePhoto = async () => {
+    const photo = await Camera.getPhoto({
+      resultType: CameraResultType.Uri,
+      source: CameraSource.Camera,
+      quality: 100,
+    });
+  };
+
+  return {
+    takePhoto,
+  };
+}
+```
+
+Our `usePhotoGallery` hook exposes a method called takePhoto, which in turn calls into Capacitor's getPhoto method.
+
+Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `getPhoto()` - that will open up the device's camera and allow us to take photos.
+
+The last step we need to take is to use the new hook from the Tab2 page. Go back to Tab2.tsx and import the hook:
+
+```tsx
+import { usePhotoGallery } from '../hooks/usePhotoGallery';
+```
+
+And right before the return statement in the functional component, get access to the `takePhoto` method by using the hook:
+
+```tsx
+const Tab2: React.FC = () => {
+  const { takePhoto } = usePhotoGallery();
+
+  // snip - rest of code
+```
+
+Save the file, and if you’re not already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
+
+![Camera API on the web](/img/guides/first-app-cap-ng/camera-web.png)
+
+_(Your selfie is probably much better than mine)_
+
+After taking a photo, it disappears. We still need to display it within our app and save it for future access.
+
+## Displaying Photos
+
+First we will create a new type to define our Photo, which will hold specific metadata. Add the following UserPhoto interface to the `usePhotoGallery.ts` file, somewhere outside of the main function:
+
+```tsx
+export interface UserPhoto {
+  filepath: string;
+  webviewPath?: string;
+}
+```
+
+Back at the top of the function (right after the call to `usePhotoGallery`, we will define a state variable to store the array of each photo captured with the Camera.
+
+```tsx
+const [photos, setPhotos] = useState<UserPhoto[]>([]);
+```
+
+When the camera is done taking a picture, the resulting Photo returned from Capacitor will be stored in the `photo` variable. We want to create a new photo object and add it to the photos state array. We make sure we don't accidently mutate the current photos array by making a new array, and then call `setPhotos` to store the array into state. Update the `takePhoto` method and add this code after the getPhoto call:
+
+```tsx
+const fileName = new Date().getTime() + '.jpeg';
+const newPhotos = [
+  {
+    filepath: fileName,
+    webviewPath: photo.webPath,
+  },
+  ...photos,
+];
+setPhotos(newPhotos);
+```
+
+Next, let's expose the photos array from our hook. Update the return statement to include the photos:
+
+```tsx
+return {
+  photos,
+  takePhoto,
+};
+```
+
+And back in the Tab2 component, get access to the photos:
+
+```tsx
+const { photos, takePhoto } = usePhotoGallery();
+```
+
+With the photo(s) stored into the main array we can display the images on the screen. Add a [Grid component](https://ionicframework.com/docs/api/grid) so that each photo will display nicely as photos are added to the gallery, and loop through each photo in the Photos array, adding an Image component (`<IonImg>`) for each. Point the `src` (source) to the photo’s path:
+
+```tsx
+<IonContent>
+  <IonGrid>
+    <IonRow>
+      {photos.map((photo, index) => (
+        <IonCol size="6" key={index}>
+          <IonImg src={photo.webviewPath} />
+        </IonCol>
+      ))}
+    </IonRow>
+  </IonGrid>
+   <!-- <IonFab> markup  -->
+</IonContent>
+```
+
+Save all files. Within the web browser, click the Camera button and take another photo. This time, the photo is displayed in the Photo Gallery!
+
+Up next, we’ll add support for saving the photos to the filesystem, so they can be retrieved and displayed in our app at a later time.
diff --git a/versioned_docs/version-v6/react/your-first-app/3-saving-photos.md b/versioned_docs/version-v6/react/your-first-app/3-saving-photos.md
new file mode 100644
index 00000000000..cc6224d68a1
--- /dev/null
+++ b/versioned_docs/version-v6/react/your-first-app/3-saving-photos.md
@@ -0,0 +1,81 @@
+---
+sidebar_label: Saving Photos
+---
+
+# Saving Photos to the Filesystem
+
+We’re now able to take multiple photos and display them in a photo gallery on the second tab of our app. These photos, however, are not currently being stored permanently, so when the app is closed, they will be lost.
+
+## Filesystem API
+
+Fortunately, saving them to the filesystem only takes a few steps. Begin by opening the `usePhotoGallery` hook (`src/hooks/usePhotoGallery.ts`), and get access to the `writeFile` method from the `Filesystem` class:
+
+:::note
+We will use the `writeFile` method initially, but we will use the others coming up shortly, so we'll go ahead and import them now.
+:::
+
+Next, create a couple of new functions in `usePhotoGallery`:
+
+```tsx
+export function usePhotoGallery() {
+  const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
+    const base64Data = await base64FromPath(photo.webPath!);
+    const savedFile = await Filesystem.writeFile({
+      path: fileName,
+      data: base64Data,
+      directory: Directory.Data,
+    });
+
+    // Use webPath to display the new image instead of base64 since it's
+    // already loaded into memory
+    return {
+      filepath: fileName,
+      webviewPath: photo.webPath,
+    };
+  };
+}
+
+export async function base64FromPath(path: string): Promise<string> {
+  const response = await fetch(path);
+  const blob = await response.blob();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = reject;
+    reader.onload = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result);
+      } else {
+        reject('method did not return a string');
+      }
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+```
+
+:::note
+The base64FromPath method is a helper util that downloads a file from the supplied path and returns a base64 representation of that file.
+:::
+
+We pass in the `photo` object, which represents the newly captured device photo, as well as the fileName, which will provide a path for the file to be stored to.
+
+Next we use the Capacitor [Filesystem API](https://capacitorjs.com/docs/apis/filesystem) to save the photo to the filesystem. We start by converting the photo to base64 format, then feed the data to the Filesystem’s `writeFile` function.
+
+Last, call `savePicture` and pass in the photo object and filename directly underneath the call to `setPhotos` in the `takePhoto` method. Here is the full method:
+
+```tsx
+const takePhoto = async () => {
+  const photo = await Camera.getPhoto({
+    resultType: CameraResultType.Uri,
+    source: CameraSource.Camera,
+    quality: 100,
+  });
+
+  const fileName = new Date().getTime() + '.jpeg';
+  const savedFileImage = await savePicture(photo, fileName);
+  const newPhotos = [savedFileImage, ...photos];
+  setPhotos(newPhotos);
+};
+```
+
+There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem.
diff --git a/versioned_docs/version-v6/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v6/react/your-first-app/4-loading-photos.md
new file mode 100644
index 00000000000..75c1cb8e901
--- /dev/null
+++ b/versioned_docs/version-v6/react/your-first-app/4-loading-photos.md
@@ -0,0 +1,65 @@
+---
+title: Loading Photos from the Filesystem
+sidebar_label: Loading Photos
+---
+
+<head>
+  <title>Loading Photos from the Filesystem Using A Key-Value Store</title>
+  <meta
+    name="description"
+    content="We’ve implemented photo taking and saving to the filesystem, now learn how Ionic leverages Capacitor Preferences API for loading our photos in a key-value store."
+  />
+</head>
+
+We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
+
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitorjs.com/docs/apis/preferences) to store our array of Photos in a key-value store.
+
+## Preferences API
+
+Begin by defining a constant variable that will act as the key for the store before the `usePhotoGallery` function definition in `src/hooks/usePhotoGallery.ts`:
+
+```tsx
+const PHOTO_STORAGE = 'photos';
+export function usePhotoGallery() {}
+```
+
+Then, use the `Storage` class to get access to the get and set methods for reading and writing to device storage:
+
+At the end of the `takePhoto` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
+
+```tsx
+Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
+```
+
+With the photo array data saved, we will create a method that will retrieve the data when the hook loads. We will do so by using React's `useEffect` hook. Insert this above the `takePhoto` declaration. Here is the code, and we will break it down:
+
+```tsx
+useEffect(() => {
+  const loadSaved = async () => {
+    const { value } = await Preferences.get({ key: PHOTO_STORAGE });
+    const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
+
+    for (let photo of photosInPreferences) {
+      const file = await Filesystem.readFile({
+        path: photo.filepath,
+        directory: Directory.Data,
+      });
+      // Web platform only: Load the photo as base64 data
+      photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
+    }
+    setPhotos(photosInPreferences);
+  };
+  loadSaved();
+}, []);
+```
+
+This seems a bit scary at first, so let's walk through it, first by looking at the second parameter we pass into the hook: the dependency array `[]`.
+
+The useEffect hook, by default, gets called each time a component renders, unless, we pass in a dependency array. In that case, it will only run when a dependency gets updated. In our case we only want it to be called once. By passing in an empty array, which will not be changed, we can prevent the hook from being called multiple times.
+
+The first parameter to `useEffect` is the function that will be called by the effect. We pass in an anonymous arrow function, and inside of it we define another asynchronous method and then immediately call this. We have to call the async function from within the hook as the hook callback can't be asynchronous itself.
+
+On mobile (coming up next!), we can directly set the source of an image tag - `<img src=”x” />` - to each photo file on the Filesystem, displaying them automatically. On the web, however, we must read each image from the Filesystem into base64 format, because the Filesystem API stores them in base64 within [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood.
+
+That’s it! We’ve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, we’ll transform it into a mobile app for iOS and Android!
diff --git a/versioned_docs/version-v6/react/your-first-app/5-adding-mobile.md b/versioned_docs/version-v6/react/your-first-app/5-adding-mobile.md
new file mode 100644
index 00000000000..eef40b7a333
--- /dev/null
+++ b/versioned_docs/version-v6/react/your-first-app/5-adding-mobile.md
@@ -0,0 +1,73 @@
+---
+sidebar_label: Adding Mobile
+---
+
+# Adding Mobile
+
+Our photo gallery app won’t be complete until it runs on iOS, Android, and the web - all using one codebase. All it takes is some small logic changes to support mobile platforms, installing some native tooling, then running the app on a device. Let’s go!
+
+Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
+
+## Platform-specific Logic
+
+First, we’ll update the photo saving functionality to support mobile. In the `savePicture` function, check which platform the app is running on. If it’s “hybrid” (Capacitor or Cordova, the two native runtimes), then read the photo file into base64 format using the `readFile` method. Also, return the complete file path to the photo using the Filesystem API. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc` method ([details here](https://ionicframework.com/docs/core-concepts/webview#file-protocol)). Otherwise, use the same logic as before when running the app on the web.
+
+```tsx
+const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
+  let base64Data: string;
+  // "hybrid" will detect Cordova or Capacitor;
+  if (isPlatform('hybrid')) {
+    const file = await Filesystem.readFile({
+      path: photo.path!,
+    });
+    base64Data = file.data;
+  } else {
+    base64Data = await base64FromPath(photo.webPath!);
+  }
+  const savedFile = await Filesystem.writeFile({
+    path: fileName,
+    data: base64Data,
+    directory: Directory.Data,
+  });
+
+  if (isPlatform('hybrid')) {
+    // Display the new image by rewriting the 'file://' path to HTTP
+    // Details: https://ionicframework.com/docs/building/webview#file-protocol
+    return {
+      filepath: savedFile.uri,
+      webviewPath: Capacitor.convertFileSrc(savedFile.uri),
+    };
+  } else {
+    // Use webPath to display the new image instead of base64 since it's
+    // already loaded into memory
+    return {
+      filepath: fileName,
+      webviewPath: photo.webPath,
+    };
+  }
+};
+```
+
+Next, add a new bit of logic in the `loadSaved` function. On mobile, we can directly point to each photo file on the Filesystem and display them automatically. On the web, however, we must read each image from the Filesystem into base64 format. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Update the `loadSaved` function inside of `useEffect` to:
+
+```tsx
+const loadSaved = async () => {
+  const { value } = await Preferences.get({ key: PHOTO_STORAGE });
+
+  const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
+  // If running on the web...
+  if (!isPlatform('hybrid')) {
+    for (let photo of photosInPreferences) {
+      const file = await Filesystem.readFile({
+        path: photo.filepath,
+        directory: Directory.Data,
+      });
+      // Web platform only: Load the photo as base64 data
+      photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
+    }
+  }
+  setPhotos(photosInPreferences);
+};
+```
+
+Our Photo Gallery now consists of one codebase that runs on the web, Android, and iOS. Next up, the part you’ve been waiting for - deploying the app to a device.
diff --git a/versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md
new file mode 100644
index 00000000000..70b47820eb6
--- /dev/null
+++ b/versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md
@@ -0,0 +1,107 @@
+---
+sidebar_label: Deploying Mobile
+---
+
+# Deploying to iOS and Android
+
+Since we added Capacitor to our project when it was first created, there’s only a handful of steps remaining until the Photo Gallery app is on our device! Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/photo-gallery-capacitor-react).
+
+## Capacitor Setup
+
+Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova).
+
+If you’re still running `ionic serve` in the terminal, cancel it. Complete a fresh build of the Ionic project, fixing any errors that it reports:
+
+```shell
+ionic build
+```
+
+Next, create both the iOS and Android projects:
+
+```shell
+$ ionic cap add ios
+$ ionic cap add android
+```
+
+Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.).
+
+Every time you perform a build (e.g. `ionic build`) that updates your web directory (default: `build`), you'll need to copy those changes into your native projects:
+
+```shell
+ionic cap copy
+```
+
+Note: After making updates to the native portion of the code (such as adding a new plugin), use the `sync` command:
+
+```shell
+ionic cap sync
+```
+
+## iOS
+
+:::note
+To build an iOS app, you’ll need a Mac computer.
+:::
+
+Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by CocoaPods. Before running this app on an iOS device, there's a couple of steps to complete.
+
+First, run the Capacitor `open` command, which opens the native iOS project in Xcode:
+
+```shell
+ionic cap open ios
+```
+
+In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+
+![Xcode Custom iOS Target Properties](/img/guides/first-app-cap-ng/xcode-info-plist.png)
+
+Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
+
+Add the `NSCameraUsageDescription` Key and set the Value to something that describes why the app needs to use the camera, such as "To Take Photos." The Value field is displayed to the app user when the permission prompt opens.
+
+Follow the same process to add the other two Keys required of the Camera plugin: `NSPhotoLibraryAddUsageDescription` and `NSPhotoLibraryUsageDescription`.
+
+Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
+
+![Xcode - Selecting Development Team](/img/guides/first-app-cap-ng/xcode-signing.png)
+
+With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
+
+![Xcode build button](/img/guides/first-app-cap-ng/xcode-build-button.png)
+
+Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
+
+![iOS Camera permissions](/img/guides/first-app-cap-ng/ios-permissions-photo.png)
+
+## Android
+
+Capacitor Android apps are configured and managed through Android Studio. Before running this app on an Android device, there's a couple of steps to complete.
+
+First, run the Capacitor `open` command, which opens the native Android project in Android Studio:
+
+```shell
+ionic cap open android
+```
+
+Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
+
+![Android Manifest location](/img/guides/first-app-cap-ng/android-manifest.png)
+
+Scroll to the `Permissions` section and ensure these entries are included:
+
+```xml
+<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+```
+
+Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
+
+![Launching app on Android](/img/guides/first-app-cap-ng/android-device.png)
+
+Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
+
+![Android Camera permissions](/img/guides/first-app-cap-ng/android-permissions-photo.png)
+
+Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
+
+In the final portion of this tutorial, we’ll use the Ionic CLI’s Live Reload functionality to quickly implement photo deletion - thus completing our Photo Gallery feature.
diff --git a/versioned_docs/version-v6/react/your-first-app/7-live-reload.md b/versioned_docs/version-v6/react/your-first-app/7-live-reload.md
new file mode 100644
index 00000000000..2d37c4efdba
--- /dev/null
+++ b/versioned_docs/version-v6/react/your-first-app/7-live-reload.md
@@ -0,0 +1,120 @@
+---
+sidebar_label: Live Reload
+---
+
+# Rapid App Development with Live Reload
+
+So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
+
+We can use the Ionic CLI’s [Live Reload functionality](https://ionicframework.com/docs/cli/livereload) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+
+## Live Reload
+
+Remember `ionic serve`? That was Live Reload working in the browser, allowing us to iterate quickly.
+
+We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins. Since we need to run native plugin code on a device in order to verify that it works, having a way to quickly write code, build and deploy it, then test it is crucial to keeping up our development speed.
+
+Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform:
+
+```shell
+$ ionic cap run ios -l --external
+
+$ ionic cap run android -l --external
+```
+
+The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device.
+
+## Deleting Photos
+
+With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
+
+```tsx
+import React, { useState } from 'react';
+import { usePhotoGallery, UserPhoto } from '../hooks/usePhotoGallery';
+// other imports
+```
+
+Next, reference the `deletePhoto` function, which we'll create soon:
+
+```tsx
+const { photos, takePhoto, deletePhoto } = usePhotoGallery();
+```
+
+Next, add a state value to store information about the photo to delete:
+
+```tsx
+const [photoToDelete, setPhotoToDelete] = useState<UserPhoto>();
+```
+
+When a user clicks on an image, we will show the action sheet by changing the state value to the photo. Update the `<IonImg>` element to:
+
+```tsx
+<IonImg onClick={() => setPhotoToDelete(photo)} src={photo.webviewPath} />
+```
+
+Next, add an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog. We will set the isOpen property based on if photoToDelete has a value or not.
+
+In the JSX, put the following component before the closing `</IonContent>` tag.
+
+```tsx
+<IonActionSheet
+  isOpen={!!photoToDelete}
+  buttons={[
+    {
+      text: 'Delete',
+      role: 'destructive',
+      icon: trash,
+      handler: () => {
+        if (photoToDelete) {
+          deletePhoto(photoToDelete);
+          setPhotoToDelete(undefined);
+        }
+      },
+    },
+    {
+      text: 'Cancel',
+      icon: close,
+      role: 'cancel',
+    },
+  ]}
+  onDidDismiss={() => setPhotoToDelete(undefined)}
+/>
+```
+
+Above, we added two options: `Delete` that calls `deletePhoto` function (to be added next) and `Cancel`, which when given the role of “cancel” will automatically close the action sheet. It's also important to set the onDidDismiss function and set our photoToDelete back to undefined when the modal goes away. That way, when another image is clicked, the action sheet notices the change in the value of photoToDelete.
+
+Next, we need to implement the deletePhoto method that will come from the `usePhotoGallery` hook. Open the file and paste in the following function in the hook:
+
+```tsx
+const deletePhoto = async (photo: UserPhoto) => {
+  // Remove this photo from the Photos reference data array
+  const newPhotos = photos.filter((p) => p.filepath !== photo.filepath);
+
+  // Update photos array cache by overwriting the existing photo array
+  Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
+
+  // delete photo file from filesystem
+  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
+  await Filesystem.deleteFile({
+    path: filename,
+    directory: Directory.Data,
+  });
+  setPhotos(newPhotos);
+};
+```
+
+The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
+
+Make sure to return the `deletePhoto` function so it is as a part of the hook API that we expose:
+
+```tsx
+return {
+  deletePhoto,
+  photos,
+  takePhoto,
+};
+```
+
+Save this file, then tap on a photo again and choose the “Delete” option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪
+
+In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices.
diff --git a/versioned_docs/version-v6/react/your-first-app/8-distribute.md b/versioned_docs/version-v6/react/your-first-app/8-distribute.md
new file mode 100644
index 00000000000..74966e8de58
--- /dev/null
+++ b/versioned_docs/version-v6/react/your-first-app/8-distribute.md
@@ -0,0 +1,100 @@
+---
+sidebar_label: Distribute
+---
+
+# Build and Deploy your App
+
+Now that you have built your first app, you are going to want to get it distributed so everyone can start using it. The mechanics of building and deploying your application can be quite cumbersome. That is where [Appflow](https://ionic.io/docs/appflow/) comes into play. Appflow allows you to effectively generate web and native builds, push out live app updates, publish your app to the app stores, and automate the whole process. The entire Quickstart guide can be found [here](https://ionic.io/docs/appflow/quickstart).
+
+Below we will run through an overview of the steps.
+
+## Connect Your Repo
+
+Appflow works directly with Git version control and uses your existing code base as the source of truth for Deploy and Package builds. You will first need to integrate with your hosting service, such as GitHub or Bitbucket, or you can push your code directly to Appflow. Once this is completed, Appflow will have access to your code.
+
+For more on connecting your code repository to Appflow, checkout the [Connect your Repo](https://ionic.io/docs/appflow/quickstart/connect) section inside the Appflow docs.
+
+## Install the Appflow SDK
+
+The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard.
+
+To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the `Deploy > Destinations` section. Alternatively, you can install the plugin manually by excuting the following command in your app's root directory:
+
+```shell
+ionic deploy add  \
+    --app-id="YOUR_APP_ID" \
+    --channel-name="YOUR_CHANNEL_NAME" \
+    --update-method="background|auto|none" \
+```
+
+For prerequisite and additional instructions on installing the Appflow SDK, visit the [Install the Appflow SDK](https://ionic.io/docs/appflow/quickstart/installation) section inside the Appflow docs.
+
+## Push a Commit
+
+In order for Appflow to access the latest and greatest changes to your code, you will need to push a commit via the version control integration of your choosing. For those that use GitHub or Bitbucket, this would look as follows:
+
+```shell
+git add . # stage any changes
+git commit -m "added appflow sdk" #  commit staged changes
+git push origin main # push the changes from the main branch to your git host
+```
+
+After the push is made, you will then see your commit under the `Commits` tab of the Appflow Dashboard. For more on this, take a look at the [Push a Commit](https://ionic.io/docs/appflow/quickstart/push) section inside the Appflow docs.
+
+## Deploy a Live Update
+
+With the Appflow SDK installed and your commit pushed up to the Dashboard, you are ready to deploy a live update to a device. The Live Update feature uses the installed Appflow SDK with your native application to listen to a particular Deploy Channel Destination. When a live update is assigned to a Channel Distination, that update will be deployed to user devices running binaries that are configured to listen to that specific Channel Destination.
+
+To get the live update deployed, a Web build will need to be created. This can be done through the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right corner of the `Build > Builds` tab. After selecting the correct commit to deploy, select the `Web` target platform and the `Latest` build stack. Depending on your Appflow plan, you will then be able to include custom environments, if any are configured. Finally, you can enable `Live Update` and pick the Channel to automatically assign the build to once it successfully completes.
+
+Upon completion of the Web Build, additional versioning options are available to you. After completing this section and you have a successful Deploy build, you can then assign it to the same Channel you configured the Appflow SDK to listen to when you installed it by clicking the `Deploy live updates` button in the build detail page. The same can be done by clicking the `Deploy live updates` icon on the build in the `Build > Builds` tab and select the Channel from the dropdown.
+
+To receive this live update, you will need to run the app on a device or an emulator. The quickest and easiest way to do this is through the following command:
+
+```shell
+ionic cordova run [ios | android] [options]
+```
+
+Assuming the app is configured correctly to listen to the channel you deployed too, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied!
+
+To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the [Deploy a Live Update](https://ionic.io/docs/appflow/quickstart/deploy) section inside the Appflow docs.
+
+## Build a Native Binary
+
+Next up is a native binary for your app build and deploy process. This is done via the [Ionic Package](https://ionic.io/docs/appflow/package/intro) service. First things first, you will need to create a [Package build](https://ionic.io/docs/appflow/package/builds). This can be done by clicking the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right from the `Build > Builds` tab. Then you will select the proper commit for your build and fill in all of the several required fields and any optional fields that you want to specify. After filling in all of the information and the build begins, you can check out it's progress and review the logs if you encounter any errors.
+
+Given a successful Package build, and iOS binary (`.ipa` or IPA) or and Android binary (`.apk` or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the `Artifacts` section in the right of the build detail page or clicking the `Download IPA/APK` icon on the build in the `Build > Builds` tab.
+
+Further information regarding building native binaries can be found inside of the [Build a Native Binary](https://ionic.io/docs/appflow/quickstart/package) section inside the Appflow docs.
+
+## Create an Automation
+
+[Automations](https://ionic.io/docs/appflow/automation/intro) enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger [Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production.
+
+For more information, visit the [Create an Automation](https://ionic.io/docs/appflow/quickstart/automation) section within the Appflow docs. There you will see details on creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our [Basic plans](https://ionic.io/pricing) and above.
+
+## Create an Environment
+
+[Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) can be futher customized via [Environments](https://ionic.io/docs/appflow/automation/environments). This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the [Automation](https://ionic.io/docs/appflow/automation/intro) feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever.
+
+Creating an Environment is available for those on our [Basic plans](https://ionic.io/pricing) and above. More information on this can be found in the [Create an Environment](https://ionic.io/docs/appflow/quickstart/environment) section within the Appflow docs.
+
+## Create a Native Configuration
+
+[Native Configurations](https://ionic.io/docs/appflow/package/native-configs) allow you to easily modify common configuration values that can change between different environments (development, production, staging, etc.) so you do not need to use extra logic or manually commit them to version control. Native configurations can be attached to any [Package build](https://ionic.io/docs/appflow/package/intro) or [Automation](https://ionic.io/docs/appflow/automation/intro).
+
+Native configs can be used to:
+
+- Overwrite the unique bundle identifier or [id attribute](https://cordova.apache.org/docs/en/latest/config_ref/#widget) in `config.xml`
+- Overwrite the App Name as it will appear on the home screen of a device
+- Overwrite the [Appflow SDK (Deploy Plugin) variables and preferences](https://ionic.io/docs/appflow/deploy/api#plugin-variables)
+
+For access to the ability to create a Native Configuration, you will need to be on our [Basic plans](https://ionic.io/pricing) and above. Additional details of this feature can be found in the [Create a Native Configuration](https://ionic.io/docs/appflow/quickstart/native-config) section within the Appflow docs.
+
+## What’s Next?
+
+Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to you users devices!
+
+There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature run the the build and deploy process again through Appflow to get it out to your users.
+
+Happy app building! 💙
diff --git a/versioned_docs/version-v6/reference/browser-support.md b/versioned_docs/version-v6/reference/browser-support.md
new file mode 100644
index 00000000000..edb53a6e1d7
--- /dev/null
+++ b/versioned_docs/version-v6/reference/browser-support.md
@@ -0,0 +1,50 @@
+---
+title: Browser Support
+---
+
+<head>
+  <title>Mobile Browser Support to Run Ionic Apps Anywhere</title>
+  <meta
+    name="description"
+    content="Due to a foundation in web technologies, Ionic mobile apps can run anywhere the web runs — iOS, Android, browsers, PWAs, and more. Learn about browser support."
+  />
+</head>
+
+Ionic's earliest goal was to make it easy to develop mobile apps using web technologies like HTML, CSS, and JavaScript. Because of this foundation in web technologies, Ionic can run anywhere the web runs — iOS, Android, browsers, PWAs, and more.
+
+## Mobile Browsers
+
+In pursuit of [adaptive styling](../core-concepts/fundamentals.md#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below:
+
+| Framework |        Android         |  iOS  |
+| :-------: | :--------------------: | :---: |
+| Ionic v7  | 5.1+ with Chromium 79+ | 14.0+ |
+| Ionic v6  | 5.0+ with Chromium 60+ | 13.0+ |
+| Ionic v5  |          5.0+          | 11.0+ |
+| Ionic v4  |          4.4+          | 10.0+ |
+
+:::note
+Check the [latest Android stats](https://developer.android.com/about/dashboards/) and the [latest iOS stats](https://developer.apple.com/support/app-store/) for up-to-date platform information.
+:::
+
+### A Note on Android Support
+
+Starting with Android 5.0, the webview was moved to a separate application that can be updated independently of Android. This means that most Android 5.0+ devices are going to be running a modern version of Chromium. However, there are a still a subset of Android devices that are unable to have their webview updated. These webviews are typically stuck at the version that was available when the device initially shipped.
+
+To figure out what version of the webview a device is running, log `window.navigator.userAgent` to the console when inspecting the application using Chrome Dev Tools.
+
+## Desktop Browsers
+
+Because Ionic is based on web technologies, it works just as well on desktop browsers as it does on mobile devices. For more information on desktop layouts, see [Cross Platform](../core-concepts/cross-platform.md#desktop).
+
+|   Browser   | Ionic v7 | Ionic v6 | Ionic v5 | Ionic v4 |
+| :---------: | :------: | :------: | :------: | :------: |
+| **Chrome**  | 79+      | 60+      | ✔        | ✔        |
+| **Safari**  | 14+      | 13+      | ✔        | ✔        |
+|  **Edge**   | 79+      | 79+      | 79+      | ✔        |
+| **Firefox** | 63+      | 63+      | ✔        | ✔        |
+|  **IE 11**  | **X**    | **X**    | **X**    | **X**    |
+
+:::note
+Check the docs for [Ionic Animations](../utilities/animations.md#browser-support) and [Ionic Gestures](../utilities/gestures.md#browser-support) for specific browser support related to those utilities.
+:::
diff --git a/versioned_docs/version-v6/reference/glossary.md b/versioned_docs/version-v6/reference/glossary.md
new file mode 100644
index 00000000000..a728df32d95
--- /dev/null
+++ b/versioned_docs/version-v6/reference/glossary.md
@@ -0,0 +1,552 @@
+---
+title: Glossary
+---
+
+<head>
+  <title>API Glossary: Terminology and Definitions | Ionic Framework</title>
+  <meta
+    name="description"
+    content="Ionic is the platform for web developers. View our API Glossary for app-building terminology and keyword definitions to better understand Ionic's capabilities."
+  />
+</head>
+
+<div id="what-is">
+
+<section id="android-sdk">
+  <a href="#android-sdk">
+    <h3>Android SDK</h3>
+  </a>
+  <p>
+    The{' '}
+    <a href="http://developer.android.com/sdk/index.html" target="_blank">
+      Android SDK
+    </a>{' '}
+    is a software development kit built for developers building for Google's Android Platform. It includes tools for
+    building, testing, and debugging Android applications.
+  </p>
+</section>
+
+<section id="android-studio">
+  <a href="#android-studio">
+    <h3>Android Studio</h3>
+  </a>
+  <p>
+    <a href="https://developer.android.com/studio/" target="_blank">
+      Android Studio
+    </a>{' '}
+    is the official Integrated Development Environment (IDE) for Native Android app development.
+  </p>
+</section>
+
+<section id="autoprefixer">
+  <a href="#autoprefixer">
+    <h3>Autoprefixer</h3>
+  </a>
+  <p>
+    <a href="https://github.com/postcss/autoprefixer" target="_blank">
+      Autoprefixer
+    </a>{' '}
+    is a tool that adds vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules
+    you write will be applied across all supporting browsers. For example, instead of having to know every flexbox
+    syntax used by various browsers, autoprefixer allows you to just write <code>display: flex;</code> and it'll
+    automatically plug in the correct CSS.
+  </p>
+</section>
+
+<section id="bundling">
+  <a href="#bundling">
+    <h3>Bundling</h3>
+  </a>
+  <p>
+    Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and
+    compiling/transpiling them down to one single file.
+  </p>
+</section>
+
+<section id="capacitor">
+  <a href="#capacitor">
+    <h3>Capacitor</h3>
+  </a>
+  <p>
+    <a href="https://capacitorjs.com/" target="_blank">
+      Capacitor
+    </a>{' '}
+    is an open source cross-platform app runtime that allows web-based apps to run natively on iOS, Android, Electron,
+    and the web. It's helpful to refer to these apps "Native Progressive Web Apps" and they represent the next evolution
+    beyond the traditional Hybrid app mentality. Capacitor was created and is actively developed/supported by Ionic, the
+    company.
+  </p>
+</section>
+
+<section id="cli">
+  <a href="#cli">
+    <h3>CLI</h3>
+  </a>
+  <p>
+    A CLI, or <strong>C</strong>ommand-<strong>L</strong>ine <strong>I</strong>nterface, is a text-based interface for
+    interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often
+    use Command Prompt. The Ionic community often uses this term to refer to{' '}
+    <a href="https://ionicframework.com/docs/v1/cli/">Ionic's CLI</a>. Ionic's CLI can be used for a number of things,
+    such as creating production builds of an app, running the development server, and accessing{' '}
+    <a href="https://ionic.io/appflow" target="_blank">
+      Ionic commercial services
+    </a>
+    .
+  </p>
+</section>
+
+<section id="commonjs">
+  <a href="#commonjs">
+    <h3>CommonJS</h3>
+  </a>
+  <p>
+    <a href="https://webpack.github.io/docs/commonjs.html" target="_blank">
+      CommonJS
+    </a>{' '}
+    is a group that defines standard formats for JavaScript APIs. They have defined standards for JavaScript modules and
+    packages.
+  </p>
+</section>
+
+<section id="cordova">
+  <a href="#cordova">
+    <h3>Cordova</h3>
+  </a>
+  <p>
+    <a href="https://cordova.apache.org" target="_blank">
+      Apache Cordova
+    </a>{' '}
+    is an open source mobile application development framework that transforms standard HTML/CSS/JS into full-fledged
+    native apps. It provides a JavaScript API for accessing native device functionality, such as the camera or
+    accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone.
+  </p>
+</section>
+
+<section id="cors">
+  <a href="#cors">
+    <h3>CORS</h3>
+  </a>
+  <p>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">
+      CORS
+    </a>{' '}
+    (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. See the{' '}
+    <a href="../troubleshooting/cors">CORS FAQs</a> for more information.
+  </p>
+</section>
+
+<section id="css-variables">
+  <a href="#css-variables">
+    <h3>CSS Variables</h3>
+  </a>
+  <p>
+    You may be familiar with variables from Sass.{' '}
+    <a href="https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care" target="_blank">
+      CSS Variables
+    </a>{' '}
+    enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers.
+  </p>
+</section>
+
+<section id="decorators">
+  <a href="#decorators">
+    <h3>Decorators</h3>
+  </a>
+  <p>
+    Decorators are expressions that return a function. They allow you to take an existing function, and extend its
+    behavior. With TypeScript, you can also decorate <i>classes</i> and <i>parameters</i>. When you decorate a{' '}
+    <strong>class</strong>, you are wrapping and extending the behavior of its constructor. In other words, the
+    decorator will add some functionality when the constructor is called, and will then return the original constructor.
+    When you decorate a <strong>parameter</strong>, you are wrapping the argument that gets passed in for that
+    parameter. The decorator will add functionality when an argument is passed to the method, and then return the
+    original argument.
+  </p>
+</section>
+
+<section id="es5">
+  <a href="#es5">
+    <h3>ES5</h3>
+  </a>
+  <p>
+    ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which
+    developers are most familiar with today.
+  </p>
+</section>
+
+<section id="es2015-es6">
+  <a href="#es2015-es6">
+    <h3>ES2015/ES6</h3>
+  </a>
+  <p>
+    A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators,
+    and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6
+    features in older browsers, tools such as <a href="#babel">Babel</a> and <a href="#typescript">TypeScript</a> have
+    to <a href="#transpiler">transpile</a> ES6 code down to ES5.
+  </p>
+</section>
+
+<section id="es2016-es7">
+  <a href="#es2016-es7">
+    <h3>ES2016/ES7</h3>
+  </a>
+  <p>
+    This version of JavaScript added a number of new features to the language, including <code>Array.includes</code> and
+    the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome,
+    Safari, Firefox and Edge)
+  </p>
+</section>
+
+<section id="es2017-es8">
+  <a href="#es2017-es8">
+    <h3>ES2017/ES8</h3>
+  </a>
+  <p>
+    This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new
+    official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics.
+  </p>
+</section>
+
+<section id="genymotion">
+  <a href="#genymotion">
+    <h3>Genymotion</h3>
+  </a>
+  <p>
+    Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on
+    Android. Check out our <a href="../developing/tips#using-genymotion-android">resource section</a> on Genymotion for
+    more info.
+  </p>
+</section>
+
+<section id="git">
+  <a href="#git">
+    <h3>Git</h3>
+  </a>
+  <p>
+    <a href="https://git-scm.com/" target="_blank">
+      Git
+    </a>{' '}
+    is a distributed version control system for managing code. It allows development teams to contribute code to the
+    same project without causing code conflicts.
+  </p>
+</section>
+
+<section id="gulp">
+  <a href="#gulp">
+    <h3>Gulp</h3>
+  </a>
+  <p>
+    <a href="http://gulpjs.com/" target="_blank">
+      Gulp
+    </a>{' '}
+    is a tool for running tasks which can be used to build your app. Common build tasks include transpiling{' '}
+    <a href="#es2015-es6">ES6</a> to <a href="#es5">ES5</a>, turning <a href="#sass">Sass</a> into CSS, minifying code,
+    and concatenating files.
+  </p>
+</section>
+
+<section id="es-modules">
+  <a href="#es-modules">
+    <h3>ES Modules</h3>
+  </a>
+  <p>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import" target="_blank">
+      ES Modules
+    </a>{' '}
+    brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the
+    global scope and have to be explicitly imported into your project to be used. This makes it much easier to
+    understand where your code is coming from and increases modularity and compartmentalization of functionality.
+  </p>
+</section>
+
+<section id="ionicons">
+  <a href="#ionicons">
+    <h3>Ionicons</h3>
+  </a>
+  <p>
+    <a href="https://ionic.io/ionicons/" target="_blank">
+      Ionicons
+    </a>{' '}
+    is an open-source icon set used and created by Ionic. It includes 1:1 iOS and Material Design icons, as well as
+    commonly used social/application icons. Ionicons is included by default in Ionic distributions, but they can also be
+    used in any project.
+  </p>
+</section>
+
+<section id="karma">
+  <a href="#karma">
+    <h3>Karma</h3>
+  </a>
+  <p>
+    <a href="https://karma-runner.github.io/latest/index.html" target="_blank">
+      Karma
+    </a>{' '}
+    is a test runner that will run an app's test inside a real browser. It executes test cases, written in any testing
+    framework, in a real browser. Karma was originally written for use with Angular 1.
+  </p>
+</section>
+
+<section id="module">
+  <a href="#module">
+    <h3>Module</h3>
+  </a>
+  <p>
+    Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the
+    Global scope.
+  </p>
+</section>
+
+<section id="monorepo">
+  <a href="#monorepo">
+    <h3>Monorepo</h3>
+  </a>
+  <p>
+    A <strong>monorepo</strong> is a single git repository with multiple projects. Advantages include simpler
+    organization, shared tooling and dependencies, and better collaboration with teammates.
+  </p>
+</section>
+
+<section id="livereload">
+  <a href="#livereload">
+    <h3>Live Reload</h3>
+  </a>
+  <p>
+    <strong>Live Reload</strong> (or <strong>live-reload</strong>) is a tool that automatically reloads the browser or{' '}
+    <a href="../core-concepts/webview">Web View</a> when it detects changes in your app. In some cases, it can replace
+    parts of your app without having to reload the entire window. See the{' '}
+    <a href="../cli/livereload">Live Reload docs</a> for more information.
+  </p>
+</section>
+
+<section id="node">
+  <a href="#node">
+    <h3>Node</h3>
+  </a>
+  <p>
+    <a href="https://nodejs.org/" target="_blank">
+      Node
+    </a>{' '}
+    is a runtime environment that allows JavaScript to be written on the server-side. In addition to being used for web
+    services, node is often used to build developer tools, such as the <a href="#cli">Ionic CLI</a>.
+  </p>
+</section>
+
+<section id="npm">
+  <a href="#npm">
+    <h3>npm</h3>
+  </a>
+  <p>
+    <a href="https://www.npmjs.com/" target="_blank">
+      npm
+    </a>{' '}
+    is the package manager for <a href="#node">node</a>. It allows developers to install, share, and package node
+    modules. Ionic can be installed with npm, along with a number of its dependencies.
+  </p>
+</section>
+
+<section id="observable">
+  <a href="#observable">
+    <h3>Observable</h3>
+  </a>
+  <p>
+    An observable is an object that emits events (or notifications). An observer is an object that listens for these
+    events, and does something when an event is received. Together, they create a pattern that can be used for
+    programming asynchronously.
+  </p>
+</section>
+
+<section id="package-id">
+  <a href="#package-id">
+    <h3>Package ID</h3>
+  </a>
+  <p>
+    Referred to by Apple as <strong>Bundle ID</strong> and by Android as <strong>Application ID</strong>, the{' '}
+    <strong>Package ID</strong> is used for identifying apps published to the App Store/Play Store. It is a string
+    formatted in{' '}
+    <a href="https://en.wikipedia.org/wiki/Reverse_domain_name_notation" target="_blank">
+      reverse-DNS notation
+    </a>
+    .
+  </p>
+</section>
+
+<section id="polyfill">
+  <a href="#polyfill">
+    <h3>Polyfill</h3>
+  </a>
+  <p>
+    A{' '}
+    <a href="https://remysharp.com/2010/10/08/what-is-a-polyfill" target="_blank">
+      polyfill
+    </a>{' '}
+    is a bit of code that adds functionality to the browser and normalizes browser differences. This is similar to a{' '}
+    <a href="#shim">shim</a>, but where a shim has it's own API, a polyfill let's the expect API of the browser be used.
+  </p>
+</section>
+
+<section id="protractor">
+  <a href="#protractor">
+    <h3>Protractor</h3>
+  </a>
+  <p>
+    <a href="https://angular.github.io/protractor/#/" target="_blank">
+      Protractor
+    </a>{' '}
+    is a testing framework written for and by the Angular team. Protractor can be used with test runners, like Karma,
+    for end-to-end testing. Test runners allow you to quickly and programmatically verify code quality.
+  </p>
+</section>
+
+<section id="sass">
+  <a href="#sass">
+    <h3>Sass</h3>
+  </a>
+  <p>
+    Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features
+    such as{' '}
+    <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_" target="_blank">
+      variables
+    </a>
+    , <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins" target="_blank">
+      mixins
+    </a>, and <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10" target="_blank">
+      loops
+    </a>.
+  </p>
+</section>
+
+<section id="scoped">
+  <a href="#scoped">
+    <h3>Scoped Encapsulation</h3>
+  </a>
+  <p>
+    A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a
+    data attribute at run time. Overriding scoped selectors in CSS requires a{' '}
+    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity" target="_blank">
+      higher specificity
+    </a>{' '}
+    selector. Scoped components can also be styled using{' '}
+    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">
+      CSS Custom Properties
+    </a>
+    .
+  </p>
+</section>
+
+<section id="shadow">
+  <a href="#shadow">
+    <h3>Shadow DOM</h3>
+  </a>
+  <p>
+    <a href="https://developers.google.com/web/fundamentals/web-components/shadowdom" target="_blank">
+      Shadow DOM
+    </a>{' '}
+    is a native browser solution for DOM and style encapsulation of a component. It shields the component from its
+    surrounding environment. To externally style internal elements of a Shadow DOM component you must use{' '}
+    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">
+      CSS Custom Properties
+    </a>{' '}
+    or{' '}
+    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank">
+      CSS Shadow Parts
+    </a>
+    .
+  </p>
+</section>
+
+<section id="shim">
+  <a href="#shim">
+    <h3>Shim</h3>
+  </a>
+  <p>
+    A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the
+    browser specific implementation from the end user.
+  </p>
+</section>
+
+<section id="transpiler">
+  <a href="#transpiler">
+    <h3>Transpiler</h3>
+  </a>
+  <p>
+    Transpilation is the process of converting code from one language to another language prior to execution. Typically,
+    a transpiler will convert a high-level language to another high-level language. The most common type of{' '}
+    <em>transpilation</em> in Ionic Framework is converting <a href="#es2015-es6">ES2015/ES6</a> (
+    <a href="#typescript">TypeScript</a>) to <a href="#es5">ES5</a> (traditional JavaScript).
+  </p>
+</section>
+
+<section id="typescript">
+  <a href="#typescript">
+    <h3>TypeScript</h3>
+  </a>
+  <p>
+    <a href="http://www.typescriptlang.org" target="_blank">
+      TypeScript
+    </a>{' '}
+    is a superset of JavaScript, which means it gives you JavaScript, along with a number of extra features such as{' '}
+    <a href="http://www.typescriptlang.org/Handbook#basic-types" target="_blank">
+      type declarations
+    </a>{' '}
+    and{' '}
+    <a href="http://www.typescriptlang.org/Handbook#interfaces" target="_blank">
+      interfaces
+    </a>
+    . Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional.
+  </p>
+</section>
+
+<section id="unit-tests">
+  <a href="#unit-tests">
+    <h3>Unit Tests</h3>
+  </a>
+  <p>
+    Unit Tests and unit testing are a way to test small pieces of code to see if they behave as expected. Unit testing
+    frameworks include Jasmine, Mocha, QUnit, and many others.
+  </p>
+</section>
+
+<section id="webpack">
+  <a href="#webpack">
+    <h3>Webpack</h3>
+  </a>
+  <p>
+    <a href="https://webpack.github.io/" target="_blank">
+      Webpack
+    </a>{' '}
+    bundles together JavaScript modules and other assets. It can be used to create single or multiple "chunks" that are
+    only loaded when needed. Webpack can be used to take many files and dependencies and bundle them into one file, or
+    other types.
+  </p>
+</section>
+
+<section id="web-standards">
+  <a href="#web-standards">
+    <h3>Web Standards</h3>
+  </a>
+  <p>
+    The{' '}
+    <a href="https://www.w3.org/" target="_blank">
+      World Wide Web Consortium
+    </a>{' '}
+    (W3C) is the standards organization for the Web. Together, industry leaders and the public work together to develop{' '}
+    <a href="https://www.w3.org/standards/" target="_blank">
+      web standards
+    </a>
+    , which are a set of protocols, specifications, and technologies that define the Web Platform.
+  </p>
+</section>
+
+<section id="xcode">
+  <a href="#xcode">
+    <h3>Xcode</h3>
+  </a>
+  <p>
+    <a href="https://developer.apple.com/xcode/" target="_blank">
+      Xcode
+    </a>{' '}
+    is an Apple IDE (integrated development environment) for software development on Apple operating systems (macOS,
+    iOS, watchOS and tvOS), with extensions available for other languages and platforms.
+  </p>
+</section>
+
+</div>
diff --git a/versioned_docs/version-v6/reference/migration.md b/versioned_docs/version-v6/reference/migration.md
new file mode 100644
index 00000000000..bb25242380d
--- /dev/null
+++ b/versioned_docs/version-v6/reference/migration.md
@@ -0,0 +1,322 @@
+---
+title: Migration Guide
+sidebar_label: Migration
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>App Migration Guide: Documentation to Migrate Ionic 4.x to 5.x</title>
+  <meta
+    name="description"
+    content="The Ionic Migration Guide provides documentation for how to migrate an app from 4.x to 5.x. Read to learn more about what updates this process requires."
+  />
+</head>
+
+## Migrating from Ionic 5.x to Ionic 6.x
+
+Please see the [Ionic 6 Migration Guide](../intro/upgrading-to-ionic-6).
+
+## Migrating from Ionic 4.x to Ionic 5.x
+
+Migrating an app from 4.x to 5.x requires a few updates to the API properties, CSS utilities, and the installed package dependencies.
+
+### API and CSS Updates
+
+For a complete list of breaking changes from 4.x to 5.x, please refer to [the breaking changes document](https://github.com/ionic-team/ionic/blob/master/BREAKING.md#version-5x) in the Ionic core repo.
+
+### Packages and Dependencies
+
+For Angular based projects, you can simply run:
+
+```shell
+npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save
+```
+
+For React projects, you can run:
+
+```shell
+npm install @ionic/react@latest @ionic/react-router@latest ionicons@latest
+```
+
+For Stencil / vanilla JS projects, you can run:
+
+```shell
+npm i @ionic/core@latest --save
+```
+
+If you would like a fresh project starter, a new project base can be created from the CLI and an existing app can be migrated over manually.
+
+## Migrating from Ionic 3.0 to Ionic 4.0
+
+:::note
+For a **complete list of breaking changes** from Ionic 3 to Ionic 4, please refer to [the breaking changes document](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md) in the Ionic core repo.
+:::
+
+We suggest the following general process when migrating an existing application from Ionic 3 to 4:
+
+1. Generate a new project using the `blank` starter (see [Starting an App](../developing/starting.md))
+1. Copy any Angular services from `src/providers` to `src/app/services`
+   - Services should include `{ providedIn: 'root' }` in the `@Injectable()` decorator. For details, please see Angular [provider docs](https://angular.io/guide/providers).
+1. Copy the app's other root-level items (pipes, components, etc) keeping in mind that the directory structure changes from `src/components` to `src/app/components`, etc.
+1. Copy global Sass styling from `src/app/app.scss` to `src/global.scss`
+1. Copy the rest of the application, page by page or feature by feature, keeping the following items in mind:
+   - Emulated Shadow DOM is turned on by default
+   - Page/component Sass should no longer be wrapped in the page/component tag and should use Angular's [`styleUrls`](https://angular.io/api/core/Component#styleUrls) option of the `@Component` decorator
+   - RxJS has been updated from v5 to v6 (see [RxJS Changes](#rxjs-changes))
+   - Certain lifecycle hooks should be replaced by Angular's hooks (see [Lifecycle Events](#lifecycle-events))
+   - Markup changes may be required (migration tool available, see [Markup Changes](#markup-changes))
+
+In many cases, using the Ionic CLI to generate a new object and then copying the code also works very well. For example: `ionic g service weather` will create a shell `Weather` service and test. The code can then be copied from the older project with minor modifications as needed. This helps to ensure the proper structure is followed. This also generates shells for unit tests.
+
+## Changes in Package Name
+
+In Ionic 4, the package name is `@ionic/angular`. Uninstall Ionic 3 and install Ionic 4 using the new package name:
+
+```shell
+$ npm uninstall ionic-angular
+$ npm install @ionic/angular
+```
+
+While migrating an app, update the imports from `ionic-angular` to `@ionic/angular`.
+
+## Project structure
+
+One of the major changes between an Ionic 3 app and an Ionic 4 app is the overall project layout and structure. In v3, Ionic apps had a custom convention for how an app should be set up and what that folder structure should look like. In v4, this has been changed to follow the recommended setup of each supported framework.
+
+For example, if an app is using Angular, that project structure will be exactly what an Angular CLI app would be. This change, while not too difficult to accommodate, helps to keep common patterns and documentation consistent.
+
+````mdx-code-block
+<Tabs
+  defaultValue="v4"
+  values={[
+    { value: 'v4', label: 'Ionic 4' },
+    { value: 'v3', label: 'Ionic 3' },
+  ]
+}>
+<TabItem value="v4">
+
+```bash
+src/
+├── app/
+│   ├── about/
+│   ├── home/
+│   ├── app-routing.module.ts
+│   ├── app.component.html
+│   ├── app.component.spec.ts
+│   ├── app.component.ts
+│   └── app.module.ts
+├── assets/
+├── environments/
+├── theme/
+├── global.scss
+├── index.html
+├── karma.conf.js
+├── main.ts
+├── polyfills.ts
+├── test.ts
+├── tsconfig.app.json
+└── tsconfig.spec.json
+.gitignore
+angular.json
+ionic.config.json
+package.json
+tsconfig.json
+tslint.json
+```
+
+</TabItem>
+<TabItem value="v3">
+
+```bash
+src/
+├── app/
+│   ├── app.component.html
+│   ├── app.html
+│   ├── app.module.ts
+│   ├── app.scss
+│   └── main.ts
+├── assets/
+├── pages/
+│   ├── about/
+│   ├── home/
+├── theme/
+├── index.html
+├── manifest.json
+└── service-worker.js
+.gitignore
+ionic.config.json
+package.json
+tsconfig.json
+tslint.json
+```
+
+</TabItem>
+</Tabs>
+````
+
+The above comparison is an example of a v4 app's project structure. For developers with experience in a vanilla Angular project, this should feel really familiar.
+
+There is a `src/` directory that acts as the home for the app. This includes the `index.html`, any assets, environment configuration, and any app-specific config files.
+
+While migrating an app to take advantage of this new layout, it is suggested that a new project "base" is made with the CLI. Then, with the new project layout, migrate the features of the app piece by piece. Pages/components/etc. should be moved into the `src/app/` folder.
+
+Ensure your Ionic configuration file has the appropriate `type`. The project type for v3 is `ionic-angular`. The project type for v4 is `angular`. If this value is incorrect, the CLI may invoke the incorrect build scripts.
+
+See the following `ionic.config.json` as an example:
+
+```json
+{
+  "name": "my-app",
+  "type": "angular"
+}
+```
+
+## RxJS Changes
+
+Between V3 and V4, RxJS was updated to version 6. This changes many of the import paths of operators and core RxJS functions. Please see the <a href="https://github.com/ReactiveX/rxjs/blob/6.x/docs_app/content/guide/v6/migration.md" target="_blank">RxJS Migration Guide</a> for details.
+
+## Lifecycle Events
+
+With V4, we're now able to utilize the typical events provided by [Angular](https://angular.io/guide/lifecycle-hooks). But for certain cases, you might want to have access to the events fired when a component has finished animating during its route change. In this case, the `ionViewWillEnter`, `ionViewDidEnter`, `ionViewWillLeave`, and `ionViewDidLeave` have been ported over from V3. Use these events to coordinate actions with Ionic's own animations system.
+
+Older events like `ionViewDidLoad`, `ionViewCanLeave`, and `ionViewCanEnter` have been removed, and the proper Angular alternatives should be used.
+
+For more details, check out the [router-outlet docs](../api/router-outlet.md)
+
+## Overlay Components
+
+In prior versions of Ionic, overlay components such as Loading, Toast, or Alert were created synchronously. In Ionic v4, these components are all created asynchronously. As a result of this, the API is now promise-based.
+
+```tsx
+// v3
+showAlert() {
+  const alert = this.alertCtrl.create({
+    message: "Hello There",
+    subHeader: "I'm a subheader"
+  });
+
+  alert.present();
+}
+```
+
+In v4, promises are used:
+
+```tsx
+showAlert() {
+  this.alertCtrl.create({
+    message: "Hello There",
+    subHeader: "I'm a subheader"
+  }).then(alert => alert.present());
+}
+
+// Or using async/await
+
+async showAlert() {
+  const alert = await this.alertCtrl.create({
+    message: "Hello There",
+    subHeader: "I'm a subheader"
+  });
+
+  await alert.present();
+}
+```
+
+## Navigation
+
+In V4, navigation received the most changes. Now, instead of using Ionic's own `NavController`, we integrate with the official Angular Router. This not only provides a consistent routing experience across apps, but is much more dependable. The Angular team has an <a href="http://angular.io/guide/router" target="_blank">excellent guide</a> on their docs site that covers the Router in great detail.
+
+To provide the platform-specific animations that users are used to, we have created `ion-router-outlet` for Angular Apps. This behaves in a similar manner to Angular's `router-outlet` but provides a stack-based navigation (tabs) and animations.
+
+For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.md).
+
+## Lazy Loading
+
+Since Navigation has changed, the mechanism for lazy loading has also changed in V4.
+
+In v3, a typical lazy loading setup worked like this:
+
+```tsx
+// home.page.ts
+@IonicPage({
+  segment: 'home'
+})
+@Component({ ... })
+export class HomePage {}
+
+// home.module.ts
+@NgModule({
+  declarations: [HomePage],
+  imports: [IonicPageModule.forChild(HomePage)]
+})
+export class HomePageModule {}
+```
+
+However, in v4, lazy loading is done via the `loadChildren` method of the Angular router:
+
+```tsx
+// home.module.ts
+@NgModule({
+  imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePage }])],
+  declarations: [HomePage],
+})
+export class HomePageModule {}
+
+// app.module.ts
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    RouterModule.forRoot([
+      { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
+      { path: '', redirectTo: 'home', pathMatch: 'full' },
+    ]),
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.md#lazy-loading-routes).
+
+## Markup Changes
+
+Since v4 moved to Custom Elements, there's been a significant change to the markup for each component. These changes have all been made to follow the Custom Elements spec, and have been documented in a <a href="https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#breaking-changes" target="_blank">dedicated file on GitHub</a>.
+
+To help with these markup changes, we've released a TSLint-based <a href="https://github.com/ionic-team/v4-migration-tslint" target="_blank">Migration Tool</a>, which detects issues and can even fix some of them automatically.
+
+## Migrating from Ionic 1.0 to Ionic 4.0
+
+### Ionic 1.0 to Ionic 4.0: What’s Involved?
+
+Migrating from Ionic 1 to Ionic 4.0 involves moving from AngularJS (aka Angular 1) to Angular 7+. There are many architectural differences between these versions, so some of the app code will have to be rewritten. The amount of work involved depends on the complexity and size of your app.
+
+One upside is that for the most part, the Ionic UI components you know and love from V1 haven’t changed much.
+
+Here are some considerations to review before beginning the upgrade:
+
+- **App complexity**: Naturally, the larger and more complex the app is, the longer it will take to migrate.
+- **Framework support**: In 2019, Ionic will release full support for React. You can also use Ionic Framework components [without a framework](../intro/cdn.md). Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available.
+- **Budget and team makeup**: The length of a migration project will vary based on the size of your team, the complexity of the app, and the amount of time allotted to make the transition.
+
+### Suggested Strategy
+
+Once your development team has identified a good time frame for beginning the migration, Ionic recommends feature-freezing the Ionic 1 application and getting the code in order: Fix any major bugs, eliminate tech debt, and reorganize as you see fit. Then, identify which features to migrate over and which to abandon.
+
+Once the Ionic 1 app is stable, create a new Ionic 4.0 project. The majority of the dev team’s attention should be given to the new project; only bugs should be fixed in the Ionic 1 app to ensure that the transition happens as quickly and smoothly as possible.
+
+Once the team is comfortable that the Ionic 4.0 app has become stable and has fulfilled a core set of features, you can then shut down the Ionic 1 app.
+
+### Moving From AngularJS to Angular
+
+Please reference official [Angular upgrade guide](https://angular.io/guide/upgrade) information.
+
+### Ionic Changes
+
+Our Ionic 3.0 to Ionic 4.0 migration sections above may prove to be a useful reference. Generate a new Ionic 4.0 project using the blank starter (see [Starting an App](../developing/starting.md)). Spend time getting familiar with Ionic 4.0 components. Happy building!
+
+### Need Assistance?
+
+If your team would like assistance with the migration, please [reach out to us](https://ionicframework.com/enterprise-engine)! Ionic offers Advisory Services, which includes Ionic 4.0 training, architecture reviews, and migration assistance.
diff --git a/versioned_docs/version-v6/reference/release-notes.md b/versioned_docs/version-v6/reference/release-notes.md
new file mode 100644
index 00000000000..b2b582161a1
--- /dev/null
+++ b/versioned_docs/version-v6/reference/release-notes.md
@@ -0,0 +1,7 @@
+---
+title: Release Notes
+---
+
+import ReleaseNotes from '@components/page/reference/ReleaseNotes';
+
+<ReleaseNotes />
diff --git a/versioned_docs/version-v6/reference/support.md b/versioned_docs/version-v6/reference/support.md
new file mode 100644
index 00000000000..32bd859a1c8
--- /dev/null
+++ b/versioned_docs/version-v6/reference/support.md
@@ -0,0 +1,115 @@
+---
+title: Support Policy
+---
+
+<head>
+  <title>App Development Support Policy - Ionic Framework API</title>
+  <meta
+    name="description"
+    content="Ionic Framework API is 100% open-source (MIT), and always will be. Read our support policy to see why users know Ionic is the right choice for app development."
+  />
+</head>
+
+## Community Maintenance
+
+The Ionic Framework has been 100% open source (MIT) since the very beginning, and always will be. Developers can ensure Ionic is the right choice for their cross-platform apps through Ionic’s community maintenance strategy. The Ionic team regularly ships new releases, bug fixes, and is very welcoming to community pull requests.
+
+## Framework Maintenance and Support Status
+
+Given the reality of time and resource constraints as well as the desire to keep innovating in the frontend development space, over time it becomes necessary for the Ionic team to shift focus to newer versions of the Framework. However, Ionic will do everything it can to make the transition to newer versions as smooth as possible. The Ionic team recommends updating to the newest version of the Ionic Framework for the latest features, improvements and stability updates. For more details, consult [the Migration page](migration.md).
+
+The current status of each Ionic Framework version is:
+
+| Version |        Status         |   Released   | Maintenance Ends | Ext. Support Ends |
+| :-----: | :-------------------: | :----------: | :--------------: | :---------------: |
+| V7      | **Active**            | TBD          | TBD              | TBD               |
+| V6      | Maintenance           | Dec 8, 2021  | TBD              | TBD               |
+| V5      | Extended Support Only | Feb 11, 2020 | June 8, 2022     | Dec 8, 2022       |
+| V4      | End of Support        | Jan 23, 2019 | Aug 11, 2020     | Sept 30, 2022     |
+| V3      | End of Support        | Apr 5, 2017  | Oct 30, 2019     | Aug 11, 2020      |
+| V2      | End of Support        | Jan 25, 2017 | Apr 5, 2017      | Apr 5, 2017       |
+| V1      | End of Support        | May 12, 2015 | Jan 25, 2017     | Jan 25, 2017      |
+
+- **Maintenance**: Only critical bug and security fixes. No major feature improvements.
+- **Extended Support**: For teams and organizations that require additional long term support, Ionic has extended support options available. To learn more, see our [Enterprise offerings](https://ionicframework.com/enterprise).
+
+## Compatibility Recommendations
+
+The Ionic team has compiled a set of recommendations for using the Ionic Framework in conjunction with other contextually-relevant software. This is not meant to be a comprehensive list, but covers many common compatibility questions. The Ionic team strongly recommends reviewing your project dependencies once each quarter to keep track of new releases, features and bug fixes.
+
+### Core Dependencies
+
+#### Ionic Angular
+
+| Framework | Minimum Angular Version | Maximum Angular Version | TypeScript |
+| :-------: | :---------------------: | :---------------------: | :--------: |
+| v7        | v13                     | v15.x^                   | 4.4+       |   
+| v6        | v12                     | v15.x^                  | 4.0+       |
+| v5        | v8.2                    | v12.x                   | 3.5+       |
+| v4        | v8.2                    | v11.x                   | 3.5+       |
+| v3        | v5.2.11                 | v5.2.11                 | 2.6.2      |
+
+> ^ Angular 14.x supported starting in Ionic v6.1.9. Angular 15.x supported starting in Ionic v6.3.6.
+
+**Angular 13+ Support On Older Versions of iOS**
+
+Angular's support policy for iOS is the two most recent major versions. This means that changes to your Angular project may be necessary to use Ionic Angular v4-v6 on iOS 13. To support iOS 13, change the project `target` specified in `compilerOptions` in the tsconfig.json to `es5`. Without this change an error of `Unexpected token '.' in promiseReactionJob` will occur on app startup in iOS 13.
+
+Note that later versions of Ionic do not support iOS 13; see [mobile support table here](./browser-support#mobile-browsers).
+
+#### Ionic React
+
+| Framework | Required React Version | TypeScript |
+| :-------: | :--------------------: | :--------: |
+| v7        | v17+                   | 3.7+       |
+| v6        | v17+                   | 3.7+       |
+| v5        | v16.8+                 | 3.7+       |
+| v4        | v16.8+                 | 3.7+       |
+
+#### Ionic Vue
+
+| Framework | Required Vue Version | TypeScript |
+| :-------: | :------------------: | :--------: |
+| v7        | v3.0.6+              | 3.9+       |
+| v6        | v3.0.6+              | 3.9+       |
+| v5        | v3.0+                | 3.9+       |
+
+### Native Bridges
+
+|  Framework   |               Cordova                |        Capacitor         |
+| :----------: | :----------------------------------: | :----------------------: |
+| V5 - Angular | cordova-android 8.X, cordova-ios 5.X |        Latest 2.X        |
+|  V5 - React  |            Not supported             |        Latest 2.x        |
+|   V5 - Vue   |            Not supported             |        Latest 2.X        |
+| V4 - Angular | cordova-android 8.X, cordova-ios 5.X |        Latest 2.X        |
+|  V4 - React  |            Not supported             |        Latest 2.x        |
+|      V3      | cordova-android 8.X, cordova-ios 5.X | Not officially supported |
+
+- As iOS and Android (and related tools) are updated, you can expect more updates for Cordova and Capacitor, so it is recommended to stay on the latest version(s) of Cordova and Capacitor.
+
+### Ionic Platform & Products
+
+|  Framework   |        Appflow        |          Ionic Native Premier Plugins\*           |
+| :----------: | :-------------------: | :-----------------------------------------------: |
+| V5 - Angular | `@ionic/angular` 5.X  |               Use latest available                |
+|  V5 - React  |  `@ionic/react` 5.X   |               Use latest available                |
+| V4 - Angular | `@ionic/angular` 4.X  |               Use latest available                |
+|  V4 - React  |  `@ionic/react` 4.X   |               Use latest available                |
+|      V3      | `ionic-angular` 3.9.X | Use latest; special configuration may be required |
+
+- Native Premier Plugins require `@ionic-enterprise/cordova` for installation [see here](https://ionic.io/docs/premier-plugins/setup#install-tooling)
+- For Capacitor projects, follow the [Capacitor installation guide for Cordova plugins](https://capacitorjs.com/docs/cordova/using-cordova-plugins)
+- If you need to use an Enterprise plugin with an Ionic 3 project, please [contact us](https://ionic.zendesk.com/hc)
+
+### Ionic Platform & Products (Cont.)
+
+|  Framework   |      Ionic Studio       | Ionic Native Community Plugins\* |
+| :----------: | :---------------------: | :------------------------------: |
+| V5 - Angular |  `@ionic/angular` 5.X   |   @awesome-cordova-plugins 5.X   |
+|  V5 - React  | Not currently supported |  @awesome-cordova-plugins 5.X\*  |
+| V4 - Angular |  `@ionic/angular` 5.X   |   @awesome-cordova-plugins 5.X   |
+|  V4 - React  | Not currently supported |  @awesome-cordova-plugins 5.X\*  |
+|      V3      | Not currently supported |   @awesome-cordova-plugins 4.X   |
+
+- Wrappers (and their associated plugins) are community maintained.
+- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.md#vanilla-javascript)
diff --git a/versioned_docs/version-v6/reference/versioning.md b/versioned_docs/version-v6/reference/versioning.md
new file mode 100644
index 00000000000..c7e746da92b
--- /dev/null
+++ b/versioned_docs/version-v6/reference/versioning.md
@@ -0,0 +1,24 @@
+# Versioning
+
+<!-- TOC goes here -->
+
+Ionic Framework follows the <a href="https://semver.org/" target="_blank">Semantic Versioning (SemVer)</a> convention: <code>major.minor.patch.</code> Incompatible API changes increment the <code>major</code> version, adding backwards-compatible functionality increments the <code>minor</code> version, and backwards-compatible bug fixes increment the <code>patch</code> version.
+
+## Release Schedule
+
+### Major Release
+
+A major release will be published when there is a breaking change introduced in the API. Major releases will occur roughly every **6 months** and may contain breaking changes. Several release candidates will be published prior to a major release in order to get feedback before the final release. An outline of what is changing and why will be included with the release candidates.
+
+### Minor Release
+
+A minor release will be published when a new feature is added or API changes that are non-breaking are introduced. We will heavily test any changes so that we are confident with the release, but with new code comes the potential for new issues. We are scheduled to release a minor version **every month**, if any features or API changes were made.
+
+### Patch Release
+
+A patch release will be published when bug fixes were included, but the API has not changed and no breaking changes were introduced. We are scheduled to release a new patch version **every other week**, but there may be times where we need to release sooner or later than scheduled. To ensure patch releases can fix existing code without introducing new issues from the new features, patch releases will always be published prior to a minor release.
+
+## Changelog
+
+To see a list of all notable changes to Ionic please refer to the <a href="https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md" target="_blank">changelog</a>. This contains an ordered
+list of all bug fixes and new features under each release.
diff --git a/versioned_docs/version-v6/studio.md b/versioned_docs/version-v6/studio.md
new file mode 100644
index 00000000000..10227880b2f
--- /dev/null
+++ b/versioned_docs/version-v6/studio.md
@@ -0,0 +1,31 @@
+---
+hide_table_of_contents: true
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+# Welcome to Studio
+
+Ionic Studio is a fast and easy app builder that helps teams build and prototype apps with minimal coding.
+
+Studio is designed to integrate into an existing developer workflow, rather than replace it, enabling developers and architects to build visually _or_ drop down to code using their favorite tools.
+
+Studio
+fully supports bringing code back into the tool, something virtually unheard of in the app development tools market.
+
+Studio is a desktop tool and requires a subscription, and is only for Ionic Angular 4.x+ projects. To get started, sign up below:
+
+<DocsCards class="static-width">
+  <DocsCard header="Get Studio" href="https://ionicframework.com/studio?utm_source=docs&utm_medium=website&utm_campaign=studio%20launch" icon="/icons/guide-installation-icon.png">
+    <p>Sign up for Studio and start building today.</p>
+  </DocsCard>
+
+<DocsCard header="News & Updates" icon="/icons/guide-news-icon.png">
+  <p>Delivered within Studio as well as over email.</p>
+</DocsCard>
+
+  <DocsCard header="Studio FAQ" href="studio/faq" icon="/icons/guide-faq-icon.png">
+    <p>Find answers to common questions about Ionic Studio.</p>
+  </DocsCard>
+</DocsCards>
diff --git a/versioned_docs/version-v6/studio/assets.md b/versioned_docs/version-v6/studio/assets.md
new file mode 100644
index 00000000000..20a68326ab6
--- /dev/null
+++ b/versioned_docs/version-v6/studio/assets.md
@@ -0,0 +1,17 @@
+# Asset Management
+
+The **Assets** section is a quick and easy way to add images or other media to Ionic apps.
+
+<figure>
+  <img alt="Assets" src="/img/studio/2/ss-assets.png" />
+</figure>
+
+The files listed are all contained in the `src/assets` directory, which makes them available in the Ionic app.
+
+## Assets Window
+
+When an element is selected inside of Compose mode that takes `src` as an attribute (such as an `img` tag), the "Choose" button will open the assets window and an asset can be selected for the element attribute.
+
+<figure>
+  <img alt="Assets Window" src="/img/studio/ss-assets-window.png" />
+</figure>
diff --git a/versioned_docs/version-v6/studio/code.md b/versioned_docs/version-v6/studio/code.md
new file mode 100644
index 00000000000..7196a738e52
--- /dev/null
+++ b/versioned_docs/version-v6/studio/code.md
@@ -0,0 +1,40 @@
+# Working with Code
+
+Ionic Studio works alongside your code editor of choice to enable more complex development workflows
+that go beyond Studio's UI development features.
+
+## Launching your Editor
+
+To launch your Studio app project in your editor of choice, navigate to the Designer index and click "Open in editor." Alternatively,
+the Project -> Open in Editor menu bar item may be used.
+
+<figure>
+  <img alt="New Feature Button" src="/img/studio/2/ss-designer-index.png" />
+</figure>
+
+## Configuring your Editor
+
+Studio detects a number of popular code editors, such as Visual Studio Code, Sublime Text, and more.
+
+If Studio is not able to detect your editor, ensure that one is installed and configured in the default manner.
+
+Studio will automatically detect one of
+
+- Sublime Text
+- Atom
+- Visual Studio Code
+- WebStorm
+- TextMate
+- Vim
+- NeoVim
+- IntelliJ
+- GNU nano
+- GNU Emacs
+
+## Opening in another editor
+
+If Studio does not automatically detect your editor or your editor is not on the list of supported editors,
+the app project can always be opened directly.
+
+To find the project path, use the Project -> Open in Finder (or Explorer) option to navigate to the project
+directory on disk and navigate to that path in your editor's project open dialog.
diff --git a/versioned_docs/version-v6/studio/designer.md b/versioned_docs/version-v6/studio/designer.md
new file mode 100644
index 00000000000..f026bd5e459
--- /dev/null
+++ b/versioned_docs/version-v6/studio/designer.md
@@ -0,0 +1,179 @@
+# Designer Overview
+
+The Designer is the powerhouse of Studio, offering a drag-and-drop page builder for pages and components, with a code-behind editor for the template, styles, and scripts (TypeScript)
+
+## Introduction
+
+With the Designer, developers can:
+
+- Drag and drop to build pages and components
+- Select from the entire library of Ionic elements for drag-and-drop _and_ code editing.
+- Switch between visual and code editing for pages and components
+- View and work with most supported Ionic element properties, saving a trip checking the Documentation
+
+<figure>
+  <img alt="Designer Mode" src="/img/studio/2/ss-designer.png" />
+</figure>
+
+## Pages and Components
+
+In the Designer, pages and components work directly off of the files powering them (TypeScript, HTML, CSS).
+
+When first loaded, the Designer index is shown. This index lsits the pages and custom components that Studio detected in the app. Components detected can be seen by switching to the components tab.
+
+Studio finds pages and components by scanning your project looking for Component source files, so works on a variety of project file layouts.
+
+<blockquote>
+  <p>
+    Since the difference between pages and components is conceptual, Ionic Studio relies on convention to differentiate
+    them. If there are pages missing, make sure each page follows the convention Ionic Studio is expecting:
+  </p>
+  <p>
+    The files that represent each page must have the proper suffixes (e.g. <code>.page.ts</code>,{' '}
+    <code>.page.html</code>, <code>.page.scss</code>). See the{' '}
+    <a href="https://angular.io/guide/styleguide#naming">Angular style guide</a> for additional information about naming
+    conventions.
+  </p>
+</blockquote>
+
+<figure>
+  <img alt="Page Index" src="/img/studio/2/ss-designer-index.png" />
+</figure>
+
+Switching to the component section on the Designer index reveals all the components found in the app.
+
+<figure>
+  <img alt="Component Index" src="/img/studio/2/ss-component-index.png" />
+</figure>
+
+See [Adding Pages and Components](#adding-pages-and-components) to create new pages and components.
+
+## Adding Pages and Components
+
+To add pages or components to an app, click the **New** button in the top right of the page index.
+
+<figure>
+  <img alt="New Feature Button" src="/img/studio/2/ss-new-feature.png" />
+</figure>
+
+When adding a component (rather than a page), Studio will prompt for the name and a page in which to register it.
+
+<figure>
+  <img alt="New Component Modal" src="/img/studio/2/ss-component-new.png" />
+</figure>
+
+This adds the component as a _import_ in the NgModule of the selected page, which allows it to be used in that page.
+
+<blockquote>
+  The same code changes are necessary to use the component in other pages. See [this
+  FAQ](faq.md#using-a-custom-component-in-additional-pages) for details.
+</blockquote>
+
+## Drag & Drop
+
+The Designer offers a drag & drop canvas for quickly adding new elements and rearranging existing elements.
+
+### Selecting Elements
+
+To select an element, click on it in the canvas. To select a child element, double click on its parent. Continue to double click to select deeper child elements and to edit text.
+
+To enable fine-selection, which selects the deepest child under the mouse cursor, hold down the <kbd>Ctrl</kbd> key (or <kbd>Command</kbd> for macOS) and hover over an element.
+
+To exit the current selection, use the <kbd>Esc</kbd> key.
+
+To select any element under the cursor, right click and choose an element from the `Select Element` dropdown:
+
+<figure>
+  <img alt="Selecting elements" src="/img/studio/2/ss-select-element-menu.png" />
+</figure>
+
+To select any element in the current document, access the element tree and click on the element to select:
+
+<figure>
+  <img alt="Editing Templates" src="/img/studio/2/ss-tree-select.png" />
+</figure>
+
+### Adding New Elements
+
+To add new elements to a page or component, drag and drop a new element from the Elements list, or use right click and "Quick Add" to
+add context-specific elements easily.
+
+<figure>
+  <img alt="Add Element Menu" src="/img/studio/2/ss-new-elements.png" />
+</figure>
+
+Elements may also be dragged into the HTML for a page or component, and will result in a new code snippet being inserted at the cursor position.
+
+### Quick Adding New Elements
+
+Certain elements support quickly adding child elements by right-clicking and selecting an element in the `Quick Add` menu. Some components that support quickly adding new elements include List, List Item, Grid, Segment Button, and more.
+
+<figure>
+  <img alt="Quick Add Element Menu" src="/img/studio/2/ss-quick-add-element-menu.png" />
+</figure>
+
+### Rearranging Existing Elements
+
+To rearrange existing elements in the canvas, click and hold on it, then drag it into place.
+
+Remember, it is also possible to drag and drop code selections in the code editor.
+
+## Properties Panel
+
+When an element is selected in the Designer canvas, the properties panel will update to reflect the selected element.
+
+<figure>
+  <img alt="Properties Panel" src="/img/studio/2/ss-properties-panel.png" />
+</figure>
+
+In the properties panel, the properties that can be modified are listed.
+
+For Ionic components, the properties panel contains a link to the component's documentation at the bottom.
+
+<blockquote>
+  Unfortunately, the properties panel does not show properties for custom components in your app, but this is a feature
+  we'll be adding!
+</blockquote>
+
+## Editor View
+
+The HTML, CSS, and JS (TypeScript) for a page or company can be edited by switching to the Editor View:
+
+<figure>
+  <img alt="Editor View" src="/img/studio/2/ss-editor-view.png" />
+</figure>
+
+## Template Editing
+
+Each page or component has an HTML template that makes up its structure. Template editing makes it easy to make quick edits to the template, such as changing text or dragging in new element code snippets from the Elements list.
+
+<figure>
+  <img alt="Editor View" src="/img/studio/2/ss-editor-template.png" />
+</figure>
+
+## Styles Editing
+
+The Styles editor contains the CSS (Sass) for that page or component.
+
+Any changes to the styles are reflected in the canvas when saved. The styles in this mode are only applicable to the current page or component.
+
+<figure>
+  <img alt="Editor View" src="/img/studio/2/ss-editor-styles.png" />
+</figure>
+
+## Scripts Editing
+
+The **Scripts** editor is for making changes to the controller, or logic, behind a page or component. This editor is used for making
+quick changes to logic for the page or component. For more complicated changes we recommend opening the project in a full-fledged code editor.
+
+<figure>
+  <img alt="Editor View" src="/img/studio/2/ss-editor-code.png" />
+</figure>
+
+## Troubleshooting the Canvas
+
+If the canvas gets into an inconsistent or incorrect state, click the reload icon from the canvas utility bar to cause the canvas to reload its current contents:
+
+<figure>
+  <img alt="Editing Scripts" src="/img/studio/2/ss-compose-reload.png" />
+</figure>
diff --git a/versioned_docs/version-v6/studio/faq.md b/versioned_docs/version-v6/studio/faq.md
new file mode 100644
index 00000000000..49a116ceabd
--- /dev/null
+++ b/versioned_docs/version-v6/studio/faq.md
@@ -0,0 +1,23 @@
+# Frequently Asked Questions
+
+## Which versions of Ionic Framework are supported?
+
+Ionic Studio currently supports apps using **Ionic 4** and **Angular**.
+
+Ionic 3 is not supported. We encourage you to [migrate to Ionic 4](https://ionicframework.com/docs/reference/migration).
+
+## Is Capacitor supported?
+
+Ionic Studio currently does not support Capacitor. We plan to add support soon now that Capacitor has reached 1.0.
+
+## Can I use a component in multiple pages?
+
+Yes. In order to preserve speed, Angular only loads the components that it needs for any given page. This means that in order to use a custom component inside of a page, you must first make sure that components module is imported into your pages module.
+
+Open up the page you'd like to use a component in, then navigate to the module tab. Take note of the `import` line as well as the `import` in `ngModule`. Both things are required in order to load your component on a page.
+
+In this example, our component is called "MyCustomThing":
+
+<figure>
+  <img alt="My Custom Thing NgModule" src="/img/studio/ss-my-custom-thing-ngmodule.png" />
+</figure>
diff --git a/versioned_docs/version-v6/studio/guides/routing-and-navigation.md b/versioned_docs/version-v6/studio/guides/routing-and-navigation.md
new file mode 100644
index 00000000000..ac666208502
--- /dev/null
+++ b/versioned_docs/version-v6/studio/guides/routing-and-navigation.md
@@ -0,0 +1,29 @@
+# Routing and Navigation
+
+A key part of developing Ionic apps is setting up routing and ensuring fluid navigation between pages.
+
+The Ionic Framework docs have a [great primer](../../angular/navigation.md) on Angular routing and navigation.
+
+## Quick Tips
+
+The following tips assume you already know the basics about Angular routing.
+
+### Adding a New Page
+
+When you add a new Page in Ionic Studio, it is automatically added to the routing configuration inside of `app-routing.module.ts`.
+
+<figure>
+  <img alt="Page added to App Routing Module" src="/img/studio/ss-page-routing-module.png" />
+</figure>
+
+If you'd like to change where this page is "located", you might want to move the Route into a different routing or module file.
+
+### Using a Page in Multiple Places
+
+You can use the same page in multiple places by ensuring that a route exists for it from those locations. For instance, if you'd like the "Detail" Page to be accessible inside of Tab1 of your application as well as Tab2, you'd want a `/detail` declaration in the router for both Tab1 and Tab2.
+
+### Using RouterLink
+
+You should be using the `[routerLink]="['/tabs','tab1']"` style of navigation when trying to make a button or list-item (or other component) link to a different page.
+
+If this throws an error, you need to ensure that RouterModule is included in your pages module.
diff --git a/versioned_docs/version-v6/studio/guides/using-native-functionality.md b/versioned_docs/version-v6/studio/guides/using-native-functionality.md
new file mode 100644
index 00000000000..41e0f4089e6
--- /dev/null
+++ b/versioned_docs/version-v6/studio/guides/using-native-functionality.md
@@ -0,0 +1,17 @@
+# Using Native Functionality
+
+Depending on which Cordova Plugin you're using, you may need to run your app on a physical or virtual device in order to test out that feature.
+
+For instance, a plugin for utilizing the Gyroscope will only work on a physical device, while a plugin for Storage will work in Serve as well.
+
+In order to debug Native Functionality, it is best to utilize the native tooling. For instance, you might want to use the following in order to test:
+
+1. In Studio's main toolbar, click on **Project** &raquo; **Build** &raquo; **Build iOS** (or Android)
+1. Click on **Project** &raquo; **Open in XCode** (or Android Studio)
+1. Use XCode or Android Studio to run your project on your physical device.
+1. You now have access to native debugging logs inside of XCode or Android Studio.
+1. You can also use Safari (iOS) or Chrome (Android) in order to inspect the web content of your application.
+
+For more detailed instructions, please see the [Building for iOS](../../developing/ios.md) or [Building for Android](../../developing/android.md) documentation.
+
+If you'd like to follow along with a beginners tutorial that includes utilizing the Camera Cordova plugin, please see our [Build your First App guide](../../angular/your-first-app.md). While this guide isn't specific to Studio, you can still follow along using Studio.
diff --git a/versioned_docs/version-v6/studio/running.md b/versioned_docs/version-v6/studio/running.md
new file mode 100644
index 00000000000..8636ae2f597
--- /dev/null
+++ b/versioned_docs/version-v6/studio/running.md
@@ -0,0 +1,66 @@
+# Running Apps
+
+Ionic Studio offers support for serving, running, and deploying apps.
+
+Serving, running, and deploying each have pros and cons.
+
+- **Serving** is easy and requires no native project setup, but doesn't work with native functionality
+- **Running** apps can be complex and difficult to debug, but allows the app to be tested on a real device
+- **Installing** is the best way to make sure the app is ready for production, but doesn't work with livereload
+
+## Serving Apps
+
+When an app is served, Ionic Studio starts a Dev Server with [Live Reload](../reference/glossary.md#livereload) and displays the app in a separate browser window, called a _Serve Window_.
+
+To serve an app, click the Play button in the upper right-hand corner of Ionic Studio. Then choose _Serve_ from the dropdown.
+
+This will compile the app and then watch for changes in source files. When changes are made, the app will automatically be reloaded with the latest changes.
+
+### Serve Window
+
+After compilation, the app is opened inside a Serve Window.
+
+<figure class="device">
+  <img alt="Serve Window" src="/img/studio/ss-serve-window.png" />
+</figure>
+
+The Serve Window toolbar offers features such as changing the device viewport, switching between portrait and landscape orientation, reloading the webview, and opening the DevTools for debugging.
+
+When the device viewport changes, the Serve Window is resized and will be reloaded to reflect the appropriate device styles, whether iOS or Material Design.
+
+It is possible to open multiple Serve Windows by using the Play button and choosing _Serve_. This is useful for testing the look and feel on iOS and Android, testing the app on different viewports or orientations, all at the same time.
+
+#### Debugging
+
+Clicking the debug button will open a proper instance of the Chrome DevTools for the app. Right-clicking on app features will open a context menu with _Inspect Element_.
+
+For information on how to use the Chrome DevTools, see the [Chrome DevTools documentation](https://developers.google.com/web/tools/chrome-devtools/).
+
+<figure>
+  <img alt="Chrome DevTools" src="/img/studio/ss-devtools.png" />
+</figure>
+
+## Running Apps
+
+<blockquote>
+  Since running an app will install it on an actual native device, some additional setup is required. See the [Native
+  iOS & Android](setup/native.md) documentation for setup guides.
+</blockquote>
+
+To run an app, click the Play button in the upper right-hand corner of Ionic Studio. Then choose _Run_ from the dropdown.
+
+<figure>
+  <img alt="Run Modal" src="/img/studio/ss-run-modal.png" />
+</figure>
+
+Choose a platform and a target device, which can be an emulator or hardware device plugged in to your computer.
+
+With the Live Reload option, Ionic Studio will use the same Dev Server as in _Serve_, which enables quick development while working with actual devices.
+
+To debug running apps, see the docs for debugging [iOS Apps](../developing/ios.md#debugging-ios-apps) and [Android Apps](../developing/android.md#debugging-android-apps).
+
+## Installing Apps
+
+To install a standalone version of an app, use _Run_ and then switch off the _Live Reload_ option.
+
+This will copy app assets onto the target device or emulator, instead of using a Dev Server, which allows the app to continue working when the device is disconnected from the computer.
diff --git a/versioned_docs/version-v6/studio/settings.md b/versioned_docs/version-v6/studio/settings.md
new file mode 100644
index 00000000000..3adc2e9bd06
--- /dev/null
+++ b/versioned_docs/version-v6/studio/settings.md
@@ -0,0 +1,68 @@
+# Settings
+
+Manage app configuration and settings.
+
+## Config
+
+The **Config** section is for managing the common settings in `config.xml` such as the name and version of the app, as well as the Bundle ID (aka [Package ID](../reference/glossary.md#package-id)).
+
+<figure>
+  <img alt="Settings -> Config" src="/img/studio/2/ss-settings.png" />
+</figure>
+
+## Platforms
+
+The **Platforms** section is for managing Cordova platforms. Use the appropriate buttons to add, remove, and update platforms.
+
+<figure>
+  <img alt="Settings -> Platforms" src="/img/studio/2/ss-settings-platforms.png" />
+</figure>
+
+## Plugins
+
+The **Plugins** section is for managing Cordova plugins. Use the appropriate buttons to add, remove, and update plugins.
+
+<figure>
+  <img alt="Settings -> Plugins" src="/img/studio/2/ss-settings-plugins.png" />
+</figure>
+
+### Installing Plugins
+
+To install a Cordova plugin, click the **Add** button. The install modal will open, then click **Install** to confirm. If a plugin requires variables, the modal will prompt for them.
+
+The plugins available for install comprise all [Ionic Native](../native.md) plugins. When a plugin is installed, both the Cordova plugin and the Ionic Native wrapper are installed automatically.
+
+<blockquote>
+  <p>
+    It is not yet possible in Ionic Studio to install Cordova plugins other than those in Ionic Native. This feature is
+    coming soon!
+  </p>
+  <p>
+    You can always install the Cordova plugin in the command line by using <strong>Project</strong> &raquo;{' '}
+    <strong>Open in Terminal</strong> and following the installation docs for the Cordova plugin.
+  </p>
+</blockquote>
+
+<blockquote>
+  Some plugins may require variables that Ionic Studio isn't aware of. In this case, the install will fail. Try
+  installing the plugin again with the necessary variables and let us know by [reporting the bug](support.md).
+</blockquote>
+
+## Icon & Splash Screen
+
+The **Icon & Splash Screen** section is for managing app resources. When changing icons and splash screens within Ionic Studio, the appropriate sizes required for the vast collection of device sizes and types will be generated automatically.
+
+Ionic Studio uses the Ionic CLI command <code>ionic cordova resources</code> to generate app resources. More information about icons and splash screens can be found in [the CLI docs](../cli/commands/cordova-resources.md).
+
+<figure>
+  <img alt="App Resources" src="/img/studio/2/ss-settings-resources.png" />
+</figure>
+
+## Linking to Appflow
+
+If your account has access to [Appflow](https://ionic.io/appflow) and you'd like to use it for this app, you can quickly link it with your Appflow account
+in this section of the settings area:
+
+<figure>
+  <img alt="App Resources" src="/img/studio/2/ss-settings-appflow.png" />
+</figure>
diff --git a/versioned_docs/version-v6/studio/setup/installation.md b/versioned_docs/version-v6/studio/setup/installation.md
new file mode 100644
index 00000000000..65b99714ed9
--- /dev/null
+++ b/versioned_docs/version-v6/studio/setup/installation.md
@@ -0,0 +1,17 @@
+# Installing Studio
+
+The latest downloads for Ionic Studio are available in the [Ionic Dashboard](https://dashboard.ionicframework.com/personal/downloads).
+
+## Prerequisites
+
+- macOS or Windows 10
+- Make sure you have the latest LTS release of [Node &amp; npm](../../intro/environment.md#node-npm) set up on your computer
+- Optionally install [Git](../../intro/environment.md#git) for version control
+
+## Installation
+
+The Ionic Studio download link can be obtained in the [downloads section](https://dashboard.ionicframework.com/personal/downloads) of the Ionic Dashboard.
+
+Once Ionic Studio has been downloaded, run through the installer and open Ionic Studio to continue the installation process. Ionic Studio has a few tools it depends on, which are installed and updated automatically when it boots up.
+
+Ionic Studio will automatically update itself when new versions are released, but can be reinstalled by using the download link found above.
diff --git a/versioned_docs/version-v6/studio/setup/native.md b/versioned_docs/version-v6/studio/setup/native.md
new file mode 100644
index 00000000000..392c8137d73
--- /dev/null
+++ b/versioned_docs/version-v6/studio/setup/native.md
@@ -0,0 +1,13 @@
+# Native iOS & Android
+
+Utilizing native functionality in your app may require additional setup, including:
+
+- Using Cordova Plugins to access Hardware APIs
+- Running the app on hardware or virtual devices
+- Building app binaries
+- Publishing to the App Store or Google Play Store
+
+Follow our native platform setup guides to prepare your environment:
+
+- [iOS Setup](../../developing/ios.md) (macOS only)
+- [Android Setup](../../developing/android.md)
diff --git a/versioned_docs/version-v6/studio/start.md b/versioned_docs/version-v6/studio/start.md
new file mode 100644
index 00000000000..ea562de7458
--- /dev/null
+++ b/versioned_docs/version-v6/studio/start.md
@@ -0,0 +1,13 @@
+# Getting Started
+
+To create a new Ionic Studio app:
+
+1. Open the New Project modal with **File** &raquo; **New Project**. ![Start a New Project with Studio](/img/studio/2/ss-new-project.png)
+2. Supply a name for your app. This can be changed later.
+3. Optionally supply a Bundle ID (aka [Package ID](../reference/glossary.md#package-id)), which is used to identify your app when published. It's okay to leave this blank for now.
+4. Choose the template you'd like to start with. For a demo of Studio on a real app, choose the sample option (note this is intended only as a demo)
+5. Click **Create App**.
+
+## Opening Existing Apps
+
+Ionic Studio supports Ionic Angular 4+ apps. To open an existing app, click "Browse Files" and choose the directory where your app is located.
diff --git a/versioned_docs/version-v6/studio/support.md b/versioned_docs/version-v6/studio/support.md
new file mode 100644
index 00000000000..591c5983d5a
--- /dev/null
+++ b/versioned_docs/version-v6/studio/support.md
@@ -0,0 +1,15 @@
+# Support
+
+Support is available within Ionic Studio by clicking **Help & Support** from the account menu, which is opened by clicking the user icon at the top right of Ionic Studio.
+
+If you cannot open Ionic Studio, please open a [support request](https://ionicframework.com/support/request).
+
+<figure>
+  <img alt="Support Modal" src="/img/studio/ss-support-modal.png" />
+</figure>
+
+- Please use the **Bugs or Feedback** option for anything related to Ionic Studio as a _product_, such as bugs, feature requests, and general feedback.
+- The **Explore the Docs** option links to these docs for Ionic Studio.
+- Please use the **Account and Billing** option for anything related to your Ionic account, such as billing. This option opens a [support request](https://ionicframework.com/support/request) for Ionic Customer Support.
+
+If your support inquiry relates to Ionic app development in general, we encourage you to join the vibrant Ionic community in the [Ionic Forum](https://forum.ionicframework.com/). More community help options are available on our [Support page](https://ionicframework.com/support/).
diff --git a/versioned_docs/version-v6/studio/terminal.md b/versioned_docs/version-v6/studio/terminal.md
new file mode 100644
index 00000000000..83556ffdde2
--- /dev/null
+++ b/versioned_docs/version-v6/studio/terminal.md
@@ -0,0 +1,36 @@
+# Terminal
+
+Ionic Studio has an integrated terminal for running commands within an Ionic app.
+
+## Introduction
+
+:::note
+If you're new to the command line, you can check out [our blog post](https://ionicframework.com/blog/new-to-the-command-line/) on the basics.
+:::
+
+The integrated terminal is a convenient way to perform a quick command line task without navigating folder structures or switching windows. The terminal defaults to the app directory.
+
+Examples of what you can do with the integrated terminal:
+
+- Ionic CLI commands
+- Git operations
+- File operations
+- etc.
+
+## Using the Terminal
+
+To open the terminal, use <kbd>Ctrl</kbd>+<kbd>\`</kbd>, or click the plus sign in the terminal bar:
+
+<figure>
+  <img alt="New Terminal" src="/img/studio/2/ss-terminal.png" />
+</figure>
+
+The integrated terminal uses your own configured shell. Configure this on macOS by setting the `SHELL` environment variable.
+
+:::note
+For Windows, `powershell.exe` is used, and this is not yet configurable.
+:::
+
+<figure>
+  <img alt="Using Git in Terminal" src="/img/studio/2/ss-terminal-git.png" />
+</figure>
diff --git a/versioned_docs/version-v6/studio/theming.md b/versioned_docs/version-v6/studio/theming.md
new file mode 100644
index 00000000000..adc47a29e9c
--- /dev/null
+++ b/versioned_docs/version-v6/studio/theming.md
@@ -0,0 +1,15 @@
+# Theming
+
+Manage app themes to tweak look and feel.
+
+The Ionic Framework docs have [great documentation](../theming/basics.md) on theming Ionic apps.
+
+## Theme Colors
+
+The color generator within Ionic Studio automatically generates the CSS variables for the color, as well as the associated contrast, shade, and tint colors.
+
+<figure>
+  <img alt="Color Generator" src="/img/studio/2/ss-theme.png" />
+</figure>
+
+The changes are available for previewing in your own app in the [Designer](designer.md) canvas.
diff --git a/versioned_docs/version-v6/techniques/security.md b/versioned_docs/version-v6/techniques/security.md
new file mode 100644
index 00000000000..7a5d8513256
--- /dev/null
+++ b/versioned_docs/version-v6/techniques/security.md
@@ -0,0 +1,154 @@
+---
+title: Security
+disableHtmlPreviews: true
+---
+
+<head>
+  <title>Security for Angular, React, and Vue Apps - Ionic Framework</title>
+  <meta
+    name="description"
+    content="View Ionic's security info for sanitizing user input, ejecting from the built-in sanitizer, and more. Learn about app security using Angular, React, and Vue."
+  />
+</head>
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## Sanitizing User Input
+
+For components such as `ion-alert` developers can allow for custom or user-provided content. This content can be plain text or HTML and should be considered untrusted. As with any untrusted input, it is important to sanitize it before doing anything else with it. In particular, using things like `innerHTML` without sanitization provides an attack vector for bad actors to input malicious content and potentially launch a [Cross Site Scripting attack (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting).
+
+Ionic comes built in with basic sanitization methods for the components it provides, but for user-created components it is up to the developer to make sure all data is sanitized. Different frameworks have different solutions for sanitizing user input, so developers should familiarize themselves with what their specific framework offers.
+
+For developers who are not using a framework, or for developers whose framework does not provide the sanitization methods they need, we recommend using [sanitize-html](https://www.npmjs.com/package/sanitize-html). This package provides a simple HTML sanitizer that allows the developer to specify the exact tags and attributes that they want to allow in their application.
+
+### Angular
+
+Angular comes built in with the `DomSanitizer` class. This helps prevent XSS issues by ensuring that values are safe to be used in the DOM. By default, Angular will mark any values it deems unsafe. For example, the following link would be marked as unsafe by Angular because it would attempt to execute some JavaScript.
+
+```tsx
+public myUrl: string = 'javascript:alert("oh no!")';
+
+...
+
+<a [href]="myUrl">Click Me!</a>
+```
+
+To learn more about the built-in protections that Angular provides, see the [Angular Security Guide](https://angular.io/guide/security).
+
+### React
+
+React DOM escapes values embedded in JSX before rendering them by converting them to strings. For example, the following would be safe as `name` is converted to a string before being rendered:
+
+```jsx
+const name = values.name;
+const element = <h1>Hello, {name}!</h1>;
+```
+
+However, this does not stop someone from injecting JavaScript into places such as the `href` attribute of an anchor element. The following is unsafe and can potentially allow an XSS attack to occur:
+
+```jsx
+const userInput = 'javascript:alert("Oh no!")';
+const element = <a href={userInput}>Click Me!</a>;
+```
+
+If the developer needs to achieve more comprehensive sanitization, they can use the [sanitize-html](https://www.npmjs.com/package/sanitize-html) package.
+
+To learn more about the built-in protections that React and JSX provide, see the [React JSX Documentation](https://reactjs.org/docs/introducing-jsx.html#jsx-prevents-injection-attacks).
+
+### Vue
+
+Vue does not provide any type of sanitizing methods built in. It is recommended that developers use a package such as [sanitize-html](https://www.npmjs.com/package/sanitize-html).
+
+To learn more about the security recommendations for binding to directives such as `v-html`, see the [Vue Syntax Guide](https://vuejs.org/v2/guide/syntax.html#Raw-HTML).
+
+## Ejecting from the built-in sanitizer
+
+For developers who wish to add complex HTML to components such as `ion-toast`, they will need to eject from the sanitizer that is built into Ionic Framework. Developers can either disable the sanitizer across their entire app or bypass it on a case-by-case basis.
+
+:::note
+Bypassing sanitization functionality can make your application vulnerable to <a href="https://en.wikipedia.org/wiki/Cross-site_scripting" target="_blank" rel="noreferrer">XSS attacks</a>. Please exercise extreme caution when disabling the sanitizer.
+:::
+
+### Disabling the sanitizer via config
+
+Ionic Framework provides an application config option called `sanitizerEnabled` that is set to `true` by default. Set this value to `false` to globally disable Ionic Framework's built in sanitizer. Please note that this does not disable any sanitizing functionality provided by other frameworks such as Angular.
+
+### Bypassing the sanitizer on a case-by-case basis
+
+Developers can also choose to eject from the sanitizer in certain scenarios. Ionic Framework provides the `IonicSafeString` class that allows developers to do just that.
+
+#### Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'react', label: 'React' },
+  ]
+}>
+<TabItem value="angular">
+
+```tsx
+import { IonicSafeString, ToastController } from '@ionic/angular';
+
+...
+
+constructor(private toastController: ToastController) {}
+
+async presentToast() {
+  const toast = await this.toastController.create({
+      message: new IonicSafeString('<ion-button>Hello!</ion-button>'),
+      duration: 2000
+  });
+  toast.present();
+}
+
+```
+</TabItem>
+<TabItem value="javascript">
+
+```javascript
+import { IonicSafeString } from '@ionic/core';
+
+...
+
+const async presentToast = () => {
+  const toast = document.createElement('ion-toast');
+  toast.message = new IonicSafeString('<ion-button>Hello!</ion-button>');
+  toast.duration = 2000;
+
+  document.body.appendChild(toast);
+  return toast.present();
+}
+
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+import React, { useState } from 'react';
+import { Animation, IonButton, IonContent, IonicSafeString, IonToast } from '@ionic/react';
+
+export const ToastExample: React.FC = () => {
+  const [showToast, setShowToast] = useState(false);
+
+  return (
+    <IonContent>
+      <IonButton onClick={() => setShowToast(true)} expand="block">Show Toast</IonButton>
+      <IonToast
+        isOpen={showToast}
+        onDidDismiss={() => setShowToast(false)}
+        message={new IonicSafeString('<ion-button>Hello!</ion-button>')}
+        duration={2000}
+      />
+    </IonContent>
+  )
+};
+```
+</TabItem>
+</Tabs>
+````
diff --git a/versioned_docs/version-v6/test/page1.md b/versioned_docs/version-v6/test/page1.md
new file mode 100644
index 00000000000..d965196cf5d
--- /dev/null
+++ b/versioned_docs/version-v6/test/page1.md
@@ -0,0 +1,3 @@
+# Testing Page 1
+
+This is Testing page 1, Get to Testing Page 2 [here](page2.md).
diff --git a/versioned_docs/version-v6/test/page2.md b/versioned_docs/version-v6/test/page2.md
new file mode 100644
index 00000000000..2d2d61adacf
--- /dev/null
+++ b/versioned_docs/version-v6/test/page2.md
@@ -0,0 +1,3 @@
+# Testing Page 2
+
+This is Testing page 2, Get to Testing Page 1 [here](page1.md).
diff --git a/versioned_docs/version-v6/theming/advanced.md b/versioned_docs/version-v6/theming/advanced.md
new file mode 100644
index 00000000000..20516abca8b
--- /dev/null
+++ b/versioned_docs/version-v6/theming/advanced.md
@@ -0,0 +1,182 @@
+---
+title: Advanced Theming
+sidebar_label: Advanced
+initialTab: 'preview'
+inlineHtmlPreviews: true
+---
+
+import CodeColor from '@components/page/theming/CodeColor';
+
+<head>
+  <title>Advanced Theming: Quickly Customize App Colors using CSS | Ionic</title>
+  <meta
+    name="description"
+    content="CSS-based theming enables apps to customize colors quickly by loading a CSS file or changing CSS property values. Read to learn about Ionic Advanced Theming."
+  />
+</head>
+
+CSS-based theming enables apps to customize the colors quickly by loading a CSS file or changing a few CSS property values.
+
+## `theme-color` Meta
+
+The `theme-color` value for a meta tag indicates a color that browsers can use to customize the display of a page or of the surrounding interface. This kind of meta tag can also accept media queries which allow developers to set the theme color for both light and dark modes.
+
+The `content` value for the `theme-color` meta must contain a valid <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank" rel="noopener noreferrer">CSS Color</a> and cannot contain CSS Variables.
+
+:::note
+The `theme-color` meta controls the interface theme when running in a web browser or as a PWA and has no effect when an app is deployed using Capacitor or Cordova. If you are looking to customize the area under the status bar, we recommend using the [Capacitor Status Bar Plugin](https://capacitorjs.com/docs/apis/status-bar).
+:::
+
+The example below demonstrates how to use `theme-color` to style the browser interface on iOS 15.
+
+```html
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="#3880ff" />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#eb445a" />
+```
+
+| Light Mode                                                                             | Dark Mode                                                                            |
+| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| ![Application with theme-color meta in light mode](/img/theming/theme-color-light.png) | ![Application with theme-color meta in dark mode](/img/theming/theme-color-dark.png) |
+
+The `theme-color` meta can also be used to customize the toolbar in Safari on macOS Monterey or newer.
+
+Safari on iOS 15 and macOS will automatically determine an appropriate theme color to use, but adding this meta tag is useful if you need more control over the theme.
+
+There is a small subset of colors that browsers will not use as they interfere with the browser interface. For example, setting `content="red"` will not work in Safari on macOS because that color interferes with the red close button in the toolbar. If you run into this situation, try altering your color selection slightly.
+
+:::note
+Browsers will prefer the `theme-color` meta over `theme` in `manifest.json` if both are present.
+:::
+
+For more information, see the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color" target="_blank" rel="noopener noreferrer">MDN theme-color documentation</a>.
+
+## Global Variables
+
+While the application and stepped variables in the themes section are useful for changing the colors of an application, often times there is a need for variables that are used in multiple components. The following variables are shared across components to change global padding settings and more.
+
+### Application Variables
+
+| Name                      | Description                                                                                |
+| ------------------------- | ------------------------------------------------------------------------------------------ |
+| `--ion-font-family`       | Font family of the app                                                                     |
+| `--ion-statusbar-padding` | Statusbar padding top of the app                                                           |
+| `--ion-safe-area-top`     | Adjust the safe area inset top of the app                                                  |
+| `--ion-safe-area-right`   | Adjust the safe area inset right of the app                                                |
+| `--ion-safe-area-bottom`  | Adjust the safe area inset bottom of the app                                               |
+| `--ion-safe-area-left`    | Adjust the safe area inset left of the app                                                 |
+| `--ion-margin`            | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin)    |
+| `--ion-padding`           | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding) |
+
+### Grid Variables
+
+| Name                           | Description                                    |
+| ------------------------------ | ---------------------------------------------- |
+| `--ion-grid-columns`           | Number of columns in the grid                  |
+| `--ion-grid-padding-xs`        | Padding of the grid for xs breakpoints         |
+| `--ion-grid-padding-sm`        | Padding of the grid for sm breakpoints         |
+| `--ion-grid-padding-md`        | Padding of the grid for md breakpoints         |
+| `--ion-grid-padding-lg`        | Padding of the grid for lg breakpoints         |
+| `--ion-grid-padding-xl`        | Padding of the grid for xl breakpoints         |
+| `--ion-grid-column-padding-xs` | Padding of the grid columns for xs breakpoints |
+| `--ion-grid-column-padding-sm` | Padding of the grid columns for sm breakpoints |
+| `--ion-grid-column-padding-md` | Padding of the grid columns for md breakpoints |
+| `--ion-grid-column-padding-lg` | Padding of the grid columns for lg breakpoints |
+| `--ion-grid-column-padding-xl` | Padding of the grid columns for xl breakpoints |
+
+## Known Limitations with Variables
+
+### The Alpha Problem
+
+There is not yet full <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility" target="_blank">browser support</a> for alpha use of a hex color. The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()" target="_blank">rgba()</a> function only accepts a value in `R, G, B, A` (Red, Green, Blue, Alpha) format. The following code shows examples of correct and incorrect values passed to `rgba()`.
+
+```css
+/* These examples use the same color: blueviolet. */
+.broken {
+  --violet: #8a2be2;
+
+  /* rgba(#8a2be2, .5) */
+  color: rgba(var(--violet), 0.5); /* ERROR! Doesn't support hex. */
+}
+
+.working {
+  --violet-rgb: 138, 43, 226;
+
+  /* rgba(138, 43, 226, .5) */
+  color: rgba(var(--violet-rgb), 0.5); /* WORKS! */
+}
+```
+
+:::note
+See the [CSS Variables](css-variables.md) section for more information on how to get and set CSS variables.
+:::
+
+Ionic uses colors with an opacity (alpha) in several components. In order for this to work, those properties must be provided in RGB format. When changing any of the properties that have a variation ending in `-rgb`, it is important they are also provided in a comma separated format **without parentheses**. Below are some examples for changing text and background color.
+
+```css
+:root {
+  /* These examples use the same color: sienna. */
+  --ion-text-color: #a0522d;
+  --ion-text-color-rgb: 160, 82, 45;
+
+  /* These examples use the same color: lightsteelblue. */
+  --ion-background-color: #b0c4de;
+  --ion-background-color-rgb: 176, 196, 222;
+}
+```
+
+Note that the RGB formatted colors are the exact same color as the hex properties, but can now be used with `rgba()`. For example, `--ion-text-color-rgb` can now be used in the following way
+
+```css
+body {
+  color: rgba(var(--ion-text-color-rgb), 0.25);
+}
+```
+
+### Variables in Media Queries
+
+CSS variables in [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) are not currently supported, but there are open drafts to add [custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) and [custom environment variables](https://drafts.csswg.org/css-env-1/) that would solve this problem! However, with the current state of support, the following will **not** work:
+
+```css
+:root {
+  --breakpoint: 600px;
+}
+
+@media (min-width: var(--breakpoint)) {
+  /* Doesn't work :( */
+}
+```
+
+### Modifying CSS Color Variables
+
+While it is possible to easily alter a color in Sass using its built-in functions, it is currently not as easy to modify colors set in CSS Variables. This can be accomplished in CSS by splitting the [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) or [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) channels and modifying each value, but it is complex and has missing functionality.
+
+What exactly does this mean? Basically, using a CSS preprocessor, such as Sass, allows us to use functions to manipulate a single color. For example, we can create the following colors in Sass:
+
+```scss
+// Background color, shade, and tint
+$background: #3880ff;
+$background-shade: mix(#000, $background, 12%);
+$background-tint: mix(#fff, $background, 10%);
+
+// Text color, darker and lighter
+$text: #444;
+$text-darker: darken($text, 15);
+$text-lighter: lighten($text, 15);
+```
+
+After running through the Sass compiler, the colors will have the following values:
+
+| Variable            | Value                                          |
+| ------------------- | ---------------------------------------------- |
+| `$background`       | <CodeColor color="#3880ff">#3880ff</CodeColor> |
+| `$background-shade` | <CodeColor color="#3171e0">#3171e0</CodeColor> |
+| `$background-tint`  | <CodeColor color="#4c8dff">#4c8dff</CodeColor> |
+| `$text`             | <CodeColor color="#444444">#444444</CodeColor> |
+| `$text-darker`      | <CodeColor color="#1e1e1e">#1e1e1e</CodeColor> |
+| `$text-lighter`     | <CodeColor color="#6a6a6a">#6a6a6a</CodeColor> |
+
+However, because CSS variables can be set at runtime and are more dynamic, it is not currently possible to manipulate them using a simple function.
+
+This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.md#layered-colors), and it is also why [stepped colors](themes.md#stepped-colors) are necessary for theming.
+
+There are drafts and issues discussing [color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187) that would make this possible.
diff --git a/versioned_docs/version-v6/theming/basics.md b/versioned_docs/version-v6/theming/basics.md
new file mode 100644
index 00000000000..d12f551ef1e
--- /dev/null
+++ b/versioned_docs/version-v6/theming/basics.md
@@ -0,0 +1,42 @@
+---
+title: Theming Basics
+sidebar_label: Basics
+---
+
+import ColorAccordion from '@components/page/theming/ColorAccordion';
+
+<head>
+  <title>Theming | Ionic Apps: Color and Theming Basics Definition</title>
+  <meta
+    name="description"
+    content="The definition of theming apps just got simplified. Ionic Framework is built with pre-baked styles and colors which are extremely easy to change and modify."
+  />
+</head>
+
+Ionic Framework is built to be a blank slate that can easily be customized and modified to fit a brand, while still following the standards of the different platforms. Theming Ionic apps is now easier than ever. Because the framework is built with CSS, it comes with pre-baked default styles which are extremely easy to change and modify.
+
+## Colors
+
+Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic.
+
+When changing a color, it is important to set all of the related properties. This can be done easily with the [Color Generator](color-generator.md) tool, but these can also be manually written if desired. For more information on Ionic colors, see [Colors](colors.md).
+
+<ColorAccordion />
+
+## Platform Standards
+
+Ionic components adapt their look and behavior based on the platform the app is running on. We call this <strong>Adaptive Styling</strong>. This allows developers to build apps that use the same codebase for multiple platforms, while still looking "native" to those particular platforms.
+
+Ionic has two **modes** that are used to customize the look of components based on the **platform**: `ios` and `md`. Each platform has a default mode, but this can easily be configured. For more information on customizing an application based on the platform, see [Platform Styles](platform-styles.md).
+
+## CSS Variables
+
+The Ionic Framework components are themed using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS properties (variables)</a>. CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.md) Ionic Framework provides.
+
+## CSS Shadow Parts
+
+CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer">Shadow DOM</a> were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, see the [CSS Shadow Parts](css-shadow-parts.md) guide.
+
+## Branding
+
+Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, see [Themes](themes.md).
diff --git a/versioned_docs/version-v6/theming/color-generator.md b/versioned_docs/version-v6/theming/color-generator.md
new file mode 100644
index 00000000000..7bd0a0ef0f0
--- /dev/null
+++ b/versioned_docs/version-v6/theming/color-generator.md
@@ -0,0 +1,19 @@
+---
+title: Color Generator
+hide_table_of_contents: true
+demoUrl: /docs/demos/color-generator/index.html
+---
+
+import ColorGenerator from '@components/page/theming/ColorGenerator';
+
+<head>
+  <title>Color Generator: Create Custom Palettes and Themes for Ionic Apps</title>
+  <meta
+    name="description"
+    content="Create custom color palettes for your Android and iOS app’s UI with the color generator. Learn to generate custom themes and shades using Ionic Framework."
+  />
+</head>
+
+Create custom color palettes for your app’s UI. Update a color’s hex values, check the demo app on the right to confirm, then copy and paste the generated code directly into your Ionic project.
+
+<ColorGenerator />
diff --git a/versioned_docs/version-v6/theming/colors.md b/versioned_docs/version-v6/theming/colors.md
new file mode 100644
index 00000000000..cadbed4bb94
--- /dev/null
+++ b/versioned_docs/version-v6/theming/colors.md
@@ -0,0 +1,116 @@
+---
+title: Colors
+initialTab: 'preview'
+inlineHtmlPreviews: true
+---
+
+import LayeredColorsSelect from '@components/page/theming/LayeredColorsSelect';
+import NewColorGenerator from '@components/page/theming/NewColorGenerator';
+import CodeColor from '@components/page/theming/CodeColor';
+
+<head>
+  <title>Ionic CSS Color Component: Style or Change Default App Colors</title>
+  <meta
+    name="description"
+    content="Ionic has nine default colors that can be used to change the color of many components. Learn how to utilize Ionic CSS color properties to style your apps."
+  />
+</head>
+
+Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic.
+
+A color can be applied to an Ionic component in order to change the default colors using the `color` attribute. Notice in the buttons below that the text and background changes based on the `color` set. When there is no `color` set on the button it uses the `primary` color by default.
+
+```html
+<ion-button>Default</ion-button>
+<ion-button color="primary">Primary</ion-button>
+<ion-button color="secondary">Secondary</ion-button>
+<ion-button color="tertiary">Tertiary</ion-button>
+<ion-button color="success">Success</ion-button>
+<ion-button color="warning">Warning</ion-button>
+<ion-button color="danger">Danger</ion-button>
+<ion-button color="light">Light</ion-button>
+<ion-button color="medium">Medium</ion-button>
+<ion-button color="dark">Dark</ion-button>
+```
+
+## Layered Colors
+
+Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations.
+
+<LayeredColorsSelect />
+
+## Modifying Colors
+
+To change the default values of a color, all of the listed variations for that color should be set. For example, to change the secondary color to <CodeColor color="#006600">#006600</CodeColor>, set the following CSS properties:
+
+```css
+:root {
+  --ion-color-secondary: #006600;
+  --ion-color-secondary-rgb: 0, 102, 0;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #005a00;
+  --ion-color-secondary-tint: #1a751a;
+}
+```
+
+When `secondary` is applied to a button, not only is the base color <CodeColor color="#006600">#006600</CodeColor> used, but the contrast color <CodeColor color="#ffffff">#ffffff</CodeColor> is used for the text, along with shade <CodeColor color="#005a00">#005a00</CodeColor> and tint <CodeColor color="#1a751a">#1a751a</CodeColor> colors for the different states of the button.
+
+:::note
+Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.md) that calculates all of the variations and provides code to copy/paste into an app!
+:::
+
+See the [CSS Variables documentation](css-variables.md) for more information on CSS variables.
+
+## Adding Colors
+
+Colors can be added for use throughout an application by setting the `color` property on an Ionic component, or by styling with CSS. Read on to see how to manually add a new color, or use the [New Color Creator](#new-color-creator) below for a quick way to generate the code of a new color to be copy and pasted into an application.
+
+To add a new color, first define the CSS variables for all of the variations of the color at the root. For example, to add a new color called `favorite`, we can define the following variables:
+
+```css
+:root {
+  --ion-color-favorite: #69bb7b;
+  --ion-color-favorite-rgb: 105, 187, 123;
+  --ion-color-favorite-contrast: #ffffff;
+  --ion-color-favorite-contrast-rgb: 255, 255, 255;
+  --ion-color-favorite-shade: #5ca56c;
+  --ion-color-favorite-tint: #78c288;
+}
+```
+
+Then, create a new class that uses these CSS variables. The class **must** be written in the format `.ion-color-{COLOR}` where `{COLOR}` is the name of the color to add:
+
+```css
+.ion-color-favorite {
+  --ion-color-base: var(--ion-color-favorite);
+  --ion-color-base-rgb: var(--ion-color-favorite-rgb);
+  --ion-color-contrast: var(--ion-color-favorite-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
+  --ion-color-shade: var(--ion-color-favorite-shade);
+  --ion-color-tint: var(--ion-color-favorite-tint);
+}
+```
+
+After the class is added, the color can be used on any Ionic component that supports the `color` property. An example of using the `favorite` color on an Ionic button is below.
+
+```html
+<ion-button color="favorite">Favorite</ion-button>
+```
+
+The CSS variables defined at the root can also be used to style any element using CSS:
+
+```css
+div {
+  background: var(--ion-color-favorite);
+  color: var(--ion-color-favorite-contrast);
+}
+```
+
+See the [CSS Variables documentation](css-variables.md) for more information on setting and using CSS variables.
+
+## New Color Creator
+
+Create a new color below by changing the name and value, then copy and paste the code below into your project.
+
+<NewColorGenerator />
diff --git a/versioned_docs/version-v6/theming/css-shadow-parts.md b/versioned_docs/version-v6/theming/css-shadow-parts.md
new file mode 100644
index 00000000000..5d5be9f5099
--- /dev/null
+++ b/versioned_docs/version-v6/theming/css-shadow-parts.md
@@ -0,0 +1,161 @@
+---
+title: CSS Shadow Parts
+---
+
+<head>
+  <title>CSS Shadow Parts - Style CSS Properties Inside of A Shadow Tree</title>
+  <meta
+    name="description"
+    content="CSS Shadow Parts allow developers to style CSS properties on elements inside of a shadow tree. Read to learn more about customizing Ionic Shadow DOM components."
+  />
+</head>
+
+CSS Shadow Parts allow developers to style CSS properties on an element inside of a shadow tree. This is extremely useful in customizing Ionic Framework <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer">Shadow DOM</a> components.
+
+## Why Shadow Parts?
+
+Ionic Framework is a distributed set of <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" rel="noopener noreferrer">Web Components</a>. Web Components follow the <a href="https://w3c.github.io/webcomponents/spec/shadow/" target="_blank" rel="noopener noreferrer">Shadow DOM specification</a> in order to encapsulate styles and markup.
+
+:::note
+Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.md). An example of a Shadow DOM component is the [button component](../api/button.md).
+:::
+
+Shadow DOM is useful for preventing styles from leaking out of components and unintentionally applying to other elements. For example, we assign a `.button` class to our `ion-button` component. Without Shadow DOM encapsulation, if a user were to set the class `.button` on one of their own elements, it would inherit the Ionic Framework button styles. Since `ion-button` is a Shadow component, this is not a problem.
+
+However, due to this encapsulation, styles aren’t able to bleed into inner elements of Shadow components either. This means that if a Shadow component renders elements inside of its shadow tree, the inner elements cannot be targeted directly with CSS. Using the `ion-select` component as an example, it renders the following markup:
+
+```html
+<ion-select>
+  #shadow-root
+  <div class="select-text select-placeholder"></div>
+  <div class="select-icon"></div>
+</ion-select>
+```
+
+The placeholder text and icon elements are inside of the `#shadow-root`, which means the following CSS will **NOT** work to style the placeholder:
+
+```css
+/* Does NOT work */
+ion-select .select-placeholder {
+  color: blue;
+}
+```
+
+So how do we solve this? [CSS Shadow Parts](#shadow-parts-explained)!
+
+## Shadow Parts Explained
+
+Shadow parts allow developers to style inside a shadow tree, from outside of that shadow tree. In order to do so, the [part must be exposed](#exposing-a-part) and then it can be styled by using [::part](#how-part-works).
+
+### Exposing a part
+
+When creating a Shadow DOM component, a part can be added to an element inside of a shadow tree by assigning a `part` attribute on the element. This is added to the component in Ionic Framework and requires no action from an end user.
+
+Continuing to use the `ion-select` component as an example, the markup is updated to look like the following:
+
+```html
+<ion-select>
+  #shadow-root
+  <div part="placeholder" class="select-text select-placeholder"></div>
+  <div part="icon" class="select-icon"></div>
+</ion-select>
+```
+
+The above shows two parts: `placeholder` and `icon`. See the [select documentation](../api/select.md#css-shadow-parts) for all of its parts.
+
+With these parts exposed, the element can now be styled directly using [::part](#how-part-works).
+
+### How ::part works
+
+The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer">`::part()`</a> pseudo-element allows developers to select elements inside of a shadow tree that have been exposed via a part attribute.
+
+Since we know that `ion-select` exposes a `placeholder` part for styling the text when there is no value selected, we can customize it in the following way:
+
+```css
+ion-select::part(placeholder) {
+  color: blue;
+  opacity: 1;
+}
+```
+
+Styling using `::part` allows any CSS property that is accepted by that element to be changed.
+
+In addition to being able to target the part, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" target="_blank" rel="noopener noreferrer">pseudo-elements</a> can be styled without them being explicitly exposed:
+
+```css
+ion-select::part(placeholder)::first-letter {
+  font-size: 22px;
+  font-weight: 500;
+}
+```
+
+Parts work with most <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer">pseudo-classes</a>, as well:
+
+```css
+ion-item::part(native):hover {
+  color: green;
+}
+```
+
+:::note
+There are some known limitations with [vendor prefixed pseudo-elements](#vendor-prefixed-pseudo-elements) and [structural pseudo-classes](#structural-pseudo-classes).
+:::
+
+## Ionic Framework Parts
+
+All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the [Component documentation](../components.md).
+
+In order to have parts a component must meet the following criteria:
+
+- It is a [Shadow DOM](../reference/glossary.md#shadow) component. If it is a [Scoped](../reference/glossary.md#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md).
+- It contains children elements. For example, `ion-card-header` is a Shadow component, but all styles are applied to the host element. Since it has no child elements, there’s no need for parts.
+- The children elements are not structural. In certain components, including `ion-title`, the child element is a structural element used to position the inner elements. We do not recommend customizing structural elements as this can have unexpected results.
+
+:::note
+We welcome recommendations for additional parts. Please create a <a href="https://github.com/ionic-team/ionic-framework/issues/new?assignees=&labels=&template=feature_request.md&title=feat%3A+" target="_blank" rel="noopener noreferrer">new GitHub issue</a> with as much information as possible when requesting a part.
+:::
+
+## Known Limitations
+
+### Browser Support
+
+CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the <a href="https://caniuse.com/#feat=mdn-css_selectors_part" target="_blank" rel="noopener noreferrer">browser support</a> meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.md) for styling.
+
+### Vendor Prefixed Pseudo-Elements
+
+<a href="https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix" target="_blank" rel="noopener noreferrer">
+  Vendor prefixed
+</a> pseudo-elements are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements:
+
+```css
+/* Does NOT work */
+my-component::part(scroll)::-webkit-scrollbar {
+  background: green;
+}
+```
+
+See <a href="https://github.com/w3c/csswg-drafts/issues/4530" target="_blank" rel="noopener noreferrer">this issue on GitHub</a> for more information.
+
+### Structural Pseudo-Classes
+
+Most pseudo-classes are supported with parts, however, <a href="https://www.w3.org/TR/selectors-4/#structural-pseudos" target="_blank" rel="noopener noreferrer">structural pseudo-classes</a> are not. An example of structural pseudo-classes that do not work is below.
+
+```css
+/* Does NOT work */
+my-component::part(container):first-child {
+  background: green;
+}
+
+/* Does NOT work */
+my-component::part(container):last-child {
+  background: green;
+}
+```
+
+### Chaining Parts
+
+The `::part()` pseudo-element can not match additional `::part()`s.
+
+For example, `my-component::part(button)::part(label)` does not match anything. This is because doing so would expose more structural information than is intended.
+
+If the `<my-component>`’s internal button uses something like `part="label => button-label"` to forward the button’s internal parts up into the panel’s own part element map, then a selector like `my-component::part(button-label)` would select just the one button’s label, ignoring any other labels.
diff --git a/versioned_docs/version-v6/theming/css-variables.md b/versioned_docs/version-v6/theming/css-variables.md
new file mode 100644
index 00000000000..85b320b6392
--- /dev/null
+++ b/versioned_docs/version-v6/theming/css-variables.md
@@ -0,0 +1,98 @@
+---
+title: CSS Variables
+---
+
+<head>
+  <title>CSS Variables | CSS Custom Properties for Variables & Components</title>
+  <meta
+    name="description"
+    content="Ionic components are built with CSS Variables for easy custom app properties. They allow a value to be stored in one place, then referenced in multiple places."
+  />
+</head>
+
+Ionic components are built with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS Variables</a> for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme.
+
+## Setting Values
+
+### Global Variables
+
+CSS variables can be set globally in an application in the `:root` selector. They can also be applied only for a specific mode. See [Ionic Variables](#ionic-variables) for more information on the global variables Ionic provides.
+
+When using the Ionic CLI to start an Angular project, the `src/theme/variables.scss` file is created where you can override the default Ionic Variables.
+
+```css
+/* Set variables for all modes */
+:root {
+  /* Set the background of the entire app */
+  --ion-background-color: #ff3700;
+
+  /* Set the font family of the entire app */
+  --ion-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif;
+}
+
+/* Set text color of the entire app for iOS only */
+.ios {
+  --ion-text-color: #000;
+}
+
+/* Set text color of the entire app for Material Design only */
+.md {
+  --ion-text-color: #222;
+}
+```
+
+### Component Variables
+
+To set a CSS variable for a specific component, add the variable inside of its selector. See [Ionic Variables](#ionic-variables) for more information on the component-level variables Ionic provides.
+
+```css
+/* Set the color on all ion-button elements */
+ion-button {
+  --color: #222;
+}
+
+/* Set the background on an ion-button with the .fancy-button class */
+.fancy-button {
+  --background: #00ff00;
+}
+```
+
+### Variables set via JavaScript
+
+CSS variables can also be changed via JavaScript using [setProperty()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty):
+
+```js
+const el = document.querySelector('.fancy-button');
+el.style.setProperty('--background', '#36454f');
+```
+
+## Getting Values
+
+### Using CSS
+
+The [var() CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/var) can be used to get the value of a CSS variable, along with any number of fallback values, if desired. In the below example, the `--background` property will be set to the value of the `--charcoal` variable, if defined, and if not it will use `#36454f`.
+
+```css
+.fancy-button {
+  --background: var(--charcoal, #36454f);
+}
+```
+
+### Using JavaScript
+
+The value of a CSS variable can be read in JavaScript using [getPropertyValue()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue):
+
+```js
+const el = document.querySelector('.fancy-button');
+const color = el.style.getPropertyValue('--charcoal');
+```
+
+## Ionic Variables
+
+### Component Variables
+
+Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.md). For example, see the [Button CSS Custom Properties](../api/button.md#css-custom-properties).
+
+### Global Variables
+
+There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see [Colors](colors.md), [Themes](themes.md) and [Advanced Theming](advanced.md).
diff --git a/versioned_docs/version-v6/theming/dark-mode.md b/versioned_docs/version-v6/theming/dark-mode.md
new file mode 100644
index 00000000000..ea4fd1f1e33
--- /dev/null
+++ b/versioned_docs/version-v6/theming/dark-mode.md
@@ -0,0 +1,327 @@
+---
+title: Dark Mode
+initialTab: 'preview'
+inlineHtmlPreviews: true
+---
+
+import Codepen from '@components/global/Codepen';
+
+<head>
+  <title>Dark Mode to Change Color Schemes and CSS Properties</title>
+  <meta
+    name="description"
+    content="Developers are adding dark mode CSS on native applications to support their user preferences. Read to learn more about dark color schemes for Ionic apps."
+  />
+</head>
+
+Ionic makes it easy to change the themes of your app, including supporting dark color schemes. With growing support for dark mode in native apps, developers are now looking to add it to their apps to support user preferences.
+
+## Using Media Queries
+
+The first way to enable dark mode is by using the [CSS media query for the user's preferred color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). This media query will hook into the system setting of the user's device and apply the theme if a dark mode is enabled.
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* dark mode variables go here */
+  }
+}
+```
+
+Currently, the `prefers-color-scheme` media query has [limited browser support](https://caniuse.com/#feat=prefers-color-scheme), so users will not be able to benefit from having the dark mode applied using this media query in certain browsers. However, the dark mode can still be applied by using a [CSS class fallback](#css-class-fallback).
+
+## CSS Class Fallback
+
+As a fallback method for devices that don't support the media query, the dark mode can be applied by styling a CSS selector and applying the class to the document body.
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Dark mode variables go here */
+  }
+}
+
+/* Fallback for older browsers or manual mode */
+body.dark {
+  /* Dark mode variables go here */
+}
+```
+
+With the variables targeting the `body.dark` selector, all that is needed now is to add the class to the `<body>` in the app. This can be done in a variety of ways depending on the framework your app is built with.
+
+Notice that the variables should be in both places in this example. We can [use JavaScript](#combining-with-javascript) in order to avoid setting the variables in two places.
+
+## Combining with JavaScript
+
+In order to keep the CSS variables written once and avoid having to update them in multiple places, the fallback and class can be combined by using JavaScript to check the value of the `prefers-color-scheme` media query and adding the `dark` class if the preference is `dark`. Here's what the CSS would look like:
+
+```css
+body.dark {
+  /* Dark mode variables go here */
+}
+```
+
+Notice that the variables above are only in the `body.dark` selector now, and the `prefers-color-scheme` media query has been removed.
+
+### Automatically Enable Dark Mode
+
+In the JavaScript, the `dark` class can be added to the `<body>` by checking if the document matches the media query using [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia). This will enable dark mode to still work based on the user preference.
+
+```javascript
+// Use matchMedia to check the user preference
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+toggleDarkTheme(prefersDark.matches);
+
+// Listen for changes to the prefers-color-scheme media query
+prefersDark.addListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches));
+
+// Add or remove the "dark" class based on if the media query matches
+function toggleDarkTheme(shouldAdd) {
+  document.body.classList.toggle('dark', shouldAdd);
+}
+```
+
+:::note
+Tip: make sure to view the Codepen below in a [supported browser](https://caniuse.com/#feat=prefers-color-scheme) and then try changing the system preferences on your device between light & dark mode. Here's [how to enable dark mode on Windows 10](https://blogs.windows.com/windowsexperience/2016/08/08/windows-10-tip-personalize-your-pc-by-enabling-the-dark-theme/) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976).
+:::
+
+<!-- Codepen https://codepen.io/ionic/pen/jONzJpG -->
+
+<Codepen preview="false" user="ionic" slug="jONzJpG" height="550px" default-tab="js,result" />
+
+### Manually Toggle Dark Mode
+
+In addition to calling `toggleDarkTheme()` when the app loads and when the media query changes, the `toggleDarkTheme()` function could be called by the app, such as when a user changes a toggle, to switch between the light and dark themes:
+
+```javascript
+// Query for the toggle that is used to change between themes
+const toggle = document.querySelector('#themeToggle');
+
+// Listen for the toggle check/uncheck to toggle the dark class on the <body>
+toggle.addEventListener('ionChange', (ev) => {
+  document.body.classList.toggle('dark', ev.detail.checked);
+});
+
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+// Listen for changes to the prefers-color-scheme media query
+prefersDark.addListener((e) => checkToggle(e.matches));
+
+// Called when the app loads
+function loadApp() {
+  checkToggle(prefersDark.matches);
+}
+
+// Called by the media query to check/uncheck the toggle
+function checkToggle(shouldCheck) {
+  toggle.checked = shouldCheck;
+}
+```
+
+<!-- Codepen https://codepen.io/ionic/pen/zYOpQLj -->
+
+<Codepen preview="false" user="ionic" slug="zYOpQLj" height="600px" default-tab="js,result" />
+
+## Adjusting System UI Components
+
+When developing a dark theme, you may notice that certain system UI components are not adjusting to dark mode properly. To fix this you will need to specify the `color-scheme`. See the <a href="https://caniuse.com/#feat=mdn-html_elements_meta_name_color-scheme" target="_blank">browser compatibility for color-scheme</a> for details on cross browser support.
+
+While you may be mainly using Ionic components instead of only native components, `color-scheme` can also affect aspects of your application such as the scrollbar. In order to use `color-scheme` you will need to add the following HTML to the `head` of your application:
+
+```html
+<meta name="color-scheme" content="light dark" />
+```
+
+This allows the page to indicate which color scheme it is comfortable being rendered with. Alternatively, you can add the following CSS to do this on a per-element basis:
+
+```css
+color-scheme: light dark;
+```
+
+| Default scrollbar                                                        | Scrollbar with `color-scheme`                                        |
+| ------------------------------------------------------------------------ | -------------------------------------------------------------------- |
+| ![Application without color-scheme](/img/theming/color-scheme-light.png) | ![Application with color-scheme](/img/theming/color-scheme-dark.png) |
+
+For more information regarding `color-scheme` please see https://web.dev/color-scheme/.
+
+:::note
+`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.md#dark-mode).
+:::
+
+:::note
+For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, see [`theme-color` Meta](./advanced.md#theme-color-meta).
+:::
+
+## Ionic Dark Theme
+
+Ionic has a recommended theme for variables to use in order to get a dark mode based on the device running the app. It can be broken down into the following parts:
+
+1. Changing the default [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement the dark background in the `body.dark` selector.
+1. Setting variables for the dark theme on `ios` devices.
+1. Setting variables for the dark theme on `md` devices.
+
+The following code can be copied and pasted into an app to get Ionic's dark theme. We add the `dark` class to the document body using JavaScript as mentioned in the [combining with JavaScript](#combining-with-javascript) section. The dark mode will not be enabled until the `dark` class is added to the document body.
+
+:::note
+For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.md).
+:::
+
+```css
+/*
+ * Dark Colors
+ * -------------------------------------------
+ */
+
+body.dark {
+  --ion-color-primary: #428cff;
+  --ion-color-primary-rgb: 66, 140, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3a7be0;
+  --ion-color-primary-tint: #5598ff;
+
+  --ion-color-secondary: #50c8ff;
+  --ion-color-secondary-rgb: 80, 200, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #46b0e0;
+  --ion-color-secondary-tint: #62ceff;
+
+  --ion-color-tertiary: #6a64ff;
+  --ion-color-tertiary-rgb: 106, 100, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #5d58e0;
+  --ion-color-tertiary-tint: #7974ff;
+
+  --ion-color-success: #2fdf75;
+  --ion-color-success-rgb: 47, 223, 117;
+  --ion-color-success-contrast: #000000;
+  --ion-color-success-contrast-rgb: 0, 0, 0;
+  --ion-color-success-shade: #29c467;
+  --ion-color-success-tint: #44e283;
+
+  --ion-color-warning: #ffd534;
+  --ion-color-warning-rgb: 255, 213, 52;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0bb2e;
+  --ion-color-warning-tint: #ffd948;
+
+  --ion-color-danger: #ff4961;
+  --ion-color-danger-rgb: 255, 73, 97;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #e04055;
+  --ion-color-danger-tint: #ff5b71;
+
+  --ion-color-dark: #f4f5f8;
+  --ion-color-dark-rgb: 244, 245, 248;
+  --ion-color-dark-contrast: #000000;
+  --ion-color-dark-contrast-rgb: 0, 0, 0;
+  --ion-color-dark-shade: #d7d8da;
+  --ion-color-dark-tint: #f5f6f9;
+
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152, 154, 162;
+  --ion-color-medium-contrast: #000000;
+  --ion-color-medium-contrast-rgb: 0, 0, 0;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34, 36, 40;
+  --ion-color-light-contrast: #ffffff;
+  --ion-color-light-contrast-rgb: 255, 255, 255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
+}
+
+/*
+ * iOS Dark Theme
+ * -------------------------------------------
+ */
+
+.ios body.dark {
+  --ion-background-color: #000000;
+  --ion-background-color-rgb: 0, 0, 0;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-color-step-50: #0d0d0d;
+  --ion-color-step-100: #1a1a1a;
+  --ion-color-step-150: #262626;
+  --ion-color-step-200: #333333;
+  --ion-color-step-250: #404040;
+  --ion-color-step-300: #4d4d4d;
+  --ion-color-step-350: #595959;
+  --ion-color-step-400: #666666;
+  --ion-color-step-450: #737373;
+  --ion-color-step-500: #808080;
+  --ion-color-step-550: #8c8c8c;
+  --ion-color-step-600: #999999;
+  --ion-color-step-650: #a6a6a6;
+  --ion-color-step-700: #b3b3b3;
+  --ion-color-step-750: #bfbfbf;
+  --ion-color-step-800: #cccccc;
+  --ion-color-step-850: #d9d9d9;
+  --ion-color-step-900: #e6e6e6;
+  --ion-color-step-950: #f2f2f2;
+
+  --ion-item-background: #000000;
+
+  --ion-card-background: #1c1c1d;
+}
+
+.ios body.dark ion-modal {
+  --ion-background-color: var(--ion-color-step-100);
+  --ion-toolbar-background: var(--ion-color-step-150);
+  --ion-toolbar-border-color: var(--ion-color-step-250);
+  --ion-item-background: var(--ion-color-step-150);
+}
+
+/*
+ * Material Design Dark Theme
+ * -------------------------------------------
+ */
+
+.md body.dark {
+  --ion-background-color: #121212;
+  --ion-background-color-rgb: 18, 18, 18;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-border-color: #222222;
+
+  --ion-color-step-50: #1e1e1e;
+  --ion-color-step-100: #2a2a2a;
+  --ion-color-step-150: #363636;
+  --ion-color-step-200: #414141;
+  --ion-color-step-250: #4d4d4d;
+  --ion-color-step-300: #595959;
+  --ion-color-step-350: #656565;
+  --ion-color-step-400: #717171;
+  --ion-color-step-450: #7d7d7d;
+  --ion-color-step-500: #898989;
+  --ion-color-step-550: #949494;
+  --ion-color-step-600: #a0a0a0;
+  --ion-color-step-650: #acacac;
+  --ion-color-step-700: #b8b8b8;
+  --ion-color-step-750: #c4c4c4;
+  --ion-color-step-800: #d0d0d0;
+  --ion-color-step-850: #dbdbdb;
+  --ion-color-step-900: #e7e7e7;
+  --ion-color-step-950: #f3f3f3;
+
+  --ion-item-background: #1e1e1e;
+
+  --ion-toolbar-background: #1f1f1f;
+
+  --ion-tab-bar-background: #1f1f1f;
+
+  --ion-card-background: #1e1e1e;
+}
+```
diff --git a/versioned_docs/version-v6/theming/platform-styles.md b/versioned_docs/version-v6/theming/platform-styles.md
new file mode 100644
index 00000000000..f503b107c80
--- /dev/null
+++ b/versioned_docs/version-v6/theming/platform-styles.md
@@ -0,0 +1,51 @@
+---
+title: Platform Styles
+---
+
+<head>
+  <title>Ionic Platform Styles | Platform-Specific Styles for Ionic Apps</title>
+  <meta
+    name="description"
+    content="Ionic provides platform-specific styles based on the app's device. Styling the components to match the device guidelines allows the app to feel native to users."
+  />
+</head>
+
+Ionic provides platform specific styles based on the device the application is running on. Styling the components to match the device guidelines allows the application to be written once but look and feel native to the user depending on where it is accessed.
+
+## Ionic Modes
+
+Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../angular/config.md). The following chart displays the default **mode** that is added to each **platform**:
+
+| Platform  | Mode  | Description                                                                                                                      |
+| --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `ios`     | `ios` | Viewing on an iPhone, iPad, or iPod will use the [iOS styles](https://www.apple.com/ios).                                        |
+| `android` | `md`  | Viewing on any Android device will use the [Material Design styles](https://material.io/guidelines/).                            |
+| `core`    | `md`  | Any platform that doesn't fit any of the above platforms will use the [Material Design styles](https://material.io/guidelines/). |
+
+For example, an app being viewed on an Android platform will use the `md` (Material Design) mode by default. The `<html>` element will have `class="md"` added to it and all of the components will use Material Design styles:
+
+```html
+<html class="md"></html>
+```
+
+_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../angular/config.md) of an app._
+
+## Overriding Mode Styles
+
+Each Ionic component can be styled based on the mode. The `html` element has both a `class` and `mode` attribute with a value equal to the current mode. These can be used to override styles for any component. For example, to style an `ion-badge` to have `uppercase` text only in `ios` mode:
+
+```css
+.ios ion-badge {
+  text-transform: uppercase;
+}
+```
+
+There are also many global CSS variables that can be used to override the styles. To style the background color for an `ios` app, the following can be written:
+
+```css
+.ios {
+  --ion-background-color: #222;
+}
+```
+
+There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md).
diff --git a/versioned_docs/version-v6/theming/themes.md b/versioned_docs/version-v6/theming/themes.md
new file mode 100644
index 00000000000..79408c5fa96
--- /dev/null
+++ b/versioned_docs/version-v6/theming/themes.md
@@ -0,0 +1,67 @@
+---
+title: Themes
+---
+
+import CodeColor from '@components/page/theming/CodeColor';
+import SteppedColorGenerator from '@components/page/theming/SteppedColorGenerator';
+
+<head>
+  <title>Ionic App Themes | Change Default App Background Themes & Colors</title>
+  <meta
+    name="description"
+    content="Several global variables change the default theme of an entire application. Create a custom background and text color theme for your app with Ionic themes."
+  />
+</head>
+
+Ionic provides several global variables that are used throughout components to change the default theme of an entire application. [Application Colors](#application-colors) are useful to change the look of most of the Ionic components, and [Stepped Colors](#stepped-colors) are used as variations in some of the Ionic components.
+
+## Application Colors
+
+The application colors are used in multiple places in Ionic. These are useful for easily creating dark themes or themes that match a brand.
+
+It is important to note that the background and text color variables also require a rgb variable to be set in <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed.
+
+| Name                                       | Description                                          |
+| ------------------------------------------ | ---------------------------------------------------- |
+| `--ion-background-color`                   | Background color of the entire app                   |
+| `--ion-background-color-rgb`               | Background color of the entire app, rgb format       |
+| `--ion-text-color`                         | Text color of the entire app                         |
+| `--ion-text-color-rgb`                     | Text color of the entire app, rgb format             |
+| `--ion-backdrop-color`                     | Color of the Backdrop component                      |
+| `--ion-backdrop-opacity`                   | Opacity of the Backdrop component                    |
+| `--ion-overlay-background-color`           | Background color of the overlays                     |
+| `--ion-border-color`                       | Border color                                         |
+| `--ion-box-shadow-color`                   | Box shadow color                                     |
+| `--ion-tab-bar-background`                 | Background of the Tab Bar                            |
+| `--ion-tab-bar-background-focused`         | Background of the focused Tab Bar                    |
+| `--ion-tab-bar-border-color`               | Border color of the Tab Bar                          |
+| `--ion-tab-bar-color`                      | Color of the Tab Bar                                 |
+| `--ion-tab-bar-color-selected`             | Color of the selected Tab Button                     |
+| `--ion-toolbar-background`                 | Background of the Toolbar                            |
+| `--ion-toolbar-border-color`               | Border color of the Toolbar                          |
+| `--ion-toolbar-color`                      | Color of the components in the Toolbar               |
+| `--ion-toolbar-segment-color`              | Color of the Segment Buttons in the Toolbar          |
+| `--ion-toolbar-segment-color-checked`      | Color of the checked Segment Buttons in the Toolbar  |
+| `--ion-toolbar-segment-background`         | Background of the Segment Buttons in the Toolbar     |
+| `--ion-toolbar-segment-background-checked` | Background of the Segment Buttons in the Toolbar     |
+| `--ion-toolbar-segment-indicator-color`    | Color of the Segment Button indicator in the Toolbar |
+| `--ion-item-background`                    | Background of the Item                               |
+| `--ion-item-border-color`                  | Border color of the Item                             |
+| `--ion-item-color`                         | Color of the components in the Item                  |
+| `--ion-placeholder-color`                  | Color of the placeholder in Inputs                   |
+
+## Stepped Colors
+
+After exploring different ways to customize the Ionic theme, we found that we couldn't use just one background or text color. In order to imply importance and depth throughout the design, we need to use different shades of the background and text colors. To accommodate this pattern, we created stepped colors.
+
+While updating the background (`--ion-background-color`) and text (`--ion-text-color`) variables will change the look of the app for most components, there are certain Ionic components where it may look off, or broken. This will be more apparent when applying a darker theme.
+
+In some components we use a shade darker than the background or lighter than the text. For example, an item heading text may need to be <CodeColor color="#404040">#404040</CodeColor>, which is a few shades lighter than our default text color. Meanwhile, the loading component background is a shade darker than white, using <CodeColor color="#f2f2f2">#f2f2f2</CodeColor>. We use stepped colors in order to define these slight variations. It is important to update the stepped colors when updating the background or text color of an application.
+
+By default, the Ionic stepped colors start at the default background color value <CodeColor color="#ffffff">#ffffff</CodeColor> and mix with the text color value <CodeColor color="#000000">#000000</CodeColor> using an increasing percentage. The full list of stepped colors is shown in the generator below.
+
+## Stepped Color Generator
+
+Create a custom background and text color theme for your app. Update the background or text color’s hex values below, then copy and paste the generated code directly into your Ionic project.
+
+<SteppedColorGenerator />
diff --git a/versioned_docs/version-v6/troubleshooting/build.md b/versioned_docs/version-v6/troubleshooting/build.md
new file mode 100644
index 00000000000..1f19102d130
--- /dev/null
+++ b/versioned_docs/version-v6/troubleshooting/build.md
@@ -0,0 +1,208 @@
+---
+disableHtmlPreviews: true
+title: Build Errors
+---
+
+<head>
+  <title>Build Errors: Learn to Solve Common Mistakes | Ionic Framework</title>
+  <meta
+    name="description"
+    content="Solve common mistakes that can occur when building apps. View our list of potential build errors then check out our Ionic Documentation for any other questions."
+  />
+</head>
+
+## Common mistakes
+
+### Forgetting Parentheses on a Decorator
+
+Decorators should have parentheses `()` after an annotation. Some examples include: `@Injectable()`, `@Optional()`, `@Input()`, etc.
+
+```tsx
+@Directive({
+  selector: 'my-dir',
+})
+class MyDirective {
+  // Wrong, should be @Optional()
+  // @Optional does nothing here, so MyDirective will error if parent is undefined
+  constructor(@Optional parent: ParentComponent) {}
+}
+```
+
+## Common Errors
+
+### Cannot Resolve all Parameters
+
+```shell
+Cannot resolve all parameters for 'YourClass'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'YourClass' is decorated with Injectable.
+```
+
+This exception means that Angular is confused about one or more of the parameters for `YourClass`'s constructor. In order to do [dependency injection](https://angular.io/docs/ts/latest/guide/dependency-injection.html) Angular needs to know the type of the parameter to inject. You let Angular know this by specifying the class of the parameter. Make sure:
+
+- You are importing the parameter's class.
+- You have properly annotated the parameter or specified its type.
+
+```tsx
+import { MyService } from 'my-service'; // Don't forget to import me!
+
+@Component({
+  template: `Hello World`,
+})
+export class MyClass {
+  // service is of type MyService
+  constructor(service: MyService) {}
+}
+```
+
+Sometimes circular references within your code can cause this error. Circular references mean that two objects depend on each other, and so there is no way to declare both of them before each other. To get around this, we can use the [`forwardRef`](https://angular.io/docs/ts/latest/api/core/index/forwardRef-function.html) function built in to Angular.
+
+```ts
+import { forwardRef } from '@angular/core';
+
+@Component({
+  selector: 'my-button',
+  template: `<div>
+    <icon></icon>
+    <input type="button" />
+  </div>`,
+  directives: [forwardRef(() => MyIcon)], // MyIcon has not been defined yet
+}) // forwardRef resolves as MyIcon when MyIcon is needed
+class MyButton {
+  constructor() {}
+}
+
+@Directive({
+  selector: 'icon',
+})
+class MyIcon {
+  constructor(containerButton: MyButton) {} // MyButton has been defined
+}
+```
+
+### No provider for ParamType
+
+```shell
+No provider for ParamType! (MyClass -> ParamType)
+```
+
+This means Angular knows the type of parameter it is supposed to inject, but it doesn't know how to inject it.
+
+If the parameter is a service, make sure you have added the specified class to the list of providers available to your app:
+
+```tsx
+import { MyService } from 'my-service';
+
+@Component({
+  templateUrl: 'app/app.html',
+  providers: [MyService], // Don't forget me!
+})
+class MyApp {}
+```
+
+If the parameter is another component or directive (for example, a parent component), adding it to your list of providers will make the error go away, but this will have the same effect as the [Multiple instances of a provider](#multiple_instances) above. You'll be creating a new instance of the component class, and you won't get a reference to the component instance you want. Instead, make sure that the directive or component you expect to be injected is available to your component (e.g. that it is actually a parent if you are expecting it to be a parent). This is probably easiest understood with an example:
+
+```tsx
+@Component({
+  selector: 'my-comp',
+  template: '<p my-dir></p>',
+  directives: [forwardRef(() => MyDir)],
+})
+class MyComp {
+  constructor() {
+    this.name = 'My Component';
+  }
+}
+
+@Directive({
+  selector: '[my-dir]',
+})
+class MyDir {
+  constructor(c: MyComp) {
+    // <-- This is the line of interest
+
+    // Errors when directive is on regular div because there is no MyComp in the
+    // component tree so there is no MyComp to inject
+    console.log("Host component's name: " + c.name);
+  }
+}
+
+@Component({
+  template:
+    '<my-comp></my-comp>' + // No error in MyDir constructor, MyComp is parent of MyDir
+    '<my-comp my-dir></my-comp>' + // No error in MyDir constructor, MyComp is host of MyDir
+    '<div my-dir></div>', // Errors in MyDir constructor
+  directives: [MyComp, MyDir],
+})
+class MyApp {}
+```
+
+Here's a diagram illustrating what injectors are available:
+
+```
+                 +-------+
+                 |  App  |
+                 +---+---+
+                     |
+       +-------------+------------+
+       |                          |
++------+------+          +--------+--------+
+| Div (MyDir) |          | MyComp (MyDir)  |  <- MyComp can be injected
++-------------+          +--------+--------+
+       ^                          |
+No MyComp to inject        +------+------+
+                           | P (MyDir)   | <- MyComp can be injected from parent
+                           +-------------+
+```
+
+To expand on the previous example, you can use the Angular `@Optional` annotation if you don't always expect a component/directive reference:
+
+```tsx
+@Directive({
+  selector: '[my-dir]',
+})
+class MyDir {
+  constructor(@Optional() c: MyComp) {
+    // No longer errors if c is undefined
+    if (c) {
+      console.log(`Host component's name: ${c.name}`);
+    }
+  }
+}
+```
+
+### Can't bind to 'propertyName' since it isn't a known property
+
+```shell
+Can't bind to 'propertyName' since it isn't a known property of the 'elementName' element and there are no matching directives with a corresponding property
+```
+
+This happens when you try and bind a property on an element that doesn't have that property. If the element is a component or has one or more directives on it, neither the component nor the directives have that property either.
+
+```html
+<!-- div doesn't have a 'foo' property -->
+<div [foo]="bar"></div>
+```
+
+### No provider for ControlContainer
+
+```shell
+No provider for ControlContainer! (NgControlName -> ControlContainer)
+```
+
+This error is a more specific version of the `No provider` error above. It happens when you use a form control like NgControlName without specifying a parent [NgForm](https://angular.io/docs/ts/latest/api/forms/index/NgForm-directive.html) or NgFormModel. In most cases, this can be resolved by making sure your form control is within an actual form element. NgForm uses `form` as a selector so this will instantiate a new NgForm:
+
+```tsx
+@Component({
+  template:
+  '<form>' +
+  '<input ngControl="login">' +
+  '</form>'
+})
+```
+
+### No Component Factory Found
+
+```shell
+No component factory found for <component name>
+```
+
+This error happens when you are trying to use a component, provider pipe or directive that has not been imported and added to your ngModule. Whenever you add a new component, provider, pipe or directive to your app, you must add it to the `ngModule` in the `src/app/app.module.ts` file for Angular to be able to use it. To fix this error you can import the offending component, provider, pipe or directive into the app.module file and then if it is a provider add it to the `providers` array and for a component, pipe or directive add it to both the declarations array and `entryComponents` array.
diff --git a/versioned_docs/version-v6/troubleshooting/cors.md b/versioned_docs/version-v6/troubleshooting/cors.md
new file mode 100644
index 00000000000..5b497f74a12
--- /dev/null
+++ b/versioned_docs/version-v6/troubleshooting/cors.md
@@ -0,0 +1,300 @@
+---
+title: CORS Errors
+---
+
+<head>
+  <title>CORS Errors: Cross-Origin Resource Sharing - Ionic Documentation</title>
+  <meta
+    name="description"
+    content="CORS errors happen in web apps if requests are made and servers don't return required headers. Read about Cross-Origin Resource Sharing in Ionic Documentation."
+  />
+</head>
+
+## What is CORS?
+
+**Cross-Origin Resource Sharing (CORS)** is a mechanism that browsers and webviews — like the ones powering Capacitor and Cordova — use to restrict HTTP and HTTPS requests made from scripts to resources in a different origin for security reasons, mainly to protect your user's data and prevent attacks that would compromise your app.
+
+In order to know if an external origin supports CORS, the server has to send some [special headers](#cors-headers) for the browser to allow the requests.
+
+An **origin** is the combination of the **protocol**, **domain**, and **port** from which your Ionic app or the external resource is served. For example, apps running in Capacitor have `capacitor://localhost` (iOS) or `http://localhost` (Android) as their origin.
+
+When the origin where your app is served (e.g. `http://localhost:8100` with `ionic serve`) and the origin of the resource being requested (e.g. `https://api.example.com`) don't match, the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy" target="_blank" rel="noopener">Same Origin Policy</a> takes effect and CORS is required for the request to be made.
+
+CORS errors are common in web apps when a cross-origin request is made but the server doesn't return the required headers in the response (is not CORS-enabled):
+
+:::note
+XMLHttpRequest cannot load https://api.example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
+:::
+
+## How does CORS work
+
+### Request with preflight
+
+By default, when a web app tries to make a cross-origin request the browser sends a **preflight request** before the actual request. This preflight request is needed in order to know if the external resource supports CORS and if the actual request can be sent safely, since it may impact user data.
+
+A preflight request is sent by the browser if:
+
+- **The method is:**
+  - PUT
+  - DELETE
+  - CONNECT
+  - OPTIONS
+  - TRACE
+  - PATCH
+- **Or if it has a header other than:**
+  - Accept
+  - Accept-Language
+  - Content-Language
+  - Content-Type
+  - DPR
+  - Downlink
+  - Save-Data
+  - Viewport-Width
+  - Width
+- **Or if it has a `Content-Type` header other than:**
+  - application/x-www-form-urlencoded
+  - multipart/form-data
+  - text/plain
+- Or if a `ReadableStream` or event listeners in `XMLHttpRequestUpload` are used.
+
+If any of the conditions above are met, a preflight request with the `OPTIONS` method is sent to the resource URL.
+
+Let's suppose we are making a `POST` request to a fictional JSON API at `https://api.example.com` with a `Content-Type` of `application/json`. The preflight request would be like this (some default headers omitted for clarity):
+
+```http
+OPTIONS / HTTP/1.1
+Host: api.example.com
+Origin: http://localhost:8100
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: Content-Type
+```
+
+If the server is CORS enabled, it will parse the `Access-Control-Request-*` headers and understand that a `POST` request is trying to be made from `http://localhost:8100` with a custom `Content-Type`.
+
+The server will then respond to this preflight with which origins, methods, and headers are allowed by using the `Access-Control-Allow-*` headers:
+
+```http
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: http://localhost:8100
+Access-Control-Allow-Methods: GET, POST, OPTIONS
+Access-Control-Allow-Headers: Content-Type
+```
+
+If the returned origin and method don't match the ones from the actual request, or any of the headers used are not allowed, the request will be blocked by the browser and an error will be shown in the console. Otherwise, the request will be made after the preflight.
+
+In our example, since the API expects JSON, all `POST` requests will have a `Content-Type: application/json` header and always be preflighted.
+
+### Simple requests
+
+Some requests are always considered safe to send and don't need a preflight if they meet all of the following conditions:
+
+- **The method is:**
+  - GET
+  - HEAD
+  - POST
+- **Have only these headers:**
+  - Accept
+  - Accept-Language
+  - Content-Language
+  - Content-Type
+  - DPR
+  - Downlink
+  - Save-Data
+  - Viewport-Width
+  - Width
+- **The `Content-Type` header is:**
+  - application/x-www-form-urlencoded
+  - multipart/form-data
+  - text/plain
+- No `ReadableStream` or event listeners in `XMLHttpRequestUpload` are used.
+
+In our example API, `GET` requests don't need to be preflighted because no JSON data is being sent, and so the app doesn't need to use the `Content-Type: application/json` header. They will always be simple requests.
+
+## CORS Headers
+
+### Server Headers (Response)
+
+| Header                           | Value             | Description                                                                                                                                                                                |
+| -------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Access-Control-Allow-Origin**  | `origin` or `*`   | Specifies the origin to be allowed, like `http://localhost:8100` or `*` to allow all origins.                                                                                              |
+| **Access-Control-Allow-Methods** | `methods`         | Which methods are allowed when accessing the resource: `GET`, `HEAD`, `POST`, `PUT`, `DELETE`, `CONNECT`, `OPTIONS`, `TRACE`, `PATCH`.                                                     |
+| **Access-Control-Allow-Headers** | `headers`         | Used in response to a preflight request to indicate which headers can be used when making the actual request, aside from the [simple headers](#simple-requests), which are always allowed. |
+| Access-Control-Allow-Credentials | `true` or `false` | Whether or not the request can be made with credentials.                                                                                                                                   |
+| Access-Control-Expose-Headers    | `headers`         | Specifies the headers that the browser is allowed to access.                                                                                                                               |
+| Access-Control-Max-Age           | `seconds`         | Indicates how long the results of a preflight request can be cached.                                                                                                                       |
+
+### Browser Headers (Request)
+
+The browser automatically sends the appropriate headers for CORS in every request to the server, including the preflight requests. Please note that the headers below are for reference only, and **should not be set in your app code** (the browser will ignore them).
+
+#### All Requests
+
+| Header     | Value    | Description                          |
+| ---------- | -------- | ------------------------------------ |
+| **Origin** | `origin` | Indicates the origin of the request. |
+
+#### Preflight Requests
+
+| Header                            | Value     | Description                                                                                       |
+| --------------------------------- | --------- | ------------------------------------------------------------------------------------------------- |
+| **Access-Control-Request-Method** | `method`  | Used to let the server know what method will be used when the actual request is made.             |
+| Access-Control-Request-Headers    | `headers` | Used to let the server know what non-simple headers will be used when the actual request is made. |
+
+## Solutions for CORS Errors
+
+### A. Enabling CORS in a server you control
+
+The correct and easiest solution is to enable CORS by returning the [right response headers](#server-headers-response-) from the web server or backend and responding to preflight requests, as it allows to keep using `XMLHttpRequest`, `fetch`, or abstractions like `HttpClient` in Angular.
+
+Ionic apps may be run from different origins, but only one origin can be specified in the `Access-Control-Allow-Origin` header. Therefore we recommend checking the value of the `Origin` header from the request and reflecting it in the `Access-Control-Allow-Origin` header in the response.
+
+Please note that all of the `Access-Control-Allow-*` headers have to be sent from the server, and don't belong in your app code.
+
+Here are some of the origins your Ionic app may be served from:
+
+#### Capacitor
+
+| Platform | Origin                  |
+| -------- | ----------------------- |
+| iOS      | `capacitor://localhost` |
+| Android  | `http://localhost`      |
+
+Replace `localhost` with your own hostname if you have changed the default in the Capacitor config.
+
+#### Ionic WebView 3.x plugin on Cordova
+
+| Platform | Origin              |
+| -------- | ------------------- |
+| iOS      | `ionic://localhost` |
+| Android  | `http://localhost`  |
+
+Replace `localhost` with your own hostname if you have changed the default in the plugin config.
+
+#### Ionic WebView 2.x plugin on Cordova
+
+| Platform | Origin                  |
+| -------- | ----------------------- |
+| iOS      | `http://localhost:8080` |
+| Android  | `http://localhost:8080` |
+
+Replace port `8080` with your own if you have changed the default in the plugin config.
+
+#### Local development in the browser
+
+| Command                       | Origin                                                   |
+| ----------------------------- | -------------------------------------------------------- |
+| `ionic serve`                 | `http://localhost:8100` or `http://YOUR_MACHINE_IP:8100` |
+| `npm run start` or `ng serve` | `http://localhost:4200` for Ionic Angular apps.          |
+
+Port numbers can be higher if you are serving multiple apps at the same time.
+
+Allowing any origin with `Access-Control-Allow-Origin: *` is guaranteed to work in all scenarios but may have security implications — like some CSRF attacks — depending on how the server controls access to resources and use sessions and cookies.
+
+For more information on how to enable CORS in different web and app servers, please check <a href="https://enable-cors.org" target="_blank" rel="noopener">enable-cors.org</a>
+
+CORS can be easily enabled in Express/Connect apps with the <a href="https://github.com/expressjs/cors" target="_blank" rel="noopener">cors</a> middleware:
+
+```javascript
+const express = require('express');
+const cors = require('cors');
+const app = express();
+
+const allowedOrigins = [
+  'capacitor://localhost',
+  'ionic://localhost',
+  'http://localhost',
+  'http://localhost:8080',
+  'http://localhost:8100',
+];
+
+// Reflect the origin if it's in the allowed list or not defined (cURL, Postman, etc.)
+const corsOptions = {
+  origin: (origin, callback) => {
+    if (allowedOrigins.includes(origin) || !origin) {
+      callback(null, true);
+    } else {
+      callback(new Error('Origin not allowed by CORS'));
+    }
+  },
+};
+
+// Enable preflight requests for all routes
+app.options('*', cors(corsOptions));
+
+app.get('/', cors(corsOptions), (req, res, next) => {
+  res.json({ message: 'This route is CORS-enabled for an allowed origin.' });
+});
+
+app.listen(3000, () => {
+  console.log('CORS-enabled web server listening on port 3000');
+});
+```
+
+### B. Working around CORS in a server you can't control
+
+#### Don't leak your keys!
+
+If you are trying to connect to a 3rd-party API, first check in its documentation that is safe to use it directly from the app (client-side) and that it won't leak any secret/private keys or credentials, as it's easy to see them in clear text in Javascript code. Many APIs don't support CORS on purpose, in order to force developers to use them in the server and protect important information or keys.
+
+#### 1. Native-only apps (iOS/Android)
+
+Use the [HTTP plugin from Ionic Native](../native/http.md) to make the requests natively from outside the webview. Please note that this plugin doesn't work in the browser, so the development and testing of the app must always be done in a device or simulator going forward.
+
+##### Usage in Ionic Angular 4
+
+```tsx
+import { Component } from '@angular/core';
+import { HTTP } from '@awesome-cordova-plugins/http/ngx';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.page.html',
+  styleUrls: ['./home.page.scss'],
+})
+export class HomePage {
+  constructor(private http: HTTP) {}
+
+  async getData() {
+    try {
+      const url = 'https://api.example.com';
+      const params = {};
+      const headers = {};
+
+      const response = await this.http.get(url, params, headers);
+
+      console.log(response.status);
+      console.log(JSON.parse(response.data)); // JSON data returned by server
+      console.log(response.headers);
+    } catch (error) {
+      console.error(error.status);
+      console.error(error.error); // Error message as string
+      console.error(error.headers);
+    }
+  }
+}
+```
+
+#### 2. Native + PWAs
+
+Send the requests through an HTTP/HTTPS proxy that bypasses them to the external resources and adds the necessary CORS headers to the responses. This proxy must be trusted or under your control, as it will be intercepting most traffic made by the app.
+
+Also, keep in mind that the browser or webview will not receive the original HTTPS certificates but the one being sent from the proxy if it's provided. URLs may need to be rewritten in your code in order to use the proxy.
+
+Check <a href="https://github.com/Rob--W/cors-anywhere/" target="_blank" rel="noopener">cors-anywhere</a> for a Node.js CORS proxy that can be deployed in your own server. Using free hosted CORS proxies in production is not recommended.
+
+### C. Disabling CORS or browser web security
+
+Please be aware that CORS exists for a reason (security of user data and to prevent attacks against your app). **It's not possible or advisable to try to disable CORS**.
+
+Older webviews like `UIWebView` on iOS don't enforce CORS but are deprecated and are very likely to disappear soon. Modern webviews like iOS `WKWebView` or Android `WebView` (both used by Capacitor) do enforce CORS and provide huge security and performance improvements.
+
+If you are developing a PWA or testing in the browser, using the `--disable-web-security` flag in Google Chrome or an extension to disable CORS is a really bad idea. You will be exposed to all kind of attacks, you can't ask your users to take the risk, and your app won't work once in production.
+
+##### Sources
+
+- <a href="https://fdezromero.com/cors-errors-in-ionic-apps" target="_blank" rel="noopener">
+    CORS Errors in Ionic Apps
+  </a>
+- <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank" rel="noopener">
+    MDN
+  </a>
diff --git a/versioned_docs/version-v6/troubleshooting/debugging.md b/versioned_docs/version-v6/troubleshooting/debugging.md
new file mode 100644
index 00000000000..326f1513653
--- /dev/null
+++ b/versioned_docs/version-v6/troubleshooting/debugging.md
@@ -0,0 +1,100 @@
+---
+title: Debugging
+---
+
+<head>
+  <title>Debugging Guide for Apps in iOS Safari and Android Chrome</title>
+  <meta
+    name="description"
+    content="Ionic Framework's ultimate guide to debugging apps in iOS Safari and Android Chrome. Read our debugging guide to get started with your Ionic apps today."
+  />
+</head>
+
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/akh6V6Yw1lw"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+></iframe>
+
+## Live Reload
+
+Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. [Learn more here](../cli/livereload.md).
+
+## iOS and Safari
+
+Safari can be used to debug an Ionic app on a connected iOS device or iOS simulator.
+
+First, on the iOS device, enable **Web Inspector** from Settings > Safari > Advanced.
+
+Next, open Safari on a Mac then enable **Show Develop menu in menu bar** under Safari > Preferences > Advanced.
+
+Run the iOS simulator or connect your iOS device to your Mac, then run the Ionic app that you want to debug.
+
+Within Safari, select **Develop** in the toolbar. In the dropdown menu options, you should see the name of your device and app. Hover over the app name and click on **localhost**. This will open a new window with the Safari Developer Tools - use them to inspect and debug the Ionic app running on your device.
+
+## Android and Chrome
+
+Use Google Chrome's DevTools to debug an app when it is running in the browser using the `ionic serve` command, deployed to an emulator, or on a physical device.
+
+To inspect a physical device, first you need to have developer mode enabled. Connect your Android device to the computer then go to `Settings > About` scroll to `Build Number` and tap that 7 times. This will activate a new option in the **Settings** menu called **Developer Options**.
+
+Next, go to `Settings > Developer Options` and ensure that the developer options switch is toggled on. Scroll down to **USB Debugging** and ensure that it is also enabled. Developer Options & USB Debugging are enabled by default in the Android emulator.
+
+Open the Chrome browser and navigate to the URL `chrome://inspect/#devices`. Your connected Android device should show up in the list of Remote Targets.
+
+On your device, open the Ionic app that you would like to debug using Chrome.
+
+With your app running on the device, head back to Chrome and click on **inspect** under your device in the list of remote targets. This will open the Chrome Developer Tools in a new window. You will then be able to use all of the Chrome DevTools to debug the application as it runs on your device.
+
+:::note
+The app preview may not automatically appear when you open Chrome Developer Tools due to a minor bug. To make it appear, click on the **Elements** tab then click on any DOM element then toggle off and on any CSS rule and the app preview window will appear.
+:::
+
+## Debugging with Visual Studio locally in Chrome (both Android & iOS)
+
+[Visual Studio Code](https://code.visualstudio.com/) can also be used to debug an Ionic app running in the Chrome web browser.
+
+To do this, run your app in the browser using `ionic serve`. Take note of the port that your app is running on. Next, open your Ionic project using Visual Studio Code.
+
+In the far-left vertical menu within VS Code, click on the `run` icon. If you are configuring this for the first time in your project, click on the option to create a `launch.json` file. Select **Chrome** from the environment options dropdown. This will automatically generate a `launch.json` file with configurations for launching Chrome against localhost.
+
+Make sure that the port used in the url property of your `launch.json` file matches the port that you observed earlier when you ran `ionic serve`. Using an incorrect port number will not work.
+
+In the debug target dropdown menu, select **Launch against Chrome**, then click run. This will open a new instance of the Chrome browser and VS code will attach to it. You can set breakpoints and use the other debugging tools within VS Code while your app is running in Chrome.
+
+## Debugging with Visual Studio Code in Android
+
+[Visual Studio Code](https://code.visualstudio.com/) has a dedicated plugin for debugging apps that run in an Android WebView.
+
+[The plugin](https://marketplace.visualstudio.com/items?itemName=mpotthoff.vscode-android-webview-debug) creates a bridge between the device and the Visual Studio Code developer tools and permits debugging right from the editor.
+
+In order to use this plugin to debug your Ionic apps, first install it then start your app in the Android emulator or connect your Android device and run the app. You may need to enable USB debugging on your Android device.
+
+In the root of your Ionic project, create a folder called `.vscode` and inside that folder create a file called `launch.json`. Inside `launch.json`, enter the following code to configure the plugin to debug Ionic apps:
+
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "android-webview",
+      "request": "attach",
+      "name": "Attach to Android WebView",
+      "webRoot": "${workspaceFolder}/www",
+      "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "webpack:/*": "${workspaceFolder}/*"
+      }
+    }
+  ]
+}
+```
+
+Next, launch the debugging process, selecting your device and Ionic app. VS Code will attach to both the Android device and Ionic app and you can now debug your app, which includes setting breakpoints.
+
+:::note
+If you are unable to set breakpoints and get an error saying, **"Breakpoint ignored because generated code not found (source map problem?)"** it means that the paths to the transpiled javascript files are incorrect. Use the `.scripts` command in the Debug console to see the loaded scripts. Make sure the paths of the scripts are correct by experimenting with different values in the `sourceMapPathOverrides` key in your `launch.json` configuration file.
+:::
diff --git a/versioned_docs/version-v6/troubleshooting/native.md b/versioned_docs/version-v6/troubleshooting/native.md
new file mode 100644
index 00000000000..3cc2f58e051
--- /dev/null
+++ b/versioned_docs/version-v6/troubleshooting/native.md
@@ -0,0 +1,102 @@
+---
+title: Native Errors
+---
+
+<head>
+  <title>Native App Errors: How to Resolve Native Errors on Ionic Apps</title>
+  <meta
+    name="description"
+    content="Review native app errors including code signing, Xcode build error 65, and clashing Google Play Services versions. Learn to resolve native errors on Ionic apps."
+  />
+</head>
+
+## Code Signing errors
+
+```shell
+Code Signing Error: Failed to create provisioning profile. The app ID "com.csform.ionic.yellow" cannot be registered to your development team. Change your bundle identifier to a unique string to try again. Code Signing Error: No profiles for 'com.csform.ionic.yellow' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.csform.ionic.yellow'. Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 11.1'
+```
+
+Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions:
+
+1. <strong>Set the [Package ID](../reference/glossary.md#package-id).</strong>
+
+   For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
+
+   For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, `<widget>`. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information.
+
+2. <strong>
+     Open the project in <b>Xcode</b>.
+   </strong>
+
+   For Capacitor, run the following to open the app in Xcode:
+
+   ```shell
+   $ ionic capacitor open ios
+   ```
+
+   For Cordova, open Xcode. Use **File** &raquo; **Open** and locate the app. Open the app's `platforms/ios` directory.
+
+3. <strong>
+     In <b>Project navigator</b>, select the project root to open the project editor. Under the **Identity** section,
+     verify that the Package ID that was set matches the Bundle Identifier.
+   </strong>
+
+   ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
+
+4. <strong>
+     In the same project editor, under the <b>Signing</b> section, ensure <b>Automatically manage signing</b> is
+     enabled.
+   </strong> Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning
+   and signing.
+
+   ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
+
+## Xcode build error 65
+
+```shell
+Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/ionitron/projects/my-project/platforms/ios/cordova/build-debug.xcconfig,-workspace,SC project.xcworkspace,-scheme,SC project,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/sharedpch
+```
+
+This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.md#running-with-xcode).
+
+If this does not fix the error then run the following commands:
+
+```shell
+rm -rf node_modules
+rm -rf platform
+npm i
+ionic cordova platform add ios
+ionic cordova prepare ios
+ionic cordova build ios --prod
+```
+
+Once these commands have been ran a fresh build can be done.
+
+## Clashing Google Play Services versions
+
+```shell
+Error: more than one library with package name com.google.android.gms
+```
+
+This error is caused by two separate plugins trying to use different versions of the `Google Play Services`. To fix this issue make sure you are running `cordova` version `7.1.0` or higher and `cordova-android` `6.3.0` or higher. To install latest `cordova` run:
+
+```shell
+npm install cordova@latest
+```
+
+and to update `cordova-android` run:
+
+```shell
+cordova platform update android
+```
+
+Plugins that depend on `Google Play Services` can now be updated to use the same version. For example, if `pluginA` uses version 11.0 and `pluginB` uses version 15.0 they can be updated to use the same version with the following snippet in the `config.xml` file:
+
+```xml
+<plugin name="pluginA" spec="npm">
+  <variable name="PLAY_SERVICES_VERSION" value="15.0.0"/>
+</plugin>
+<plugin name="pluginB" spec="npm">
+  <variable name="PLAY_SERVICES_VERSION" value="15.0.0" />
+</plugin>
+```
diff --git a/versioned_docs/version-v6/troubleshooting/runtime.md b/versioned_docs/version-v6/troubleshooting/runtime.md
new file mode 100644
index 00000000000..6163d233ef5
--- /dev/null
+++ b/versioned_docs/version-v6/troubleshooting/runtime.md
@@ -0,0 +1,209 @@
+---
+title: Runtime Issues
+---
+
+<head>
+  <title>Solve App Runtime Issues: Blank App, Plugins Not Working, etc.</title>
+  <meta
+    name="description"
+    content="There are many causes of app runtime issues. Read how to solve issues such as a blank app, plugins not working, Angular change detection, and more with Ionic."
+  />
+</head>
+
+## Blank App
+
+:::note
+I have no errors in my app. Why does it show a blank screen?
+:::
+
+There are several different reasons this can happen. If you are unable to find a solution on the [Ionic forums](https://forum.ionicframework.com), make sure:
+
+- Polyfills are not included for older browser/versions of android
+
+For projects with `@angular/cli@7.3` or above, polyfills will automatically be included. For project created before that, polyfills need to be manually enabled.
+
+In `src/polyfills.ts`, you must enabled all ES6 polyfills for Android 4.4 support.
+
+Alternatively, a project could be updated to use the latest release of the `@angular/cli` package & `@angular-devkit` packages and include the `es5BrowserSupport` option in the `angular.json`'s build options object:
+
+```diff
+        "input": "src/global.scss"
+      }
+    ],
+-   "scripts": []
++   "scripts": [],
++   "es5BrowserSupport": true
+  },
+  "configurations": {
+    "production": {
+```
+
+This will automatically include the polyfills for older browsers that need them.
+
+## Directive Not Working
+
+:::note
+Why is my custom component/directive not working?
+:::
+
+There are a few things you can check. Make sure:
+
+- Your selector doesn't have any misspellings.
+- You're using the selector correctly as an attribute, element or class.
+- Your selector has the proper syntax:
+  - `[attr]` if it's an attribute selector
+  - `element` if it's an element selector
+  - `.class` if it's a class selector
+
+Here's an example using an attribute selector:
+
+```tsx
+@Directive({
+  selector: '[my-dir]' // <-- [my-dir] because it is an attribute
+})                     // Could be my-dir, [my-dir], .my-dir
+class MyDir {
+  constructor() {
+    console.log('I'm alive!');
+  }
+}
+
+@Component({
+  // We add my-dir as an attribute to match the directive's selector
+  template: `<div my-dir>Hello World</div>`,
+
+  // Alternatively, if you were attaching the directive to an element it would be:
+  // template: `<my-dir>Hello World</my-dir>`
+  // and if you were attaching by class the template would be:
+  // template: `<div class="my-dir">Hello World</div>`
+
+  directives: [MyDir] // <-- Don't forget me! (only if your ionic-angular version is below RC0)
+})
+class MyPage { }
+```
+
+## Click Delays
+
+:::note
+Why is there a delay on my click event?
+:::
+
+In general, we recommend only adding `(click)` events to elements that are
+normally clickable. This includes `<button>` and `<a>` elements. This improves
+accessibility as a screen reader will be able to tell that the element is
+clickable.
+
+However, you may need to add a `(click)` event to an element that is not
+normally clickable. When you do this you may experience a `300ms` delay from the
+time you click the element to the event firing. To remove this delay, you can
+add the `tappable` attribute to your element.
+
+```html
+<div tappable (click)="doClick()">I am clickable!</div>
+```
+
+## Angular Change Detection
+
+:::note
+Why does Angular change detection run very frequently when my components are initializing?
+:::
+
+Angular uses a library called [zone.js](https://github.com/angular/angular/tree/master/packages/zone.js/)
+which helps it determine when to run change detection.
+
+As of zone.js `0.8.27`, certain APIs for Web Components also cause change
+detection to run. This can have the undesirable side effect of your app
+slowing down when a large number of components are initializing.
+
+To prevent this from happening, the zone.js flag that manages this portion of
+change detection can be disabled. In the `src` directory of your application,
+create a file called `zone-flags.ts`. Place the following code into the file:
+
+```tsx
+(window as any).__Zone_disable_customElements = true;
+```
+
+The `zone-flags.ts` file then needs to be imported into your application's
+`polyfills.ts` file. Be sure to import it _before_ `zone.js` is imported:
+
+```tsx
+...
+
+import './zone-flags.ts';
+import 'zone.js/dist/zone'; // Included with Angular CLI
+
+...
+```
+
+This change will only affect applications that depend on zone.js `0.8.27` or
+newer. Older versions will not be affected by this change.
+
+:::note
+This flag is automatically included when creating an Ionic app via
+:::
+the Ionic CLI.
+
+## Cordova plugins not working in the browser
+
+At some point in your development you may, try to call Cordova plugin, but get a
+warning:
+
+```shell
+[Warning] Native: tried calling StatusBar.styleDefault, but Cordova is not
+available. Make sure to include cordova.js or run in a device/simulator
+(app.bundle.js, line 83388)
+```
+
+This happens when you try to call a native plugin, but Cordova isn't available.
+Thankfully, Ionic Native will print out a nice warning, instead of an error.
+
+In other cases where the plugin is not being used through Ionic Native, plugins
+can print a much more obscure warning.
+
+```shell
+EXCEPTION: Error: Uncaught (in promise): TypeError: undefined is not an object
+(evaluating 'navigator.camera.getPicture')
+```
+
+If this happens, test the plugin on a real device or simulator.
+
+## Multiple instances of a provider
+
+If you inject a provider in every component because you want it available to all
+of them you will end up with multiple instances of the provider. You should
+inject the provider once in the parent component if you want it to be available
+to the child components.
+
+```tsx
+let id = 0;
+export class MyService {
+  id: number;
+
+  constructor() {
+    this.id = id++;
+  }
+}
+
+@Component({
+  selector: 'my-component',
+  template: 'Hello World',
+  providers: [MyService], // <-- Creates a new instance of MyService :(
+}) // Unnecessary because MyService is in App's providers
+class MyComp {
+  // id is 1, s is a different MyService instance than MyApp
+  constructor(s: MyService) {
+    console.log('MyService id is: ' + s.id);
+  }
+}
+
+@Component({
+  template: '<my-component></my-component>',
+  providers: [MyService], // MyService only needs to be here
+  directives: [MyComp],
+})
+class MyApp {
+  // id is 0
+  constructor(s: MyService) {
+    console.log('MyService id is: ' + s.id);
+  }
+}
+```
diff --git a/versioned_docs/version-v6/utilities/animations.md b/versioned_docs/version-v6/utilities/animations.md
new file mode 100644
index 00000000000..10da9763b82
--- /dev/null
+++ b/versioned_docs/version-v6/utilities/animations.md
@@ -0,0 +1,1624 @@
+---
+title: Animations
+---
+
+import Codepen from '@components/global/Codepen';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>Animations: Web Animations API to Build and Run on Ionic Apps</title>
+  <meta
+    name="description"
+    content="Ionic apps use Web Animations API to build and run animations. Learn how this utility lets developers build complex animations in a platform agnostic manner."
+  />
+</head>
+
+## Overview
+
+Ionic Animations is a utility that allows developers to build complex animations in a platform agnostic manner. Developers do not need to be using a particular framework such as React or Angular, nor do they even need to be building an Ionic app. As long as developers have access to v5.0 or greater of Ionic Framework, they will have access to all of Ionic Animations.
+
+Building efficient animations can be tricky. Developers are often limited by the libraries available to them as well as the hardware that their apps run on. On top of that, many animation libraries use a JavaScript-driven approach to running animations where they handle the calculation of your animation's values at every step in a `requestAnimationFrame` loop. This reduces the scalability of your animations as the library is constantly computing values and using up CPU time.
+
+Ionic Animations uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to build and run your animations. In doing this, we offload all work required to compute and run your animations to the browser. As a result, this allows the browser to make any optimizations it needs and ensures your animations run as smoothly as possible. While most browsers support a basic implementation of Web Animations, we fallback to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) for browsers that do not support Web Animations. The performance difference in switching between these two should typically be negligible.
+
+## Installation
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'typescript', label: 'TypeScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+Developers using Ionic Core and JavaScript should install the latest version of `@ionic/core`.
+
+```javascript
+import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/esm/index.mjs';
+
+...
+
+const animation = createAnimation()
+  .addElement(myElementRef)
+  .duration(1000)
+  .fromTo('opacity', '1', '0.5');
+}
+
+```
+</TabItem>
+<TabItem value="typescript">
+
+Developers using Ionic Core and TypeScript should install the latest version of `@ionic/core`.
+
+```tsx
+import { createAnimation, Animation } from '@ionic/core';
+
+...
+
+const animation: Animation = createAnimation('')
+  .addElement(myElementRef)
+  .duration(1000)
+  .fromTo('opacity', '1', '0.5');
+}
+```
+</TabItem>
+<TabItem value="angular">
+
+Developers using Angular should install the latest version of `@ionic/angular`. Animations can be created via the `AnimationController` dependency injection.
+
+```tsx
+
+import { Animation, AnimationController } from '@ionic/angular';
+
+...
+
+constructor(private animationCtrl: AnimationController) {
+  const animation: Animation = this.animationCtrl.create()
+    .addElement(myElementRef)
+    .duration(1000)
+    .fromTo('opacity', '1', '0.5');
+}
+
+```
+</TabItem>
+<TabItem value="react">
+
+Developers using React should install the latest version of `@ionic/react`. React wrappers are in beta. Please report any issues on GitHub!
+
+```tsx
+
+import { CreateAnimation, Animation } from '@ionic/react';
+
+...
+
+<CreateAnimation
+  duration={1000}
+  fromTo={{
+    property: 'opacity',
+    fromValue: '1',
+    toValue: '0.5'
+  }}
+>
+...
+</CreateAnimation>
+
+```
+</TabItem>
+<TabItem value="vue">
+
+Developers using Ionic Vue should install the latest version of `@ionic/vue`.
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const myElementRef = ref();
+
+...
+
+const animation = createAnimation()
+  .addElement(myElementRef.value)
+  .duration(1000)
+  .fromTo('opacity', '1', '0.5');
+}
+
+```
+</TabItem>
+</Tabs>
+````
+
+## Basic Animations
+
+### Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+createAnimation()
+  .addElement(document.querySelector('.square'))
+  .duration(1500)
+  .iterations(Infinity)
+  .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+  .fromTo('opacity', '1', '0.2');
+```
+</TabItem>
+<TabItem value="angular">
+
+```javascript
+this.animationCtrl.create()
+  .addElement(document.querySelector('.square'))
+  .duration(1500)
+  .iterations(Infinity)
+  .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+  .fromTo('opacity', '1', '0.2');
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+<CreateAnimation
+  duration={1500}
+  iterations={Infinity}
+  fromTo={[
+    { property: 'transform', fromValue: 'translateX(0px)', toValue: 'translateX(100px)' },
+    { property: 'opacity', fromValue: '1', toValue: '0.2' }
+  ]}
+>
+  ...
+</CreateAnimation>
+```
+</TabItem>
+<TabItem value="vue">
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const elementRef = ref();
+
+...
+
+createAnimation()
+  .addElement(elementRef.value)
+  .duration(1500)
+  .iterations(Infinity)
+  .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+  .fromTo('opacity', '1', '0.2');
+```
+</TabItem>
+</Tabs>
+````
+
+In the example above, an animation that changes the opacity on the `.square` element and moves it from left to right along the X axis has been created. This animation will run an infinite number of times, and each iteration of the animation will last 1500ms.
+
+By default, all Ionic Animations are paused until the `play` method is called.
+
+<Codepen user="ionic" slug="bGbMojP" />
+
+## Keyframe Animations
+
+Ionic Animations allows you to control the intermediate steps in an animation using keyframes. Any valid CSS property can be used here, and you can even use CSS Variables as values.
+
+Hyphenated CSS properties should be written using camel case when writing keyframes. For example, `border-radius` should be written as `borderRadius`. This also applies to the `fromTo()`, `from(),` and `to()` methods.
+
+### Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+createAnimation()
+  .addElement(document.querySelector('.square'))
+  .duration(3000)
+  .iterations(Infinity)
+  .keyframes([
+    { offset: 0, background: 'red' },
+    { offset: 0.72, background: 'var(--background)' },
+    { offset: 1, background: 'green' }
+  ]);
+```
+</TabItem>
+<TabItem value="angular">
+
+```javascript
+this.animationCtrl.create()
+  .addElement(this.square.nativeElement)
+  .duration(3000)
+  .iterations(Infinity)
+  .keyframes([
+    { offset: 0, background: 'red' },
+    { offset: 0.72, background: 'var(--background)' },
+    { offset: 1, background: 'green' }
+  ]);
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+<CreateAnimation
+  duration={3000}
+  iterations={Infinity}
+  keyframes={[
+    { offset: 0, background: 'red' },
+    { offset: 0.72, background: 'var(--background)' },
+    { offset: 1, background: 'green' }
+  ]}
+>
+...
+</CreateAnimation>
+```
+</TabItem>
+<TabItem value="vue">
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const squareRef = ref();
+
+...
+
+createAnimation()
+  .addElement(squareRef.value)
+  .duration(3000)
+  .iterations(Infinity)
+  .keyframes([
+    { offset: 0, background: 'red' },
+    { offset: 0.72, background: 'var(--background)' },
+    { offset: 1, background: 'green' }
+  ]);
+```
+</TabItem>
+</Tabs>
+````
+
+In the example above, the `.square` element will transition from a red background color, to a background color defined by the `--background` variable, and then transition on to a green background color.
+
+Each keyframe object contains an `offset` property. `offset` is a value between 0 and 1 that defines the keyframe step. Offset values must go in ascending order and cannot repeat.
+
+<Codepen user="ionic" slug="YzKLEzR" />
+
+## Grouped Animations
+
+Multiple elements can be animated at the same time and controlled via a single parent animation object. Child animations inherit properties such as duration, easing, and iterations unless otherwise specified. A parent animation's `onFinish` callback will not be called until all child animations have completed.
+
+### Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+const squareA = createAnimation()
+  .addElement(document.querySelector('.square-a'))
+  .keyframes([
+    { offset: 0, transform: 'scale(1) rotate(0)' },
+    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+    { offset: 1, transform: 'scale(1) rotate(45deg)' }
+  ]);
+
+const squareB = createAnimation()
+  .addElement(document.querySelector('.square-b'))
+  .keyframes([
+    { offset: 0, transform: 'scale(1))', opacity: '1' },
+    { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+    { offset: 1, transform: 'scale(1)', opacity: '1' }
+  ]);
+
+const squareC = createAnimation()
+  .addElement(document.querySelector('.square-c'))
+  .duration(5000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1))', opacity: '0.5' },
+    { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+    { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+  ]);
+
+const parent = createAnimation()
+  .duration(2000)
+  .iterations(Infinity)
+  .addAnimation([squareA, squareB, squareC]);
+```
+
+</TabItem>
+<TabItem value="angular">
+
+```javascript
+const squareA = this.animationCtrl.create()
+  .addElement(this.squareA.nativeElement)
+  .keyframes([
+    { offset: 0, transform: 'scale(1) rotate(0)' },
+    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+    { offset: 1, transform: 'scale(1) rotate(45deg)' }
+  ]);
+
+const squareB = this.animationCtrl.create()
+  .addElement(this.squareB.nativeElement)
+  .keyframes([
+    { offset: 0, transform: 'scale(1))', opacity: '1' },
+    { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+    { offset: 1, transform: 'scale(1)', opacity: '1' }
+  ]);
+
+const squareC = this.animationCtrl.create()
+  .addElement(this.squareC.nativeElement)
+  .duration(5000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1))', opacity: '0.5' },
+    { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+    { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+  ]);
+
+const parent = this.animationCtrl.create()
+  .duration(2000)
+  .iterations(Infinity)
+  .addAnimation([squareA, squareB, squareC]);
+```
+
+</TabItem>
+<TabItem value="react">
+
+```tsx
+private parentRef: React.RefObject<CreateAnimation> = React.createRef();
+private squareARef: React.RefObject<CreateAnimation> = React.createRef();
+private squareBRef: React.RefObject<CreateAnimation> = React.createRef();
+private squareCRef: React.RefObject<CreateAnimation> = React.createRef();
+
+...
+
+componentDidMount() {
+  const parent = this.parentRef.current!.animation;
+  const squareA = this.squareARef.current!.animation;
+  const squareB = this.squareBRef.current!.animation;
+  const squareC = this.squareCRef.current!.animation;
+
+  parent.addAnimation([squareA, squareB, squareC]);
+}
+
+render() {
+  return (
+    <>
+      <CreateAnimation
+        ref={this.parentRef}
+        duration={2000}
+        iterations={Infinity}
+      ></CreateAnimation>
+
+      <CreateAnimation
+        ref={this.squareARef}
+        keyframes={[
+          { offset: 0, transform: 'scale(1) rotate(0)' },
+          { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+          { offset: 1, transform: 'scale(1) rotate(0deg)' }
+        ]}
+      >
+        <div className="square"></div>
+      </CreateAnimation>
+
+      <CreateAnimation
+        ref={this.squareBRef}
+        keyframes={[
+          { offset: 0, transform: 'scale(1)', opacity: '1' },
+          { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+          { offset: 1, transform: 'scale(1)', opacity: '1' }
+        ]}
+      >
+        <div className="square"></div>
+      </CreateAnimation>
+
+      <CreateAnimation
+        ref={this.squareCRef}
+        duration={5000}
+        keyframes={[
+          { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+          { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+          { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+        ]}
+      >
+        <div className="square"></div>
+      </CreateAnimation>
+    </>
+  )
+}
+```
+
+</TabItem>
+<TabItem value="vue">
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const squareARef = ref();
+const squareBRef = ref();
+const squareCRef = ref();
+
+...
+
+const squareA = createAnimation()
+  .addElement(squareARef.value)
+  .keyframes([
+    { offset: 0, transform: 'scale(1) rotate(0)' },
+    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+    { offset: 1, transform: 'scale(1) rotate(45deg)' }
+  ]);
+
+const squareB = createAnimation()
+  .addElement(squareBRef.value)
+  .keyframes([
+    { offset: 0, transform: 'scale(1))', opacity: '1' },
+    { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+    { offset: 1, transform: 'scale(1)', opacity: '1' }
+  ]);
+
+const squareC = createAnimation()
+  .addElement(squareCRef.value)
+  .duration(5000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1))', opacity: '0.5' },
+    { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+    { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+  ]);
+
+const parent = createAnimation()
+  .duration(2000)
+  .iterations(Infinity)
+  .addAnimation([squareA, squareB, squareC]);
+```
+
+</TabItem>
+</Tabs>
+````
+
+This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set.
+
+<Codepen user="ionic" slug="oNvdogM" height="460" />
+
+## Before and After Hooks
+
+Ionic Animations provides hooks that let you alter an element before an animation runs and after an animation completes. These hooks can be used to perform DOM reads and writes as well as add or remove classes and inline styles.
+
+### Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+createAnimation()
+  .addElement(document.querySelector('.square'))
+  .duration(2000)
+  .beforeStyles({
+    opacity: 0.2
+  })
+  .afterStyles({
+    background: 'rgba(0, 255, 0, 0.5)'
+  })
+  .afterClearStyles(['opacity'])
+  .keyframes([
+    { offset: 0, transform: 'scale(1)' },
+    { offset: 0.5, transform: 'scale(1.5)' },
+    { offset: 1, transform: 'scale(1)' }
+  ])
+```
+</TabItem>
+<TabItem value="angular">
+
+```javascript
+this.animationCtrl.create()
+  .addElement(this.square.nativeElement)
+  .duration(2000)
+  .beforeStyles({
+    opacity: 0.2
+  })
+  .afterStyles({
+    background: 'rgba(0, 255, 0, 0.5)'
+  })
+  .afterClearStyles(['opacity'])
+  .keyframes([
+    { offset: 0, transform: 'scale(1)' },
+    { offset: 0.5, transform: 'scale(1.5)' },
+    { offset: 1, transform: 'scale(1)' }
+  ])
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+<CreateAnimation
+  duration={2000}
+  beforeStyles={{
+    opacity: 0.2
+  }}
+  afterStyles={{
+    background: 'rgba(0, 255, 0, 0.5)'
+  }}
+  afterClearStyles={['opacity']}
+  keyframes={[
+    { offset: 0, transform: 'scale(1)' },
+    { offset: 0.5, transform: 'scale(1.5)' },
+    { offset: 1, transform: 'scale(1)' }
+  ]}
+>
+  ...
+</CreateAnimation>
+```
+</TabItem>
+<TabItem value="vue">
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const squareRef = ref();
+
+...
+
+createAnimation()
+  .addElement(squareRef.value)
+  .duration(2000)
+  .beforeStyles({
+    opacity: 0.2
+  })
+  .afterStyles({
+    background: 'rgba(0, 255, 0, 0.5)'
+  })
+  .afterClearStyles(['opacity'])
+  .keyframes([
+    { offset: 0, transform: 'scale(1)' },
+    { offset: 0.5, transform: 'scale(1.5)' },
+    { offset: 1, transform: 'scale(1)' }
+  ])
+```
+</TabItem>
+</Tabs>
+````
+
+In this example, an inline opacity of 0.2 is set on the `.square` element prior to the animation starting. Once the animation finishes, the background color of the element is set to `rgba(0, 255, 0, 0.5)`, and the inline opacity is cleared.
+
+See [Methods](#methods) for a complete list of hooks.
+
+<Codepen user="ionic" slug="BaBxmwo" />
+
+## Chained Animations
+
+Animations can be chained to run one after the other. The `play` method returns a Promise that resolves when the animation has completed.
+
+### Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+const squareA = createAnimation()
+  .addElement(document.querySelector('.square-a'))
+  .fill('none')
+  .duration(1000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1) rotate(0)' },
+    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+    { offset: 1, transform: 'scale(1) rotate(0)' }
+  ]);
+
+const squareB = createAnimation()
+  .addElement(document.querySelector('.square-b'))
+  .fill('none')
+  .duration(1000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1)', opacity: '1' },
+    { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+    { offset: 1, transform: 'scale(1)', opacity: '1' }
+  ]);
+
+const squareC = createAnimation()
+  .addElement(document.querySelector('.square-c'))
+  .fill('none')
+  .duration(1000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+    { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+    { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+  ]);
+
+await squareA.play();
+await squareB.play();
+await squareC.play();
+```
+</TabItem>
+<TabItem value="angular">
+
+```javascript
+const squareA = this.animationCtrl.create()
+  .addElement(this.squareA.nativeElement)
+  .fill('none')
+  .duration(1000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1) rotate(0)' },
+    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+    { offset: 1, transform: 'scale(1) rotate(0)' }
+  ]);
+
+const squareB = this.animationCtrl.create()
+  .addElement(this.squareB.nativeElement)
+  .fill('none')
+  .duration(1000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1)', opacity: '1' },
+    { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+    { offset: 1, transform: 'scale(1)', opacity: '1' }
+  ]);
+
+const squareC = this.animationCtrl.create()
+  .addElement(this.squareC.nativeElement)
+  .fill('none')
+  .duration(1000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+    { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+    { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+  ]);
+
+await squareA.play();
+await squareB.play();
+await squareC.play();
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+private squareARef: React.RefObject<CreateAnimation> = React.createRef();
+private squareBRef: React.RefObject<CreateAnimation> = React.createRef();
+private squareCRef: React.RefObject<CreateAnimation> = React.createRef();
+
+...
+
+async componentDidMount() {
+  const squareA = this.squareARef.current!.animation;
+  const squareB = this.squareBRef.current!.animation;
+  const squareC = this.squareCRef.current!.animation;
+
+  await squareA.play();
+  await squareB.play();
+  await squareC.play();
+}
+
+render() {
+  return (
+    <>
+      <CreateAnimation
+        ref={this.squareARef}
+        fill="none"
+        duration={1000}
+        keyframes={[
+          { offset: 0, transform: 'scale(1) rotate(0)' },
+          { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+          { offset: 1, transform: 'scale(1) rotate(0deg)' }
+        ]}
+      >
+        <div className="square"></div>
+      </CreateAnimation>
+
+      <CreateAnimation
+        ref={this.squareBRef}
+        fill="none"
+        duration={1000}
+        keyframes={[
+          { offset: 0, transform: 'scale(1)', opacity: '1' },
+          { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+          { offset: 1, transform: 'scale(1)', opacity: '1' }
+        ]}
+      >
+        <div className="square"></div>
+      </CreateAnimation>
+
+      <CreateAnimation
+        ref={this.squareCRef}
+        fill="none"
+        duration={1000}
+        keyframes={[
+          { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+          { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+          { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+        ]}
+      >
+        <div className="square"></div>
+      </CreateAnimation>
+    </>
+  )
+}
+```
+</TabItem>
+<TabItem value="vue">
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const squareARef = ref();
+const squareBRef = ref();
+const squareCRef = ref();
+
+...
+
+const squareA = createAnimation()
+  .addElement(squareARef.value)
+  .fill('none')
+  .duration(1000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1) rotate(0)' },
+    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+    { offset: 1, transform: 'scale(1) rotate(0)' }
+  ]);
+
+const squareB = createAnimation()
+  .addElement(squareBRef.value)
+  .fill('none')
+  .duration(1000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1)', opacity: '1' },
+    { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+    { offset: 1, transform: 'scale(1)', opacity: '1' }
+  ]);
+
+const squareC = createAnimation()
+  .addElement(squareCRef.value)
+  .fill('none')
+  .duration(1000)
+  .keyframes([
+    { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+    { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+    { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+  ]);
+
+await squareA.play();
+await squareB.play();
+await squareC.play();
+```
+</TabItem>
+</Tabs>
+````
+
+<Codepen user="ionic" slug="MWgGrwX" height="460" />
+
+## Gesture Animations
+
+Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.md).
+
+### Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+let initialStep = 0;
+let started = false;
+
+const square = document.querySelector('.square');
+const MAX_TRANSLATE = 400;
+
+const animation = createAnimation()
+  .addElement(square)
+  .duration(1000)
+  .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+
+const gesture = createGesture({
+  el: square,
+  threshold: 0,
+  gestureName: 'square-drag',
+  onMove: ev => onMove(ev),
+  onEnd: ev => onEnd(ev)
+})
+
+gesture.enable(true);
+
+const onMove = (ev): {
+  if (!started) {
+    animation.progressStart();
+    started = true;
+  }
+
+  animation.progressStep(getStep(ev));
+}
+
+const onEnd = (ev): {
+  if (!started) { return; }
+
+  gesture.enable(false);
+
+  const step = getStep(ev);
+  const shouldComplete = step > 0.5;
+
+  animation
+    .progressEnd((shouldComplete) ? 1 : 0, step)
+    .onFinish((): { gesture.enable(true); });
+
+  initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+  started = false;
+}
+
+const clamp = (min, n, max): {
+  return Math.max(min, Math.min(n, max));
+};
+
+const getStep = (ev): {
+  const delta = initialStep + ev.deltaX;
+  return clamp(0, delta / MAX_TRANSLATE, 1);
+}
+```
+</TabItem>
+<TabItem value="angular">
+
+```tsx
+private animation?: Animation;
+private gesture?: Gesture;
+
+private started: boolean = false;
+private initialStep: number = 0;
+private MAX_TRANSLATE: number = 400;
+
+ngOnInit() {
+  this.animation = this.animationCtrl.create()
+    .addElement(this.square.nativeElement)
+    .duration(1000)
+    .fromTo('transform', 'translateX(0)', `translateX(${this.MAX_TRANSLATE}px)`);
+
+  this.gesture = this.gestureCtrl.create({
+    el: this.square.nativeElement,
+    threshold: 0,
+    gestureName: 'square-drag',
+    onMove: ev => this.onMove(ev),
+    onEnd: ev => this.onEnd(ev)
+  })
+
+  this.gesture.enable(true);
+}
+
+private onMove(ev) {
+  if (!started) {
+    this.animation.progressStart();
+    this.started = true;
+  }
+
+  this.animation.progressStep(this.getStep(ev));
+}
+
+private onEnd(ev) {
+  if (!this.started) { return; }
+
+  this.gesture.enable(false);
+
+  const step = this.getStep(ev);
+  const shouldComplete = step > 0.5;
+
+  this.animation
+    .progressEnd((shouldComplete) ? 1 : 0, step)
+    .onFinish((): { this.gesture.enable(true); });
+
+  this.initialStep = (shouldComplete) ? this.MAX_TRANSLATE : 0;
+  this.started = false;
+}
+
+private clamp(min, n, max) {
+  return Math.max(min, Math.min(n, max));
+}
+
+private getStep(ev) {
+  const delta = this.initialStep + ev.deltaX;
+  return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
+}
+```
+</TabItem>
+<TabItem value="react">
+
+```javascript
+import { createGesture, CreateAnimation, Gesture, GestureDetail } from '@ionic/react';
+import React from 'react';
+
+const MAX_TRANSLATE = 400;
+
+class MyComponent extends React.Component<{}, any> {
+  private animation: React.RefObject<CreateAnimation> = React.createRef();
+  private gesture?: Gesture;
+  private started: boolean = false;
+  private initialStep: number = 0;
+
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      progressStart: undefined,
+      progressStep: undefined,
+      progressEnd: undefined,
+      onFinish: undefined
+    };
+  }
+
+  componentDidMount() {
+    const square = Array.from(this.animation.current!.nodes.values())[0];
+
+    this.gesture = createGesture({
+      el: square,
+      gestureName: 'square-drag',
+      threshold: 0,
+      onMove: ev => this.onMove(ev),
+      onEnd: ev => this.onEnd(ev)
+    });
+
+    this.gesture.enable(true);
+  }
+
+  private onMove(ev: GestureDetail) {
+    if (!this.started) {
+      this.setState({
+        ...this.state,
+        progressStart: { forceLinearEasing: true }
+      });
+      this.started = true;
+    }
+
+    this.setState({
+      ...this.state,
+      progressStep: { step: this.getStep(ev) }
+    });
+  }
+
+  private onEnd(ev: GestureDetail) {
+    if (!this.started) { return; }
+
+    this.gesture!.enable(false);
+
+    const step = this.getStep(ev);
+    const shouldComplete = step > 0.5;
+
+    this.setState({
+      ...this.state,
+      progressEnd: { playTo: (shouldComplete) ? 1 : 0, step },
+      onFinish: { callback: () => {
+        this.gesture!.enable(true);
+        this.setState({
+          progressStart: undefined,
+          progressStep: undefined,
+          progressEnd: undefined
+        })
+      }, opts: { oneTimeCallback: true }}
+    });
+
+    this.initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+    this.started = false;
+  }
+
+  private getStep(ev: GestureDetail) {
+    const delta = this.initialStep + ev.deltaX;
+    return this.clamp(0, delta / MAX_TRANSLATE, 1);
+  }
+
+  private clamp(min: number, n: number, max: number) {
+    return Math.max(min, Math.min(n, max));
+  }
+
+  render() {
+    return (
+      <>
+        <div className="track">
+          <CreateAnimation
+            ref={this.animation}
+            duration={1000}
+            progressStart={this.state.progressStart}
+            progressStep={this.state.progressStep}
+            progressEnd={this.state.progressEnd}
+            onFinish={this.state.onFinish}
+            fromTo={{
+              property: 'transform',
+              fromValue: 'translateX(0)',
+              toValue: `translateX(${MAX_TRANSLATE}px)`
+          }}>
+            <div className="square"></div>
+          </CreateAnimation>
+        </div>
+      </>
+    );
+  }
+}
+```
+</TabItem>
+<TabItem value="vue">
+
+```javascript
+import { createAnimation, createGesture } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+let initialStep = 0;
+let started = false;
+
+const squareRef = ref();
+const MAX_TRANSLATE = 400;
+
+const animation = createAnimation()
+  .addElement(squareRef.value)
+  .duration(1000)
+  .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+
+const gesture = createGesture({
+  el: squareRef.value,
+  threshold: 0,
+  gestureName: 'square-drag',
+  onMove: ev => onMove(ev),
+  onEnd: ev => onEnd(ev)
+})
+
+gesture.enable(true);
+
+const onMove = (ev): {
+  if (!started) {
+    animation.progressStart();
+    started = true;
+  }
+
+  animation.progressStep(getStep(ev));
+}
+
+const onEnd = (ev): {
+  if (!started) { return; }
+
+  gesture.enable(false);
+
+  const step = getStep(ev);
+  const shouldComplete = step > 0.5;
+
+  animation
+    .progressEnd((shouldComplete) ? 1 : 0, step)
+    .onFinish((): { gesture.enable(true); });
+
+  initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+  started = false;
+}
+
+const clamp = (min, n, max): {
+  return Math.max(min, Math.min(n, max));
+};
+
+const getStep = (ev): {
+  const delta = initialStep + ev.deltaX;
+  return clamp(0, delta / MAX_TRANSLATE, 1);
+}
+```
+</TabItem>
+</Tabs>
+````
+
+In this example we are creating a track along which we can drag the `.square` element. Our `animation` object will take care of moving the `.square` element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
+
+<Codepen user="ionic" slug="jONxzRL" />
+
+## Preference-Based Animations
+
+Developers can also tailor their animations to user preferences such as `prefers-reduced-motion` and `prefers-color-scheme` using CSS Variables.
+
+### Usage
+
+```css
+.square {
+  width: 100px;
+  height: 100px;
+  opacity: 0.5;
+  background: blue;
+  margin: 10px;
+
+  --background: red;
+}
+
+@media (prefers-color-scheme: dark) {
+  .square {
+    --background: green;
+  }
+}
+```
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+createAnimation()
+   .addElement(document.querySelector('.square'))
+   .duration(1500)
+   .iterations(Infinity)
+   .direction('alternate')
+   .fromTo('background', 'blue', 'var(--background)');
+```
+</TabItem>
+<TabItem value="angular">
+
+```javascript
+this.animationCtrl.create()
+   .addElement(this.square.nativeElement)
+   .duration(1500)
+   .iterations(Infinity)
+   .direction('alternate')
+   .fromTo('background', 'blue', 'var(--background)');
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+<CreateAnimation
+  duration={1500}
+  iterations={Infinity}
+  direction='alternate'
+  fromTo={{
+    property: 'background',
+    fromValue: 'blue',
+    toValue: 'var(--background)'
+  }}
+>
+  <div className="square"></div>
+</CreateAnimation>
+```
+</TabItem>
+<TabItem value="vue">
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const squareRef = ref();
+
+...
+
+createAnimation()
+   .addElement(squareRef.value)
+   .duration(1500)
+   .iterations(Infinity)
+   .direction('alternate')
+   .fromTo('background', 'blue', 'var(--background)');
+```
+</TabItem>
+</Tabs>
+````
+
+This method works in all supported browsers when creating animations for the first time. Most browsers are also capable of dynamically updating keyframe animations as the CSS Variables change.
+
+Safari does not currently support dynamically updating keyframe animations. For developers who need this kind of support in Safari, they can use [MediaQueryList.addListener()](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener).
+
+<Codepen user="ionic" slug="JjjYVKj" />
+
+## Overriding Ionic Component Animations
+
+Certain Ionic components allow developers to provide custom animations. All animations are provided as either properties on the component or are set via a global config.
+
+### Modals
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+customElements.define('modal-page', class extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal Header</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        Modal Content
+      </ion-content>
+    `;
+  }
+});
+
+function presentModal() {
+  const enterAnimation = (baseEl: any) => {
+    const root = baseEl.shadowRoot;
+
+    const backdropAnimation = createAnimation()
+      .addElement(root.querySelector('ion-backdrop')!)
+      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+    const wrapperAnimation = createAnimation()
+      .addElement(root.querySelector('.modal-wrapper')!)
+      .keyframes([
+        { offset: 0, opacity: '0', transform: 'scale(0)' },
+        { offset: 1, opacity: '0.99', transform: 'scale(1)' }
+      ]);
+
+    return createAnimation()
+      .addElement(baseEl)
+      .easing('ease-out')
+      .duration(500)
+      .addAnimation([backdropAnimation, wrapperAnimation]);
+  }
+
+  const leaveAnimation = (baseEl: any) => {
+    return enterAnimation(baseEl).direction('reverse');
+  }
+
+  // create the modal with the `modal-page` component
+  const modalElement = document.createElement('ion-modal');
+  modalElement.component = 'modal-page';
+  modalElement.enterAnimation = enterAnimation;
+  modalElement.leaveAnimation = leaveAnimation;
+
+  // present the modal
+  document.body.appendChild(modalElement);
+  return modalElement.present();
+}
+```
+</TabItem>
+<TabItem value="angular">
+
+```tsx
+import { Component } from '@angular/core';
+import { ModalController, AnimationController } from '@ionic/angular';
+import { ModalPage } from '../modal/modal.page';
+
+@Component({
+  selector: 'modal-example',
+  templateUrl: 'modal-example.html',
+  styleUrls: ['./modal-example.css']
+})
+export class ModalExample {
+  constructor(public modalController: ModalController,
+              public animationCtrl: AnimationController) { }
+
+  async presentModal() {
+    const enterAnimation = (baseEl: any) => {
+      const root = baseEl.shadowRoot;
+
+      const backdropAnimation = this.animationCtrl.create()
+        .addElement(root.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationCtrl.create()
+        .addElement(root.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '0', transform: 'scale(0)' },
+          { offset: 1, opacity: '0.99', transform: 'scale(1)' }
+        ]);
+
+      return this.animationCtrl.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+
+    const modal = await this.modalController.create({
+      component: ModalPage,
+      enterAnimation,
+      leaveAnimation
+    });
+    return await modal.present();
+  }
+}
+```
+</TabItem>
+<TabItem value="react">
+
+```jsx
+import React, { useState } from 'react';
+import { createAnimation, IonModal, IonButton, IonContent } from '@ionic/react';
+
+export const ModalExample: React.FC = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const enterAnimation = (baseEl: any) => {
+    const root = baseEl.shadowRoot;
+
+    const backdropAnimation = createAnimation()
+      .addElement(root.querySelector('ion-backdrop')!)
+      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+    const wrapperAnimation = createAnimation()
+      .addElement(root.querySelector('.modal-wrapper')!)
+      .keyframes([
+        { offset: 0, opacity: '0', transform: 'scale(0)' },
+        { offset: 1, opacity: '0.99', transform: 'scale(1)' }
+      ]);
+
+    return createAnimation()
+      .addElement(baseEl)
+      .easing('ease-out')
+      .duration(500)
+      .addAnimation([backdropAnimation, wrapperAnimation]);
+  }
+
+  const leaveAnimation = (baseEl: any) => {
+    return enterAnimation(baseEl).direction('reverse');
+  }
+
+  return (
+    <IonContent>
+      <IonModal isOpen={showModal} enterAnimation={enterAnimation} leaveAnimation={leaveAnimation}>
+        <p>This is modal content</p>
+        <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
+      </IonModal>
+      <IonButton onClick={() => setShowModal(true)}>Show Modal</IonButton>
+    </IonContent>
+  );
+};
+```
+</TabItem>
+<TabItem value="vue">
+
+```jsx
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-modal
+        :is-open="isModalOpen"
+        :enter-animation="enterAnimation"
+        :leave-animation="leaveAnimation"
+        @didDismiss="setModalOpen(false)"
+      >
+        Modal content goes here.
+      </ion-modal>
+
+      <ion-button @click="setModalOpen(true)">Show Modal</ion-button>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { createAnimation, IonButton, IonContent, IonModal, IonPage } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: { IonButton, IonContent, IonModal, IonPage },
+  setup() {
+    const isModalOpen = ref(false);
+    const setModalOpen = (state) => isModalOpen.value = state;
+
+    const enterAnimation = (baseEl: any) => {
+      const root = baseEl.shadowRoot;
+
+      const backdropAnimation = createAnimation()
+        .addElement(root.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = createAnimation()
+        .addElement(root.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '0', transform: 'scale(0)' },
+          { offset: 1, opacity: '0.99', transform: 'scale(1)' }
+        ]);
+
+      return createAnimation()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+
+    return { isModalOpen, setModalOpen, enterAnimation, leaveAnimation }
+  }
+})
+</script>
+```
+</TabItem>
+</Tabs>
+````
+
+<Codepen user="ionic" slug="ExapZBZ" />
+
+## Performance Considerations
+
+CSS and Web Animations are usually handled on the compositor thread. This is different than the main thread where layout, painting, styling, and your JavaScript is executed. It is recommended that you prefer using properties that can be handled on the compositor thread for optimal animation performance.
+
+Animating properties such as `height` and `width` cause additional layouts and paints which can cause jank and degrade animation performance. On the other hand, animating properties such as `transform` and `opacity` are highly optimizable by the browser and typically do not cause much jank.
+
+For information on which CSS properties cause layouts or paints to occur, see [CSS Triggers](https://csstriggers.com/).
+
+## Debugging
+
+For debugging animations in Chrome, there is a great blog post about inspecting animations using the Chrome DevTools: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations.
+
+It is also recommended to assign unique identifiers to your animations. These identifiers will show up in the Animations inspector in Chrome and should make it easier to debug:
+
+```javascript
+/**
+ * The animation for the .square element should
+ * show "my-animation-identifier" in Chrome DevTools.
+ */
+const animation = createAnimation('my-animation-identifier')
+  .addElement(document.querySelector('.square'))
+  .duration(1000)
+  .fromTo('opacity', '1', '0');
+```
+
+## Browser Support
+
+| Browser/Platform | Supported Versions |
+| ---------------- | ------------------ |
+| **Chrome**       | 43+                |
+| **Safari**       | 9+                 |
+| **Firefox**      | 32+                |
+| **IE/Edge**      | 11+                |
+| **Opera**        | 30+                |
+| **iOS**          | 9+                 |
+| **Android**      | 5+                 |
+
+:::note
+Due to a bug in Safari versions 9-11, stepping through animations via `progressStep` is not supported. This is supported on Safari 12+.
+:::
+
+## Types
+
+| Name                 | Value                                                         |
+| -------------------- | ------------------------------------------------------------- |
+| `AnimationDirection` | `'normal' \| 'reverse' \| 'alternate' \| 'alternate-reverse'` |
+| `AnimationFill`      | `'auto' \| 'none' \| 'forwards' \| 'backwards' \| 'both'`     |
+
+## Interfaces
+
+```tsx
+interface AnimationCallbackOptions {
+  /**
+   * If true, the associated callback will only be fired once.
+   */
+  oneTimeCallback: boolean;
+}
+
+interface AnimationPlayOptions {
+  /**
+   * If true, the animation will play synchronously.
+   * This is the equivalent of running the animation
+   * with a duration of 0ms.
+   */
+  sync: boolean;
+}
+```
+
+## Properties
+
+| Name                           | Description                                       |
+| ------------------------------ | ------------------------------------------------- |
+| `childAnimations: Animation[]` | All child animations of a given parent animation. |
+| `elements: HTMLElement[]`      | All elements attached to an animation.            |
+| `parentAnimation?: Animation`  | The parent animation of a given animation object. |
+
+## Methods
+
+| Name                                                                                                                 | Description                                                                                                                                                                             |
+| -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `addAnimation(animationToAdd: Animation \| Animation[]): Animation`                                                  | Group one or more animations together to be controlled by a parent animation.                                                                                                           |
+| `addElement(el: Element \| Element[] \| Node \| Node[] \| NodeList): Animation`                                      | Add one or more elements to the animation.                                                                                                                                              |
+| `afterAddClass(className: string \| string[]): Animation`                                                            | Add a class or array of classes to be added to all elements in an animation after the animation ends.                                                                                   |
+| `afterAddRead(readFn: (): void): Animation`                                                                          | Add a function that performs a DOM read to be run after the animation ends.                                                                                                             |
+| `afterAddWrite(writeFn: (): void): Animation`                                                                        | Add a function that performs a DOM write to be run after the animation ends.                                                                                                            |
+| `afterClearStyles(propertyNames: string[]): Animation`                                                               | Add an array of property names to be cleared from the inline styles on all elements in an animation after the animation ends.                                                           |
+| `afterRemoveClass(className: string \| string[]): Animation`                                                         | Add a class or an array of classes to be removed from all elements in an animation after the animation ends.                                                                            |
+| `afterStyles(styles: { [property: string]: any }): Animation`                                                        | Add an object of styles to be applied to all elements in an animation after the animation ends.                                                                                         |
+| `beforeAddClass(className: string \| string[]): Animation`                                                           | Add a class or array of classes to be added to all elements in an animation before the animation starts.                                                                                |
+| `beforeAddRead(readFn: (): void): Animation`                                                                         | Add a function that performs a DOM read to be run before the animation starts.                                                                                                          |
+| `beforeAddWrite(writeFn: (): void): Animation`                                                                       | Add a function that performs a DOM write to be run before the animation starts.                                                                                                         |
+| `beforeClearStyles(propertyNames: string[]): Animation`                                                              | Add an array of property names to be cleared from the inline styles on all elements in an animation before the animation starts.                                                        |
+| `beforeRemoveClass(className: string \| string[]): Animation`                                                        | Add a class or an array of classes to be removed from all elements in an animation before the animation starts.                                                                         |
+| `beforeStyles(styles: { [property: string]: any }): Animation`                                                       | Add an object of styles to be applied to all elements in an animation before the animation starts.                                                                                      |
+| `direction(direction?: AnimationDirection): Animation`                                                               | Set the direction the animation should play in.                                                                                                                                         |
+| `delay(delay?: number): Animation`                                                                                   | Set the delay for the start of the animation in milliseconds.                                                                                                                           |
+| `destroy(clearStyleSheets?: boolean): Animation`                                                                     | Destroy the animation and clear all elements, child animations, and keyframes.                                                                                                          |
+| `duration(duration?: number): Animation`                                                                             | Set the duration of the animation in milliseconds.                                                                                                                                      |
+| `easing(easing?: string): Animation`                                                                                 | Set the easing of the animation in milliseconds. See [Easing Effects](https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/easing#Value) for a list of accepted easing values. |
+| `from(property: string, value: any): Animation`                                                                      | Set the start styles of the animation.                                                                                                                                                  |
+| `fromTo(property: string, fromValue: any, toValue: any): Animation`                                                  | Set the start and end styles of the animation.                                                                                                                                          |
+| `fill(fill?: AnimationFill): Animation`                                                                              | Set how the animation applies styles to its elements before and after the animation's execution.                                                                                        |
+| `iterations(iterations: number): Animation`                                                                          | Set the number of times the animation cycle should be played before stopping.                                                                                                           |
+| `keyframes(keyframes: any[]): Animation`                                                                             | Set the keyframes for an animation.                                                                                                                                                     |
+| `onFinish(callback: (didComplete: boolean, animation: Animation): void, opts?: AnimationCallbackOptions): Animation` | Add a callback to be run upon the animation ending.                                                                                                                                     |
+| `pause(): Animation`                                                                                                 | Pause the animation.                                                                                                                                                                    |
+| `play(opts?: AnimationPlayOptions): Promise<void>`                                                                   | Play the animation.                                                                                                                                                                     |
+| `progressEnd(playTo?: 0 \| 1, step: number, dur?: number): Animation`                                                | Stop seeking through an animation.                                                                                                                                                      |
+| `progressStart(forceLinearEasing?: boolean, step?: number): Animation`                                               | Begin seeking through an animation.                                                                                                                                                     |
+| `progressStep(step: number): Animation`                                                                              | Seek through an animation.                                                                                                                                                              |
+| `stop(): Animation`                                                                                                  | Stop the animation and reset all elements to their initial state.                                                                                                                       |
+| `to(property: string, value: any): Animation`                                                                        | Set the end styles of the animation.                                                                                                                                                    |
diff --git a/versioned_docs/version-v6/utilities/gestures.md b/versioned_docs/version-v6/utilities/gestures.md
new file mode 100644
index 00000000000..5fe3f5fbeb5
--- /dev/null
+++ b/versioned_docs/version-v6/utilities/gestures.md
@@ -0,0 +1,517 @@
+---
+title: Gestures
+---
+
+import Codepen from '@components/global/Codepen';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>Gestures | Ionic App Utility for Custom Gestures and Interactions</title>
+  <meta
+    name="description"
+    content="Ionic Gestures is a utility that allows developers to build custom gestures and interactions for their app in a platform agnostic manner. Read to learn more."
+  />
+</head>
+
+## Overview
+
+Ionic Gestures is a utility that allows developers to build custom gestures and interactions for their application in a platform agnostic manner. Developers do not need to be using a particular framework such as React or Angular, nor do they even need to be building an Ionic app! As long as developers have access to v5.0 or greater of Ionic Framework, they will have access to all of Ionic Animations.
+
+Building complex gestures can be time consuming. Other libraries that provide custom gestures are often times too heavy handed and end up capturing mouse or touch events and not letting them propagate. This can result in other elements no longer being scrollable or clickable.
+
+## Installation
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+Developers using Ionic Core and JavaScript should install the latest version of `@ionic/core`.
+
+```javascript
+import { createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/esm/index.mjs';
+
+...
+
+const gesture = createGesture({
+  el: elementRef,
+  threshold: 15,
+  gestureName: 'my-gesture',
+  onMove: ev => onMoveHandler(ev)
+});
+
+```
+</TabItem>
+<TabItem value="typescript">
+
+Developers using Ionic Core and TypeScript should install the latest version of `@ionic/core`.
+
+```tsx
+import { createGesture, Gesture } from '@ionic/core';
+
+...
+
+const gesture: Gesture = createGesture({
+  el: elementRef,
+  threshold: 15,
+  gestureName: 'my-gesture',
+  onMove: ev => onMoveHandler(ev)
+});
+```
+</TabItem>
+<TabItem value="angular">
+
+Developers using Angular should install the latest version of `@ionic/angular`. Animations can be created via the `AnimationController` dependency injection.
+
+By default, gesture callbacks do not run inside of NgZone. Developers can either set the `runInsideAngularZone` parameter to `true` when creating a gesture,
+or they can wrap their callbacks in an `NgZone.run()` call.
+
+```tsx
+import { Gesture, GestureController } from '@ionic/angular';
+
+...
+
+constructor(private gestureCtrl: GestureController) {
+  const gesture: Gesture = this.gestureCtrl.create({
+    el: this.element.nativeElement,
+    threshold: 15,
+    gestureName: 'my-gesture',
+    onMove: ev => this.onMoveHandler(ev)
+  }, true);
+  // The `true` above ensures that callbacks run inside NgZone.
+}
+
+```
+</TabItem>
+<TabItem value="react">
+
+Developers using React should install the latest version of `@ionic/react`. Full React wrappers are coming soon!
+
+```tsx
+import { createGesture, Gesture } from '@ionic/react';
+
+...
+
+const gesture: Gesture = createGesture({
+  el: elementRef,
+  threshold: 15,
+  gestureName: 'my-gesture',
+  onMove: ev => onMoveHandler(ev)
+});
+```
+</TabItem>
+<TabItem value="vue">
+
+Developers using Ionic Vue should install the latest version of `@ionic/vue`.
+
+```javascript
+import { createGesture } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const elementRef = ref();
+
+...
+
+const gesture = createGesture({
+  el: elementRef.value,
+  threshold: 15,
+  gestureName: 'my-gesture',
+  onMove: ev => onMoveHandler(ev)
+});
+
+```
+</TabItem>
+</Tabs>
+````
+
+## Basic Gestures
+
+### Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+let p = document.querySelector('p');
+const gesture = createGesture({
+  el: document.querySelector('.rectangle'),
+  onMove: (detail) => { onMove(detail); }
+})
+
+gesture.enable();
+
+const onMove = (detail) => {
+  const type = detail.type;
+  const currentX = detail.currentX;
+  const deltaX = detail.deltaX;
+  const velocityX = detail.velocityX;
+
+  p.innerHTML = `
+    <div>Type: ${type}</div>
+    <div>Current X: ${currentX}</div>
+    <div>Delta X: ${deltaX}</div>
+    <div>Velocity X: ${velocityX}</div>
+  `
+}
+```
+</TabItem>
+<TabItem value="angular">
+
+```javascript
+@ViewChild('paragraph') p: ElementRef;
+
+ngOnInit() {
+  const gesture = this.gestureCtrl.create({
+    el: this.rectangle.nativeElement,
+    onMove: (detail) => { this.onMove(detail); }
+  })
+
+  gesture.enable();
+}
+
+private onMove(detail) {
+  const type = detail.type;
+  const currentX = detail.currentX;
+  const deltaX = detail.deltaX;
+  const velocityX = detail.velocityX;
+
+  this.p.innerHTML = `
+    <div>Type: ${type}</div>
+    <div>Current X: ${currentX}</div>
+    <div>Delta X: ${deltaX}</div>
+    <div>Velocity X: ${velocityX}</div>
+  `
+}
+```
+</TabItem>
+<TabItem value="react">
+
+```javascript
+let p = document.querySelector('p');
+const gesture = createGesture({
+  el: document.querySelector('.rectangle'),
+  onMove: (detail) => { onMove(detail); }
+})
+
+gesture.enable();
+
+const onMove = (detail) => {
+  const type = detail.type;
+  const currentX = detail.currentX;
+  const deltaX = detail.deltaX;
+  const velocityX = detail.velocityX;
+
+  p.innerHTML = `
+    <div>Type: ${type}</div>
+    <div>Current X: ${currentX}</div>
+    <div>Delta X: ${deltaX}</div>
+    <div>Velocity X: ${velocityX}</div>
+  `
+}
+```
+</TabItem>
+<TabItem value="vue">
+
+```javascript
+import { createGesture } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+let pRef = ref();
+const rectangleRef = ref();
+const gesture = createGesture({
+  el: rectangleRef.value,
+  onMove: (detail) => { onMove(detail); }
+})
+
+gesture.enable();
+
+const onMove = (detail) => {
+  const type = detail.type;
+  const currentX = detail.currentX;
+  const deltaX = detail.deltaX;
+  const velocityX = detail.velocityX;
+
+  pRef.value.innerHTML = `
+    <div>Type: ${type}</div>
+    <div>Current X: ${currentX}</div>
+    <div>Delta X: ${deltaX}</div>
+    <div>Velocity X: ${velocityX}</div>
+  `
+}
+```
+</TabItem>
+</Tabs>
+````
+
+In this example, our app listens for gestures on the `.rectangle` element. When a gesture movement is detected, the `onMove` function is called, and our app logs the current gesture information.
+
+<Codepen user="ionic" slug="xxKBYdL" />
+
+## Double Click Gesture
+
+### Usage
+
+````mdx-code-block
+<Tabs
+  groupId="framework"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+const DOUBLE_CLICK_THRESHOLD = 500;
+const rectangle = document.querySelector('.rectangle');
+const gesture = createGesture({
+  el: rectangle,
+  threshold: 0,
+  onStart: () => { onStart(); }
+});
+
+gesture.enable();
+
+let lastOnStart = 0;
+let currentColor = 'rgba(0, 0, 255, 0.5)';
+
+const onStart = () => {
+  const now = Date.now();
+
+  if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+    rectangle.style.setProperty('background', getRandomBackground());
+    lastOnStart = 0;
+  } else {
+    lastOnStart = now;
+  }
+}
+
+const getRandomBackground = () => {
+  const options = backgrounds.filter(bg => bg !== currentColor);
+  currentColor = options[Math.floor(Math.random() * options.length)];
+
+  return currentColor;
+}
+```
+</TabItem>
+<TabItem value="angular">
+
+```tsx
+@ViewChild('rectangle') rectangle: ElementRef;
+
+private backgrounds: string[] = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+private currentColor: string = 'rgba(0, 0, 255, 0.5)';
+private lastOnStart: number = 0;
+private DOUBLE_CLICK_THRESHOLD: number = 500;
+
+ngOnInit() {
+  const gesture = this.gestureCtrl.create({
+    el: this.rectangle.nativeElement,
+    threshold: 0,
+    onStart: () => { this.onStart(); }
+  });
+
+  gesture.enable();
+}
+
+private onStart() {
+  const now = Date.now();
+
+  if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) {
+    this.rectangle.nativeElement.style.setProperty('background', this.getRandomBackground());
+    this.lastOnStart = 0;
+  } else {
+    this.lastOnStart = now;
+  }
+}
+
+private getRandomBackground() {
+  const options = this.backgrounds.filter(bg => bg !== this.currentColor);
+  this.currentColor = options[Math.floor(Math.random() * options.length)];
+
+  return this.currentColor;
+}
+```
+</TabItem>
+<TabItem value="react">
+
+```javascript
+const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+const DOUBLE_CLICK_THRESHOLD = 500;
+const rectangle = document.querySelector('.rectangle');
+const gesture = createGesture({
+  el: rectangle,
+  threshold: 0,
+  onStart: () => { onStart(); }
+});
+
+gesture.enable();
+
+let lastOnStart = 0;
+let currentColor = 'rgba(0, 0, 255, 0.5)';
+
+const onStart = () => {
+  const now = Date.now();
+
+  if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+    rectangle.style.setProperty('background', getRandomBackground());
+    lastOnStart = 0;
+  } else {
+    lastOnStart = now;
+  }
+}
+
+const getRandomBackground = () => {
+  const options = backgrounds.filter(bg => bg !== currentColor);
+  currentColor = options[Math.floor(Math.random() * options.length)];
+
+  return currentColor;
+}
+```
+</TabItem>
+<TabItem value="vue">
+
+```javascript
+import { createGesture } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+const DOUBLE_CLICK_THRESHOLD = 500;
+const rectangleRef = ref();
+const gesture = createGesture({
+  el: rectangleRef.value,
+  threshold: 0,
+  onStart: () => { onStart(); }
+});
+
+gesture.enable();
+
+let lastOnStart = 0;
+let currentColor = 'rgba(0, 0, 255, 0.5)';
+
+const onStart = () => {
+  const now = Date.now();
+
+  if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+    rectangleRef.value.style.setProperty('background', getRandomBackground());
+    lastOnStart = 0;
+  } else {
+    lastOnStart = now;
+  }
+}
+
+const getRandomBackground = () => {
+  const options = backgrounds.filter(bg => bg !== currentColor);
+  currentColor = options[Math.floor(Math.random() * options.length)];
+
+  return currentColor;
+}
+```
+</TabItem>
+</Tabs>
+````
+
+In the example above, we want to be able to detect double clicks on an element. By setting our `threshold` to `0`, we can ensure our gesture object can detect clicks. Additionally, we define a click threshold so that only 2 clicks that occur in quick succession count as a double click.
+
+<Codepen user="ionic" slug="oNvVEwE" />
+
+## Gesture Animations
+
+See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations)
+
+## Browser Support
+
+| Browser/Platform | Supported Versions |
+| ---------------- | ------------------ |
+| **Chrome**       | 22+                |
+| **Safari**       | 9+                 |
+| **Firefox**      | 32+                |
+| **IE/Edge**      | 11+                |
+| **Opera**        | 30+                |
+| **iOS**          | 9+                 |
+| **Android**      | 5+                 |
+
+## Types
+
+| Name              | Value                                        |
+| ----------------- | -------------------------------------------- |
+| `GestureCallback` | `(detail: GestureDetail) => boolean \| void` |
+
+## Interfaces
+
+### GestureConfig
+
+| Property        | Type                                       | Default     | Description                                                                                                                                                                                                                                                                                                             |
+| --------------- | ------------------------------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| el              | `Node`                                     | `undefined` | The element to listen on for gestures.                                                                                                                                                                                                                                                                                  |
+| disableScroll   | `boolean \| undefined`                     | `false`     | If true, scrolling will be disabled on `el` while the gesture is enabled.                                                                                                                                                                                                                                               |
+| direction       | `'x' \| 'y' \| undefined`                  | `'x'`       | Limit gesture detection to movements along a certain axis.                                                                                                                                                                                                                                                              |
+| gestureName     | `string`                                   | `undefined` | The name of the gesture to create.                                                                                                                                                                                                                                                                                      |
+| gesturePriority | `number \| undefined`                      | `0`         | Gestures with higher priorities will override gestures with lower priorities. Useful for ensuring the multiple gestures do not collide with one another.                                                                                                                                                                |
+| passive         | `boolean \| undefined`                     | `true`      | If true, this will indicate that the gesture will never call `preventDefault()`. This can be used to improve scrolling performance. See [Passive Listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners) for more information. |
+| maxAngle        | `number \| undefined`                      | `40`        | The maximum angle to allow when detecting a gesture.                                                                                                                                                                                                                                                                    |
+| threshold       | `number \| undefined`                      | `10`        | Defines how much a pointer must move before the gesture starts.                                                                                                                                                                                                                                                         |
+| blurOnStart     | `boolean \| undefined`                     | `undefined` | If true, the gesture will blur any active selectable element such as an input or a textarea before firing the `onStart` callback.                                                                                                                                                                                       |
+| canStart        | `GestureCallback \| undefined`             | `undefined` | A callback that returns true if a gesture is allowed to start.                                                                                                                                                                                                                                                          |
+| onWillStart     | `(detail: GestureDetail) => Promise<void>` | `undefined` | A callback that fires when a gesture is about to start. This is fired after `canStart` but before `onStart`.                                                                                                                                                                                                            |
+| onStart         | `GestureCallback \| undefined`             | `undefined` | A callback that fires when a gesture has started.                                                                                                                                                                                                                                                                       |
+| onMove          | `GestureCallback \| undefined`             | `undefined` | A callback that fires when a gesture movement was detected.                                                                                                                                                                                                                                                             |
+| onEnd           | `GestureCallback \| undefined`             | `undefined` | A callback that fires when a gesture has ended. This is usually when a pointer has been released.                                                                                                                                                                                                                       |
+| notCaptured     | `GestureCallback \| undefined`             | `undefined` | A callback that fires when a gesture has not been captured. This usually happens when there is a conflicting gesture with a higher priority.                                                                                                                                                                            |
+
+### GestureDetail
+
+| Property       | Type               | Description                                                                                                                               |
+| -------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| type           | `string`           | The type of gesture that was detected.                                                                                                    |
+| startX         | `number`           | The starting x coordinate of the gesture.                                                                                                 |
+| startY         | `number`           | The starting y coordinate of the gesture.                                                                                                 |
+| startTimeStamp | `number`           | The timestamp at which the gesture was started.                                                                                           |
+| currentX       | `number`           | The current x coordinate of the gesture.                                                                                                  |
+| currentY       | `number`           | The current y coordinate of the gesture.                                                                                                  |
+| velocityX      | `number`           | How fast the gesture is currently moving on the x axis.                                                                                   |
+| velocityY      | `number`           | How fast the gesture is currently moving on the y axis.                                                                                   |
+| deltaX         | `number`           | How much the gesture has moved on the x axis since it started.                                                                            |
+| deltaY         | `number`           | How much the gesture has moved on the y axis since it started.                                                                            |
+| timeStamp      | `number`           | The current timestamp of the gesture.                                                                                                     |
+| event          | `UIEvent`          | The native event dispatched by the browser. See [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) for more information. |
+| data           | `any \| undefined` | Any data specified by the user. This can be set and read in any of the callbacks.                                                         |
+
+## Methods
+
+#### `enable(enable: boolean = true) => void`
+
+Enable or disable the gesture.
+
+#### `destroy() => void`
+
+Destroy the gesture instance and stop listening on the target element.
diff --git a/versioned_docs/version-v6/vue/config.md b/versioned_docs/version-v6/vue/config.md
new file mode 100644
index 00000000000..a8a3ec5129d
--- /dev/null
+++ b/versioned_docs/version-v6/vue/config.md
@@ -0,0 +1,117 @@
+# Config
+
+Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more.
+
+## Global Config
+
+To override the initial Ionic config for the app, provide your config object as an additional parameter when installing the `IonicVue` plugin:
+
+```tsx
+createApp(App).use(IonicVue, {
+  rippleEffect: false,
+  mode: 'md',
+});
+```
+
+In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design.
+
+## Per-Platform Config
+
+Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.
+
+In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
+The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values.
+
+```tsx
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+createApp(App).use(IonicVue, {
+  animated: !isPlatform('mobileweb'),
+});
+```
+
+The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
+
+```tsx
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      backButtonText: 'Previous',
+      tabButtonLayout: 'label-hide',
+    };
+  }
+
+  return {
+    menuIcon: 'ellipsis-vertical',
+  };
+};
+
+createApp(App).use(IonicVue, getConfig());
+```
+
+Finally, this example allows you to accumulate a config object based upon different platform requirements:
+
+```tsx
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+const getConfig = () => {
+  let config = {
+    animated: false,
+  };
+
+  if (isPlatform('iphone')) {
+    config = {
+      ...config,
+      backButtonText: 'Previous',
+    };
+  }
+
+  return config;
+};
+
+createApp(App).use(IonicVue, getConfig());
+```
+
+## Interfaces
+
+### IonicConfig
+
+Below are the config options that Ionic uses.
+
+| Config                   | Type                                                                          | Description                                                                                              |
+| ------------------------ | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `actionSheetEnter`       | `AnimationBuilder`                                                            | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation".        |
+| `actionSheetLeave`       | `AnimationBuilder`                                                            | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation".        |
+| `alertEnter`             | `AnimationBuilder`                                                            | Provides a custom enter animation for all `ion-alert`, overriding the default "animation".               |
+| `alertLeave`             | `AnimationBuilder`                                                            | Provides a custom leave animation for all `ion-alert`, overriding the default "animation".               |
+| `animated`               | `boolean`                                                                     | If `true`, Ionic will enable all animations and transitions across the app.                              |
+| `backButtonDefaultHref`  | `string`                                                                      | Overrides the default value for the `defaultHref` property in all `<ion-back-button>` components.        |
+| `backButtonIcon`         | `string`                                                                      | Overrides the default icon in all `<ion-back-button>` components.                                        |
+| `backButtonText`         | `string`                                                                      | Overrides the default text in all `<ion-back-button>` components.                                        |
+| `hardwareBackButton`     | `boolean`                                                                     | If `true`, Ionic will respond to the hardware back button in an Android device.                          |
+| `infiniteLoadingSpinner` | `SpinnerTypes`                                                                | Overrides the default spinner type in all `<ion-infinite-scroll-content>` components.                    |
+| `loadingEnter`           | `AnimationBuilder`                                                            | Provides a custom enter animation for all `ion-loading`, overriding the default "animation".             |
+| `loadingLeave`           | `AnimationBuilder`                                                            | Provides a custom leave animation for all `ion-loading`, overriding the default "animation".             |
+| `loadingSpinner`         | `SpinnerTypes`                                                                | Overrides the default spinner for all `ion-loading` overlays.                                            |
+| `menuIcon`               | `string`                                                                      | Overrides the default icon in all `<ion-menu-button>` components.                                        |
+| `menuType`               | `string`                                                                      | Overrides the default menu type for all `<ion-menu>` components.                                         |
+| `modalEnter`             | `AnimationBuilder`                                                            | Provides a custom enter animation for all `ion-modal`, overriding the default "animation".               |
+| `modalLeave`             | `AnimationBuilder`                                                            | Provides a custom leave animation for all `ion-modal`, overriding the default "animation".               |
+| `mode`                   | `Mode`                                                                        | The mode determines which platform styles to use for the whole application.                              |
+| `navAnimation`           | `AnimationBuilder`                                                            | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. |
+| `pickerEnter`            | `AnimationBuilder`                                                            | Provides a custom enter animation for all `ion-picker`, overriding the default "animation".              |
+| `pickerLeave`            | `AnimationBuilder`                                                            | Provides a custom leave animation for all `ion-picker`, overriding the default "animation".              |
+| `platform`               | [`PlatformConfig`](/docs/vue/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods.                                                        |
+| `popoverEnter`           | `AnimationBuilder`                                                            | Provides a custom enter animation for all `ion-popover`, overriding the default "animation".             |
+| `popoverLeave`           | `AnimationBuilder`                                                            | Provides a custom leave animation for all `ion-popover`, overriding the default "animation".             |
+| `refreshingIcon`         | `string`                                                                      | Overrides the default icon in all `<ion-refresh-content>` components.                                    |
+| `refreshingSpinner`      | `SpinnerTypes`                                                                | Overrides the default spinner type in all `<ion-refresh-content>` components.                            |
+| `sanitizerEnabled`       | `boolean`                                                                     | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML.      |
+| `spinner`                | `SpinnerTypes`                                                                | Overrides the default spinner in all `<ion-spinner>` components.                                         |
+| `statusTap`              | `boolean`                                                                     | If `true`, clicking or tapping the status bar will cause the content to scroll to the top.               |
+| `swipeBackEnabled`       | `boolean`                                                                     | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application.                      |
+| `tabButtonLayout`        | `TabButtonLayout`                                                             | Overrides the default "layout" of all `ion-bar-button` across the whole application.                     |
+| `toastEnter`             | `AnimationBuilder`                                                            | Provides a custom enter animation for all `ion-toast`, overriding the default "animation".               |
+| `toastLeave`             | `AnimationBuilder`                                                            | Provides a custom leave animation for all `ion-toast`, overriding the default "animation".               |
diff --git a/versioned_docs/version-v6/vue/lifecycle.md b/versioned_docs/version-v6/vue/lifecycle.md
new file mode 100644
index 00000000000..1c7b70ea460
--- /dev/null
+++ b/versioned_docs/version-v6/vue/lifecycle.md
@@ -0,0 +1,105 @@
+---
+sidebar_label: Lifecycle
+---
+
+# Vue Lifecycle
+
+This guide discusses how to use the Ionic Framework Lifecycle events in an Ionic Vue application.
+
+## Ionic Framework Lifecycle Methods
+
+Ionic Framework provides a few lifecycle methods that you can use in your apps:
+
+| Event Name         | Description                                                        |
+| ------------------ | ------------------------------------------------------------------ |
+| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. |
+| `ionViewDidEnter`  | Fired when the component routing to has finished animating.        |
+| `ionViewWillLeave` | Fired when the component routing from is about to animate.         |
+| `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
+
+The lifecycles are defined the same way Vue lifecycle methods are - as functions at the root of your Vue component:
+
+```tsx
+import { IonPage } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'Home',
+  ionViewDidEnter() {
+    console.log('Home page did enter');
+  },
+  ionViewDidLeave() {
+    console.log('Home page did leave');
+  },
+  ionViewWillEnter() {
+    console.log('Home page will enter');
+  },
+  ionViewWillLeave() {
+    console.log('Home page will leave');
+  },
+  components: {
+    IonPage,
+  },
+});
+```
+
+### Composition API Hooks
+
+These lifecycles can also be expressed using Vue 3's Composition API:
+
+```tsx
+import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'Home',
+  components: {
+    IonPage,
+  },
+  setup() {
+    onIonViewDidEnter(() => {
+      console.log('Home page did enter');
+    });
+
+    onIonViewDidLeave(() => {
+      console.log('Home page did leave');
+    });
+
+    onIonViewWillEnter(() => {
+      console.log('Home page will enter');
+    });
+
+    onIonViewWillLeave(() => {
+      console.log('Home page will leave');
+    });
+  },
+});
+```
+
+:::note
+Pages in your app need to be using the `IonPage` component in order for lifecycle methods and hooks to fire properly.
+:::
+
+## How Ionic Framework Handles the Life of a Page
+
+Ionic Framework has its router outlet, called `<ion-router-outlet>`. This outlet extends Vue Router's `<router-view>` with some additional functionality to enable better experiences for mobile devices.
+
+When an app is wrapped in `<ion-router-outlet>`, Ionic Framework treats navigation a bit differently. When you navigate to a new page, Ionic Framework will keep the old page in the existing DOM, but hide it from your view and transition the new page. The reason we do this is two-fold:
+
+1. We can maintain the state of the old page (data on the screen, scroll position, etc...).
+2. We can provide a smoother transition back to the page since it is already there and does not need to be created.
+
+Pages are only removed from the DOM when they are "popped", for instance, by pressing the back button in the UI or the browsers back button.
+
+Because of this special handling, certain Vue Router components such as `<keep-alive>`, `<transition>`, and `<router-view>` should not be used in Ionic Vue applications. Additionally, Vue Router's Scroll Behavior API is not needed here as each page's scroll position is preserved automatically.
+
+All the lifecycle methods in Vue (`mounted`, `beforeUnmount`, etc..) are available for you to use as well. However, since Ionic Vue manages the lifetime of a page, certain events might not fire when you expect them to. For instance, `mounted` fires the first time a page is displayed, but if you navigate away from the page Ionic Framework might keep the page around in the DOM, and a subsequent visit to the page might not call `mounted` again. This scenario is the main reason the Ionic Framework lifecycle methods exist, to still give you a way to call logic when views enter and exit when the native framework's events might not fire.
+
+## Guidance for Each Lifecycle Method
+
+Below are some tips on use cases for each of the life cycle events.
+
+- `ionViewWillEnter` - Since `ionViewWillEnter` is called every time the view is navigated to (regardless if initialized or not), it is a good method to load data from services.
+- `ionViewDidEnter` - If you see performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. However, this event will not fire until after the page is visible to the user, so you might want to use either a loading indicator or a skeleton screen such as [ion-skeleton-text](../api/skeleton-text), so content does not flash in un-naturally after the transition is complete.
+- `ionViewWillLeave` - Can be used for cleanup, like unsubscribing from data sources. Since `beforeUnmount` might not fire when you navigate from the current page, put your cleanup code here if you do not want it active while the screen is not in view.
+- `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here.
diff --git a/versioned_docs/version-v6/vue/navigation.md b/versioned_docs/version-v6/vue/navigation.md
new file mode 100644
index 00000000000..4ad77014489
--- /dev/null
+++ b/versioned_docs/version-v6/vue/navigation.md
@@ -0,0 +1,672 @@
+---
+title: Vue Navigation
+sidebar_label: Navigation/Routing
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+<head>
+  <title>Vue Navigation: Use Ionic + Vue Router to Create Multi-Page Apps</title>
+  <meta
+    name="description"
+    content="This Vue Navigation guide covers how routing works in Vue apps. Learn how to create multi-page apps with rich page transitions using Ionic and Vue Router."
+  />
+</head>
+
+This guide covers how routing works in an app built with Ionic and Vue.
+
+The `IonRouterOutlet` component uses the popular [Vue Router](https://router.vuejs.org/) library under the hood. With Ionic and Vue Router, you can create multi-page apps with rich page transitions.
+
+Everything you know about routing using Vue Router carries over into Ionic Vue. Let's take a look at the basics of an Ionic Vue app and how routing works with it.
+
+## A Brief Note
+
+While reading this guide, you may notice that most of these concepts are very similar to the concepts found in Vue Router without Ionic Framework. Your observation would be correct! Ionic Vue leverages the best parts of Vue Router to make the transition to building apps with Ionic Framework as seamless as possible. As a result, we recommend relying on Vue Router features as much as possible rather than trying to build your own routing solutions.
+
+## A Simple Route
+
+Here is a sample routing configuration that defines a single route to the "/home" URL. When you visit "/home", the route renders the `HomePage` component.
+
+**router/index.ts**
+
+```tsx
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import HomePage from '@/views/Home.vue';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Home',
+    component: HomePage,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;
+```
+
+On the app's initial load, the app will render the `HomePage` component as that is what is configured here.
+
+## Handling Redirects
+
+What if we wanted to land a different path on our initial load? For this, we can use router redirects. Redirects work the same way that a typical route object does, but just includes some different keys:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomePage,
+  },
+];
+```
+
+In our redirect, we look for the index path of our app. Then if we load that, we redirect to the `home` route.
+
+## Navigating to Different Routes
+
+This is all great, but how does one actually navigate to a route? For this, we can use the `router-link` property. Let's create a new routing setup:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomePage,
+  },
+  {
+    path: '/detail',
+    name: 'Detail',
+    component: DetailPage,
+  },
+];
+```
+
+Say we start on the `home` route, and we want to add a button that takes us to the `detail` route. We can do this using the following HTML to navigate to the `detail` route:
+
+```html
+<ion-button router-link="/detail">Go to detail</ion-button>
+```
+
+We can also programmatically navigate in our app by using the router API:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-button @click="() => router.push('/detail')">Go to detail</ion-button>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonPage } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { useRouter } from 'vue-router';
+
+  export default defineComponent({
+    name: 'HomePage',
+    components: {
+      IonButton,
+      IonContent,
+      IonPage,
+    },
+    setup() {
+      const router = useRouter();
+      return { router };
+    },
+  });
+</script>
+```
+
+Both options provide the same navigation mechanism, just fitting different use cases.
+
+### Navigating using `router-link`
+
+The `router-link` attribute can be set on any Ionic Vue component, and the router will navigate to the route specified when the component is clicked. The `router-link` attribute accepts string values as well as named routes, just like `router.push` from Vue Router. For additional control, the `router-direction` and `router-animation` attributes can be set as well.
+
+The `router-direction` attribute accepts values of `forward`, `back`, or `none` and is used to control the direction of the page transition.
+
+The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations) for more information on using animations in Ionic Vue.
+
+```html
+<ion-button router-link="/page2" router-direction="back" :router-animation="myAnimation">Click Me</ion-button>
+```
+
+### Navigating using `useIonRouter`
+
+One downside of using `router-link` is that you cannot run custom code prior to navigating. This makes tasks such as firing off a network request prior to navigation difficult. You could use Vue Router directly, but then you lose the ability to control the page transition. This is where the `useIonRouter` utility is helpful.
+
+The `useIonRouter` utility is a function that provides methods for programmatic navigation while having full control over the page transitions. This makes it easy to run custom code before navigating.
+
+This first example lets us push a new page onto the stack with a custom page transition:
+
+```js
+import { defineComponent } from 'vue';
+import { useIonRouter } from '@ionic/vue';
+import { customAnimation } from '@/animations/customAnimation';
+
+export default defineComponent({
+  ...,
+  setup() {
+    const ionRouter = useIonRouter();
+
+    ionRouter.push('/page2', customAnimation);
+  }
+});
+```
+
+`useIonRouter` provides convenience `push`, `replace`, `back`, and `forward` methods to make it easy to use common navigation actions. It also provides a `navigate` method which can be used in more complex navigation scenarios:
+
+```js
+import { defineComponent } from 'vue';
+import { useIonRouter } from '@ionic/vue';
+import { customAnimation } from '@/animations/customAnimation';
+
+export default defineComponent({
+  ...,
+  setup() {
+    const ionRouter = useIonRouter();
+
+    ionRouter.navigate('/page2', 'forward', 'replace', customAnimation);
+  }
+});
+```
+
+The example above has the app navigate to `/page2` with a custom animation that uses the forward direction. In addition, the `replace` value ensures that the app replaces the current history entry when navigating.
+
+:::note
+`useIonRouter` uses the Vue `inject()` function and should only be used inside of your `setup()` function.
+:::
+
+See the [useIonRouter documentation](./utility-functions#router) for more details as well as type information.
+
+### Navigating using `router.go`
+
+Vue Router has a [router.go](https://router.vuejs.org/api/#go) method that allows developers to move forward or backward through the application history. Let's take a look at an example.
+
+Say you have the following application history:
+
+`/pageA` --> `/pageB` --> `/pageC`
+
+If you were to call `router.go(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `router.go(2)`, you would be brought to `/pageC`.
+
+A key characteristic of `router.go()` is that it expects your application history to be linear. This means that `router.go()` should not be used in applications that make use of non-linear routing. See [Linear Routing versus Non-Linear Routing](#linear-routing-versus-non-linear-routing) for more information.
+
+## Lazy Loading Routes
+
+The current way our routes are setup makes it so they are included in the same initial chunk when loading the app, which is not always ideal. Instead, we can set up our routes so that components are loaded as they are needed:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomePage,
+  },
+  {
+    path: '/detail',
+    name: 'Detail',
+    component: () => import('@/views/DetailPage.vue'),
+  },
+];
+```
+
+Here, we have the same setup as before only this time `DetailPage` has been replaced with an import call. This will result in the `DetailPage` component no longer being part of the chunk that is requested on application load.
+
+## Linear Routing versus Non-Linear Routing
+
+### Linear Routing
+
+If you have built a web app that uses routing, you likely have used linear routing before. Linear routing means that you can move forward or backward through the application history by pushing and popping pages.
+
+The following is an example of linear routing in a mobile app:
+
+<video
+  style={{
+    'margin': '40px auto',
+    'display': 'flex'
+  }}
+  width="400"
+  src={useBaseUrl('video/linear-routing-demo.mp4')} 
+  controls
+></video>
+
+The application history in this example has the following path:
+
+`Accessibility` --> `VoiceOver` --> `Speech`
+
+When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use Vue Router APIs such as [router.go()](#navigating-using-routergo).
+
+The downside of linear routing is that it does not allow for complex user experiences such as tab views. This is where non-linear routing comes into play.
+
+### Non-Linear Routing
+
+Non-linear routing is a concept that may be new to many web developers learning to build mobile apps with Ionic.
+
+Non-linear routing means that the view that the user should go back to is not necessarily the previous view that was displayed on the screen.
+
+The following is an example of non-linear routing:
+
+<video
+  style={{
+    'margin': '40px auto',
+    'display': 'flex'
+  }}
+  width="400"
+  src={useBaseUrl('video/non-linear-routing-demo.mp4')} 
+  controls
+></video>
+
+In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab.
+
+From here, we switch to the `Search` tab. Then, we tap the `Originals` tab again and are brought back to the `Ted Lasso` view. At this point, we have started using non-linear routing.
+
+Why is this non-linear routing? The previous view we were on was the `Search` view. However, pressing the back button on the `Ted Lasso` view should bring us back to the root `Originals` view. This happens because each tab in a mobile app is treated as its own stack. The [Working with Tabs](#working-with-tabs) sections goes over this in more detail.
+
+If tapping the back button simply called `router.go(-1)` from the `Ted Lasso` view, we would be brought back to the `Search` view which is not correct.
+
+Non-linear routing allows for sophisticated user flows that linear routing cannot handle. However, certain linear routing APIs such as `router.go()` cannot be used in this non-linear environment. This means that `router.go()` should not be used when using tabs or nested outlets.
+
+### Which one should I choose?
+
+We recommend keeping your application as simple as possible until you need to add non-linear routing. Non-linear routing is very powerful, but it also adds a considerable amount of complexity to mobile applications.
+
+The two most common uses of non-linear routing is with tabs and nested `ion-router-outlet`s. We recommend only using non-linear routing if your application meets the tabs or nested router outlet use cases.
+
+For more on tabs, please see [Working with Tabs](#working-with-tabs).
+
+For more on nested router outlets, please see [Nested Routes](#nested-routes).
+
+## Shared URLs versus Nested Routes
+
+A common point of confusion when setting up routing is deciding between shared URLs or nested routes. This part of the guide will explain both and help you decide which one to use.
+
+### Shared URLs
+
+Shared URLs is a route configuration where routes have pieces of the URL in common. The following is an example of a shared URL configuration:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/dashboard',
+    component: DashboardMainPage,
+  },
+  {
+    path: '/dashboard/stats',
+    component: DashboardStatsPage,
+  },
+];
+```
+
+The above routes are considered "shared" because they reuse the `dashboard` piece of the URL.
+
+### Nested Routes
+
+Nested Routes is a route configuration where routes are listed as children of other routes. The following is an example of a nested route configuration:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/dashboard/:id',
+    component: DashboardRouterOutlet,
+    children: [
+      {
+        path: '',
+        component: DashboardMainPage,
+      },
+      {
+        path: 'stats',
+        component: DashboardStatsPage,
+      },
+    ],
+  },
+];
+```
+
+The above routes are nested because they are in the `children` array of the parent route. Notice that the parent route renders the `DashboardRouterOutlet` component. When you nest routes, you need to render another instance of `ion-router-outlet`.
+
+### Which one should I choose?
+
+Shared URLs are great when you want to transition from page A to page B while preserving the relationship between the two pages in the URL. In our previous example, a button on the `/dashboard` page could transition to the `/dashboard/stats` page. The relationship between the two pages is preserved because of a) the page transition and b) the url.
+
+Nested routes should be used when you want to render content in outlet A while also rendering sub-content inside of a nested outlet B. The most common use case you will run into is tabs. When you load up a tabs Ionic starter application, you will see `ion-tab-bar` and `ion-tabs` components rendered in the first `ion-router-outlet`. The `ion-tabs` component renders another `ion-router-outlet` which is responsible for rendering the contents of each tab.
+
+There are very few use cases in which nested routes make sense in mobile applications. When in doubt, use the shared URL route configuration. We strongly caution against using nested routing in contexts other than tabs as it can quickly make navigating your app confusing.
+
+## Working with Tabs
+
+When working with tabs, Ionic Vue needs a way to know which view belongs to which tab. The `IonTabs` component comes in handy here, but let's look at what the routing setup for this looks like:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/tabs/tab1',
+  },
+  {
+    path: '/tabs/',
+    component: Tabs,
+    children: [
+      {
+        path: '',
+        redirect: 'tab1',
+      },
+      {
+        path: 'tab1',
+        component: () => import('@/views/Tab1.vue'),
+      },
+      {
+        path: 'tab2',
+        component: () => import('@/views/Tab2.vue'),
+      },
+      {
+        path: 'tab3',
+        component: () => import('@/views/Tab3.vue'),
+      },
+    ],
+  },
+];
+```
+
+Here, our `tabs` path loads a `Tabs` component. We provide each tab as a route object inside of the `children` array. In this example, we call the path `tabs`, but this can be customized.
+
+Let's start by taking a look at our `Tabs` component:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-tabs>
+        <ion-router-outlet></ion-router-outlet>
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button tab="tab1" href="/tabs/tab1">
+            <ion-icon :icon="triangle" />
+            <ion-label>Tab 1</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="tab2" href="/tabs/tab2">
+            <ion-icon :icon="ellipse" />
+            <ion-label>Tab 2</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="tab3" href="/tabs/tab3">
+            <ion-icon :icon="square" />
+            <ion-label>Tab 3</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import {
+    IonTabBar,
+    IonTabButton,
+    IonTabs,
+    IonContent,
+    IonLabel,
+    IonIcon,
+    IonPage,
+    IonRouterOutlet,
+  } from '@ionic/vue';
+  import { ellipse, square, triangle } from 'ionicons/icons';
+
+  export default {
+    name: 'Tabs',
+    components: {
+      IonContent,
+      IonLabel,
+      IonTabs,
+      IonTabBar,
+      IonTabButton,
+      IonIcon,
+      IonPage,
+      IonRouterOutlet,
+    },
+    setup() {
+      return {
+        ellipse,
+        square,
+        triangle,
+      };
+    },
+  };
+</script>
+```
+
+If you have worked with Ionic Framework before, this should feel familiar. We create an `ion-tabs` component and provide an `ion-tab-bar`. The `ion-tab-bar` provides `ion-tab-button` components, each with a `tab` property that is associated with its corresponding tab in the router config. We also provide an `ion-router-outlet` to give `ion-tabs` an outlet to render the different tab views in.
+
+### How Tabs in Ionic Work
+
+Each tab in Ionic is treated as an individual navigation stack. This means if you have three tabs in your application, each tab has its own navigation stack. Within each stack you can navigate forwards (push a view) and backwards (pop a view).
+
+This behavior is important to note as it is different than most tab implementations that are found in other web based UI libraries. Other libraries typically manage tabs as one single history stack.
+ 
+Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations you have seen in other UI libraries. Read on to learn more about some of these differences.
+
+### Child Routes within Tabs
+
+When adding additional routes to tabs you should write them as sibling routes with the parent tab as the path prefix. The example below defines the `/tabs/tab1/view` route as a sibling of the `/tabs/tab1` route. Since this new route has the `tab1` prefix, it will be rendered inside of the `Tabs` component, and Tab 1 will still be selected in the `ion-tab-bar`.
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/tabs/tab1',
+  },
+  {
+    path: '/tabs/',
+    component: Tabs,
+    children: [
+      {
+        path: '',
+        redirect: 'tab1',
+      },
+      {
+        path: 'tab1',
+        component: () => import('@/views/Tab1.vue'),
+      },
+      {
+        path: 'tab1/view',
+        component: () => import('@/views/Tab1View.vue'),
+      },
+      {
+        path: 'tab2',
+        component: () => import('@/views/Tab2.vue'),
+      },
+      {
+        path: 'tab3',
+        component: () => import('@/views/Tab3.vue'),
+      },
+    ],
+  },
+];
+```
+
+### Switching Between Tabs
+
+Since each tab is its own navigation stack, it is important to note that these navigation stacks should never interact. This means that there should never be a button in Tab 1 that routes a user to Tab 2. In other words, tabs should only be changed by the user tapping a tab button in the tab bar.
+
+A good example of this in practice is the iOS App Store and Google Play Store mobile applications. These apps both provide tabbed interfaces, but neither one ever routes the user across tabs. For example, the "Games" tab in the iOS App Store app never directs users to the "Search" tab and vice versa.
+
+Let's take a look at a couple common mistakes that are made with tabs.
+
+**A Settings Tab That Multiple Tabs Reference**
+
+A common practice is to create a Settings view as its own tab. This is great if developers need to present several nested settings menus. However, other tabs should never try to route to the Settings tab. As we mentioned above, the only way that the Settings tab should be activated is by a user tapping the appropriate tab button.
+
+If you find that your tabs need to reference the Settings tab, we recommend making the Settings view a modal by using `ion-modal`. This is a practice found in the iOS App Store app. With this approach, any tab can present the modal without breaking the mobile tabs pattern of each tab being its own stack.
+
+The example below shows how the iOS App Store app handles presenting an "Account" view from multiple tabs. By presenting the "Account" view in a modal, the app can work within the mobile tabs best practices to show the same view across multiple tabs.
+
+<video
+  style={{
+    'margin': '40px auto',
+    'display': 'flex'
+  }}
+  width="400"
+  src={useBaseUrl('video/tabs-account-demo.mp4')} 
+  controls
+></video>
+
+**Reusing Views Across Tabs**
+
+Another common practice is to present the same view in multiple tabs. Developers often try to do this by having the view contained in a single tab, with other tabs routing to that tab. As we mentioned above, this breaks the mobile tabs pattern and should be avoided.
+
+Instead, we recommend having routes in each tab that reference the same component. This is a practice done in popular apps like Spotify. For example, you can access an album or podcast from the "Home", "Search", and "Your Library" tabs. When accessing the album or podcast, users stay within that tab. The app does this by creating routes per tab and sharing a common component in the codebase.
+
+The example below shows how the Spotify app reuses the same album component to show content in multiple tabs. Notice that each screenshot shows the same album but from a different tab.
+
+| Home Tab | Search Tab |
+| :------: | :--------: |
+| <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |
+
+## Components
+
+### IonRouterOutlet
+
+The `IonRouterOutlet` component provides a container to render your views in. It is similar to the `RouterView` component found in other Vue applications except that `IonRouterOutlet` can render multiple pages in the DOM in the same outlet. When a component is rendered in `IonRouterOutlet` we consider this to be an Ionic Framework "page". The router outlet container controls the transition animation between the pages as well as controls when a page is created and destroyed. This helps maintain the state between the views when switching back and forth between them.
+
+Nothing should be provided inside of `IonRouterOutlet` when setting it up in your template. While `IonRouterOutlet` can be nested in child components, we caution against it as it typically makes navigation in apps confusing. See [Shared URLs versus Nested Routes](#shared-urls-versus-nested-routes) for more information.
+
+### IonPage
+
+The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
+
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Home</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">Hello World</ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonContent,
+      IonHeader,
+      IonPage,
+      IonTitle,
+      IonToolbar,
+    },
+  });
+</script>
+```
+
+Components presented via `IonModal` or `IonPopover` do not typically need an `IonPage` component unless you need a wrapper element. In that case, we recommend using `IonPage` so that the component dimensions are still computed properly.
+
+## Functions
+
+### useIonRouter
+
+▸ **useIonRouter**(): [`UseIonRouterResult`](utility-functions#useionrouterresult)
+
+Returns the Ionic router instance, containing API methods for navigating, customizing page transitions and routing context for native features. This function can be used in combination with the [`useRouter`](https://router.vuejs.org/api/index.html#userouter) function from Vue.
+
+For example usages, please refer to our [Utility Functions](utility-functions#useionrouter).
+
+## URL Parameters
+
+Let's expand upon our original routing example to show how we can use URL parameters:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomePage,
+  },
+  {
+    path: '/detail/:id',
+    name: 'Detail',
+    component: DetailPage,
+  },
+];
+```
+
+Notice that we have now added `:id` to the end of our `detail` path string. URL parameters are dynamic portions of our route paths. When the user navigates to a URL such as `/details/1` the "1" is saved to a parameter named "id" which can be accessed in the component when the route renders.
+
+Let's look at how to use it in our component:
+
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Details</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content> Detail ID: {{ id }} </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { useRoute } from 'vue-router';
+
+  export default defineComponent({
+    name: 'Detail',
+    components: {
+      IonContent,
+      IonHeader,
+      IonPage,
+      IonTitle,
+      IonToolbar,
+    },
+    setup() {
+      const route = useRoute();
+      const { id } = route.params;
+      return { id };
+    },
+  });
+</script>
+```
+
+Our `route` variable contains an instance of the current route. It also contains any parameters we have passed in. We can obtain the `id` parameter from here and display it on the screen.
+
+## Router History
+
+Vue Router ships with a configurable history mode. Let's look at the different options and why you might want to use each one.
+
+- `createWebHistory`: This option creates an HTML5 history. It leverages the History API to achieve URL navigation without a page reload. This is the most common history mode for single page applications. When in doubt, use `createWebHistory`.
+
+- `createWebHashHistory`: This option adds a hash (`#`) to your URL. This is useful for web applications with no host or when you do not have full control over the server routes. Search engines sometimes ignore hash fragments, so you should use `createWebHistory` instead if SEO is important for your application.
+
+- `createMemoryHistory`: This option creates an in-memory based history. This is mainly used to handle server-side rendering (SSR).
+
+## More Information
+
+For more info on routing in Vue using Vue Router, check out their docs at http://router.vuejs.org/.
diff --git a/versioned_docs/version-v6/vue/overview.md b/versioned_docs/version-v6/vue/overview.md
new file mode 100644
index 00000000000..aadd0add9d8
--- /dev/null
+++ b/versioned_docs/version-v6/vue/overview.md
@@ -0,0 +1,61 @@
+---
+title: 'Ionic Vue Overview'
+sidebar_label: Overview
+---
+
+<head>
+  <title>Ionic Vue Overview | Vue.js Framework Documentation</title>
+  <meta
+    name="description"
+    content="Read this overview to learn how Ionic Vue combines the core Ionic Framework with the tooling and APIs that are tailored to Vue.js developers."
+  />
+</head>
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+`@ionic/vue` combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.
+
+## Vue Version Support
+
+Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue dependencies.
+
+## Vue Tooling
+
+Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meaning you'll be building with the Vue CLI and all of it's features. In addition, starter projects also ship with few features enabled by default, like Routing and TypeScript support.
+
+## Native Tooling
+
+[Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web.
+
+While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova).
+
+## From the Community
+
+- [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders
+
+## Installation
+
+```shell-session
+$ npm install -g @ionic/cli
+$ ionic start myApp tabs --type vue
+
+$ ionic serve █
+```
+
+## Resources
+
+<DocsCards>
+  <DocsCard header="Getting Started" href="your-first-app" icon="/icons/feature-component-actionsheet-icon.png">
+    <p>Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.</p>
+  </DocsCard>
+
+<DocsCard header="Navigation" href="navigation" icon="/icons/feature-component-navigation-icon.png">
+  <p>Learn the basics of navigation inside your app with Ionic and Vue Router</p>
+</DocsCard>
+
+<DocsCard header="Lifecycle" href="lifecycle" icon="/icons/feature-guide-components-icon.png">
+  <p>Learn about using Ionic lifecycle events in class components and with hooks</p>
+</DocsCard>
+
+</DocsCards>
diff --git a/versioned_docs/version-v6/vue/performance.md b/versioned_docs/version-v6/vue/performance.md
new file mode 100644
index 00000000000..6bdfd52346f
--- /dev/null
+++ b/versioned_docs/version-v6/vue/performance.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: Performance
+---
+
+# Vue Performance
+
+## v-for with Ionic Components
+
+When using `v-for` with Ionic components, we recommend using Vue's `key` attribute. This allows Vue to re-render loop elements in an efficient way by only updating the content inside of the component rather than re-creating the component altogether.
+
+By using `key` you can provide a stable identity for each loop element so Vue can track insertions and deletions within the iterator. Below is an example of how to use `key`:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-item v-for="item of items" :key="item.id">
+        <ion-label>{{ item.value }}</ion-label>
+      </ion-item>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+  import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonContent,
+      IonItem,
+      IonLabel,
+      IonPage
+    },
+    setup() {
+      const items = ref([
+        { id: 0, value: 'Item 0' },
+        { id: 1, value: 'Item 1' },
+        ...
+      ]);
+
+      return { items }
+    }
+  });
+</script>
+```
+
+In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using the `key` attribute, we pass the `item.id` for each object. This `id` is used to provide a stable identity for each loop element.
+
+For more information on how Vue manages state with `v-for` see https://v3.vuejs.org/guide/list.html#maintaining-state
diff --git a/versioned_docs/version-v6/vue/platform.md b/versioned_docs/version-v6/vue/platform.md
new file mode 100644
index 00000000000..11afbcf7c11
--- /dev/null
+++ b/versioned_docs/version-v6/vue/platform.md
@@ -0,0 +1,87 @@
+# Platform
+
+## isPlatform
+
+The `isPlatform` method can be used to test if your app is running on a certain platform:
+
+```tsx
+import { isPlatform } from '@ionic/vue';
+
+isPlatform('ios'); // returns true when running on a iOS device
+```
+
+Depending on the platform the user is on, isPlatform(platformName) will return true or false. Note that the same app can return true for more than one platform name. For example, an app running from an iPad would return true for the platform names: mobile, ios, ipad, and tablet. Additionally, if the app was running from Cordova then cordova would be true.
+
+## getPlatforms
+
+The `getPlatforms` method can be used to determine which platforms your app is currently running on.
+
+```tsx
+import { getPlatforms } from '@ionic/vue';
+
+getPlatforms(); // returns ["iphone", "ios", "mobile", "mobileweb"] from an iPhone
+```
+
+Depending on what device you are on, `getPlatforms` can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return mobile, ios, and iphone.
+
+## Platforms
+
+Below is a table listing all the possible platform values along with corresponding descriptions.
+
+| Platform Name | Description                              |
+| ------------- | ---------------------------------------- |
+| android       | a device running Android                 |
+| capacitor     | a device running Capacitor               |
+| cordova       | a device running Cordova                 |
+| desktop       | a desktop device                         |
+| electron      | a desktop device running Electron        |
+| hybrid        | a device running Capacitor or Cordova    |
+| ios           | a device running iOS                     |
+| ipad          | an iPad device                           |
+| iphone        | an iPhone device                         |
+| mobile        | a mobile device                          |
+| mobileweb     | a web browser running in a mobile device |
+| phablet       | a phablet device                         |
+| pwa           | a PWA app                                |
+| tablet        | a tablet device                          |
+
+## Customizing Platform Detection Functions
+
+The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](./config). Each function takes `window` as a parameter and returns a boolean.
+
+```tsx
+createApp(App).use(IonicVue, {
+  platform: {
+    /** The default `desktop` function returns false for devices with a touchscreen.
+     * This is not always wanted, so this function tests the User Agent instead.
+     **/
+    desktop: (win) => {
+      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent);
+      return !isMobile;
+    },
+  },
+});
+```
+
+```ts
+type PlatformConfig = {
+  android?: ((win: Window) => boolean) | undefined;
+  capacitor?: ((win: Window) => boolean) | undefined;
+  cordova?: ((win: Window) => boolean) | undefined;
+  desktop?: ((win: Window) => boolean) | undefined;
+  electron?: ((win: Window) => boolean) | undefined;
+  hybrid?: ((win: Window) => boolean) | undefined;
+  ios?: ((win: Window) => boolean) | undefined;
+  ipad?: ((win: Window) => boolean) | undefined;
+  iphone?: ((win: Window) => boolean) | undefined;
+  mobile?: ((win: Window) => boolean) | undefined;
+  mobileweb?: ((win: Window) => boolean) | undefined;
+  phablet?: ((win: Window) => boolean) | undefined;
+  pwa?: ((win: Window) => boolean) | undefined;
+  tablet?: ((win: Window) => boolean) | undefined;
+};
+```
+
+```
+
+```
diff --git a/versioned_docs/version-v6/vue/pwa.md b/versioned_docs/version-v6/vue/pwa.md
new file mode 100644
index 00000000000..2c75702bd46
--- /dev/null
+++ b/versioned_docs/version-v6/vue/pwa.md
@@ -0,0 +1,214 @@
+---
+sidebar_label: Progressive Web Apps
+---
+
+<head>
+  <title>Vue PWA | Add Progressive Web Apps to Vue.js Projects | Ionic</title>
+  <meta
+    name="description"
+    content="Run the 'vue add' command to install the progressive web app plugin. Learn more about how to add PWA to your existing Vue project."
+  />
+</head>
+
+# Progressive Web Apps in Vue
+
+## Making your Vue app a PWA
+
+The two main requirements of a PWA are a <a href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank">Service Worker</a> and a <a href="https://developers.google.com/web/fundamentals/web-app-manifest/" target="_blank">Web Manifest</a>. While it's possible to add both of these to an app manually, the Vue CLI has some utilities for adding this for you.
+
+For existing projects, you can run the `vue add` command to install the PWA plugin for Vue.
+
+```shell
+vue add pwa
+```
+
+:::note
+If you have changes already in place, be sure to commit them in Git.
+:::
+
+Once this is completed, Vue's CLI will have created a new `registerServiceWorker.ts` file and imported it into our `main.ts`.
+
+```tsx
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+// Added by the CLI
+import './registerServiceWorker';
+
+createApp(App).use(router).mount('#app');
+```
+
+The `registerServiceWorker.ts` file will point to a service worker that the CLI will create at build time. Inside of here we can customize the experience users will have when the service worker detects an update, change in network connectivity, or receives an error.
+
+```tsx
+import { register } from 'register-service-worker';
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        'App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB'
+      );
+    },
+    registered() {
+      console.log('Service worker has been registered.');
+    },
+    cached() {
+      console.log('Content has been cached for offline use.');
+    },
+    updatefound() {
+      console.log('New content is downloading.');
+    },
+    updated() {
+      console.log('New content is available; please refresh.');
+    },
+    offline() {
+      console.log('No internet connection found. App is running in offline mode.');
+    },
+    error(error) {
+      console.error('Error during service worker registration:', error);
+    },
+  });
+}
+```
+
+The service worker that is generated is based on [Workbox's webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin), and by default is setup to use `GenerateSW()`. Meaning that at build time, Workbox will automatically generate a service worker cache for all the files it processes.
+
+If you want to configure this and change the default behavior, checkout the [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) on GitHub.
+
+### Manifest
+
+In addition to the service worker, the Vue PWA plugin also is responsible for creating a manifest file for your app as well. By default, the CLI will generate a manifest that contains the following entries.
+
+```json
+{
+  "name": "pwa-test",
+  "short_name": "pwa-test",
+  "theme_color": "#4DBA87",
+  "icons": [
+    {
+      "src": "./img/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./img/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "./img/icons/android-chrome-maskable-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./img/icons/android-chrome-maskable-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#000000"
+}
+```
+
+Be sure to update the icons in `public/img/icons` to match your own brand. If you wanted to customize the theme color or name, be sure to read the [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) on GitHub.
+
+## Deploying
+
+You can use various hosts like Firebase, Vercel, Netlify, or even Azure Static Web Apps. All will have similar setup processes that need to be completed. For this guide, Firebase will be used as the hosting example. In addition to this guide, the [Vue CLI docs](https://cli.vuejs.org/guide/deployment.html) also have a guide on how to deploy to various providers.
+
+### Firebase
+
+Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html).
+
+First, if not already available, [create the project](https://console.firebase.google.com) in Firebase.
+
+Next, in a Terminal, install the Firebase CLI:
+
+```shell
+npm install -g firebase-tools
+```
+
+With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts:
+
+**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure and deploy Firebase Hosting sites."
+
+**"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website.
+
+**"What do you want to use as your public directory?"** Enter "dist".
+
+:::note
+Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:
+:::
+
+**Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes".
+
+**"File dist/index.html already exists. Overwrite?"** Enter "No".
+
+A `firebase.json` config file is generated, configuring the app for deployment.
+
+The last thing needed is to make sure caching headers are being set correctly. To do this, add a `headers` snippet to the `firebase.json` file. The complete `firebase.json` looks like:
+
+```json
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ],
+    "headers": [
+      {
+        "source": "/**",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "public, max-age=31536000"
+          }
+        ]
+      },
+      {
+        "source": "precache-manifest.*.js",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache"
+          }
+        ]
+      },
+      {
+        "source": "service-worker.js",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache"
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+For more information about the `firebase.json` properties, see the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json).
+
+Next, build an optimized version of the app by running:
+
+```shell
+ionic build
+```
+
+Last, deploy the app by running:
+
+```shell
+firebase deploy
+```
+
+After this completes, the app will be live.
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
new file mode 100644
index 00000000000..de98ac8bc6d
--- /dev/null
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -0,0 +1,852 @@
+---
+title: Ionic Vue Quickstart
+sidebar_label: Quickstart
+---
+
+<head>
+  <title>Vue QuickStart Global Component for Generating Ionic Vue Apps</title>
+  <meta
+    name="description"
+    content="Our QuickStart guide covers the basics of both Vue and Ionic Framework global components to get apps up and running. Read how to easily generate Ionic Vue apps."
+  />
+</head>
+
+## What is Ionic Framework?
+
+First off, if you're new here, welcome! Ionic Framework is a free and open source component library for building apps that run on iOS, Android, Electron, and the Web. Write your app once using familiar technologies (HTML, CSS, JavaScript) and deploy to any platform.
+
+Along with the UI components, Ionic Framework also provides a command line tool for creating new apps, as well as deploying to the various platforms we support.
+
+In this guide, we will go over the basics of both Vue and Ionic Framework, including any Ionic Framework specific features. If you are familiar with Vue, enjoy the guide and learn something new about Ionic Framework. If you are not familiar with either, no worries! This guide will cover the basics and provide enough information to get an app up and running.
+
+## Creating a project with the Ionic CLI
+
+To begin, let's install the latest version of the Ionic CLI.
+
+```shell
+npm install -g @ionic/cli@latest
+```
+
+From here, the global command `ionic` will allow for the creation of a Vue project with Ionic Framework and any other dependencies. To create a new project, run the following command:
+
+```shell
+ionic start myApp blank --type vue
+cd myApp
+```
+
+From here, we run `ionic serve` and have our project running in the browser.
+
+## Build your way with TypeScript or JavaScript
+
+We love TypeScript at Ionic, and have believed for quite some time now that it’s a great tool for building scalable apps. That said, we know how much the Vue community values simplicity – in their tooling, languages, and more. In fact, it’s likely what drew you to Vue in the first place. Start simple – then scale up as needed.
+
+So, if you’d prefer to use JavaScript instead of TypeScript, you can. After generating an Ionic Vue app, follow these steps:
+
+1. Remove TypeScript dependencies:
+
+```shell
+npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript
+```
+
+2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `router/index.ts` and `main.ts`.
+
+3. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: ‘off’, `from `.eslintrc.js`.
+
+4. Remove `Array<RouteRecordRaw>` from `router/index.js`.
+
+5. Delete the `shims-vue.d.ts` file.
+
+6. Remove `lang="ts"` from the `script` tags in any of your Vue components that have them. In a blank Ionic Vue app, this should only be `App.vue` and `views/Home.vue`.
+
+## A look at a Vue Component
+
+The base of our app will be in the `src` directory, and the main entry point will be our `main.ts` file. If we open our project in a code editor and open `main.ts`, we should see the following:
+
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App).use(IonicVue).use(router);
+
+router.isReady().then(() => {
+  app.mount('#app');
+});
+```
+
+So what is going on here? The first four lines are pulling in some dependencies. The `createApp` function lets us initialize our Vue application, while `IonicVue` is a plugin that allows us to use Ionic Framework in a Vue environment.
+
+The third import is the root component for our app, simply named `App`. This is our first Vue component and will be used in the bootstrapping process for our Vue app.
+
+The fourth import gets our routing configuration. We will look at this more in depth later.
+
+If we open `App.vue` we should see the following:
+
+```html
+<template>
+  <ion-app>
+    <ion-router-outlet />
+  </ion-app>
+</template>
+
+<script lang="ts">
+  import { IonApp, IonRouterOutlet } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'App',
+    components: {
+      IonApp,
+      IonRouterOutlet,
+    },
+  });
+</script>
+```
+
+Let's break it down, starting with the first group of imports.
+
+```tsx
+import { IonApp, IonRouterOutlet } from '@ionic/vue';
+```
+
+To use a component in Vue, you must first import it. So for Ionic Framework, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our `App` component, we are using `IonApp` and `IonRouterOutlet`. You can also register components globally if you find yourself importing the same components repeatedly. This comes with performance tradeoffs that we cover in [Optimizing Your Build](#optimizing-your-build).
+
+From there, let's look at the template.
+
+```html
+<template>
+  <ion-app>
+    <ion-router-outlet />
+  </ion-app>
+</template>
+```
+
+All Vue components must have a `<template>`. Inside of there, we place our `IonApp` and `IonRouterOutlet` components.
+
+Finally, let's look at the component definition:
+
+```tsx
+import { IonApp, IonRouterOutlet } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    IonApp,
+    IonRouterOutlet,
+  },
+});
+```
+
+Vue 3 offers a new `defineComponent` function when creating components for improved tooling support, and we are going to use that here. We first define the name of the component, and then we supply the components that we will use in our template.
+
+There are several arguments you can supply here such as `methods`, `setup` and more. This is explained as part of Vue's [Composition API Documentation](https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api).
+
+## Initializing the router
+
+Ionic Vue uses the [vue-router](https://router.vuejs.org/) dependency, so if you are already familiar with Vue Router, you will be able to apply what you know to navigation in Ionic Vue. Let's take a look at the router configuration we mentioned before. In `router/index.ts`, you should see something similar to the following:
+
+```tsx
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import Home from '@/views/Home.vue';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: Home,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;
+```
+
+:::note
+This example is using the Ionic Vue Blank starter application, so your actual routes may look a bit different.
+:::
+
+The setup here is the same as if you were using `vue-router` directly, but instead you need to import dependencies such as `createRouter` and `createWebHistory` from the `@ionic/vue-router` package.
+
+After importing our dependencies, we can declare our routes in the `routes` array. From there, we can create a router instance and provide it with our routes and the type of history we want to use.
+
+With Ionic Vue, lazy loading works right out of the box. Instead of importing our `Home` component, we could also do:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: () => import('@/views/Home.vue'),
+  },
+];
+```
+
+Now, you might be wondering: Why do we use `@` when describing the path to our components? The `@` symbol is a shortcut we can use to describe paths relative to the `src` directory. This is useful if we are trying to reference a component while in a file several folders deep. Instead of doing `'../../../views/Home.vue'`, we could simply do `'@/views/Home.vue'`.
+
+## A component with style
+
+Now the `App` component does not really have a lot to modify here. It is a basic example of a container component. With the router logic set, all it is responsible for is to render a component that matches the given URL route. Since we already have one component/router setup, let's go ahead and modify our `Home` component.
+
+Currently, the `Home` component looks like so:
+
+![Vue home component](/img/guides/vue/first-app/home-route.png)
+
+```html
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>Blank</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Blank</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <div id="container">
+        <strong>Ready to create an app?</strong>
+        <p>
+          Start with Ionic
+          <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components"
+            >UI Components</a
+          >
+        </p>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'Home',
+    components: {
+      IonContent,
+      IonHeader,
+      IonPage,
+      IonTitle,
+      IonToolbar,
+    },
+  });
+</script>
+
+<style scoped>
+  #container {
+    text-align: center;
+
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  #container strong {
+    font-size: 20px;
+    line-height: 26px;
+  }
+
+  #container p {
+    font-size: 16px;
+    line-height: 22px;
+
+    color: #8c8c8c;
+
+    margin: 0;
+  }
+
+  #container a {
+    text-decoration: none;
+  }
+</style>
+```
+
+Much like the `App` component we started with, we have some imports for specific Ionic Framework components, an import from Vue, the Vue component, and styles to go along with our component.
+
+For our styles, notice that we have specified our styles to be `scoped`. This means that the styles we write here will only apply to this component. This is useful for preventing styles from leaking out of a component and affecting other parts of your application. We strongly recommend using `scoped` styles for Ionic Vue applications.
+
+`IonPage` is the base component for all pages (a component with a route/URL), and includes some common building blocks of a full-screen component, like header, title, and content components.
+
+:::note
+When creating your own pages, do not forget to have `IonPage` be the root component for them. Having `IonPage` be the root component is important because it helps ensure transitions work properly as well as provides the base CSS the Ionic Framework components rely on.
+:::
+
+`IonHeader` is a component meant to exist at the top of the page. It does not do much by itself, aside from handling some flexbox-based layout. It is meant to hold components, like `IonToolbar` or `IonSearchbar`.
+
+`IonContent` is, as its name suggests, the main content area for our page. It is responsible for providing a scrollable content that users will interact with, plus any scroll events that could be used in an app.
+
+Our current content is relatively simple, but does not contain anything that could be used in a real app, so let's change that.
+
+:::note
+For brevity, we are excluding repeating parts of our component, like the function declaration or import statements from other components.
+:::
+
+```html
+<template>
+  <ion-page>
+    ...
+    <ion-content>
+      <ion-list>
+        <ion-item>
+          <ion-checkbox slot="start"></ion-checkbox>
+          <ion-label>
+            <h1>Create Idea</h1>
+            <ion-note>Run Idea By Brandy</ion-note>
+          </ion-label>
+          <ion-badge color="success" slot="end"> 5 Days </ion-badge>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+```
+
+Here in our `IonContent`, we are adding an `IonList` and a much more involved `IonItem` component. Let's look at `IonItem` as it is the centerpiece here.
+
+```html
+<ion-item>
+  <ion-checkbox slot="start"></ion-checkbox>
+  <ion-label>
+    <h1>Create Idea</h1>
+    <ion-note>Run Idea By Brandy</ion-note>
+  </ion-label>
+  <ion-badge color="success" slot="end"> 5 Days </ion-badge>
+</ion-item>
+```
+
+Looking at our code, we have a special attribute called slot. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a Vue API, but a web standards API. Additionally, this is different from the slots API you may recall from Vue 2.
+
+Let's look at another component from Ionic Framework, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we will need three components: a FAB, a FAB Button, and an Icon.
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-list> ... </ion-list>
+
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button>
+          <ion-icon :icon="add"></ion-icon>
+        </ion-fab-button>
+      </ion-fab>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+  import { add } from 'ionicons/icons';
+
+  ...
+
+  export default defineComponent({
+    name: 'Home',
+    ...,
+    setup() {
+      return {
+        add
+      }
+    }
+  })
+</script>
+```
+
+On our main `IonFab`, we are setting its positioning with the vertical and horizontal attributes. We are also setting the render location to "fixed" with the slot attribute. This will tell `IonFab` to render outside of the scrollable content in `IonContent`.
+
+Now let's wire up a click handler to this. When clicking the FAB button, we want to navigate to a new page (which we will create in a moment). To do this, we will need to get access to Vue Router's navigation API. This can be done by importing `useRouter` from the `vue-router` package.
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-list> ... </ion-list>
+
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button @click="() => router.push('/new')">
+          <ion-icon :icon="add"></ion-icon>
+        </ion-fab-button>
+      </ion-fab>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+  import { add } from 'ionicons/icons';
+  import { useRouter } from 'vue-router';
+
+  ...
+
+  export default defineComponent({
+    name: 'Home',
+    components: {
+      IonContent,
+      IonFab,
+      IonFabButton,
+      IonHeader,
+      IonIcon,
+      IonPage,
+      IonTitle,
+      IonToolbar
+    },
+    setup() {
+      return {
+        router: useRouter(),
+        add
+      }
+    }
+  });
+</script>
+```
+
+In our component file, we are importing the `useRouter` function. When called, this function injects the router dependency into the component. It gives us access to the history API from Vue Router, allowing us to push a new route onto the navigation stack. On our `IonFabButton`, we can add a click handler, and just call `router.push` and pass in the new route. In this case, we will navigate to `new`.
+
+```html
+<ion-fab-button @click="() => router.push('/new')"> ... </ion-fab-button>
+```
+
+## Creating a new Route
+
+Now that we have the pieces in place to navigate in our app, we need to create a new component and add the new route to our router declaration. Let's open our `router/index.ts` file and add the new route.
+
+```tsx
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import Home from '@/views/Home.vue';
+import NewItem from '@/views/NewItem.vue';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: Home,
+  },
+  {
+    path: '/new',
+    name: 'NewItem',
+    component: NewItem,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;
+```
+
+With our router now having an entry for the route `/new`, we will create the component needed, `NewItem`. This will exist in `views/NewItem.vue`.
+
+Let's fill the `NewItem.vue` file with some placeholder content for the moment.
+
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>New Item</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content></ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'NewItem',
+    components: {
+      IonBackButton,
+      IonButtons,
+      IonContent,
+      IonHeader,
+      IonPage,
+      IonTitle,
+      IonToolbar,
+    },
+  });
+</script>
+```
+
+:::note
+Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information.
+:::
+
+The content here should look similar to the `Home` component. What is different here is the `IonBackButton` component. This is used to navigate back to the previous route. Seems easy enough, right? Ok, but what if we reload the page?
+
+In this case, the in-memory history is lost, so the back button disappears. To address this, we can set the `default-href` attribute value to the URL we want to navigate to if there is no history.
+
+```html
+<ion-back-button default-href="/home"></ion-back-button>
+```
+
+Now, If there is no app history present, we will be able to navigate back to our home route.
+
+## Calling Methods on Components
+
+In order to call a method on any of the Ionic Vue components, you will first need to get a reference to the component instance. Next, you will need to access the underlying Web Component using `$el` and call the method.
+
+In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs.
+
+```html
+<template>
+  <ion-content ref="content">
+    <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
+
+    ...
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent },
+    setup() {
+      const content = ref();
+      const scrollToBottom = () => {
+        content.value.$el.scrollToBottom(300);
+      };
+
+      return { content, scrollToBottom };
+    },
+  });
+</script>
+```
+
+## Adding Icons
+
+Ionic Vue comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. There are a couple options developers have for using them in their application.
+
+### Per-Component Imports
+
+Per-Component Imports is the recommended approach to using Ionicons. This involves importing the icon of your choice from the `ionicons` package and passing it to your template:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-icon :icon="heart"></ion-icon>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+  import { heart } from 'ionicons/icons';
+  import { IonContent, IonPage } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'Icon',
+    components: {
+      IonContent,
+      IonPage,
+    },
+    setup() {
+      return { heart };
+    },
+  });
+</script>
+```
+
+Let's break down what we are doing here. First, we are importing the `heart` icon from `ionicons/icons`. This will load the appropriate SVG data for our icon.
+
+Next, we pass the `heart` data to our template in the `setup` method.
+
+Finally, we pass the icon data into the `ion-icon` component via the `icon` property.
+
+Developers also have the option of setting different icons based upon the mode:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-icon :ios="logoApple" :md="logoAndroid"></ion-icon>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+  import { logoAndroid, logoApple } from 'ionicons/icons';
+  import { IonContent, IonPage } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'Icon',
+    components: {
+      IonContent,
+      IonPage,
+    },
+    setup() {
+      return { logoAndroid, logoApple };
+    },
+  });
+</script>
+```
+
+Note that any icon names that are hyphenated should be written in camel case when importing.
+
+### Global Imports
+
+The other option is to import specific icons globally. This is not typically recommended as it will force icons to be loaded every time your application starts and can increase your application's initial chunk size.
+
+That being said, there may be use cases when it makes sense to load specific icons globally:
+
+**main.ts**
+
+```tsx
+import { addIcons } from 'ionicons';
+import { heart } from 'ionicons/icons';
+
+addIcons({
+  heart: heart,
+});
+```
+
+**Home.vue**
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-icon icon="heart"></ion-icon>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+  import { IonContent, IonPage } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'Home',
+    components: {
+      IonContent,
+      IonPage,
+    },
+  });
+</script>
+```
+
+In `main.ts`, the `addIcons` function lets us register icons globally and give it a string as a key. We then reference the icon by that key in our `Home` component.
+
+## Optimizing Your Build
+
+Vue gives you several tools to fine tune your application. This section will cover the options that are most relevant to Ionic Framework.
+
+### Local Component Registration (Recommended)
+
+By default, Ionic Framework components are registered locally. With local registration, these components are imported and provided to each Vue component you want to use them in. This is the recommended approach as it allows lazy loading and treeshaking to work properly with Ionic Framework components.
+
+The one downside to this approach is that it may be tedious to re-import your Ionic Framework components multiple times. However, we feel that the performance benefits you receive in exchange are worth it.
+
+Also note that locally registered components are not available in subcomponents. You will need to re-import the Ionic Framework components you would like to use in your subcomponent.
+
+Let's take a look at how local component registration works:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <Subcomponent></Subcomponent>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { IonContent, IonPage } from '@ionic/vue';
+  import Subcomponent from '@/components/Subcomponent.vue';
+
+  export default defineComponent({
+    components: { IonContent, IonPage, Subcomponent },
+  });
+</script>
+```
+
+In the example above, we are using the `IonPage` and `IonContent` components. To use them, we first import them from `@ionic/vue`. Then, we provide them to our Vue component in the `components` option. From there, we can use the components in our template.
+
+Note that since we are registering these components locally, neither `IonPage` nor `IonContent` will be available in `Subcomponent` unless we register them there as well.
+
+For more information, see the <a href="https://v3.vuejs.org/guide/component-registration.html#local-registration" target="_blank" rel="noopener noreferrer">Local Registration Vue Documentation</a>.
+
+### Global Component Registration
+
+The other option for registering components is to use global registration. Global registration involves importing the components you want to use in `main.ts` and calling the `component` method on your Vue app instance.
+
+While this makes it easier to add Ionic Framework components to your Vue app, global registration often is not ideal. To quote the Vue documentation: "If you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download".
+
+Let's take a look at how global component registration works:
+
+**main.ts**
+
+```tsx
+import { IonContent, IonicVue, IonPage } from '@ionic/vue';
+
+const app = createApp(App).use(IonicVue).use(router);
+
+app.component('ion-content', IonContent);
+app.component('ion-page', IonPage);
+```
+
+**MyComponent.vue**
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <Subcomponent></Subcomponent>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import Subcomponent from '@/components/Subcomponent.vue';
+
+  export default defineComponent({
+    components: { Subcomponent },
+  });
+</script>
+```
+
+In the example above, we are using the `IonPage` and `IonContent` components. To use them, we first import them from `@ionic/vue` in `main.ts`. From there, we call the `component` method on our app instance and pass it the tag name as well as the component definition. After we do that, we can use the components in the rest of our application without having to import them into each Vue component.
+
+For more information, see the <a href="https://v3.vuejs.org/guide/component-registration.html#global-registration" target="_blank" rel="noopener noreferrer">Global Registration Vue Documentation</a>.
+
+### Prefetching Application JavaScript
+
+By default, the Vue CLI will automatically generate prefetch hints for the JavaScript in your application. Prefetching utiltizes the browser idle time to download documents that the user might visit in the near future. When the user visits a page that requires the prefetched document, it can be served quickly from the browser's cache.
+
+Prefetching consumes bandwidth, so if you have a large app, you may want to disable it. You can do this by modifying or creating your `vue.config.js` file:
+
+**vue.config.js**
+
+```js
+module.exports = {
+  chainWebpack: (config) => {
+    config.plugins.delete('prefetch');
+  },
+};
+```
+
+The configuration above will prevent all files from being prefetched and, instead, will be loaded when they are needed. You can also select certain chunks to prefetch. Check out the <a href="https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch" target="_blank" rel="noopener noreferrer">Vue CLI Docs on Prefetching</a> for more examples.
+
+## Build a Native App
+
+We now have the basics of an Ionic Vue app down, including some UI components and navigation. The great thing about Ionic Framework’s components is that they work anywhere, including iOS, Android, and PWAs. To deploy to mobile, desktop, and beyond, we use Ionic’s cross-platform app runtime [Capacitor](https://capacitorjs.com). It provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible while accessing rich native device features on platforms that support them.
+
+Adding native functionality is easy. First, add Capacitor to your project:
+
+```shell
+ionic integrations enable capacitor
+```
+
+Next, build the project, then add your platform of choice:
+
+```shell
+ionic build
+ionic cap add ios
+ionic cap add android
+```
+
+We use the standard native IDEs (Xcode and Android Studio) to open, build, and run the iOS and Android projects:
+
+```shell
+ionic cap open ios
+ionic cap open android
+```
+
+Additional details can be found [here](https://capacitorjs.com/docs/getting-started/with-ionic).
+
+Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are available. There is some great features, including the [Camera API](https://capacitorjs.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
+
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Ionic Blank</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <img :src="photo" />
+      <ion-button @click="takePhoto()">Take Photo</ion-button>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonHeader, IonPage, IonTitle } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+  import { Plugins, CameraResultType } from '@capacitor/core';
+  const { Camera } = Plugins;
+
+  export default defineComponent({
+    name: 'Home',
+    components: {
+      IonButton,
+      IonContent,
+      IonHeader,
+      IonPage,
+      IonTitle,
+    },
+    setup() {
+      const imageSrc = ref('');
+      const takePhoto = async () => {
+        const image = await Camera.getPhoto({
+          quality: 90,
+          allowEditing: true,
+          resultType: CameraResultType.Uri,
+        });
+
+        imageSrc.value = image.webPath;
+      };
+
+      return {
+        photo: imageSrc,
+        takePhoto,
+      };
+    },
+  });
+</script>
+```
+
+## Where to go from here
+
+This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.md).
+
+For a more detailed look at Ionic Frameworks’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on Vue, review the [Vue Docs](https://v3.vuejs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/).
+
+Happy app building! 🎉
diff --git a/versioned_docs/version-v6/vue/slides.md b/versioned_docs/version-v6/vue/slides.md
new file mode 100644
index 00000000000..be20f812b09
--- /dev/null
+++ b/versioned_docs/version-v6/vue/slides.md
@@ -0,0 +1,562 @@
+---
+title: Slides
+---
+
+<head>
+  <title>Vue Slides Guide: How to Get Swiper for Vue on Ionic Apps</title>
+  <meta
+    name="description"
+    content="Our Slides guide teaches how to get Swiper for Vue set up in Ionic apps. It has any info needed to move from ion-slides to the official Swiper Vue integration."
+  />
+</head>
+
+:::caution Looking for `ion-slides`?
+
+`ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
+
+:::
+
+We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration.
+
+## Getting Started
+
+First, update to the latest version of Ionic:
+
+```shell
+npm install @ionic/vue@latest @ionic/vue-router@latest
+```
+
+We recommend upgrading to Vue CLI 5 for better compatibility with Swiper:
+
+```shell
+vue upgrade --next
+```
+
+Once that is done, install the Swiper dependency in your project:
+
+```shell
+npm install swiper
+```
+
+## Swiping with Style
+
+Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `ion-slides`.
+
+We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
+
+```html
+<script>
+  import { defineComponent } from 'vue';
+
+  import 'swiper/css';
+  import '@ionic/vue/css/ionic-swiper.css';
+
+  export default defineComponent({
+    ...
+  });
+</script>
+```
+
+### Updating Selectors
+
+Previously, we were able to target `ion-slides` and `ion-slide` to apply any custom styling. The contents of those style blocks remain the same, but we need to update the selectors. Below is a list of selector changes when going from `ion-slides` to Swiper Vue:
+
+| ion-slides Selector | Swiper Selector |
+| ------------------- | --------------- |
+| `ion-slides`        | `.swiper`       |
+| `ion-slide`         | `.swiper-slide` |
+
+### Pre-processors (optional)
+
+For developers using SCSS or Less styles, Swiper also provides imports for those files.
+
+For Less styles, replace `css` with `less` in the Swiper import path:
+
+```js
+import 'swiper/less';
+import '@ionic/vue/css/ionic-swiper.css';
+```
+
+For SCSS styles replace `css` with `scss` in the Swiper import path:
+
+```js
+import 'swiper/scss';
+import '@ionic/vue/css/ionic-swiper.css';
+```
+
+## Using Components
+
+Swiper exports two components: `Swiper` and `SwiperSlide`. The `Swiper` component is the equivalent of `IonSlides`, and `SwiperSlide` is the equivalent of `IonSlide`.
+
+These components are imported from `swiper/vue` and provided to your Vue component:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <swiper>
+        <swiper-slide>Slide 1</swiper-slide>
+        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
+      </swiper>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { IonContent, IonPage } from '@ionic/vue';
+
+  import 'swiper/css';
+  import '@ionic/vue/css/ionic-swiper.css';
+
+  export default defineComponent({
+    components: {
+      Swiper,
+      SwiperSlide,
+      IonContent,
+      IonPage,
+    },
+  });
+</script>
+```
+
+## Using Modules
+
+By default, Swiper for Vue does not import any additional modules. To use modules such as Navigation or Pagination, you need to import them first.
+
+`ion-slides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
+
+To begin, we need to import the modules and their corresponding CSS files from the `swiper` package:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <swiper>
+        <swiper-slide>Slide 1</swiper-slide>
+        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
+      </swiper>
+    </ion-content>
+  </ion-page>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { IonContent, IonPage } from '@ionic/vue';
+
+  import 'swiper/css';
+  import 'swiper/css/autoplay';
+  import 'swiper/css/keyboard';
+  import 'swiper/css/pagination';
+  import 'swiper/css/scrollbar';
+  import 'swiper/css/zoom';
+  import '@ionic/vue/css/ionic-swiper.css';
+
+  export default defineComponent({
+    components: { Swiper, SwiperSlide, IonContent, IonPage },
+  });
+</script>
+```
+
+From here, we need to provide these modules to Swiper by using the `modules` property on the `swiper` component:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <swiper :modules="modules">
+        <swiper-slide>Slide 1</swiper-slide>
+        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
+      </swiper>
+    </ion-content>
+  </ion-page>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { IonContent, IonPage } from '@ionic/vue';
+
+  import 'swiper/css';
+  import 'swiper/css/autoplay';
+  import 'swiper/css/keyboard';
+  import 'swiper/css/pagination';
+  import 'swiper/css/scrollbar';
+  import 'swiper/css/zoom';
+  import '@ionic/vue/css/ionic-swiper.css';
+
+  export default defineComponent({
+    components: { Swiper, SwiperSlide, IonContent, IonPage },
+    setup() {
+      return {
+        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom],
+      };
+    },
+  });
+</script>
+```
+
+Finally, we can turn these features on by using the appropriate properties:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <swiper :modules="modules" :autoplay="true" :keyboard="true" :pagination="true" :scrollbar="true" :zoom="true">
+        <swiper-slide>Slide 1</swiper-slide>
+        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
+      </swiper>
+    </ion-content>
+  </ion-page>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { IonContent, IonPage } from '@ionic/vue';
+
+  import 'swiper/css';
+  import 'swiper/css/autoplay';
+  import 'swiper/css/keyboard';
+  import 'swiper/css/pagination';
+  import 'swiper/css/scrollbar';
+  import 'swiper/css/zoom';
+  import '@ionic/vue/css/ionic-swiper.css';
+
+  export default defineComponent({
+    components: { Swiper, SwiperSlide, IonContent, IonPage },
+    setup() {
+      return {
+        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom],
+      };
+    },
+  });
+</script>
+```
+
+:::note
+See <a href="https://swiperjs.com/vue#usage" target="_blank" rel="noopener noreferrer">https://swiperjs.com/vue#usage</a> for a full list of modules.
+:::
+
+## The IonicSlides Module
+
+With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly.
+
+We can install the `IonicSlides` module by importing it from `@ionic/vue` and passing it in as the last item in the `modules` array:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <swiper :modules="modules" :autoplay="true" :keyboard="true" :pagination="true" :scrollbar="true" :zoom="true">
+        <swiper-slide>Slide 1</swiper-slide>
+        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
+      </swiper>
+    </ion-content>
+  </ion-page>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+
+  import 'swiper/css';
+  import 'swiper/css/autoplay';
+  import 'swiper/css/keyboard';
+  import 'swiper/css/pagination';
+  import 'swiper/css/scrollbar';
+  import 'swiper/css/zoom';
+  import '@ionic/vue/css/ionic-swiper.css';
+
+  export default defineComponent({
+    components: { Swiper, SwiperSlide, IonContent, IonPage },
+    setup() {
+      return {
+        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides],
+      };
+    },
+  });
+</script>
+```
+
+:::note
+The `IonicSlides` module must be the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more.
+:::
+
+## Properties
+
+Swiper options are provided as props directly on the `<swiper>` component rather than via the `options` object in `ion-slides`.
+
+Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set:
+
+```html
+<template>
+  <ion-slides :options="{ slidesPerView: true, loop: true }">
+    <ion-slide>Slide 1</ion-slide>
+    <ion-slide>Slide 2</ion-slide>
+    <ion-slide>Slide 3</ion-slide>
+  </ion-slides>
+</template>
+```
+
+To migrate, we would move these options out of the `options` object and onto the `<swiper>` component directly as properties:
+
+```html
+<template>
+  <swiper :slides-per-view="3" :loop="true">
+    <swiper-slide>Slide 1</swiper-slide>
+    <swiper-slide>Slide 2</swiper-slide>
+    <swiper-slide>Slide 3</swiper-slide>
+  </swiper>
+</template>
+```
+
+Below is a full list of property changes when going from `ion-slides` to Swiper Vue:
+
+| Name      | Notes                                                                                                                 |
+| --------- | --------------------------------------------------------------------------------------------------------------------- |
+| options   | Set each option as a property directly on the `<swiper>` component.                                                   |
+| mode      | For different styles based upon the mode, you can target the slides with `.ios .swiper` or `.md .swiper` in your CSS. |
+| pager     | Use the `pagination` property instead. Requires installation of the Pagination module.                                |
+| scrollbar | You can continue to use the `scrollbar` property, just be sure to install the Scrollbar module first.                 |
+
+:::note
+All properties available in Swiper Vue can be found at <a href="https://swiperjs.com/vue#swiper-props" target="_blank" rel="noopener noreferrer">https://swiperjs.com/vue#swiper-props</a>.
+:::
+
+## Events
+
+Since the `Swiper` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them.
+
+Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
+
+```html
+<template>
+  <ion-slides @ionSlideDidChange="onSlideChange">
+    <ion-slide>Slide 1</ion-slide>
+    <ion-slide>Slide 2</ion-slide>
+    <ion-slide>Slide 3</ion-slide>
+  </ion-slides>
+</template>
+```
+
+To migrate, we would change the name of the event to `slideChange`:
+
+```html
+<template>
+  <swiper @slideChange="onSlideChange">
+    <swiper-slide>Slide 1</swiper-slide>
+    <swiper-slide>Slide 2</swiper-slide>
+    <swiper-slide>Slide 3</swiper-slide>
+  </swiper>
+</template>
+```
+
+Below is a full list of event name changes when going from `ion-slides` to Swiper Vue:
+
+| ion-slides Event        | Swiper Event               |
+| ----------------------- | -------------------------- |
+| ionSlideWillChange      | slideChangeTransitionStart |
+| ionSlideDidChange       | slideChangeTransitionEnd   |
+| ionSlideDoubleTap       | doubleTap                  |
+| ionSlideDrag            | sliderMove                 |
+| ionSlideNextStart       | slideNextTransitionStart   |
+| ionSlideNextEnd         | slideNextTransitionEnd     |
+| ionSlidePrevStart       | slidePrevTransitionStart   |
+| ionSlidePrevEnd         | slidePrevTransitionEnd     |
+| ionSlideReachStart      | reachBeginning             |
+| ionSlideReachEnd        | reachEnd                   |
+| ionSlideTap             | tap                        |
+| ionSlideTouchStart      | touchStart                 |
+| ionSlideTouchEnd        | touchEnd                   |
+| ionSlideTransitionStart | transitionStart            |
+| ionSlideTransitionEnd   | transitionEnd              |
+| ionSlidesDidLoad        | init                       |
+
+:::note
+All events available in Swiper Vue can be found at <a href="https://swiperjs.com/vue#swiper-events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/vue#swiper-events</a>.
+:::
+
+## Methods
+
+Most methods have been removed in favor of accessing the `<swiper>` props directly. Additionally, you no longer need to access `$el` first when calling methods.
+
+Accessing these properties can be tricky as you want to access the properties on the Swiper instance itself, not your Vue component. To do this, we recommend getting a reference to the Swiper instance via the `@swiper` event handler:
+
+```html
+<template>
+  <swiper @swiper="setSwiperInstance"> ... </swiper>
+</template>
+
+<script>
+  import { defineComponent, ref } from 'vue';
+  export default defineComponent({
+    ...,
+    setup() {
+      const slides = ref();
+      const setSwiperInstance = (swiper: any) => {
+        slides.value = swiper;
+      }
+      return { setSwiperInstance };
+    }
+  });
+</script>
+```
+
+From here, if you wanted to access a property on the Swiper instance you would access `slides.value`. For example, if you wanted to check the `isBeginning` property, you could do: `slides.value.isBeginning`. Make sure `slides.value` is defined first though!
+
+Below is a full list of method changes when going from `ion-slides` to Swiper Vue:
+
+| ion-slides Method  | Notes                                                                                |
+| ------------------ | ------------------------------------------------------------------------------------ |
+| getActiveIndex()   | Use the `activeIndex` property instead.                                              |
+| getPreviousIndex() | Use the `previousIndex` property instead.                                            |
+| getSwiper()        | Get a reference to the Swiper instance using `@swiper`. See example above.           |
+| isBeginning()      | Use the `isBeginning` property instead.                                              |
+| isEnd()            | Use the `isEnd` property instead.                                                    |
+| length()           | Use the `slides` property instead. (i.e swiperRef.slides.length)                     |
+| lockSwipeToNext()  | Use the `allowSlideNext` property instead.                                          |
+| lockSwipeToPrev()  | Use the `allowSlidePrev` property instead.                                           |
+| lockSwipes()       | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. |
+| startAutoplay()    | Use the `autoplay` property instead.                                                 |
+| stopAutoplay()     | Use the `autoplay` property instead.                                                 |
+
+## Effects
+
+If you are using effects such as Cube or Fade, you can install them just like we did with the other modules. In this example, we will use the fade effect. To start, we will import `EffectFade` from `swiper` and provide it in the `modules` array:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <swiper :modules="modules">
+        <swiper-slide>Slide 1</swiper-slide>
+        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
+      </swiper>
+    </ion-content>
+  </ion-page>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { EffectFade } from 'swiper';
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+
+  import 'swiper/css';
+  import '@ionic/vue/css/ionic-swiper.css';
+
+  export default defineComponent({
+    components: { Swiper, SwiperSlide, IonContent, IonPage },
+    setup() {
+      return {
+        modules: [EffectFade, IonicSlides],
+      };
+    },
+  });
+</script>
+```
+
+Next, we need to import the stylesheet associated with the effect:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <swiper :modules="modules">
+        <swiper-slide>Slide 1</swiper-slide>
+        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
+      </swiper>
+    </ion-content>
+  </ion-page>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { EffectFade } from 'swiper';
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+
+  import 'swiper/css';
+  import 'swiper/css/effect-fade';
+  import '@ionic/vue/css/ionic-swiper.css';
+
+  export default defineComponent({
+    components: { Swiper, SwiperSlide, IonContent, IonPage },
+    setup() {
+      return {
+        modules: [EffectFade, IonicSlides],
+      };
+    },
+  });
+</script>
+```
+
+After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <swiper :modules="modules" effect="fade">
+        <swiper-slide>Slide 1</swiper-slide>
+        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
+      </swiper>
+    </ion-content>
+  </ion-page>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { EffectFade } from 'swiper';
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+
+  import 'swiper/css';
+  import 'swiper/css/effect-fade';
+  import '@ionic/vue/css/ionic-swiper.css';
+
+  export default defineComponent({
+    components: { Swiper, SwiperSlide, IonContent, IonPage },
+    setup() {
+      return {
+        modules: [EffectFade, IonicSlides],
+      };
+    },
+  });
+</script>
+```
+
+:::note
+For more information on effects in Swiper, please see <a href="https://swiperjs.com/vue#effects" target="_blank" rel="noopener noreferrer">https://swiperjs.com/vue#effects</a>.
+:::
+
+## Wrap Up
+
+Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the <a href="https://swiperjs.com/vue" target="_blank" rel="noopener noreferrer">Swiper Vue Introduction</a> and then referencing <a href="https://swiperjs.com/swiper-api" target="_blank" rel="noopener noreferrer">the Swiper API docs</a>.
+
+## FAQ
+
+### Where can I find an example of this migration?
+
+You can find a sample app with `ion-slides` and the equivalent Swiper usage at https://github.com/ionic-team/slides-migration-samples.
+
+### Where can I get help with this migration?
+
+If you are running into issues with the migration, please create a post on the [Ionic Forum](https://forum.ionicframework.com/).
+
+### Where do I file bug reports?
+
+Before opening an issue, please consider creating a post on the <a href="https://github.com/nolimits4web/swiper/discussions" target="_blank" rel="noopener noreferrer">Swiper Discussion Board</a> or the <a href="https://forum.ionicframework.com" target="_blank">Ionic Forum</a> to see if your issue can be resolved by the community.
+
+If you are running into problems with the Swiper library, new bugs should be filed on the Swiper repo: <a href="https://github.com/nolimits4web/swiper/issues" target="_blank" rel="noopener noreferrer">https://github.com/nolimits4web/swiper/issues</a>
+
+If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework repo: <a href="https://github.com/ionic-team/ionic-framework/issues" target="_blank" rel="noopener noreferrer">https://github.com/ionic-team/ionic-framework/issues</a>
diff --git a/versioned_docs/version-v6/vue/storage.md b/versioned_docs/version-v6/vue/storage.md
new file mode 100644
index 00000000000..7909f96e793
--- /dev/null
+++ b/versioned_docs/version-v6/vue/storage.md
@@ -0,0 +1,32 @@
+---
+title: Data Storage
+sidebar_label: Storage
+---
+
+<head>
+  <title>Vue App Data Storage for iOS and Android - Ionic Documentation</title>
+  <meta
+    name="description"
+    content="There's a variety of options available for storing data within an Ionic app. Read our Vue data storage documentation for options on iOS, Android, and web apps."
+  />
+</head>
+
+There are variety of options available for storing data within an Ionic app.
+
+Here are two official Ionic options:
+
+## Ionic Secure Storage
+
+For teams building mission-critical apps or requiring encryption support, [Ionic Secure Storage](https://ionic.io/docs/secure-storage) is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android.
+
+It makes it easy to build high performance, offline-ready Ionic apps across iOS, Android, and the web.
+
+[Learn more](https://ionic.io/products/secure-storage)
+
+## @ionic/storage
+
+For developers not requiring encryption nor relational data support, [@ionic/storage](https://github.com/ionic-team/ionic-storage) is an open source key/value API for building apps that work across storage engines on multiple platforms.
+
+Additionally, Ionic Secure Storage has a driver that works with the key/value API in `@ionic/storage` while providing encryption and SQLite support.
+
+Learn more about [@ionic/storage](https://github.com/ionic-team/ionic-storage)
diff --git a/versioned_docs/version-v6/vue/testing.md b/versioned_docs/version-v6/vue/testing.md
new file mode 100644
index 00000000000..7b012ab2e54
--- /dev/null
+++ b/versioned_docs/version-v6/vue/testing.md
@@ -0,0 +1,3 @@
+# Testing
+
+Coming Soon!
diff --git a/versioned_docs/version-v6/vue/troubleshooting.md b/versioned_docs/version-v6/vue/troubleshooting.md
new file mode 100644
index 00000000000..1483bb9037b
--- /dev/null
+++ b/versioned_docs/version-v6/vue/troubleshooting.md
@@ -0,0 +1,134 @@
+---
+title: Troubleshooting
+---
+
+<head>
+  <title>Ionic Troubleshooting Guide: Common Vue App Development Issues</title>
+  <meta
+    name="description"
+    content="This troubleshooting guide covers some of the more common issues you may run into when developing apps with Ionic Vue. Read to learn more about troubleshooting."
+  />
+</head>
+
+This guide covers some of the more common issues you may run into when developing with Ionic Vue.
+
+Have an issue that you think should be covered here? <a href="https://github.com/ionic-team/ionic-docs/issues/new?assignees=&labels=content&template=content-issue.md&title=" target="_blank" rel="noopener">Let us know!</a>
+
+## Failed to resolve component
+
+```shell
+[Vue warn]: Failed to resolve component: ion-button
+```
+
+If you see this warning, then it is likely you did not import your component from `@ionic/vue`. By default, all Ionic Vue components are locally registered, meaning you need to import them each time you want to use them.
+
+Without importing the component, you will only get the underlying Web Component, and Vue-specific features such as `v-model` will not work.
+
+To resolve this issue, you need to import the component from `@ionic/vue` and provide it to your Vue component:
+
+```html
+<template>
+  <ion-button>Hello World</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+  });
+</script>
+```
+
+Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.md#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
+
+## Slot attributes are deprecated
+
+```shell
+`slot` attributes are deprecated  vue/no-deprecated-slot-attribute
+```
+
+The slots that are used in Ionic Vue are <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots" target="_blank" rel="noopener">Web Component slots</a>, which are different than the slots used in Vue 2. Unfortunately, the APIs for both are very similar, and your linter is likely getting the two confused.
+
+All Ionic Vue starters ship with this rule turned off, but you can do it yourself by adding the following to your `.eslintrc.js` file:
+
+```js
+module.exports = {
+  rules: {
+    'vue/no-deprecated-slot-attribute': 'off',
+  },
+};
+```
+
+If you are using VSCode and have the Vetur plugin installed, you are likely getting this warning because of Vetur, not ESLint. By default, Vetur loads the default Vue 3 linting rules and ignores any custom ESLint rules.
+
+To resolve this issue, you will need to turn off Vetur's template validation with `vetur.validation.template: false`. See the <a href="https://vuejs.github.io/vetur/guide/linting-error.html#linting" target="_blank" rel="noopener">Vetur Linting Guide</a> for more information.
+
+## Method on component is not a function
+
+In order to access a method on an Ionic Framework component in Vue, you will need to access the underlying Web Component instance first:
+
+```js
+// ✅ This is correct
+ionContentRef.value.$el.scrollToBottom();
+
+// ❌ This is incorrect and will result in an error.
+ionContentRef.value.scrollToBottom();
+```
+
+In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs.
+
+See the [Quickstart Guide](quickstart.md#calling-methods-on-components) for more information.
+
+## Page transitions are not working
+
+In order for page transitions to work correctly, each page must have an `ion-page` component at the root:
+
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Home</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">Hello World</ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonContent,
+      IonHeader,
+      IonPage,
+      IonTitle,
+      IonToolbar,
+    },
+  });
+</script>
+```
+
+See the [IonPage documentation](navigation.md#ionpage) for more information.
+
+## Ionic events bound in JavaScript are not firing
+
+When creating event listeners in JavaScript (i.e. `addEventListener`), event names should be written as kebab-case:
+
+```javascript
+const modal = await modalController.create({
+  component: Modal
+});
+
+modal.addEventListener('ion-modal-did-present', () => {
+  ...
+});
+
+await modal.present();
+```
+
+This is done to align with how developers bind events in their Vue templates by using kebab-case: https://vuejs.org/guide/essentials/component-basics.html#case-insensitivity
diff --git a/versioned_docs/version-v6/vue/utility-functions.md b/versioned_docs/version-v6/vue/utility-functions.md
new file mode 100644
index 00000000000..d5461a255a9
--- /dev/null
+++ b/versioned_docs/version-v6/vue/utility-functions.md
@@ -0,0 +1,184 @@
+# Utility Functions
+
+Ionic Vue ships with several utility functions that you can use in your application to make certain tasks easier such as managing the on-screen keyboard and the hardware back button.
+
+## Router
+
+### Functions
+
+#### useIonRouter
+
+▸ **useIonRouter**(): [`UseIonRouterResult`](#useionrouterresult)
+
+Returns the Ionic router instance, containing API methods for navigating, customizing page transitions and routing context for native features. This function can be used in combination with the [`useRouter`](https://router.vuejs.org/api/index.html#userouter) from Vue.
+
+**Customizing Page Transitions**
+
+```js
+import { IonPage, useIonRouter } from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { customAnimation } from '@/animations/customAnimation';
+
+export default defineComponent({
+  components: { IonPage },
+  setup() {
+    const router = useIonRouter();
+    const push = () => {
+      router.push('/page2', customAnimation);
+    };
+    const back = () => {
+      router.back(customAnimation);
+    };
+
+    return { push, back };
+  },
+});
+```
+
+**Hardware back button on Android**
+
+You may want to know if you are at the root page of the application when a user presses the hardware back button on Android.
+
+```tsx
+import { useIonRouter } from '@ionic/vue';
+
+...
+
+export default {
+  setup() {
+    const ionRouter = useIonRouter();
+    if (ionRouter.canGoBack()) {
+      // Perform some action here
+    }
+  }
+}
+```
+
+For additional APIs with Vue routing, please refer to the [Vue Router documentation](https://router.vuejs.org/api/index.html).
+
+### Interfaces
+
+#### UseIonRouterResult
+
+```ts
+import { AnimationBuilder } from '@ionic/vue';
+import { RouteLocationRaw } from 'vue-router';
+
+interface UseIonRouterResult {
+  canGoBack: (deep?: number) => boolean;
+  push: (location: RouteLocationRaw, routerAnimation?: AnimationBuilder) => void;
+  replace: (location: RouteLocationRaw, routerAnimation?: AnimationBuilder) => void;
+  back: (routerAnimation?: AnimationBuilder) => void;
+  forward: (routerAnimation?: AnimationBuilder) => void;
+  navigate: (
+    location: string | Location,
+    routerDirection?: 'forward' | 'back' | 'root' | 'none',
+    routerAction?: 'push' | 'pop' | 'replace',
+    routerAnimation?: AnimationBuilder
+  ) => void;
+}
+
+useIonRouter(): UseIonRouterResult;
+```
+
+- The `push` method is the equivalent of calling `ionRouter.navigate(location, 'forward', 'push', animation)`.
+
+- The `replace` method is the equivalent of calling `ionRouter.navigate(location, 'root', 'replace', animation)`.
+
+See the [Vue Navigation Documentation](./navigation#navigating-using-useionrouter) for more usage examples.
+
+## Hardware Back Button
+
+The `useBackButton` function can be used to register a callback function to fire whenever the hardware back button on Android is pressed. Additionally it accepts a priority parameter, allowing developers to customize which handler fires first if multiple handlers are registered.
+
+```js
+import { useBackButton } from '@ionic/vue';
+
+...
+
+useBackButton(10, () => {
+  console.log('Hardware Back Button was called!');
+});
+```
+
+### Interfaces
+
+```ts
+type Handler = (processNextHandler: () => void) => Promise<any> | void | null;
+interface UseBackButtonResult {
+  unregister: () => void;
+}
+
+useBackButton(priority: number, handler: Handler): UseBackButtonResult;
+```
+
+See the [Hardware Back Button Documentation](../developing/hardware-back-button) for more information and usage examples.
+
+:::note
+The `useBackButton` callback will only fire when your app is running in Capacitor or Cordova. See [Hardware Back Button in Capacitor and Cordova](../developing/hardware-back-button#hardware-back-button-in-capacitor-and-cordova) for more information.
+:::
+
+## Keyboard
+
+The `useKeyboard` function returns an object that contains the state of the on-screen keyboard. This object provides information such as whether or not the on-screen keyboard is presented and what the height of the keyboard is in pixels. This information is provided in a Vue `ref` so it will be reactive in your application.
+
+```js
+import { watch } from 'vue';
+import { useKeyboard } from '@ionic/vue';
+
+const { isOpen, keyboardHeight } = useKeyboard();
+
+watch(keyboardHeight, () => {
+  console.log(`Keyboard height is ${keyboardHeight.value}px`);
+});
+```
+
+### Interfaces
+
+```ts
+interface UseKeyboardResult {
+  isOpen: Ref<boolean>;
+  keyboardHeight: Ref<number>;
+  unregister: () => void
+}
+
+useKeyboard(): UseKeyboardResult;
+```
+
+See the [Keyboard Documentation](../developing/keyboard) for more information and usage examples.
+
+## Ionic Lifecycles
+
+Ionic Vue provides several lifecycle hooks for the `setup()` function to tap into the Ionic Framework page lifecycle.
+
+```js
+import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonPage },
+  setup() {
+    onIonViewDidEnter(() => {
+      console.log('Page did enter');
+    });
+
+    onIonViewDidLeave(() => {
+      console.log('Page did leave');
+    });
+
+    onIonViewWillEnter(() => {
+      console.log('Page will enter');
+    });
+
+    onIonViewWillLeave(() => {
+      console.log('Page will leave');
+    });
+  },
+});
+```
+
+:::note
+Pages in your app need to be using the `IonPage` component in order for lifecycle methods and hooks to fire properly.
+:::
+
+See the [Vue Lifecycle Documentation](./lifecycle) for more information and usage examples.
diff --git a/versioned_docs/version-v6/vue/virtual-scroll.md b/versioned_docs/version-v6/vue/virtual-scroll.md
new file mode 100644
index 00000000000..24c90d7503b
--- /dev/null
+++ b/versioned_docs/version-v6/vue/virtual-scroll.md
@@ -0,0 +1,143 @@
+# Virtual Scroll
+
+:::caution Looking for `ion-virtual-scroll`?
+
+`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using a Vue library to accomplish this. We outline one approach using `vue-virtual-scroller` below.
+
+:::
+
+## Installation
+
+To setup the virtual scroller, first install `vue-virtual-scroller`:
+
+```shell
+npm install vue-virtual-scroller@next
+```
+
+:::note
+Be sure to use the `next` tag otherwise you will get a version of `vue-virtual-scroll` that is only compatible with Vue 2.
+:::
+From here, we need to import the virtual scroller's CSS into our app. In `main.ts`, add the following line:
+
+```js
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
+```
+
+## Registering Virtual Scroll Components
+
+Now that we have the package installed and the CSS imported, we can either import all virtual scroll components or only import the components we want to use. This guide will show how to do both.
+
+### Installing all Components
+
+To install all virtual scroll components for use your app, add the following import to `main.ts`:
+
+```js
+import VueVirtualScroller from 'vue-virtual-scroller';
+```
+
+Next, we need to install this in our Vue application:
+
+```js
+app.use(VueVirtualScroller);
+```
+
+After doing this, all virtual scroll components will be available for use in our app.
+
+:::note
+Installing all components may result in unused virtual scroll components being added to your application bundle. See the [Installing Specific Components](#installing-specific-components) section below for an approach that works better with treeshaking.
+:::
+
+### Installing Specific Components
+
+To install specific virtual scroll components for use in your app, import the component you want to use in `main.ts`. In this example, we will be using the `RecycleScroller` component:
+
+```js
+import { RecycleScroller } from 'vue-virtual-scroller';
+```
+
+Next, we need to add the component to our Vue application:
+
+```js
+app.component('RecycleScroller', RecycleScroller);
+```
+
+After doing this, we will be able to use the `RecycleScroller` component in our app.
+
+## Usage
+
+This example will use the `RecycleScroller` component which only renders the visible items in your list. Other components such as `DynamicScroller` can be used when you do not know the size of the items in advance.
+
+The `RecycleScroller` component should be added inside of your `ion-content` component:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-list>
+        <RecycleScroller class="scroller" :items="list" :item-size="56">
+          <template #default="{ item }">
+            <ion-item>
+              <ion-avatar slot="start">
+                <img src="https://picsum.photos/seed/picsum/40/40" />
+              </ion-avatar>
+              <ion-label>{{ item }}</ion-label>
+            </ion-item>
+          </template>
+        </RecycleScroller>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+  import { defineComponent, ref } from 'vue';
+  import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
+
+  export default defineComponent({
+    components: {
+      IonAvatar,
+      IonContent,
+      IonItem,
+      IonLabel,
+      IonPage,
+    },
+    setup() {
+      const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+
+      return { list };
+    },
+  });
+</script>
+```
+
+There are two important pieces we need to account for in order for `RecycleScroller` to work. First, we need to provide it with an array of data to iterate over via the `items` property. In this case, we have an array called `list` which provides our data. Second, we need to provide the size of each node via the `item-size` property. If you do not know the size of the node ahead of time, you should use the `DynamicScroller` component instead.
+
+Now that our template is setup, we need to add some CSS to size the virtual scrolling viewport correctly. In a `style` tag in your component, add the following:
+
+```css
+.scroller {
+  height: 100%;
+}
+```
+
+## Usage with Ionic Components
+
+Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport.
+
+For example:
+
+```html
+<template>
+  <ion-page>
+    <ion-content :scroll-y="false">
+      <RecycleScroller class="ion-content-scroll-host scroller">
+        <!-- Your existing content and configurations -->
+      </RecycleScroller>
+    </ion-content>
+  </ion-page>
+</template>
+```
+
+## Further Reading
+
+This guide only covers a small portion of what `vue-virtual-scroller` is capable of. For more details, please see the [vue-virtual-scroller documentation](https://github.com/Akryum/vue-virtual-scroller/blob/next/packages/vue-virtual-scroller/README.md).
diff --git a/versioned_docs/version-v6/vue/your-first-app.md b/versioned_docs/version-v6/vue/your-first-app.md
new file mode 100644
index 00000000000..ca3ad3dbd54
--- /dev/null
+++ b/versioned_docs/version-v6/vue/your-first-app.md
@@ -0,0 +1,261 @@
+---
+title: 'Your First Ionic App: Vue'
+sidebar_label: Build Your First App
+---
+
+<head>
+  <title>Vue Step-by-Step Tutorial: Run Your First Ionic App with Vue</title>
+  <meta
+    name="description"
+    content="This Vue tutorial, teaches the fundamentals of Ionic app development by creating a realistic app step-by-step. Learn to run your first Ionic app with Vue."
+  />
+</head>
+
+The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
+
+Here’s the finished app running on all 3 platforms:
+
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+></iframe>
+
+## What We'll Build
+
+We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device.
+
+Highlights include:
+
+- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
+- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
+
+Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-vue).
+
+## Download Required Tools
+
+Download and install these right away to ensure an optimal Ionic development experience:
+
+- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
+- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
+- **Command-line interface/terminal (CLI)**:
+  - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell
+    CLI, running in Administrator mode.
+  - **Mac/Linux** users, virtually any terminal will work.
+
+## Install Ionic Tooling
+
+Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens:
+
+:::note
+To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
+:::
+
+```shell
+npm install -g @ionic/cli@latest native-run cordova-res
+```
+
+:::note
+The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
+
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+:::
+
+## Create an App
+
+Next, create an Ionic Vue app that uses the "Tabs" starter template and adds Capacitor for native functionality:
+
+```shell
+ionic start photo-gallery tabs --type vue --capacitor
+```
+
+This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
+
+Next, change into the app folder:
+
+```shell
+cd photo-gallery
+```
+
+Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
+
+```shell
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
+```
+
+### PWA Elements
+
+Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
+
+It's a separate dependency, so install it next:
+
+```shell
+npm install @ionic/pwa-elements
+```
+
+After installation, open up the project in your code editor of choice.
+
+Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
+
+```tsx
+// Above the createApp() line
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
+
+// Call the element loader after the platform has been bootstrapped
+defineCustomElements(window);
+```
+
+That’s it! Now for the fun part - let’s see the app in action.
+
+## Run the App
+
+Run this command in your shell:
+
+```shell
+ionic serve
+```
+
+And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.
+
+## Photo Gallery!!!
+
+There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
+
+![Before and after going through this tutorial](/img/guides/vue/first-app/live-reload.gif)
+
+Open `/src/views/Tab2.vue`. We see:
+
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Tab 2</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Tab 2</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ExploreContainer name="Tab 2 page" />
+    </ion-content>
+  </ion-page>
+</template>
+```
+
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:
+
+```html
+<ion-title>Photo Gallery</ion-title>
+```
+
+We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. But first, remove the `ExploreContainer` component, beginning with the import statement:
+
+```tsx
+import ExploreContainer from '@/components/ExploreContainer.vue';
+```
+
+Next, remove the component name (`ExploreContainer`) from the `components` list in the Default Export and the HTML:
+
+```html
+<ExploreContainer name="Tab 2 page" />
+```
+
+We'll replace it with a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports within the `<script>` tag to include the Camera icon as well as some of the Ionic components we'll use shortly:
+
+```tsx
+import { camera, trash, close } from 'ionicons/icons';
+import {
+  IonPage,
+  IonHeader,
+  IonFab,
+  IonFabButton,
+  IonIcon,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonGrid,
+  IonRow,
+  IonCol,
+  IonImg,
+} from '@ionic/vue';
+```
+
+Next, add the new Ionic components we'll be using to the default export as well as returning the Ionicons in the `setup()` method (part of the [Composition API](https://v3.vuejs.org/api/composition-api.html#setup)):
+
+```tsx
+export default {
+  name: 'Tab2',
+  components: {
+    IonPage,
+    IonHeader,
+    IonFab,
+    IonFabButton,
+    IonIcon,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonGrid,
+    IonRow,
+    IonCol,
+    IonImg,
+  },
+  setup() {
+    return {
+      camera,
+      trash,
+      close,
+    };
+  },
+};
+```
+
+Then, add the FAB to the bottom of the page. Use the camera image as the icon, and call the `takePhoto()` function when this button is clicked (to be implemented soon):
+
+```html
+<ion-content :fullscreen="true">
+  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
+    <ion-fab-button @click="takePhoto()">
+      <ion-icon :icon="camera"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+</ion-content>
+```
+
+We’ll be creating the `takePhoto` method and the logic to use the Camera and other native features in a moment.
+
+Next, open `src/views/TabsPage.vue`, remove the `ellipse` icon from the import and import the `images` icon instead:
+
+```tsx
+import { images, square, triangle } from 'ionicons/icons';
+```
+
+Within the tab bar (`<ion-tab-bar>`), change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button:
+
+```html
+<ion-tab-button tab="tab2" href="/tabs/tab2">
+  <ion-icon :icon="images" />
+  <ion-label>Photos</ion-label>
+</ion-tab-button>
+```
+
+Finally replace `ellipse` with `images` in the `setup()` method.
+
+```typescript
+  setup() {
+    return {
+      images,
+      square,
+      triangle,
+    }
+  }
+```
+
+That’s just the start of all the cool things we can do with Ionic. Up next, implementing camera taking functionality on the web, then building for iOS and Android.
diff --git a/versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md
new file mode 100644
index 00000000000..8fe97523339
--- /dev/null
+++ b/versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md
@@ -0,0 +1,169 @@
+---
+sidebar_label: Taking Photos
+---
+
+# Taking Photos with the Camera
+
+Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
+
+To do so, we will create a standalone composition function paired with Vue's Composition API to manage the photos for the gallery.
+
+:::note
+If you are not familiar with Vue's Composition API, [Why Composition API?](https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api) from the official Vue docs is a good resource to start with.
+:::
+
+Create a new file at `src/composables/usePhotoGallery.ts` and open it up.
+
+We will start by importing the various utilities we will use from Vue core and Capacitor:
+
+```tsx
+import { ref, onMounted, watch } from 'vue';
+import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
+import { Filesystem, Directory } from '@capacitor/filesystem';
+import { Preferences } from '@capacitor/preferences';
+```
+
+Next, create a function named usePhotoGallery:
+
+```tsx
+export function usePhotoGallery() {
+  const takePhoto = async () => {
+    const photo = await Camera.getPhoto({
+      resultType: CameraResultType.Uri,
+      source: CameraSource.Camera,
+      quality: 100,
+    });
+  };
+
+  return {
+    takePhoto,
+  };
+}
+```
+
+Our `usePhotoGallery` function exposes a method called takePhoto, which in turn calls the Capacitor Camera API's `getPhoto` method.
+
+Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `getPhoto()` - that will open up the device's camera and allow us to take photos.
+
+The last step we need to take is to use the new function from the Tab2 page. Go back to Tab2.vue and import it:
+
+```tsx
+import { usePhotoGallery } from '@/composables/usePhotoGallery';
+```
+
+Next, within the default export, add a setup method, part of the [Composition API](https://v3.vuejs.org/guide/composition-api-setup.html#setup). Destructure the `takePhoto` function from `usePhotoGallery`, then return it:
+
+```tsx
+<script lang="ts">
+import { camera, trash, close } from 'ionicons/icons';
+import { IonPage, IonHeader, IonFab, IonFabButton, IonIcon,
+         IonToolbar, IonTitle, IonContent, IonGrid, IonRow,
+         IonCol, IonImg } from '@ionic/vue';
+import { usePhotoGallery } from '@/composables/usePhotoGallery';
+
+export default  {
+  name: 'Tab2',
+  components: { IonPage, IonHeader, IonFab, IonFabButton, IonIcon,
+         IonToolbar, IonTitle, IonContent, IonGrid, IonRow,
+         IonCol, IonImg },
+  setup() {
+    const { takePhoto } = usePhotoGallery();
+
+    return {
+      takePhoto,
+      camera, trash, close
+    }
+  }
+}
+</script>
+```
+
+Save the file, and if you’re not already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
+
+![Camera API on the web](/img/guides/first-app-cap-ng/camera-web.png)
+
+_(Your selfie is probably much better than mine)_
+
+After taking a photo, it disappears right away. We still need to display it within our app and save it for future access.
+
+## Displaying Photos
+
+First we will create a new type to define our Photo, which will hold specific metadata. Add the following UserPhoto interface to the `usePhotoGallery.ts` file, somewhere outside of the main function:
+
+```tsx
+export interface UserPhoto {
+  filepath: string;
+  webviewPath?: string;
+}
+```
+
+Back at the top of the function (right after referencing the Capacitor Camera plugin), define an array so we can store each photo captured with the Camera. Make it a reactive variable using Vue's [ref function](https://v3.vuejs.org/guide/composition-api-introduction.html#reactive-variables-with-ref).
+
+```tsx
+const photos = ref<UserPhoto[]>([]);
+```
+
+When the camera is done taking a picture, the resulting `Photo` returned from Capacitor will be added to the `photos` array. Update the `takePhoto` method, adding this code after the `Camera.getPhoto` line:
+
+```tsx
+const fileName = new Date().getTime() + '.jpeg';
+const savedFileImage = {
+  filepath: fileName,
+  webviewPath: photo.webPath,
+};
+
+photos.value = [savedFileImage, ...photos.value];
+```
+
+Next, update the return statement to include the photos array:
+
+```tsx
+return {
+  photos,
+  takePhoto,
+};
+```
+
+Back in the Tab2 component, update the import statement to include the `UserPhoto` interface:
+
+```tsx
+import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
+```
+
+Then, get access to the photos array:
+
+```tsx
+const { photos, takePhoto } = usePhotoGallery();
+```
+
+Last, add `photos` to `setup()` return:
+
+```tsx
+return {
+  photos,
+  takePhoto,
+  camera,
+  trash,
+  close,
+};
+```
+
+With the photo(s) stored into the main array we can now display the images on the screen. Add a [Grid component](https://ionicframework.com/docs/api/grid) so that each photo will display nicely as they are added to the gallery, and loop through each photo in the Photos array, adding an Image component (`<ion-img>`) for each. Point the `src` (source) to the photo's path:
+
+```tsx
+<ion-content>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="6" :key="photo" v-for="photo in photos">
+        <ion-img :src="photo.webviewPath"></ion-img>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <!-- <ion-fab> markup  -->
+</ion-content>
+```
+
+Save all files. Within the web browser, click the Camera button and take another photo. This time, the photo is displayed in the Photo Gallery!
+
+Up next, we’ll add support for saving the photos to the filesystem, so they can be retrieved and displayed in our app at a later time.
diff --git a/versioned_docs/version-v6/vue/your-first-app/3-saving-photos.md b/versioned_docs/version-v6/vue/your-first-app/3-saving-photos.md
new file mode 100644
index 00000000000..59b165ca9ab
--- /dev/null
+++ b/versioned_docs/version-v6/vue/your-first-app/3-saving-photos.md
@@ -0,0 +1,72 @@
+---
+sidebar_label: Saving Photos
+---
+
+# Saving Photos to the Filesystem
+
+We’re now able to take multiple photos and display them in a photo gallery on the second tab of our app. These photos, however, are not currently being stored permanently, so when the app is closed, they will be lost.
+
+## Filesystem API
+
+Fortunately, saving them to the filesystem only takes a few steps. Begin by opening the `usePhotoGallery` function (`src/composables/usePhotoGallery.ts`), and get access to the `writeFile` method from the `Filesystem` class:
+
+Next, create a couple of new functions. The Filesystem API requires that files written to disk are passed in as base64 data, so this helper function will be used in a moment to assist with that:
+
+```tsx
+const convertBlobToBase64 = (blob: Blob) =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = reject;
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.readAsDataURL(blob);
+  });
+```
+
+Next, add a function to save the photo to the filesystem. We pass in the `photo` object, which represents the newly captured device photo, as well as the fileName, which will provide a path for the file to be stored to.
+
+Next we use the Capacitor [Filesystem API](https://capacitorjs.com/docs/apis/filesystem) to save the photo to the filesystem. We start by converting the photo to base64 format, then feed the data to the Filesystem’s `writeFile` function:
+
+```tsx
+const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
+  let base64Data: string;
+
+  // Fetch the photo, read as a blob, then convert to base64 format
+  const response = await fetch(photo.webPath!);
+  const blob = await response.blob();
+  base64Data = (await convertBlobToBase64(blob)) as string;
+
+  const savedFile = await Filesystem.writeFile({
+    path: fileName,
+    data: base64Data,
+    directory: Directory.Data,
+  });
+
+  // Use webPath to display the new image instead of base64 since it's
+  // already loaded into memory
+  return {
+    filepath: fileName,
+    webviewPath: photo.webPath,
+  };
+};
+```
+
+Last, update the `takePhoto` function to call `savePicture`. Once the photo has been saved, insert it into the front of reactive `photos` array:
+
+```tsx
+const takePhoto = async () => {
+  const photo = await Camera.getPhoto({
+    resultType: CameraResultType.Uri,
+    source: CameraSource.Camera,
+    quality: 100,
+  });
+
+  const fileName = new Date().getTime() + '.jpeg';
+  const savedFileImage = await savePicture(photo, fileName);
+
+  photos.value = [savedFileImage, ...photos.value];
+};
+```
+
+There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem.
diff --git a/versioned_docs/version-v6/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v6/vue/your-first-app/4-loading-photos.md
new file mode 100644
index 00000000000..e5892ed65db
--- /dev/null
+++ b/versioned_docs/version-v6/vue/your-first-app/4-loading-photos.md
@@ -0,0 +1,69 @@
+---
+sidebar_label: Loading Photos
+---
+
+# Loading Photos from the Filesystem
+
+We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
+
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitorjs.com/docs/apis/preferences) to store our array of Photos in a key-value store.
+
+## Preferences API
+
+Begin by defining a constant variable that will act as the key for the store at the top of the `usePhotoGallery` function in `src/composables/usePhotoGallery.ts`:
+
+```tsx
+const PHOTO_STORAGE = 'photos';
+```
+
+Next, add a `cachePhotos` function that saves the Photos array as JSON to preferences:
+
+```tsx
+const cachePhotos = () => {
+  Preferences.set({
+    key: PHOTO_STORAGE,
+    value: JSON.stringify(photos.value),
+  });
+};
+```
+
+Next, use the Vue [watch function](https://v3.vuejs.org/guide/composition-api-introduction.html#reacting-to-changes-with-watch) to watch the `photos` array. Whenever the array is modified (in this case, taking or deleting photos), trigger the `cachePhotos` function. Not only do we get to reuse code, but it also doesn’t matter when the app user closes or switches to a different app - photo data is always saved.
+
+```tsx
+watch(photos, cachePhotos);
+```
+
+Now that the photo array data is saved, create a function to retrieve the data when Tab2 loads. First, retrieve photo data from Preferences, then each photo's data into base64 format:
+
+```tsx
+const loadSaved = async () => {
+  const photoList = await Preferences.get({ key: PHOTO_STORAGE });
+  const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
+
+  for (const photo of photosInPreferences) {
+    const file = await Filesystem.readFile({
+      path: photo.filepath,
+      directory: Directory.Data,
+    });
+    photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
+  }
+
+  photos.value = photosInPreferences;
+};
+```
+
+On mobile (coming up next!), we can directly set the source of an image tag - `<img src="x" />` - to each photo file on the Filesystem, displaying them automatically. On the web, however, we must read each image from the Filesystem into base64 format, because the Filesystem API stores them in base64 within [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood.
+
+Finally, we need a way to call the `loadSaved` function when the Photo Gallery page is loaded. To do so, use the Vue [mounted lifecycle hook](https://v3.vuejs.org/guide/composition-api-introduction.html#lifecycle-hook-registration-inside-setup). First, import `onMounted` from Vue:
+
+```tsx
+import { ref, onMounted, watch } from 'vue';
+```
+
+Then, within the `usePhotoGallery` function, add the `onMounted` function and call `loadSaved`:
+
+```tsx
+onMounted(loadSaved);
+```
+
+That’s it! We’ve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, we’ll transform it into a mobile app for iOS and Android!
diff --git a/versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.md b/versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.md
new file mode 100644
index 00000000000..728e1ffb83c
--- /dev/null
+++ b/versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.md
@@ -0,0 +1,79 @@
+# Adding Mobile
+
+Our photo gallery app won’t be complete until it runs on iOS, Android, and the web - all using one codebase. All it takes is some small logic changes to support mobile platforms, installing some native tooling, then running the app on a device. Let’s go!
+
+Let’s start with making some small code changes - then our app will "just work" when we deploy it to a device.
+
+## Platform-specific Logic
+
+First, we’ll update the photo saving functionality to support mobile. We'll run slightly different code depending on the platform - mobile or web. Import the `Platform` API from Ionic Vue:
+
+```tsx
+import { isPlatform } from '@ionic/vue';
+```
+
+In the `savePicture` function, check which platform the app is running on. If it’s "hybrid" (Capacitor, the native runtime), then read the photo file into base64 format using the `readFile` method. Also, return the complete file path to the photo using the Filesystem API. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc` method ([details here](https://capacitorjs.com/docs/basics/utilities#convertfilesrc)). Otherwise, use the same logic as before when running the app on the web.
+
+```tsx
+const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
+  let base64Data: string;
+  // "hybrid" will detect mobile - iOS or Android
+  if (isPlatform('hybrid')) {
+    const file = await Filesystem.readFile({
+      path: photo.path!,
+    });
+    base64Data = file.data;
+  } else {
+    // Fetch the photo, read as a blob, then convert to base64 format
+    const response = await fetch(photo.webPath!);
+    const blob = await response.blob();
+    base64Data = (await convertBlobToBase64(blob)) as string;
+  }
+  const savedFile = await Filesystem.writeFile({
+    path: fileName,
+    data: base64Data,
+    directory: Directory.Data,
+  });
+
+  if (isPlatform('hybrid')) {
+    // Display the new image by rewriting the 'file://' path to HTTP
+    // Details: https://ionicframework.com/docs/building/webview#file-protocol
+    return {
+      filepath: savedFile.uri,
+      webviewPath: Capacitor.convertFileSrc(savedFile.uri),
+    };
+  } else {
+    // Use webPath to display the new image instead of base64 since it's
+    // already loaded into memory
+    return {
+      filepath: fileName,
+      webviewPath: photo.webPath,
+    };
+  }
+};
+```
+
+Next, add a new bit of logic in the `loadSaved` function. On mobile, we can directly point to each photo file on the Filesystem and display them automatically. On the web, however, we must read each image from the Filesystem into base64 format. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Update the `loadSaved` function:
+
+```tsx
+const loadSaved = async () => {
+  const photoList = await Preferences.get({ key: PHOTO_STORAGE });
+  const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
+
+  // If running on the web...
+  if (!isPlatform('hybrid')) {
+    for (const photo of photosInPreferences) {
+      const file = await Filesystem.readFile({
+        path: photo.filepath,
+        directory: Directory.Data,
+      });
+      // Web platform only: Load the photo as base64 data
+      photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
+    }
+  }
+
+  photos.value = photosInPreferences;
+};
+```
+
+Our Photo Gallery now consists of one codebase that runs on the web, Android, and iOS. Next up, the part you’ve been waiting for - deploying the app to a device.
diff --git a/versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md
new file mode 100644
index 00000000000..08cab4a0596
--- /dev/null
+++ b/versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md
@@ -0,0 +1,118 @@
+---
+title: Deploying to iOS and Android
+sidebar_label: Deploying Mobile
+---
+
+<head>
+  <title>Build and Deploy Vue Apps for iOS and Android with Capacitor</title>
+  <meta
+    name="description"
+    content="Capacitor is Ionic’s official app runtime to deploy web apps to native platforms like iOS, Android, and more. Read for how to build and deploy Ionic Vue apps."
+  />
+</head>
+
+Since we added Capacitor to our project when it was first created, there’s only a handful of steps remaining until the Photo Gallery app is on our device!
+
+:::note
+Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/photo-gallery-capacitor-vue).
+:::
+
+## Capacitor Setup
+
+Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova).
+
+If you’re still running `ionic serve` in the terminal, cancel it. Complete a fresh build of the Ionic project, fixing any errors that it reports:
+
+```shell
+ionic build
+```
+
+Next, create both the iOS and Android projects:
+
+```shell
+ionic cap add ios
+ionic cap add android
+```
+
+Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.).
+
+Every time you perform a build (e.g. `ionic build`) that updates your web directory (default: `build`), you'll need to copy those changes into your native projects:
+
+```shell
+ionic cap copy
+```
+
+Note: After making updates to the native portion of the code (such as adding a new plugin), use the `sync` command:
+
+```shell
+ionic cap sync
+```
+
+## iOS
+
+:::note
+To build an iOS app, you’ll need a Mac computer.
+:::
+
+Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by CocoaPods. Before running this app on an iOS device, there's a couple of steps to complete.
+
+First, run the Capacitor `open` command, which opens the native iOS project in Xcode:
+
+```shell
+ionic cap open ios
+```
+
+In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled "Privacy - Camera Usage." To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+
+![Xcode Custom iOS Target Properties](/img/guides/first-app-cap-ng/xcode-info-plist.png)
+
+Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
+
+Add the `NSCameraUsageDescription` Key and set the Value to something that describes why the app needs to use the camera, such as "To Take Photos." The Value field is displayed to the app user when the permission prompt opens.
+
+Follow the same process to add the other two Keys required of the Camera plugin: `NSPhotoLibraryAddUsageDescription` and `NSPhotoLibraryUsageDescription`.
+
+Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
+
+![Xcode - Selecting Development Team](/img/guides/first-app-cap-ng/xcode-signing.png)
+
+With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
+
+![Xcode build button](/img/guides/first-app-cap-ng/xcode-build-button.png)
+
+Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
+
+![iOS Camera permissions](/img/guides/first-app-cap-ng/ios-permissions-photo.png)
+
+## Android
+
+Capacitor Android apps are configured and managed through Android Studio. Before running this app on an Android device, there's a couple of steps to complete.
+
+First, run the Capacitor `open` command, which opens the native Android project in Android Studio:
+
+```shell
+ionic cap open android
+```
+
+Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
+
+![Android Manifest location](/img/guides/first-app-cap-ng/android-manifest.png)
+
+Scroll to the `Permissions` section and ensure these entries are included:
+
+```xml
+<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+```
+
+Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
+
+![Launching app on Android](/img/guides/first-app-cap-ng/android-device.png)
+
+Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
+
+![Android Camera permissions](/img/guides/first-app-cap-ng/android-permissions-photo.png)
+
+Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
+
+In the final portion of this tutorial, we’ll use the Ionic CLI’s Live Reload functionality to quickly implement photo deletion - thus completing our Photo Gallery feature.
diff --git a/versioned_docs/version-v6/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v6/vue/your-first-app/7-live-reload.md
new file mode 100644
index 00000000000..a76c6e6622e
--- /dev/null
+++ b/versioned_docs/version-v6/vue/your-first-app/7-live-reload.md
@@ -0,0 +1,149 @@
+---
+sidebar_label: Live Reload
+---
+
+# Rapid App Development with Live Reload
+
+So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
+
+We can use the Ionic CLI’s [Live Reload functionality](https://ionicframework.com/docs/cli/livereload) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+
+## Live Reload
+
+Remember `ionic serve`? That was Live Reload working in the browser, allowing us to iterate quickly.
+
+We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins. Since we need to run native plugin code on a device in order to verify that it works, having a way to quickly write code, build and deploy it, then test it is crucial to keeping up our development speed.
+
+Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform:
+
+```shell
+$ ionic cap run ios -l --external
+
+$ ionic cap run android -l --external
+```
+
+The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device.
+
+## Deleting Photos
+
+With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
+
+```tsx
+import {
+  actionSheetController,
+  IonPage,
+  IonHeader,
+  IonFab,
+  IonFabButton,
+  IonIcon,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonImg,
+  IonGrid,
+  IonRow,
+  IonCol,
+} from '@ionic/vue';
+// other imports
+```
+
+Next, reference the `deletePhoto` function, which we'll create soon:
+
+```tsx
+setup() {}
+  const { photos, takePhoto, deletePhoto } = usePhotoGallery();
+}
+```
+
+When a user clicks/taps on an image, we will show the action sheet. Add a click handler to the `<ion-img>` element:
+
+```html
+<ion-img :src="photo.webviewPath" @click="showActionSheet(photo)"></ion-img>
+```
+
+Next, within `setup()`, call the `create` function to open a dialog with the option to either delete the selected photo or cancel (close) the dialog:
+
+```tsx
+const showActionSheet = async (photo: UserPhoto) => {
+  const actionSheet = await actionSheetController.create({
+    header: 'Photos',
+    buttons: [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        icon: trash,
+        handler: () => {
+          deletePhoto(photo);
+        },
+      },
+      {
+        text: 'Cancel',
+        icon: close,
+        role: 'cancel',
+        handler: () => {
+          // Nothing to do, action sheet is automatically closed
+        },
+      },
+    ],
+  });
+  await actionSheet.present();
+};
+```
+
+Next, return the `showActionSheet` function:
+
+```tsx
+return {
+  photos,
+  takePhoto,
+  showActionSheet,
+  camera,
+  trash,
+  close,
+};
+```
+
+Next, we need to implement the `deletePhoto` method in the `usePhotoGallery` function. Open the file then add:
+
+```tsx
+const deletePhoto = async (photo: UserPhoto) => {
+  // Remove this photo from the Photos reference data array
+  photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
+
+  // delete photo file from filesystem
+  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
+  await Filesystem.deleteFile({
+    path: filename,
+    directory: Directory.Data,
+  });
+};
+```
+
+The selected photo is removed from the `photos` array first, then we delete the photo file using the Filesystem API.
+
+Remember that removing the photo from the `photos` array triggers the `cachePhotos` function for us automatically:
+
+```tsx
+const cachePhotos = () => {
+  Preferences.set({
+    key: PHOTO_STORAGE,
+    value: JSON.stringify(photos.value),
+  });
+};
+
+watch(photos, cachePhotos);
+```
+
+Finally, return the `deletePhoto` function:
+
+```tsx
+return {
+  photos,
+  takePhoto,
+  deletePhoto,
+};
+```
+
+Save this file, then tap on a photo again and choose the "Delete" option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪
+
+In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices.
diff --git a/versioned_docs/version-v6/vue/your-first-app/8-distribute.md b/versioned_docs/version-v6/vue/your-first-app/8-distribute.md
new file mode 100644
index 00000000000..d6b38ea5b5a
--- /dev/null
+++ b/versioned_docs/version-v6/vue/your-first-app/8-distribute.md
@@ -0,0 +1,100 @@
+---
+sidebar_label: Distribute
+---
+
+# Build and Deploy your App
+
+Now that you have built your first app, you are going to want to get it distributed so everyone can start using it. The mechanics of building and deploying your application can be quite cumbersome. That is where [Appflow](https://ionic.io/docs/appflow/) comes into play. Appflow allows you to effectively generate web and native builds, push out live app updates, publish your app to the app stores, and automate the whole process. The entire Quickstart guide can be found [here](https://ionic.io/docs/appflow/quickstart).
+
+Below we will run through an overview of the steps.
+
+## Connect Your Repo
+
+Appflow works directly with Git version control and uses your existing code base as the source of truth for Deploy and Package builds. You will first need to integrate with your hosting service, such as GitHub or Bitbucket, or you can push your code directly to Appflow. Once this is completed, Appflow will have access to your code.
+
+For more on connecting your code repository to Appflow, checkout the [Connect your Repo](https://ionic.io/docs/appflow/quickstart/connect) section inside the Appflow docs.
+
+## Install the Appflow SDK
+
+The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard.
+
+To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the `Deploy > Destinations` section. Alternatively, you can install the plugin manually by excuting the following command in your app's root directory:
+
+```shell
+ionic deploy add  \
+    --app-id="YOUR_APP_ID" \
+    --channel-name="YOUR_CHANNEL_NAME" \
+    --update-method="background|auto|none" \
+```
+
+For prerequisite and additional instructions on installing the Appflow SDK, visit the [Install the Appflow SDK](https://ionic.io/docs/appflow/quickstart/installation) section inside the Appflow docs.
+
+## Push a Commit
+
+In order for Appflow to access the latest and greatest changes to your code, you will need to push a commit via the version control integration of your choosing. For those that use GitHub or Bitbucket, this would look as follows:
+
+```shell
+git add . # stage any changes
+git commit -m "added appflow sdk" #  commit staged changes
+git push origin main # push the changes from the main branch to your git host
+```
+
+After the push is made, you will then see your commit under the `Commits` tab of the Appflow Dashboard. For more on this, take a look at the [Push a Commit](https://ionic.io/docs/appflow/quickstart/push) section inside the Appflow docs.
+
+## Deploy a Live Update
+
+With the Appflow SDK installed and your commit pushed up to the Dashboard, you are ready to deploy a live update to a device. The Live Update feature uses the installed Appflow SDK with your native application to listen to a particular Deploy Channel Destination. When a live update is assigned to a Channel Destination, that update will be deployed to user devices running binaries that are configured to listen to that specific Channel Destination.
+
+To get the live update deployed, a Web build will need to be created. This can be done through the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right corner of the `Build > Builds` tab. After selecting the correct commit to deploy, select the `Web` target platform and the `Latest` build stack. Depending on your Appflow plan, you will then be able to include custom environments, if any are configured. Finally, you can enable `Live Update` and pick the Channel to automatically assign the build to once it successfully completes.
+
+Upon completion of the Web Build, additional versioning options are available to you. After completing this section and you have a successful Deploy build, you can then assign it to the same Channel you configured the Appflow SDK to listen to when you installed it by clicking the `Deploy live updates` button in the build detail page. The same can be done by clicking the `Deploy live updates` icon on the build in the `Build > Builds` tab and select the Channel from the dropdown.
+
+To receive this live update, you will need to run the app on a device or an emulator. The quickest and easiest way to do this is through the following command:
+
+```shell
+ionic cordova run [ios | android] [options]
+```
+
+Assuming the app is configured correctly to listen to the channel you deployed too, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied!
+
+To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the [Deploy a Live Update](https://ionic.io/docs/appflow/quickstart/deploy) section inside the Appflow docs.
+
+## Build a Native Binary
+
+Next up is a native binary for your app build and deploy process. This is done via the [Ionic Package](https://ionic.io/docs/appflow/package/intro) service. First things first, you will need to create a [Package build](https://ionic.io/docs/appflow/package/builds). This can be done by clicking the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right from the `Build > Builds` tab. Then you will select the proper commit for your build and fill in all of the several required fields and any optional fields that you want to specify. After filling in all of the information and the build begins, you can check out it's progress and review the logs if you encounter any errors.
+
+Given a successful Package build, and iOS binary (`.ipa` or IPA) or and Android binary (`.apk` or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the `Artifacts` section in the right of the build detail page or clicking the `Download IPA/APK` icon on the build in the `Build > Builds` tab.
+
+Further information regarding building native binaries can be found inside of the [Build a Native Binary](https://ionic.io/docs/appflow/quickstart/package) section inside the Appflow docs.
+
+## Create an Automation
+
+[Automations](https://ionic.io/docs/appflow/automation/intro) enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger [Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production.
+
+For more information, visit the [Create an Automation](https://ionic.io/docs/appflow/quickstart/automation) section within the Appflow docs. There you will see details on creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our [Basic plans](https://ionic.io/pricing) and above.
+
+## Create an Environment
+
+[Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) can be futher customized via [Environments](https://ionic.io/docs/appflow/automation/environments). This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the [Automation](https://ionic.io/docs/appflow/automation/intro) feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever.
+
+Creating an Environment is available for those on our [Basic plans](https://ionic.io/pricing) and above. More information on this can be found in the [Create an Environment](https://ionic.io/docs/appflow/quickstart/environment) section within the Appflow docs.
+
+## Create a Native Configuration
+
+[Native Configurations](https://ionic.io/docs/appflow/package/native-configs) allow you to easily modify common configuration values that can change between different environments (development, production, staging, etc.) so you do not need to use extra logic or manually commit them to version control. Native configurations can be attached to any [Package build](https://ionic.io/docs/appflow/package/intro) or [Automation](https://ionic.io/docs/appflow/automation/intro).
+
+Native configs can be used to:
+
+- Overwrite the unique bundle identifier or [id attribute](https://cordova.apache.org/docs/en/latest/config_ref/#widget) in `config.xml`
+- Overwrite the App Name as it will appear on the home screen of a device
+- Overwrite the [Appflow SDK (Deploy Plugin) variables and preferences](https://ionic.io/docs/appflow/deploy/api#plugin-variables)
+
+For access to the ability to create a Native Configuration, you will need to be on our [Basic plans](https://ionic.io/pricing) and above. Additional details of this feature can be found in the [Create a Native Configuration](https://ionic.io/docs/appflow/quickstart/native-config) section within the Appflow docs.
+
+## What’s Next?
+
+Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to you users devices!
+
+There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature run the the build and deploy process again through Appflow to get it out to your users.
+
+Happy app building! 💙
diff --git a/versioned_sidebars/version-v6-sidebars.json b/versioned_sidebars/version-v6-sidebars.json
new file mode 100644
index 00000000000..e3cef30cec7
--- /dev/null
+++ b/versioned_sidebars/version-v6-sidebars.json
@@ -0,0 +1,1364 @@
+{
+  "version-v6/docs": [
+    {
+      "type": "category",
+      "label": "Getting Started",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/index"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/intro/upgrading-to-ionic-6"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/intro/environment"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/intro/cli"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/intro/cdn"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/intro/vscode-extension"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/intro/next"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Developing",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/developing/starting"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/developing/previewing"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/developing/scaffolding"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/developing/ios"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/developing/android"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/developing/tips"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/developing/hardware-back-button"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/developing/keyboard"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Layout",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/layout/structure"
+        },
+        {
+          "type": "link",
+          "label": "Responsive Grid",
+          "href": "/docs/api/grid"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/layout/global-stylesheets"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/layout/css-utilities"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Theming",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/theming/basics"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/theming/platform-styles"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/theming/css-variables"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/theming/css-shadow-parts"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/theming/colors"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/theming/themes"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/theming/dark-mode"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/theming/advanced"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/theming/color-generator"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Angular",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/angular/overview"
+        },
+        {
+          "type": "category",
+          "label": "Build Your First App",
+          "items": [
+            {
+              "type": "doc",
+              "id": "version-v6/angular/your-first-app"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/angular/your-first-app/taking-photos"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/angular/your-first-app/saving-photos"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/angular/your-first-app/loading-photos"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/angular/your-first-app/adding-mobile"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/angular/your-first-app/deploying-mobile"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/angular/your-first-app/live-reload"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/angular/your-first-app/distribute"
+            }
+          ],
+          "collapsible": true,
+          "collapsed": true
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/angular/lifecycle"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/angular/navigation"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/angular/virtual-scroll"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/angular/slides"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/angular/config"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/angular/platform"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/angular/testing"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/angular/storage"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/angular/performance"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/angular/pwa"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "React",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/react"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/quickstart"
+        },
+        {
+          "type": "category",
+          "label": "Build Your First App",
+          "items": [
+            {
+              "type": "doc",
+              "id": "version-v6/react/your-first-app"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/react/your-first-app/taking-photos"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/react/your-first-app/saving-photos"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/react/your-first-app/loading-photos"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/react/your-first-app/adding-mobile"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/react/your-first-app/deploying-mobile"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/react/your-first-app/live-reload"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/react/your-first-app/distribute"
+            }
+          ],
+          "collapsible": true,
+          "collapsed": true
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/lifecycle"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/navigation"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/virtual-scroll"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/slides"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/config"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/platform"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/pwa"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/overlays"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/storage"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/testing"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/react/performance"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Vue",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/vue/overview"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/quickstart"
+        },
+        {
+          "type": "category",
+          "label": "Build Your First App",
+          "items": [
+            {
+              "type": "doc",
+              "id": "version-v6/vue/your-first-app"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/vue/your-first-app/taking-photos"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/vue/your-first-app/saving-photos"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/vue/your-first-app/loading-photos"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/vue/your-first-app/adding-mobile"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/vue/your-first-app/deploying-mobile"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/vue/your-first-app/live-reload"
+            },
+            {
+              "type": "doc",
+              "id": "version-v6/vue/your-first-app/distribute"
+            }
+          ],
+          "collapsible": true,
+          "collapsed": true
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/lifecycle"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/navigation"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/virtual-scroll"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/slides"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/utility-functions"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/config"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/platform"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/pwa"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/storage"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/testing"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/troubleshooting"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/vue/performance"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Utilities",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/utilities/animations"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/utilities/gestures"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Deployment",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/deployment/app-store"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/deployment/play-store"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/deployment/progressive-web-app"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/deployment/desktop-app"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Techniques",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/techniques/security"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Troubleshooting",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/troubleshooting/debugging"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/troubleshooting/build"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/troubleshooting/runtime"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/troubleshooting/native"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/troubleshooting/cors"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Core Concepts",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/core-concepts/fundamentals"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/core-concepts/cross-platform"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/core-concepts/webview"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/core-concepts/what-are-progressive-web-apps"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Contributing",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/contributing/how-to-contribute"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/contributing/coc"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Reference",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/reference/glossary"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/reference/versioning"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/reference/release-notes"
+        },
+        {
+          "type": "link",
+          "label": "GitHub Changelog",
+          "href": "https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/reference/support"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/reference/browser-support"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/reference/migration"
+        }
+      ],
+      "collapsible": true
+    }
+  ],
+  "version-v6/api": [
+    {
+      "type": "category",
+      "label": "Getting Started",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/components"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Action Sheet",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/action-sheet"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Accordion",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/accordion"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/accordion-group"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Alert",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/alert"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Badge",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/badge"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Breadcrumb",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/breadcrumb"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/breadcrumbs"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Button",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/button"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/ripple-effect"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Card",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/card"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/card-content"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/card-header"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/card-subtitle"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/card-title"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Checkbox",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/checkbox"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Chip",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/chip"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Content",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/app"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/content"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Date & Time Pickers",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/datetime"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/datetime-button"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/picker"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Floating Action Button",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/fab"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/fab-button"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/fab-list"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Grid",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/grid"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/col"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/row"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Infinite Scroll",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/infinite-scroll"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/infinite-scroll-content"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Icons",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "link",
+          "label": "ion-icon",
+          "href": "https://ionicons.com"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Input",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/input"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/textarea"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Item",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/item"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/item-divider"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/item-group"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/item-sliding"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/item-options"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/item-option"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/label"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/note"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "List",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/list"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/list-header"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Media",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/avatar"
+        },
+        {
+          "type": "link",
+          "label": "ion-icon",
+          "href": "https://ionicons.com"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/img"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/thumbnail"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Menu",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/menu"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/menu-button"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/menu-toggle"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/split-pane"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Modal",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/modal"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/backdrop"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Navigation",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/nav"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/nav-link"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Popover",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/popover"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Progress Indicators",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/loading"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/progress-bar"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/skeleton-text"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/spinner"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Radio",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/radio"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/radio-group"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Range",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/range"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Refresher",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/refresher"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/refresher-content"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Reorder",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/reorder"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/reorder-group"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Routing",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/router"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/router-link"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/router-outlet"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/route"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/route-redirect"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Searchbar",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/searchbar"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Segment",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/segment"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/segment-button"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Select",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/select"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/select-option"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Tabs",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/tabs"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/tab"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/tab-bar"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/tab-button"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Toast",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/toast"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Toggle",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/toggle"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Toolbar",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/toolbar"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/header"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/footer"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/title"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/buttons"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/back-button"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Typography",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/text"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Resources",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api"
+        }
+      ],
+      "collapsible": true
+    }
+  ],
+  "version-v6/cli": [
+    {
+      "type": "category",
+      "label": "CLI Documentation",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/cli"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/cli/configuration"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/cli/livereload"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/cli/using-a-proxy"
+        },
+        {
+          "type": "link",
+          "label": "Changelog",
+          "href": "https://github.com/ionic-team/ionic-cli/blob/develop/packages/@ionic/cli/CHANGELOG.md"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Command Reference",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "autogenerated",
+          "dirName": "cli/commands"
+        }
+      ],
+      "collapsible": true
+    }
+  ],
+  "version-v6/native": [
+    {
+      "type": "category",
+      "label": "Getting Started",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/native"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/native-community"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/native-faq"
+        },
+        {
+          "type": "link",
+          "label": "Community vs. Enterprise",
+          "href": "https://ionic.io/docs/premier-plugins"
+        }
+      ],
+      "collapsible": true
+    },
+    {
+      "type": "category",
+      "label": "Plugins",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "autogenerated",
+          "dirName": "native"
+        }
+      ],
+      "collapsible": true
+    }
+  ]
+}
diff --git a/versions.json b/versions.json
index 0ee723140de..8d0276365ff 100644
--- a/versions.json
+++ b/versions.json
@@ -1 +1,4 @@
-["v5"]
+[
+  "v6",
+  "v5"
+]